.password_strength {
  width: 300px;
  height: 10px;
  appearance: none; /* Remove default styling */
}


/* Fallback for browsers that support styling parts of progress */
.password_strength::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 10px;
}

.password_strength::-webkit-progress-value {
  border-radius: 10px;
  transition: background-color 0.3s;
  background-color: var(--gray-500);
}

/* For Firefox */
.password_strength::-moz-progress-bar {
  border-radius: 10px;
  transition: background-color 0.3s;
  background-color: var(--gray-500);
}

.password_strength.red::-webkit-progress-value { background-color: var(--red); }
.password_strength.orange::-webkit-progress-value { background-color: var(--orange-500); }
.password_strength.green::-webkit-progress-value { background-color: var(--green); }

.password_strength.red::-moz-progress-bar { background-color: var(--red); }
.password_strength.orange::-moz-progress-bar { background-color: var(--orange-500); }
.password_strength.green::-moz-progress-bar { background-color: var(--green); }