.passwordStrengthMeter {
  appearance: none;
  display: block;
  width: 266px;
  height: 4px;
  margin: 15px 0 8px 2px;

  --passwordMeterInactiveColor: #e0e0e0;
  --passwordMeterLevel1Color: #e23d3d;
  --passwordMeterLevel2Color: #e67c00;
  --passwordMeterLevel3Color: #d69900;
  --passwordMeterLevel4Color: #93a03f;
  --passwordMeterLevel5Color: #04ab18;
}

.passwordStrengthMeterDescriptionContainer {
  margin: 0 0 15px 2px;
}
.passwordStrengthMeterDescriptionLevel1 {
  color: var(--passwordMeterLevel1Color);
}

.passwordStrengthMeterDescriptionLevel2 {
  color: var(--passwordMeterLevel2Color);
}

.passwordStrengthMeterDescriptionLevel3 {
  color: var(--passwordMeterLevel3Color);
}

.passwordStrengthMeterDescriptionLevel4 {
  color: var(--passwordMeterLevel4Color);
}

.passwordStrengthMeterDescriptionLevel5 {
  color: var(--passwordMeterLevel5Color);
}

.passwordStrengthMeter,
.passwordStrengthMeter::-webkit-meter-bar {
  background: linear-gradient(
    90deg,
    var(--passwordMeterInactiveColor) 0% 18.4%,
    transparent 18.4% 20.4%,
    var(--passwordMeterInactiveColor) 20.4% 38.8%,
    transparent 38.8% 40.8%,
    var(--passwordMeterInactiveColor) 40.8% 59.2%,
    transparent 59.2% 61.2%,
    var(--passwordMeterInactiveColor) 61.2% 79.6%,
    transparent 79.6% 81.6%,
    var(--passwordMeterInactiveColor) 81.6% 100%
  );
}

.passwordStrengthMeter::-webkit-meter-optimum-value,
.passwordStrengthMeter::-webkit-meter-suboptimum-value,
.passwordStrengthMeter::-webkit-meter-even-less-good-value {
  background: none;
}

.passwordStrengthMeter[value="1"],
.passwordStrengthMeter[value="1"]::-webkit-meter-bar {
  background: linear-gradient(
    90deg,
    var(--passwordMeterLevel1Color) 0% 18.4%,
    transparent 18.4% 20.4%,
    var(--passwordMeterInactiveColor) 20.4% 38.8%,
    transparent 38.8% 40.8%,
    var(--passwordMeterInactiveColor) 40.8% 59.2%,
    transparent 59.2% 61.2%,
    var(--passwordMeterInactiveColor) 61.2% 79.6%,
    transparent 79.6% 81.6%,
    var(--passwordMeterInactiveColor) 81.6% 100%
  );
}

.passwordStrengthMeter[value="2"],
.passwordStrengthMeter[value="2"]::-webkit-meter-bar {
  background: linear-gradient(
    90deg,
    var(--passwordMeterLevel2Color) 0% 18.4%,
    transparent 18.4% 20.4%,
    var(--passwordMeterLevel2Color) 20.4% 38.8%,
    transparent 38.8% 40.8%,
    var(--passwordMeterInactiveColor) 40.8% 59.2%,
    transparent 59.2% 61.2%,
    var(--passwordMeterInactiveColor) 61.2% 79.6%,
    transparent 79.6% 81.6%,
    var(--passwordMeterInactiveColor) 81.6% 100%
  );
}

.passwordStrengthMeter[value="3"],
.passwordStrengthMeter[value="3"]::-webkit-meter-bar {
  background: linear-gradient(
    90deg,
    var(--passwordMeterLevel3Color) 0% 18.4%,
    transparent 18.4% 20.4%,
    var(--passwordMeterLevel3Color) 20.4% 38.8%,
    transparent 38.8% 40.8%,
    var(--passwordMeterLevel3Color) 40.8% 59.2%,
    transparent 59.2% 61.2%,
    var(--passwordMeterInactiveColor) 61.2% 79.6%,
    transparent 79.6% 81.6%,
    var(--passwordMeterInactiveColor) 81.6% 100%
  );
}

.passwordStrengthMeter[value="4"],
.passwordStrengthMeter[value="4"]::-webkit-meter-bar {
  background: linear-gradient(
    90deg,
    var(--passwordMeterLevel4Color) 0% 18.4%,
    transparent 18.4% 20.4%,
    var(--passwordMeterLevel4Color) 20.4% 38.8%,
    transparent 38.8% 40.8%,
    var(--passwordMeterLevel4Color) 40.8% 59.2%,
    transparent 59.2% 61.2%,
    var(--passwordMeterLevel4Color) 61.2% 79.6%,
    transparent 79.6% 81.6%,
    var(--passwordMeterInactiveColor) 81.6% 100%
  );
}

.passwordStrengthMeter[value="5"],
.passwordStrengthMeter[value="5"]::-webkit-meter-bar {
  background: linear-gradient(
    90deg,
    var(--passwordMeterLevel5Color) 0% 18.4%,
    transparent 18.4% 20.4%,
    var(--passwordMeterLevel5Color) 20.4% 38.8%,
    transparent 38.8% 40.8%,
    var(--passwordMeterLevel5Color) 40.8% 59.2%,
    transparent 59.2% 61.2%,
    var(--passwordMeterLevel5Color) 61.2% 79.6%,
    transparent 79.6% 81.6%,
    var(--passwordMeterLevel5Color) 81.6% 100%
  );
}
