.progress-bar{
    position: relative;
    width: 100%;
    height: 3px;
    margin-top: 2px;
    background-color: lightgray;
    order:4;

}
.grid{
  display:grid !important;
}

.passstrenght_text{
  font-family:Arial;
  font-size: 10px;
  color:black;
  font-weight: 700;
  text-align: center;
  order:5;
}

.progress-bar::after {
    content: '';
    width: 0%;
    transition: width 1s;
    position: absolute;
    height: 3px;
    
}

.progress-bar.red::after {
    background-color: red;
    width:20%;
}

.progress-bar.orange::after {
    content: '';
    background-color: #EC644B;
    width:40%;
 }

 .progress-bar.yellow::after {
    content: '';
    background-color:#FFB600;
    width:60%;
 }

 .progress-bar.lightgreen::after {
    content: '';
    background-color: #A6FF00;
    width:80%;
}

.progress-bar.green::after {
    content: '';
    background-color: #42A72A;
    width:100%;
}