@keyframes shadow-pulse
   {
     0% {
       box-shadow: 0 0 0 0px rgba(245, 54, 92, 0.2);
   
     }
     100% {
       box-shadow: 0 0 0 35px rgba(245, 54, 92, 0);
     }
   }
   
   @keyframes shadow-pulse-big
   {
     0% {
       box-shadow: 0 0 0 0px rgba(245, 54, 92, 0.1);
     }
     100% {
       box-shadow: 0 0 0 70px rgba(245, 54, 92, 0);
     }
   }
   
   .alert-small{
    font-size:15px;
   }
   .bg-cover{
     background-image: url('https://keuangan.migascepu.id/assets/img/cek.png'); 
     background-repeat: no-repeat; 
     background-size: 420px;
     background-position:left bottom;
   }
   <style type="text/css">
   .wrapper-step{
     width: 500px;
     font-family: 'Helvetica';
     font-size: 14px;
     border: 1px solid #CCC;
     padding-top: 20px;
     padding-left: 20px;
     padding-right: 20px;
     margin-top: 10px;
   }
   .StepProgress {
     position: relative;
     padding-left: 45px;
     list-style: none;
   }
   .StepProgress::before {
     display: inline-block;
     content: '';
     position: absolute;
     top: 0;
     left: 15px;
     width: 10px;
     height: 100%;
     /*border-left: 2px solid #CCC;*/
   }
   .StepProgress-item {
     position: relative;
     counter-increment: list;
   }
   .StepProgress-item:not(:last-child) {
     padding-bottom: 20px;
   }
   .StepProgress-item::before {
     display: inline-block;
     content: '';
     position: absolute;
     left: -30px;
     height: 100%;
     width: 10px;
   }
   
   .StepProgress-item::after {
     content: '';
     display: inline-block;
     position: absolute;
     top: 0;
     left: -37px;
     width: 20px;
     height: 20px;
     border: 2px solid #CCC;
     border-radius: 50%;
     background-color: #FFF;
   }
   .StepProgress-item.is-done::before {
     border-left: 2px solid green;
   }
   .StepProgress-item.is-done::after {
     content: "✔";
     font-size: 10px;
     color: #FFF;
     text-align: center;
     border: 2px solid green;
     background-color: green;
   }
   .StepProgress-item.is-done1::before {
     border-left: 2px solid green;
   }
   .StepProgress-item.is-done1::after {
     content: "1";
     font-size: 10px;
     color: #FFF;
     text-align: center;
     border: 2px solid green;
     background-color: green;
   }
   .StepProgress-item.is-done2::before {
     border-left: 2px solid green;
   }
   .StepProgress-item.is-done2::after {
     content: "2";
     font-size: 10px;
     color: #FFF;
     text-align: center;
     border: 2px solid green;
     background-color: green;
   }
   .StepProgress-item.is-done3::before {
     border-left: 2px solid green;
   }
   .StepProgress-item.is-done3::after {
     content: "3";
     font-size: 10px;
     color: #FFF;
     text-align: center;
     border: 2px solid green;
     background-color: green;
   }
   .StepProgress-item.is-done4::before {
     border-left: 2px solid green;
   }
   .StepProgress-item.is-done4::after {
     content: "4";
     font-size: 10px;
     color: #FFF;
     text-align: center;
     border: 2px solid green;
     background-color: green;
   }
   .StepProgress-item.end::before {
   
   }
   .StepProgress-item.end::after {
     content: "5";
     font-size: 10px;
     color: #FFF;
     text-align: center;
     border: 2px solid green;
     background-color: green;
   }
   .StepProgress-item.current::before {
     border-left: 2px solid green;
   }
   .StepProgress-item.current::after {
     content: counter(list);
     padding-bottom: 16px;
     width: 22px;
     height: 22px;
     top: -4px;
     left: -40px;
     font-size: 14px;
     text-align: center;
     color: green;
     border: 2px solid green;
     background-color: white;
   }
   .StepProgress strong {
     display: block;
   }