/**
 * Form UI
 */
.main-inner > form,
.main-inner > .form {
	max-width:		680px;
	margin:			0 auto;
	padding-top:	40px;
}

.main-inner .form-inner {
	margin: 0 auto;
	max-width: 1324px;
	padding: 40px 24px;
}
.main-inner > form h1,
.main-inner > .form h1,
.main-inner > .form-inner h1 {
	line-height:	1.212;
	font-size:		44px;
	color:			var(--mono);
	font-family:	var(--bold);
}
.h2 {
	padding-top:30px;
	font-size:28px;
	color:			var(--mono);
	font-family:	var(--bold);
}
.main-inner > form fieldset {
	border:			0;
	margin:			0;
	padding:		0;
}
.main-inner > form p,
.main-inner > .form p {
	padding-top:	26px;
	line-height:	1.43;
	font-size:		14px;
}
.main-inner > form label.form-label,
.main-inner > form label[for="username"],
.main-inner > form label[for="Input_Code"],
.main-inner > form label[for="Email"],
.main-inner > form label[for="NewEmail"],
.main-inner > form label[for="Input_TwoFactorCode"],
.main-inner > form label[for="Input_RecoveryCode"],
.main-inner > form label[for="Input.NewEmail"],
.main-inner > form label[for="Input_NewEmail"],
.main-inner > form label[for="Input_Email"],
.main-inner > form label[for="clientDropdown"],
.main-inner > form label[for="password"],
.main-inner > form label[for="Input_OldPassword"],
.main-inner > form label[for="Input_NewPassword"],
.main-inner > form label[for="Input_ConfirmPassword"],
.main-inner > form label[for="Input_Password"] {
	background: var(--light-blue-25);
	position: relative;
	border-radius: 7px;
	border: 1px solid var(--mono);
	display: block;
	overflow: hidden;
}
.main-inner > form label[for="Input_RememberMe"] {
	padding-top:	17px;
	display:		block;
}
.main-inner > form .field-label-dynamic {
	position:		absolute;
	line-height:	48px;
	padding-left:	20px;
	width:			100%;
	display:		block;
	left:			0;
	top:			0;
	z-index:		1;
	font-family:	var(--medium);
	font-size:		16px;
}
.main-inner > form p > .field-label-dynamic {
	position:relative;
	line-height:18px;
	padding-bottom:8px;
	padding-left:0;
	font-size: 14px;
  	font-family: var(--semibold);
}

.main-inner > form label[for="clientDropdown"]  .field-label-dynamic {
	position:relative;
}
.main-inner > form label input[type="text"],
.main-inner > form label input[type="email"],
.main-inner > form label input[type="date"],
.main-inner > form label input[type="file"],
.main-inner > form label input[type="number"],
.main-inner > form label select,
.main-inner > form label textarea,
.main-inner > form label input[type="password"],
.main-inner > form label #PhoneNumber {
	color: var(--mono);
	position: relative;
	font-family: var(--regular);
	font-size: 16px;
	width: 100%;
	border: 0;
	padding: 0 20px;
	line-height: 48px;
	display: block;
	z-index: 2;
	background: transparent;
	outline: none;
	outline: 0;
	-webkit-outline: none;
}
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
  outline: 0;
  -webkit-outline:none;
}
input::-webkit-input-placeholder {
	color:			var(--mono);
  -webkit-opacity:1;
}
input::-moz-placeholder {
	color:			var(--mono);
  opacity:1;
}
input:-moz-placeholder {
	color:			var(--mono);
  opacity:1;
}
input:-ms-input-placeholder {
	color:			var(--mono);
  opacity:1;
}
input::-ms-input-placeholder {
	color:			var(--mono);
  opacity:1;
}
input::placeholder {
	color:			var(--mono);
  opacity:1;
}

