/* Arizan */
#passwordInput{
    /* width: 30%; */
    display: flex;
    position: relative;
}
 #passwordInput input[type="password"], #passwordInput input[type="text"]{
    width: 100%;
    padding: 10px;
    border: 1px solid lightgrey;
    font-size: 15px;
    
}

#passwordInput #showHide{
  font-size: 12px;
    font-weight: 600;
   position: absolute;
    color: #3f3d3d !important;
    border: 1px solid #292929;
    padding: 2px 5px;
    border-radius: 7px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none;
}
#passwordStrength{
    width: 30%;
    height: 5px;
    margin: 5px 0;
    display: none;
}
#passwordStrength span{
  position: relative;
  height: 100%;
  width: 100%;
  background: lightgrey;
  border-radius: 5px;
}
 #passwordStrength span:nth-child(2){
  margin: 0 3px;
}
#passwordStrength span.active:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 5px;
}
#passwordStrength span#poor:before{
  background-color: #ff4757;
}
#passwordStrength span#weak:before{
  background-color: orange;
}
#passwordStrength span#strong:before{
  background-color: #23ad5c;
}
#passwordInfo{
  font-size: 15px;
}
#passwordInfo #poor{
  color: red;
}
#passwordInfo #weak{
  color: orange;
}
#passwordInfo #strong{
  color: green;
}

/*Password Strong Infor*/
#message2 {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 20px;
  margin-top: 5px;
}

#message2 p {
  padding: 3px 35px;
  /* font-size: 12px; */
}

.valid {
  color: rgb(3, 184, 190);
}

.valid:before {
  position: relative;
  left: -35px;
  content: "✔";
}

.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -35px;
  content: "✖";
}