@charset "utf-8";
/* CSS Document */

.strength_meter{
	height:23px;
width: 154px;
	background:silver;
	
}
.strength_meter div{
	height:23px;
	width:100%;
	height:23px;
	text-align:center;
	color:black;
	font-weight:bold;
	line-height:23px;
}
.veryweak{
	background-color: #FFA0A0;
border-color: #F04040!important
}
.weak{
background-color: #FFB78C;
border-color: #FF853C!important;
}
.medium{
background-color: #FFEC8B;
border-color: #FC0!important;
}
.strong{
background-color: #C3FF88;
border-color: #8DFF1C!important;
}


.strength.bg-color{
	background-color:transparent;
	color: #777;
	z-index:1;
	position: absolute;
	top: 0;
	width: calc(100% - 30px);
}
.strength.bg-color:focus{
	outline:0;
}
.strength_meter.bg-color{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 34px;
	z-index:0;
	border-radius:5px;
	padding-left:15px;
	padding-right:15px;
}
.button_strength {
	text-decoration: none;
	font-size: 13px;
	position: absolute;
	z-index:2;
	top: 7px;
	right: 48px;
}
.strength_meter.bg-color{
	background: white;
}
.strength_meter.bg-color div{
	width:0%;
	white-space: nowrap;
	height: 34px;
	text-align: right;
	color: #636363;
	line-height: 53px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	padding-right: 2px;
	border-radius:5px;
}
.strength_meter.bg-color div p{
	position: absolute;
	top: 22px;
	right: 0px;
	color: #FFF;
	font-size:13px;
}

.bg-color .veryweak{
	background-color: #FFA0A0;
	border-color: #F04040!important;
	width:25%!important;
}
.bg-color .weak{
	background-color: #FFB78C;
	border-color: #FF853C!important;
	width:50%!important;
}
.bg-color .medium{
	background-color: #FFEC8B;
	border-color: #FC0!important;
	width:75%!important;
}
.bg-color .strong{
	background-color: #C3FF88;
	border-color: #8DFF1C!important;
	width:100%!important;
}