.short-password {
	color: white;
	text-align: center;
}
.weak-password {
	color: white;
	text-align: center;
}
.good-password {
	color: black;
	text-align: center;
}
.strong-password {
	color: white;
	text-align:center;
}

.progress-w-25 {
	width: 25% !important;
	color: white;
	background-color: red;
	border-right: 1px solid black;
}

.progress-w-50 {
	width: 50% !important;
	color: blue;
	background-color: orange;
	border-right: 1px solid black;
}

.progress-w-75 {
	width: 75% !important;
	color: black;
	background-color: lightgreen;
	border-right: 1px solid black;
}

.progress-w-100 {
	width: 100% !important;
	color: white;
	background-color: green;
}

#strength{
	font-weight:bold;
	font-size:larger;
}

.password-progress-hidden{
	display:none;
}


.password-progress {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: 1rem;
	overflow: hidden;
	font-size: 1.35rem;
	border-radius: 0.25rem;
	height: 27px;
	margin-top: -7px;
	margin-bottom: 7px;
	border: 1px solid black;
	background-color: white;
}

.password-progress-bar {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	transition: width 0.6s ease;
}

.password-progress-bar-striped {
	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-size: 1rem 1rem;
}

.password-progress-bar-animated {
	-webkit-animation: progress-bar-stripes 1s linear infinite;
	animation: progress-bar-stripes 1s linear infinite;
}