.main-inner > form label select {
	letter-spacing:	unset;
	font-size:12px;
	margin-bottom:10px;
}
.main-inner > form label input[type="text"]:focus + .field-label-dynamic {
	display:		none;
}
.main-inner > form label input[type="password"]:focus + .field-label-dynamic {
	display:		none;
}
.main-inner > form label input[type="text"][readonly],
.main-inner > form label input[type="email"][readonly],
.main-inner > form label input[type="date"][readonly],
.main-inner > form label input[type="password"][readonly],
.main-inner > form label select,
.main-inner > form label textarea,
.main-inner > form label input[type="number"][readonly] {
	opacity:0.5;
	cursor:not-allowed;
	background:var(--default);
	color:var(--red);
}
.main-inner > form .button-flex {
	display:		flex;
	padding-top:	30px;
	justify-content:space-between;
	gap:			40px;
	padding-bottom:	80px;
}
.main-inner > form .button {
	padding-top:	30px;
	padding-bottom:	80px;
}
.main-inner > form .button-flex > div {
	width:			calc(50% - 20px);
	min-width:		calc(50% - 20px);
	max-width:		calc(50% - 20px);
}
.main-inner > form .button-flex > div:last-child {
	text-align:		right;
}
.main-inner > form .button-flex a,
.register-description a:not(.btn) {
	color:			var(--text-blue);
	text-decoration:underline;
	font-weight:	700;
	font-size:		14px;
	letter-spacing:	0px;
}
.main-inner > form .btn-secondary {
	background:			var(--secondary);
	color:				var(--charcoal);

	border-radius:		5px;
	box-shadow:			0px 0px 7px 0px #00000040;
	font-size:			21px;
	height:				50.92px;
	letter-spacing:		-0.03em;
	line-height:		50.92px;
	text-align:			center;
	padding:			0 24px;
	display:			inline-block;
	transition:			all 0.2s ease;
}
.main-inner > form .btn-secondary:hover {
	background:			var(--sky-blue);
	color:				var(--default);
}
.main-inner .register-description {
	max-width:			680px;
	padding:			60px 0 0px;
	margin:				0 auto 0;
	position:			relative;
}
.main-inner .register-description:before {
	background:			var(--secondary);
	height:				2px;
	width:				100%;
	left:				0px;
	top:				0;
	content:			"";
	position:			absolute;
}

.main-inner .register-description h2 {
	color:				var(--mono);
	padding-bottom:		36px;
	font-family:		var(--semibold);
	font-size:			30px;
	line-height:		36px;
}
.main-inner .register-description p {
	padding-bottom:		20px;
	line-height:		1.5em;
}

.main-inner .register-description .contact {
	padding-bottom: 50px;
}

.main-inner .register-description .btn {
	width:				180px;
}
.main-inner > form label[for="remember"] {
	position:			relative;
	overflow:			hidden;
	display:			block;
	cursor:				pointer;
	padding:			8px 0;
	width:				250px;
	float:				right;
}
.main-inner > form label[for="remember"] input {
	position:			absolute;
	left:				-300px;
	top:				0;
}
.main-inner > form label[for="remember"] .field-label {
	padding-left:		40px;
}
.main-inner > form label[for="remember"] .field-label:before {
	top:				4px;
	height:				24px;
	width:				24px;
	background:			var(--another-light-blue);
	border-radius:		3px;
	content:			"";
	display:			inline-block;
	margin-right:		16px;
	position:			absolute;
	left:				0;
}
.main-inner > form label[for="remember"] input:checked ~ .field-label:before {
	content:			"\f00c";
	font-family:		'Font Awesome 5 Pro';
	color:				var(--charcoal);
	font-size:			18px;
	text-align:			center;
	line-height:		24px;
}
.auth-app {
	padding-top:40px;
}
.auth-link {
	display:flex;
	gap:20px;
	flex-direction: column;
	padding-top:20px;
}
.auth-link a, .link {
	color: var(--text-blue);
	text-decoration: underline;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0px;
	border:0;
	box-shadow:none;
	padding:0;
}
.button-container {
	padding-top:20px;
}
#change-email-button,
#verify-button,
#reset-authenticator-button {
	/*padding:0 20px;*/
}
#qrCode,
#qrCodeData{
	margin:0 auto 15px;
}

nav .pagination {
	display:flex;
	justify-content: space-around;
	gap:10px;
	margin:0 auto;
	width:480px;
	padding-top:20px;
}
.table {
	margin:20px auto 0;
	width:100%;
}
.table th,
.table td {
	border:1px solid #eaeaea;
	padding:6px;
}
.table th {
	background: var(--grey-one);
}

.impersonation{
	max-width: 680px;
	margin: 0 auto;
	padding-top: 40px;
}
.inner-impersonation{
	background:rgba(0,0,0,0.05);
	border-radius:10px;
	padding:15px;
	text-align:center;
}
.inner-impersonation p{
	margin:0;
	text-align:center;
	padding:15px 0;
}

input:not(:placeholder-shown) ~ .field-label-dynamic {
	display:none;
}
.form-flex {
	display:flex;
	flex-direction:row;
	gap:20px;
	justify-content:space-between;
	padding-top:20px;
}
.page-size-submit {
	display:flex;
	flex-direction:row;
	gap:20px;
}
.main-inner .form-inner-nopad {
	padding-bottom:0;
}