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


.form {
	width: calc(100% - 30px);
}
.grid-items.s-100 {
	width: calc(100% - 15px);
}
.form .form-break {
}

.form .form-item[data-formlabel="2"] .fl, 
.form .form-item[data-formlabel="2"] .fs {
	text-align: left;
	display: block;
}
.form .form-item[data-formlabel="2"] .fl em {
	top: 0;
	transform:none;
	margin-bottom: 10px;
} 
.form .form-item.fi-button {
	text-align: right;
}

/* Match confirm-registration confirmation_code appearance */

form[name="password-reset"] .form .form-item.fi-text1row .ff input[name="confirmation_code"] {
	font-size: 2.5rem;
	letter-spacing: 1px;
	text-align: center;
	padding-block:15px;
	box-shadow: 0 0 0 2px #ee0000;
	font-weight: bold;
}
form[name="password-reset"] .form .form-item.fi-text1row .ff input[name="confirmation_code"] ::placeholder {
	position: relative;
	opacity: 0.5;
	font-style: normal;
	font-size: 1em;
	bottom: auto;
	letter-spacing: 0px!important;
}

/* Disable blue autofill background on email field */
form[name="password-reset"] input[name="email"]:-webkit-autofill,
form[name="password-reset"] input[name="email"]:-webkit-autofill:hover,
form[name="password-reset"] input[name="email"]:-webkit-autofill:focus {
	-webkit-text-fill-color: currentColor !important;
	caret-color: currentColor !important;
	-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
	box-shadow: 0 0 0 1000px transparent inset !important;
	transition: background-color 99999s ease-out 0s, color 99999s ease-out 0s;
}

form[name="password-reset"] input[name="confirmation_code"]:-webkit-autofill,
form[name="password-reset"] input[name="confirmation_code"]:-webkit-autofill:hover,
form[name="password-reset"] input[name="confirmation_code"]:-webkit-autofill:focus,
form[name="password-reset"] input[name="password"]:-webkit-autofill,
form[name="password-reset"] input[name="password"]:-webkit-autofill:hover,
form[name="password-reset"] input[name="password"]:-webkit-autofill:focus,
form[name="password-reset"] input[name="password_2"]:-webkit-autofill,
form[name="password-reset"] input[name="password_2"]:-webkit-autofill:hover,
form[name="password-reset"] input[name="password_2"]:-webkit-autofill:focus {
	-webkit-text-fill-color: currentColor !important;
	caret-color: currentColor !important;
	-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
	box-shadow: 0 0 0 1000px transparent inset !important;
	transition: background-color 99999s ease-out 0s, color 99999s ease-out 0s;
}

/* Password field toggle (show/hide) */
form[name="password-reset"] .form .form-item.fi-text1row .ff {
	position: relative;
}
form[name="password-reset"] .form .form-item.fi-text1row .ff input[name="password"],
form[name="password-reset"] .form .form-item.fi-text1row .ff input[name="password_2"] {
}
form[name="password-reset"] .form .form-item.fi-text1row .ff .field-toggle {
	display: block;
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	cursor: pointer;
	z-index: 10;
}
form[name="password-reset"] .form .form-item.fi-text1row .ff .field-toggle i {
	display: block;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
form[name="password-reset"] .form .form-item.fi-text1row .ff .field-toggle[data-state="password"] i {
	background-image: url("../../images/ui/positive/password-state-hidden.svg");
}
form[name="password-reset"] .form .form-item.fi-text1row .ff .field-toggle[data-state="text"] i {
	background-image: url("../../images/ui/positive/password-state-visible.svg");
}


/* Notes for strong password */

.tip-items {
	margin-block:15px;
}
.tip-items p {}
.tip-items p i {
	display: block;
	position: relative;
	width:       15px;
	height:      15px;
	margin: 0 0 -15px 0;
}
.tip-items p i:before {
	content:"•"; 
	color:var(--brand_red);
}
.tip-items p em {
	display: block;
	position: relative;
	margin: 0 0 0 20px;
	font-style: normal;
}