/*PASSWORD CHANGE*/
#pwdchange,
#pwdchange div{overflow:hidden;box-sizing:border-box}
#container #pwdchange,
#pwdchange div.pwd-intro,
#pwdchange div.form-code,
#pwdchange div.form-pwd,
#pwdchange div.pwd-advices,
#pwdchange div.fields{width:100%;clear:both}
#container #pwdchange{
	width:var(--cnt-width);
	padding:var(--main-spacing) 0;
	margin:0 auto
}
#pwdchange div.fields{margin-bottom:var(--cnt-margin-1)}
#pwdchange div.text-button,
#pwdchange div.form-pwd,
#pwdchange div.form-pwd div.text-field,
#pwdchange div.text-button form{width:100%;clear:both}
#pwdchange div.text-button form,
#pwdchange div.text-button.step-2,
#pwdchange div.form-pwd,
#pwdchange div.form-pwd div.text-field,
#pwdchange div.form-pwd div.button{
	display:flex;
	flex-flow:row wrap;
	justify-content:center
}
#pwdchange div.text-field{width:auto}
#pwdchange div.form-pwd{grid-gap:0 var(--cnt-margin-1)}
#pwdchange div.form-pwd div.text-field{width:250px}

#pwdchange h3,
#pwdchange h4,
#pwdchange p,
#pwdchange label{width:100%;text-align:center}
#pwdchange h3,
#pwdchange h4{
	font-family:var(--titles-font);
	font-weight:var(--w-extrabold);
	color:var(--c-blue);
	line-height:120%;
	margin-bottom:5px
}
#pwdchange h3{font-size:var(--fnt-bigger-5)}
#pwdchange h4{font-size:var(--fnt-bigger-3)}
#pwdchange p,
#pwdchange label{font-size:var(--fnt-smaller-1)}
#pwdchange p{line-height:160%;margin-bottom:var(--cnt-margin-1)}
#pwdchange p strong{font-weight:var(--w-bold)}
#pwdchange label{
	font-weight:var(--w-medium);
	line-height:var(--lbl-height);
	text-transform:uppercase;
	display:block;
	margin-bottom:var(--lbl-margin)
}
#pwdchange input{
	height:var(--fld-height-1);
	line-height:var(--fld-height-1);
	float:left;
	display:inline;
	overflow:hidden;
	outline:none!important;
	-webkit-appearance:none!important;
	box-sizing:border-box
}
#pwdchange input[type="text"],
#pwdchange input[type="email"],
#pwdchange input[type="password"]{
	font-size:var(--fnt-smaller-1);
	color:var(--c-grey-50);
	padding:0 var(--fld-padding-1);
	box-sizing:border-box;
	border-radius:var(--fld-radius);
	border:1px solid var(--c-grey-90);
	background-color:var(--c-grey-96)!important
}
#pwdchange input[type="text"],
#pwdchange input[type="email"]{width:300px}
#pwdchange input[type="password"]{width:100%}
#pwdchange input[type="button"]{
	font-size:var(--fnt-smaller-1);
	color:var(--c-white);
	text-transform:uppercase;
	text-align:center;
	cursor:pointer;
	padding:0 var(--btn-padding-1);
	border-radius:var(--fld-radius);
	border:none;
	background:var(--c-blue)
}
#pwdchange input[type="button"]:hover{color:var(--c-grey-14)}
#pwdchange .nomrg{margin-bottom:0!important}
#pwdchange input.nomrg{margin:0!important}

#pwdchange div.step-1 input[type="email"],
#pwdchange div.step-2 input[type="text"]{
	border-top-right-radius:0;
	border-bottom-right-radius:0;
	border-right:none
}
#pwdchange input.step-1[type="button"],
#pwdchange div.step-2 input[type="button"]{border-top-left-radius:0;border-bottom-left-radius:0}

#pwdchange div.pwd-advices{padding:30px;background:var(--c-grey-96)}
#pwdchange div.pwd-advices p{color:var(--c-grey-50)}

