@charset "utf-8";

.field_names {
	clear:left;
	float: left;
	width: 45%;
	text-align: right;
	margin: .25% .1%;
}
.field_data {
	clear:right;
	float: left;
	width: 54%;
	margin: .25% .1%;
}
.status {
	float: left;
	padding-left: 5px;
	color: var(--theme-danger);
}
.hr_class {
	width: 500px;
	margin-right: auto;
	margin-left: auto;
}
.center_text {
	width: 950px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
}
.submit_button {
	margin: 0px;
	margin-top: 75px;
	margin-bottom: 75px;
	padding: 0px;
	clear: both;
	width: 100%;
	text-align: center;
}




.footer {
	padding: 10px 0;
	background: var(--theme-brand);
	position: relative;
	clear: both;
	text-align: center;
}


/* ── Phone layout -- MFA setup page only (index.html is unchanged). The 75px
   button margins and the left-edge "Cancel" link were sized for desktop. ─── */
html.tba_mobile #step_pick .submit_button,
html.tba_mobile #step_totp .submit_button,
html.tba_mobile #step_email .submit_button { margin: 24px 0; }
html.tba_mobile #step_totp .field_names,
html.tba_mobile #step_email .field_names { float: none; clear: none; width: auto; text-align: left; margin: 12px 12px 3px; font-weight: bold; }
html.tba_mobile #step_totp .field_data,
html.tba_mobile #step_email .field_data { float: none; clear: none; width: auto; margin: 0 12px; }
html.tba_mobile #step_totp .field_data input,
html.tba_mobile #step_email .field_data input { width: 100%; box-sizing: border-box; }
html.tba_mobile #step_email ~ a { display: block; text-align: center; padding: 14px 0; }
html.tba_mobile #qrcode { text-align: center; }
html.tba_mobile #qrcode img, html.tba_mobile #qrcode canvas { max-width: 100%; height: auto; }

/* ── Phone layout -- the two-step login (company code, then user name + password) ── */
html.tba_mobile #form_id .field_names { float: none; clear: both; width: auto; text-align: left; margin: 14px 14px 3px; font-weight: bold; }
html.tba_mobile #form_id .field_data { float: none; clear: both; width: auto; margin: 0 14px; }
html.tba_mobile #form_id .field_data input[type=text],
html.tba_mobile #form_id .field_data input[type=password] { width: 100%; box-sizing: border-box; min-height: 44px; font-size: 18px; }
html.tba_mobile #form_id .status { float: none; clear: both; margin: 4px 14px 0; }
html.tba_mobile #form_id > div > br { display: none; }
html.tba_mobile #form_id .submit_button { margin: 26px 14px 30px; width: auto; }
html.tba_mobile #form_id .submit_button button { width: 100%; min-height: 48px; font-size: 18px; }
html.tba_mobile #company_shown { font-size: 18px; }