#pwdchange div.fld-password{
	align-items:flex-start;
	align-content:flex-start;
	position:relative
}
#pwdchange div.fld-password i{
	width:var(--ico-pwd-1);
	height:var(--ico-pwd-1);
	font-size:var(--ico-pwd-1);
	display:flex;
	flex-flow:column wrap;
	justify-content:center;
	position:absolute;
	top:calc(((var(--fld-height-1) - var(--ico-pwd-1)) / 2) + (var(--lbl-height) + var(--lbl-margin)));
	right:var(--fld-padding-1);
	cursor:pointer
}
#pwdchange div.fld-password span.pwd-validation{
	width:100%;
	font-size:var(--fnt-smaller-2);
	font-weight:var(--w-bold);
	color:var(--c-red);
	line-height:130%;
	clear:both;
	display:none;
	padding-top:5px
}
#pwdchange div.fld-password.validation-error span.pwd-validation{display:block}
#pwdchange div.validation-error label{font-weight:var(--w-bold);color:var(--c-red)}
#pwdchange div.validation-error input,
#pwdchange div.validation-error select,
#pwdchange div.validation-error textarea{
	color:var(--c-red);
	border:2px solid var(--c-red);
	background:var(--c-lightred)
}

/*RESPONSIVITY*/
@media only screen and (min-width:320px) and (max-width:1024px) {
	/*password change*/
	#container #pwdchange{padding:var(--main-spacing)}
	#pwdchange input[type="text"],
	#pwdchange input[type="email"]{width:250px}
	#pwdchange div.pwd-advices{padding:25px}
}

@media only screen and (min-width:1025px) and (max-width:1280px) {
	/*password change*/
	#container #pwdchange{padding:var(--main-spacing)}
	#pwdchange input[type="text"],
	#pwdchange input[type="email"]{width:250px}
	#pwdchange div.pwd-advices{padding:25px}
}

@media only screen and (min-width:1281px) and (max-width:1500px) {
	/*password change*/
	#pwdchange input[type="text"],
	#pwdchange input[type="email"]{width:250px}
	#pwdchange div.pwd-advices{padding:25px}
}

@media only screen and (min-width:1501px) and (max-width:1950px) {
	/*password change*/
	#pwdchange input[type="text"],
	#pwdchange input[type="email"]{width:250px}
	#pwdchange div.pwd-advices{padding:25px}
}

/*TABLET*/
@media only screen and (min-device-width:768px) and (max-device-width:1024px) {
	/*password change*/
	#pwdchange div.form-pwd{grid-gap:0 calc(var(--cnt-margin-1) - 1px)}
	#pwdchange div.form-pwd div.text-field{width:230px}
	#pwdchange input[type="text"],
	#pwdchange input[type="email"]{width:230px}
	#pwdchange div.pwd-advices{padding:25px}
}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
	
}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) {
	
}

/*SMARTPHONE*/
@media only screen and (min-device-width:320px) and (max-device-width:767px) {
	/*password change*/
	#pwdchange p{margin-bottom:calc(var(--cnt-margin-1) + 5px)}
	#pwdchange div.pwd-advices{padding:25px}
}

@media only screen and (min-device-width:320px) and (max-device-width:767px) and (max-aspect-ratio:13/9) {
	/*password change*/
	#pwdchange div.form-code div.text-button,
	#pwdchange div.form-pwd div.text-field{width:60%!important}
	#pwdchange div.form-code div.text-button{margin:0 auto}
	#pwdchange div.step-1,
	#pwdchange div.step-2 input[type="text"]{width:calc(100% - 80px)}
	#pwdchange input[type="email"]{width:100%}
	#pwdchange input.step-1[type="button"],
	#pwdchange div.step-2 input[type="button"]{width:80px;padding:0}
}

@media only screen and (min-device-width:320px) and (max-device-width:767px) and (min-aspect-ratio:13/9) {
	/*password change*/
	#pwdchange div.form-pwd div.text-field{width:200px}
	#pwdchange input[type="text"],
	#pwdchange input[type="email"]{width:230px}
}