html {
	min-height: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-weight: 400;
	color: var(--log_in_main_text_color);
	background: var(--log_in_bg_color_base);
	background: -moz-linear-gradient(top,
		var(--log_in_bg_color_base) 0%,
		var(--log_in_bg_color_gradient) 100%
	); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, 
		color-stop(0%,var(--log_in_bg_color_base)), 
		color-stop(100%,var(--log_in_bg_color_gradient))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, 
		var(--log_in_bg_color_base) 0%,
		var(--log_in_bg_color_gradient) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, 
		var(--log_in_bg_color_base) 0%,
		var(--log_in_bg_color_gradient) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, 
		var(--log_in_bg_color_base) 0%,
		var(--log_in_bg_color_gradient) 100%); /* IE10+ */
	background: linear-gradient(to bottom, 
		var(--log_in_bg_color_base) 0%,
		var(--log_in_bg_color_gradient) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( 
		startColorstr='var(--log_in_bg_color_base)', 
		endColorstr='var(--log_in_bg_color_base)',GradientType=0 ); /* IE6-8 */
	background-repeat: no-repeat;
	background-attachment: fixed;
}

div, input, h1, span {
	font-family: Tahoma, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
}

.wf-active div, 
.wf-active input, 
.wf-active h1, 
.wf-active span {
	font-family: 'Lato';
}

#logo {
	background: var(--custom_logo_login);
    background-size: var(--custom_logo_size);
    width: 100%;
    height: 110px;
}

/** {
	border: 1px solid red;
}*/

h1 {
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 20px;
	min-height: 20px;
	margin-top: 10px !important;
	padding-bottom: 10px;
	color: var(--log_in_text_color);;
	padding-top: 25px;
	text-align: center;
}

h1 span {
	font-size: 20px;
}

h1 a {
	text-decoration: none;
	color: inherit;
}

#login_box, #login_box_bg {
	height: 450px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

.sso_box {
	text-align: center;
	padding: 5px;
	border-radius: 5px;
	display: inline-block;
	width: 350px;
	height: 40px;
	margin:5px;
	cursor: pointer;
	text-decoration: none; /* Ensure no default underlining for the link */
	color: #000; 
}

.sign_in_icon{
	margin-top: auto;
	margin-bottom: auto;
	margin-left: 5px;
	width: 35px;
	height: 35px;
}

#sign_in_label {
	font-size: 20px;
	font-weight: bold;
	margin-left: 10px;
	line-height: 64px;
	margin-bottom: 5px;
}

.line-with-text {
	width: 85%;
	align-items: center;
	justify-content: center;
	margin-top: 30px;
	margin-bottom: 30px;
	display: flex;
	margin-left: auto;
	margin-right: auto;
}

.line-with-text hr {
	flex: 1;
	border: none;
	height: 1px;
	background-color: #ccc; 
}

.providers hr {
	flex: 1;
	border: none;
	height: 1px;
	background-color: #ccc;
}

.or-text {
	padding: 0 10px;
	margin-left: auto;
	margin-right: auto;
	color: #555;
}

i.icon.eye.slash:before { content: "\f070"; }

.providers {
	margin: auto;
	width: 95%;
}

.providers .btn-provider-login {
	background-color: #fff;
	border-color: #356195d9;
	border-radius: 10px;
	margin-top: 20px;
}

.providers .btn>span:first-child {
	background: white;
	padding: 7px;
	width: 38px;
	height: 38px;
	text-align: center;
}
.providers .btn>span:last-child {
	margin-left: 24px;
}

.providers .btn {
	font-weight: bold;
	text-decoration: none;
	display: flex;
	margin-bottom: 10px;
	width: 100%;
	border-radius: 20px;
	text-align: left;
	height: 40px;
	padding: 0;
	color: #686565;
}

.btn, .btn-raised, .btn-basic, .btn-stroked {
	border-radius: 20px;
	padding: 0 20px;
	min-width: 100px;
	height: 40px;
	font-size: 13px;
	line-height: 40px;
	text-align: center;
	border-width: 1px;
	border-style: solid;
	letter-spacing: 0.3px;
}

#login_password_field {
	display: block;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}

#login_box {
	padding: 20px;
	width: 360px;
}

#login_box_outer {
	margin-top:20px;
	background: var(--log_in_box_bg_color);
	background-image: linear-gradient(rgba(var(--log_in_box_bg_color), 0.23), rgba(var(--log_in_box_bg_color), 0));
	border-radius: 10px;
	height: 450px;
	z-index: -1;
	position: absolute;
	top: 113px;
	left: 0;
	right: 0;
	box-shadow: 0px 2px 12px 0px rgba(45,45,45,0.50);
}

#login_box_bg {
	position: absolute;
	width: 385px;
	height: 650px;
}

#login_username, #login_password, #login_code {
	cursor: pointer;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	min-height: 22px;
}

#username, #password, #code {
	width: 100%;
	padding: 5px;
	background-color: #fff !important;
	-webkit-box-shadow: 0 0 0px 1000px #fff inset;
	border: 1px solid #BCBCBC;
	border-radius: 10px;
	outline: none; 
	min-height: 23px;
}

#code {
	letter-spacing: 10px;
	color: black;
	font-weight: bold;
	text-align: center;
}

#login_password {
	margin-top: 10px;
}

#login_code {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

#username:focus, 
#password:focus {
	border: 1px solid gray;
	outline: none; 
}

#login_username_field, #login_code_field {
	margin: auto auto 20px auto;
	width: 95%;
}

#error {
	border-bottom: 1px solid #D0021B;
	color: #D0021B;
	background: #F7E6E8;
	font-weight: bolder;
	width: 100%;
	margin-bottom: 0px;
	text-align: center;
	z-index: 1000;
	position: absolute;
	top: 0;
	left: 0;
}

#error span {
	display: block;
	padding: 5px;
	font-size: 14px;
	font-weight: 700;
}

form {
	display: inline;
	margin: 0;
	padding: 0;
}

#login_button {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
}

#login_button_label {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 20px;
	background-color: #63aa07;
	color: white;
	text-align: center;
	cursor: pointer; 
}

#login_button_link {
	color: black;
	outline: none;
	text-decoration: none;
}

#login_button input {
	visibility: hidden;
	position: absolute;
	left: -999em;
}

i.lock {
	color: #F89D06;
}

#login_button_link .login_ok {
	color: #61B801;
}

#login_button_link:hover .login_ok {
	color: #519A02;
}

#go_back_box {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
	width: 100px;
}

#buttons {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

#back_button_label {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 20px;
	background-color: #aa1a07;
	color: white;
	text-align: center;
	cursor: pointer; 
}

#back_button_link {
	color: black;
	outline: none;
	text-decoration: none;
}

#back_button input {
	visibility: hidden;
	position: absolute;
	left: -999em;
}

#back_button_label:hover {
	color: #040405;
}

#login_button_label:hover {
	color: #040405;
}


#login_box_bg_sso {
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	border-radius: 10px;
	margin-top: 0px;
	max-width:350px;

}

#login_box_sso {
	position: relative;
	top: -130px;
}

#login_box_outer_sso {
	background: rgba(255, 255, 255, 0.23);
	background-image: linear-gradient(-180deg, #FFFFFF 0%, var(--log_in_box_bg_color) 100%);
	border-radius: 10px;
	height: 230px;
	z-index: -1;
	position: relative;
	top: 113px;
	left: 0;
	right: 0;
	margin-top: 20px;
	box-shadow: 0px 2px 12px 0px rgba(45,45,45,0.50); 
}



@media (max-width: 768px) {
    #login_box_bg_sso {
		max-width:350px;
		position: fixed;
		width: 100%;
		padding:20px;
		box-sizing: border-box;
    }
}

.sign_in_box {
	margin: 20px;
	display: flex;
	height: 20px;
	margin-top: 20px;
	background-color: #FFFFFF;
	border-radius: 40px;
	padding: 10px;
	box-shadow: 0px 2px 12px 0px rgba(45, 45, 45, 0.50);
	text-decoration: none;
	font-style: normal;

}

#sso_title {
	display: block;
	padding: 5px;
	font-size: 20px;
	color: var(--log_in_text_color);
	text-align: center;
	margin-top: 20px;
	margin-bottom: 10px;
	font-weight: 700;
}

#login_box_title {
	color: var(--log_in_text_color);
	background-color: #FFFFFF; 
	text-align: center;
	font-size: 18px;
	height: 40px;
	position: relative;
	margin: auto;
	text-align: center; 
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;

}

#sign_in_text  {
	margin-left: 30px;
	color : black;
	font-size: 15px;
}

/* PLEXUS LOGIN BRANDING OVERRIDE - 2026-05-06 v2
   Revert: restore files from /root/pbx-login-branding-backups/<timestamp>/
   Scope: presentation only; preserves PBXware form fields, SMSESSID, password auth, 2FA code flow, and Azure AD SSO link.
*/
@font-face { font-family: 'Ubuntu'; src: url('/branding/v1648658544/ubuntusans-400-latin-20260505.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Ubuntu'; src: url('/branding/v1648658544/ubuntusans-700-20260505.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Ubuntu'; src: url('/branding/v1648658544/ubuntusans-800-20260505.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }
@keyframes plx-fade-up { from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
:root { --plexus-brand:#085282; --plexus-brand-hover:#0a649b; --plexus-card:rgba(255,255,255,.94); --plexus-ink:#231f20; --plexus-muted:#657681; --plexus-border:rgba(8,82,130,.16); --plexus-field:#f7fafc; }
html, body { min-height:100%; }
body { margin:0!important; color:var(--plexus-ink)!important; background:#073f60 url('/branding/v1648658544/login-plexman-bg-20260505.png') center center / cover no-repeat fixed!important; overflow:hidden; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; }
body:before { content:""; position:fixed; inset:0; pointer-events:none; z-index:0; background:radial-gradient(circle,rgba(255,255,255,.30) 0%,rgba(255,255,255,.16) 25%,rgba(6,63,97,.10) 58%,rgba(3,38,59,.22) 100%),linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.02)); }
body:after { content:""; position:fixed; left:50%; top:50%; width:520px; height:520px; transform:translate(-50%,-50%); border-radius:48px; background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.58) 0%,rgba(255,255,255,.30) 35%,rgba(255,255,255,.10) 58%,rgba(255,255,255,0) 74%); filter:blur(20px); opacity:.72; pointer-events:none; z-index:0; }
div,input,h1,h2,span,a,p { font-family:Ubuntu,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important; }
form { display:block!important; min-height:100vh; margin:0!important; padding:max(48px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(48px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))!important; box-sizing:border-box; position:relative; z-index:1; }
#login_box_bg { position:fixed!important; top:50%!important; left:50%!important; right:auto!important; bottom:auto!important; transform:translate(-50%,-50%); box-sizing:border-box; width:448px!important; height:auto!important; min-height:0!important; max-width:calc(100vw - 48px)!important; margin:0!important; padding:42px!important; background:var(--plexus-card)!important; border:1px solid rgba(255,255,255,.92)!important; border-radius:32px!important; box-shadow:0 34px 90px rgba(0,26,43,.30),0 12px 34px rgba(35,31,32,.10)!important; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); animation:plx-fade-up .7s ease .08s both; }
#login_box_outer { display:none!important; }
#logo { width:226px!important; max-width:100%!important; height:45px!important; margin:0 auto 34px!important; background:var(--custom_logo_login)!important; background-size:contain!important; }
#login_box { position:static!important; width:100%!important; height:auto!important; min-height:0!important; margin:0!important; padding:0!important; display:flex!important; flex-direction:column!important; }
#login_box h1,#sso_title,#login_box_title { order:1; margin:0 0 26px!important; padding:0!important; min-height:0!important; height:auto!important; color:var(--plexus-ink)!important; background:transparent!important; font-size:34px!important; line-height:1.05!important; letter-spacing:-.045em!important; font-weight:800!important; text-align:center!important; }
#login_box h1 span { font-size:inherit!important; line-height:inherit!important; font-weight:inherit!important; }
.providers { order:2; width:100%!important; margin:0 0 24px!important; }
.providers .btn-provider-login,.providers .btn,.sign_in_box { box-sizing:border-box; width:100%!important; height:54px!important; margin:0!important; padding:0 18px!important; border:0!important; border-radius:16px!important; background:var(--plexus-brand)!important; color:#fff!important; box-shadow:0 18px 34px rgba(8,82,130,.26)!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:11px!important; text-align:center!important; text-decoration:none!important; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.providers .btn-provider-login:hover,.providers .btn:hover,.sign_in_box:hover { background:var(--plexus-brand-hover)!important; box-shadow:0 22px 40px rgba(8,82,130,.32)!important; transform:translateY(-1px)!important; }
.providers .btn>span:first-child { display:none!important; }
.providers .btn>span:last-child { margin-left:0!important; font-size:0!important; }
.providers .btn>span:last-child:after { content:"Continue with Microsoft"; font-size:15px!important; line-height:1!important; font-weight:800!important; letter-spacing:-.01em!important; color:#fff!important; }
.sign_in_icon { width:18px!important; height:18px!important; margin:0!important; padding:0!important; border-radius:0!important; background:transparent!important; flex-shrink:0; }
.line-with-text { order:3; width:100%!important; display:flex!important; align-items:center!important; gap:14px; margin:0 0 20px!important; }
.line-with-text hr { background-color:rgba(101,118,129,.22)!important; height:1px!important; }
.or-text { padding:0!important; color:rgba(101,118,129,.82)!important; font-size:11px!important; line-height:1!important; font-weight:800!important; letter-spacing:.12em!important; text-transform:uppercase; }
#login_username_field { order:4; } #login_password_field { order:5; } #login_code_field,#login_code { order:4; } #buttons { order:5; } #login_button { order:6; }
#login_username_field,#login_password_field,#login_code_field,#login_code { box-sizing:border-box; width:100%!important; margin:0 0 14px!important; }
#username,#password,#code { box-sizing:border-box; width:100%!important; min-height:50px!important; padding:0 15px!important; border:1px solid var(--plexus-border)!important; border-radius:15px!important; background:var(--plexus-field)!important; color:var(--plexus-ink)!important; font-size:15px!important; line-height:50px!important; box-shadow:inset 0 0 0 999px var(--plexus-field)!important; outline:none!important; }
#code { text-align:center!important; letter-spacing:.32em!important; font-weight:800!important; font-size:22px!important; }
#username:focus,#password:focus,#code:focus { border-color:rgba(8,82,130,.58)!important; background:#fff!important; box-shadow:0 0 0 4px rgba(8,82,130,.12),inset 0 0 0 999px #fff!important; }
#password_peek { top:16px!important; right:14px!important; color:rgba(101,118,129,.92)!important; }
#login_button,#buttons { display:flex!important; width:100%!important; gap:12px!important; margin:4px 0 0!important; justify-content:center!important; align-items:center!important; }
#login_button_link,#back_button_link { width:100%!important; text-decoration:none!important; }
#login_button_label,#back_button_label,#go_back_box a,#buttons a,#buttons input[type="submit"] { box-sizing:border-box; display:block!important; width:100%!important; min-width:0!important; padding:15px 18px!important; border:0!important; border-radius:16px!important; background:#0a649b!important; color:#fff!important; font-size:15px!important; line-height:1!important; font-weight:800!important; letter-spacing:-.01em!important; text-align:center!important; box-shadow:0 16px 28px rgba(10,100,155,.22)!important; cursor:pointer; }
#back_button_label,#go_back_box a { background:rgba(101,118,129,.15)!important; color:var(--plexus-ink)!important; box-shadow:none!important; }
#login_button_label:hover,#buttons input[type="submit"]:hover { color:#fff!important; background:#085282!important; }
#error { z-index:10!important; border:0!important; background:rgba(214,55,55,.95)!important; color:#fff!important; box-shadow:0 12px 30px rgba(0,0,0,.18); }
#error span { color:#fff!important; }
@media (prefers-reduced-motion:reduce) { #login_box_bg,.providers .btn,.providers .btn-provider-login { animation:none!important; transition:none!important; } }
@media (max-width:640px) { body { overflow:auto; } form { padding:36px 24px!important; } #login_box_bg { width:calc(100vw - 48px)!important; padding:34px 28px!important; border-radius:28px!important; } #logo { height:42px!important; margin-bottom:30px!important; } #login_box h1,#sso_title,#login_box_title { font-size:29px!important; margin-bottom:24px!important; } }
/* END PLEXUS LOGIN BRANDING OVERRIDE */

/* PLEXUS 2FA BUTTON POLISH - 2026-05-06 */
#buttons a,
#go_back_box a {
  flex: 1 1 0 !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
#buttons input[type="submit"] { flex: 1 1 0 !important; height: 48px !important; }
#back_button_label { height: 48px !important; line-height: 18px !important; }
/* END PLEXUS 2FA BUTTON POLISH */

/* PLEXUS LOGIN MICRO-POLISH - 2026-05-06 v3
   Fixes Microsoft SSO button composition, password visibility control alignment,
   and 2FA action button geometry. Presentation only.
*/
.providers .btn-provider-login {
  position: relative !important;
  overflow: hidden !important;
  height: 54px !important;
  border-radius: 16px !important;
  font-size: 0 !important;
  line-height: 1 !important;
  gap: 0 !important;
}
.providers .btn-provider-login:before {
  content: "";
  width: 18px;
  height: 18px;
  margin-right: 11px;
  flex: 0 0 18px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, #f25022 0 48%, transparent 48% 52%, #7fba00 52% 100%) top left / 100% 48% no-repeat,
    linear-gradient(90deg, #00a4ef 0 48%, transparent 48% 52%, #ffb900 52% 100%) bottom left / 100% 48% no-repeat;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}
.providers .btn-provider-login:after {
  content: "Continue with Microsoft";
  color: #fff;
  font-size: 15px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.01em;
  transform: translateY(-.5px);
}
.providers .btn-provider-login .sign_in_icon,
.providers .btn-provider-login > span {
  display: none !important;
}
.providers .btn-provider-login:focus-visible,
#login_button_link:focus-visible,
#back_button_link:focus-visible,
#buttons input[type="submit"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(8,82,130,.55), 0 18px 34px rgba(8,82,130,.26) !important;
}
#login_password_field {
  position: relative !important;
}
#password {
  padding-right: 52px !important;
}
#password_peek {
  position: absolute !important;
  top: 50% !important;
  right: 14px !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  line-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(-50%) !important;
  color: rgba(64, 79, 92, .72) !important;
  font-size: 16px !important;
  border-radius: 8px !important;
  transition: background .16s ease, color .16s ease !important;
}
#password_peek:hover {
  background: rgba(8,82,130,.08) !important;
  color: rgba(35,31,32,.88) !important;
}
#buttons {
  gap: 12px !important;
  margin-top: 8px !important;
  align-items: stretch !important;
}
#buttons a,
#buttons #back_button_link,
#go_back_box a {
  flex: 1 1 0 !important;
  width: auto !important;
  height: 50px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  display: flex !important;
}
#buttons input[type="submit"] {
  flex: 1 1 0 !important;
  width: auto !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 16px !important;
  line-height: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
#buttons #back_button_label,
#back_button_label {
  flex: 1 1 auto !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 18px !important;
  margin: 0 !important;
  border: 1px solid rgba(8,82,130,.14) !important;
  border-radius: 16px !important;
  background: rgba(8,82,130,.075) !important;
  color: rgba(35,31,32,.82) !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}
#buttons #back_button_label:hover,
#back_button_label:hover {
  background: rgba(8,82,130,.12) !important;
  color: var(--plexus-ink) !important;
}
#code {
  height: 54px !important;
  min-height: 54px !important;
  line-height: 54px !important;
  letter-spacing: .24em !important;
  font-size: 21px !important;
  padding-left: calc(15px + .24em) !important;
}
/* END PLEXUS LOGIN MICRO-POLISH */

/* PLEXUS LOGIN DESIGN REFINEMENT - 2026-05-06 v4
   Implements: Microsoft primary/local secondary, tighter spacing, accessible placeholders,
   refined password icon target, subtle brand accent, and cleaner 2FA copy/input styling.
   Presentation only; auth/session/form mechanics are untouched.
*/
#login_box_bg {
  padding: 38px 42px 36px !important;
}
#login_box_bg:before {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  top: 0;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, rgba(8,82,130,0), rgba(8,82,130,.70), rgba(35,169,214,.58), rgba(8,82,130,0));
  opacity: .82;
  pointer-events: none;
}
#logo {
  margin-bottom: 28px !important;
}
#login_box h1,
#sso_title,
#login_box_title {
  margin-bottom: 22px !important;
}
.providers {
  margin-bottom: 18px !important;
}
.line-with-text {
  margin-bottom: 16px !important;
}
.or-text {
  font-size: 0 !important;
  min-width: 138px;
  text-align: center;
}
.or-text:after {
  content: "or use PBX credentials";
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  color: rgba(101,118,129,.78) !important;
  text-transform: uppercase;
}
#login_username_field,
#login_password_field,
#login_code_field,
#login_code {
  margin-bottom: 12px !important;
}
#username::placeholder,
#password::placeholder,
#code::placeholder {
  color: rgba(101,118,129,.76) !important;
  opacity: 1 !important;
}
#login_button_label {
  background: rgba(8,82,130,.085) !important;
  color: #085282 !important;
  border: 1px solid rgba(8,82,130,.18) !important;
  box-shadow: none !important;
  height: 50px !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#login_button_label:hover {
  background: rgba(8,82,130,.13) !important;
  color: #073f60 !important;
  box-shadow: 0 10px 22px rgba(8,82,130,.10) !important;
}
#password {
  padding-right: 58px !important;
}
#password_peek {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  line-height: 32px !important;
  right: 10px !important;
  font-size: 15px !important;
  color: rgba(64,79,92,.80) !important;
  border-radius: 10px !important;
}
#password_peek:hover,
#password_peek:focus-visible {
  background: rgba(8,82,130,.095) !important;
  color: rgba(35,31,32,.95) !important;
}
#login_box:has(#code) h1 {
  margin-bottom: 12px !important;
}
#login_box:has(#code) h1 span {
  font-size: 0 !important;
}
#login_box:has(#code) h1:before {
  content: "Verify your identity";
  display: block;
  color: var(--plexus-ink);
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -.045em;
  font-weight: 800;
}
#login_box:has(#code) h1:after {
  content: "Enter the 6-digit code from your authenticator app.";
  display: block;
  max-width: 310px;
  margin: 10px auto 0;
  color: rgba(101,118,129,.88);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
  font-weight: 400;
}
#login_box:has(#code) #logo {
  margin-bottom: 26px !important;
}
#login_box:has(#code) #login_code_field,
#login_box:has(#code) #login_code {
  margin-top: 12px !important;
  margin-bottom: 18px !important;
}
#code {
  height: 58px !important;
  min-height: 58px !important;
  line-height: 58px !important;
  font-size: 23px !important;
  letter-spacing: .30em !important;
  padding-left: calc(15px + .30em) !important;
  font-variant-numeric: tabular-nums !important;
  background:
    linear-gradient(#f9fbfd,#f9fbfd) padding-box,
    repeating-linear-gradient(90deg, rgba(8,82,130,.18) 0 1px, transparent 1px calc(16.66%)) border-box !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 10px 24px rgba(8,82,130,.06) !important;
}
#code:focus {
  background:
    linear-gradient(#fff,#fff) padding-box,
    repeating-linear-gradient(90deg, rgba(8,82,130,.32) 0 1px, transparent 1px calc(16.66%)) border-box !important;
}
#buttons {
  margin-top: 0 !important;
}
@media (max-width:640px) {
  #login_box_bg { padding: 32px 28px 30px !important; }
  #login_box:has(#code) h1:before { font-size: 29px !important; }
  #login_box:has(#code) h1:after { font-size: 13px !important; }
  .or-text { min-width: 132px; }
}
/* END PLEXUS LOGIN DESIGN REFINEMENT */

/* PLEXUS LOGIN CLEANUP - 2026-05-06 v5
   Removes the card accent line and 2FA helper sentence per Cory request.
*/
#login_box_bg:before {
  content: none !important;
  display: none !important;
}
#login_box:has(#code) h1:after {
  content: none !important;
  display: none !important;
}
/* END PLEXUS LOGIN CLEANUP */

/* PLEXUS LOGIN PRECISION POLISH - 2026-05-06 v6
   Optical centering for password visibility icon and equal modern 2FA action buttons.
   CSS-only; preserves PBXware form fields/actions.
*/
#login_password_field.ui.input,
#login_password_field {
  position: relative !important;
  display: block !important;
}
#password {
  height: 52px !important;
  min-height: 52px !important;
  line-height: 52px !important;
  padding-right: 60px !important;
}
#password_peek,
#login_password_field.ui.input > #password_peek.icon,
#login_password_field.ui.input > i#password_peek.icon {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  bottom: auto !important;
  left: auto !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  color: rgba(64,79,92,.78) !important;
  border-radius: 11px !important;
  cursor: pointer !important;
}
#password_peek:before,
#login_password_field.ui.input > #password_peek.icon:before,
#login_password_field.ui.input > i#password_peek.icon:before {
  display: block !important;
  width: 1em !important;
  height: 1em !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  transform: translateY(0) !important;
}
#password_peek:hover,
#password_peek:focus-visible {
  background: rgba(8,82,130,.095) !important;
  color: rgba(35,31,32,.94) !important;
}
#buttons {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  margin: 0 !important;
}
#buttons > *,
#buttons a,
#buttons #back_button_link,
#buttons #back_button,
#buttons input[type="submit"] {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}
#buttons #back_button_label,
#buttons #login_button_label,
#buttons input[type="submit"],
#back_button_label {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 16px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
#buttons #back_button_label,
#back_button_label {
  background: rgba(8,82,130,.075) !important;
  border: 1px solid rgba(8,82,130,.14) !important;
  color: rgba(35,31,32,.82) !important;
  box-shadow: none !important;
}
#buttons input[type="submit"] {
  background: #0a649b !important;
  border: 1px solid #0a649b !important;
  color: #fff !important;
  box-shadow: 0 16px 28px rgba(10,100,155,.20) !important;
  text-align: center !important;
  cursor: pointer !important;
}
#buttons #back_button_label:hover,
#back_button_label:hover {
  background: rgba(8,82,130,.13) !important;
  color: #073f60 !important;
}
#buttons input[type="submit"]:hover {
  background: #085282 !important;
  border-color: #085282 !important;
}
/* END PLEXUS LOGIN PRECISION POLISH */

/* PLEXUS LOGIN COLOR LOGO FIX - 2026-05-06 v7
   Branding page uses white master logo for internal dark sidebar; login card needs color logo.
*/
#logo {
  background: url('/branding/v1648658544/plexus-login-logo-color.png') center center / contain no-repeat !important;
}
/* END PLEXUS LOGIN COLOR LOGO FIX */

/* PLEXUS LOGIN DEV BACKGROUND MATCH - 2026-05-06 v8
   Match dev.plexustechnology.com background tonality: same base navy,
   same centered soft glow/overlay treatment, without touching PBXware auth. */
html {
  background: #080d14 !important;
}
body {
  background-color: #073f60 !important;
  background-image: url('/branding/v1648658544/login-plexman-bg-20260505.png') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle,
      rgba(255,255,255,.30) 0%,
      rgba(255,255,255,.16) 25%,
      rgba(6,63,97,.10) 58%,
      rgba(3,38,59,.22) 100%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
}
body::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(496px, 72vw);
  height: min(364px, 64vh);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle at 50% 44%,
    rgba(255,255,255,.58) 0%,
    rgba(255,255,255,.30) 35%,
    rgba(255,255,255,.10) 58%,
    rgba(255,255,255,0) 74%);
}
form {
  position: relative !important;
  z-index: 2 !important;
}
#login_box_bg {
  z-index: 3 !important;
}
/* END PLEXUS LOGIN DEV BACKGROUND MATCH */

/* PLEXUS LOGIN REQUESTED POLISH - 2026-05-06 v9
   Center password visibility icon, remove hover fill, make 2FA Verify prominent blue,
   and enlarge Microsoft SSO text. */
.providers .btn-provider-login:after,
.providers .btn>span:last-child:after {
  font-size: 16px !important;
  letter-spacing: -.015em !important;
}
#password {
  padding-right: 62px !important;
}
#password_peek,
#login_password_field.ui.input > #password_peek.icon,
#login_password_field.ui.input > i#password_peek.icon {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: center !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: rgba(64,79,92,.78) !important;
}
#password_peek:before,
#login_password_field.ui.input > #password_peek.icon:before,
#login_password_field.ui.input > i#password_peek.icon:before {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 34px !important;
  text-align: center !important;
  transform: translate(0,0) !important;
}
#password_peek:hover,
#password_peek:focus,
#password_peek:focus-visible,
#login_password_field.ui.input > #password_peek.icon:hover,
#login_password_field.ui.input > i#password_peek.icon:hover {
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(35,31,32,.90) !important;
  outline: none !important;
}
#login_box:has(#code) #buttons #login_button_label,
#login_box:has(#code) #buttons input[type="submit"],
#buttons input[type="submit"].primary {
  background: #0a649b !important;
  border: 1px solid #0a649b !important;
  color: #fff !important;
  box-shadow: 0 16px 28px rgba(10,100,155,.20) !important;
}
#login_box:has(#code) #buttons #login_button_label:hover,
#login_box:has(#code) #buttons input[type="submit"]:hover,
#buttons input[type="submit"].primary:hover {
  background: #085282 !important;
  border-color: #085282 !important;
  color: #fff !important;
}
/* END PLEXUS LOGIN REQUESTED POLISH */

/* PLEXUS 2FA COPY CLEANUP - 2026-05-06 v10
   Replace vendor-specific mobile-app helper copy with neutral MFA wording and
   make helper text feel like static explanatory text, not a clickable control. */
#login_box:has(#code) h1:after {
  content: "Enter the verification code from your authenticator, password manager, or MFA device." !important;
  display: block !important;
  max-width: 340px !important;
  margin: 10px auto 0 !important;
  color: rgba(35,31,32,.72) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  cursor: default !important;
  pointer-events: none !important;
}
#login_box:has(#code) h1,
#login_box:has(#code) h1:before,
#login_box:has(#code) h1:after,
#login_box:has(#code) h1 span {
  cursor: default !important;
}
#login_box:has(#code) #login_code_field > label,
#login_box:has(#code) #login_code > label,
#login_box:has(#code) .field > label,
#login_box:has(#code) .description,
#login_box:has(#code) .help,
#login_box:has(#code) .help_text,
#login_box:has(#code) .info,
#login_box:has(#code) p {
  cursor: default !important;
}
#login_box:has(#code) #login_code_field > label,
#login_box:has(#code) #login_code > label,
#login_box:has(#code) .field > label {
  display: none !important;
  cursor: default !important;
  pointer-events: none !important;
}
/* END PLEXUS 2FA COPY CLEANUP */

/* PLEXUS 2FA VENDOR COPY SUPPRESSION - 2026-05-06 v11
   Hide PBXware's original "mobile application" helper even when it is emitted
   as raw/nested text near the OTP input. Keep the input and action buttons intact. */
#login_box:has(#code) #login_code_field,
#login_box:has(#code) #login_code {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  cursor: default !important;
}
#login_box:has(#code) #login_code_field label,
#login_box:has(#code) #login_code label,
#login_box:has(#code) #login_code_field p,
#login_box:has(#code) #login_code p,
#login_box:has(#code) #login_code_field .description,
#login_box:has(#code) #login_code .description,
#login_box:has(#code) #login_code_field .help,
#login_box:has(#code) #login_code .help,
#login_box:has(#code) #login_code_field .help_text,
#login_box:has(#code) #login_code .help_text,
#login_box:has(#code) #login_code_field .info,
#login_box:has(#code) #login_code .info,
#login_box:has(#code) #login_code_field .ui.label,
#login_box:has(#code) #login_code .ui.label {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  cursor: default !important;
}
#login_box:has(#code) #login_code_field input,
#login_box:has(#code) #login_code input,
#login_box:has(#code) #login_code_field #code,
#login_box:has(#code) #login_code #code,
#login_box:has(#code) #login_code_field .input,
#login_box:has(#code) #login_code .input,
#login_box:has(#code) #login_code_field i,
#login_box:has(#code) #login_code i,
#login_box:has(#code) #login_code_field svg,
#login_box:has(#code) #login_code svg {
  font-size: initial !important;
  line-height: normal !important;
  color: initial;
  visibility: visible !important;
}
#login_box:has(#code) #code {
  color: var(--plexus-ink) !important;
  font-size: 23px !important;
  line-height: 58px !important;
}
/* END PLEXUS 2FA VENDOR COPY SUPPRESSION */

/* PLEXUS 2FA MODERN SPACING + PLACEHOLDER - 2026-05-06 v12
   Tighten 2FA vertical rhythm and add a refined placeholder-style prompt inside
   the verification-code input without changing PBXware auth/PHP. */
#login_box:has(#code) #logo {
  margin-bottom: 22px !important;
}
#login_box:has(#code) h1 {
  margin-bottom: 0 !important;
}
#login_box:has(#code) h1:before {
  font-size: 33px !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
}
#login_box:has(#code) h1:after {
  max-width: 350px !important;
  margin: 9px auto 0 !important;
  font-size: 14.5px !important;
  line-height: 1.42 !important;
  color: rgba(35,31,32,.70) !important;
}
#login_box:has(#code) #login_code_field,
#login_box:has(#code) #login_code {
  position: relative !important;
  width: 100% !important;
  margin-top: 24px !important;
  margin-bottom: 18px !important;
}
#login_box:has(#code) #login_code_field:before,
#login_box:has(#code) #login_code:before {
  content: "Verification code" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 3 !important;
  color: rgba(101,118,129,.54) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  transition: opacity .14s ease, transform .14s ease !important;
}
#login_box:has(#code) #login_code_field:has(#code:focus):before,
#login_box:has(#code) #login_code:has(#code:focus):before,
#login_box:has(#code) #login_code_field:has(#code:not(:placeholder-shown)):before,
#login_box:has(#code) #login_code:has(#code:not(:placeholder-shown)):before {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(.98) !important;
}
#login_box:has(#code) #code {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 60px !important;
  min-height: 60px !important;
  line-height: 60px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(8,82,130,.16) !important;
  background: linear-gradient(#fbfdff,#f8fbfd) padding-box !important;
  color: var(--plexus-ink) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: .32em !important;
  text-align: center !important;
  padding: 0 22px 0 calc(22px + .32em) !important;
  font-variant-numeric: tabular-nums !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80), 0 12px 26px rgba(8,82,130,.075) !important;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}
#login_box:has(#code) #code:focus {
  border-color: rgba(8,82,130,.42) !important;
  background: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.90), 0 0 0 4px rgba(8,82,130,.10), 0 14px 30px rgba(8,82,130,.10) !important;
}
#login_box:has(#code) #buttons {
  margin-top: 2px !important;
  gap: 12px !important;
}
#login_box:has(#code) #buttons #back_button_label,
#login_box:has(#code) #buttons #login_button_label,
#login_box:has(#code) #buttons input[type="submit"] {
  height: 54px !important;
  min-height: 54px !important;
  border-radius: 17px !important;
}
@media (max-width:640px) {
  #login_box:has(#code) #logo { margin-bottom: 19px !important; }
  #login_box:has(#code) h1:before { font-size: 30px !important; }
  #login_box:has(#code) h1:after { font-size: 13.5px !important; }
  #login_box:has(#code) #login_code_field,
  #login_box:has(#code) #login_code { margin-top: 20px !important; }
}
/* END PLEXUS 2FA MODERN SPACING + PLACEHOLDER */

/* PLEXUS 2FA PLACEHOLDER VISIBILITY FIX - 2026-05-06 v13
   PBXware does not reliably provide a placeholder attribute on the OTP field, so
   render a visible CSS placeholder overlay and hide it only while the code field is focused. */
#login_box:has(#code) #login_code_field:before,
#login_box:has(#code) #login_code:before {
  content: none !important;
  display: none !important;
}
#login_box:has(#code) #login_code_field:after,
#login_box:has(#code) #login_code:after {
  content: "Enter verification code" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 50 !important;
  color: rgba(84,101,114,.66) !important;
  font-size: 15.5px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  letter-spacing: .005em !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  text-align: center !important;
  opacity: 1 !important;
}
#login_box:has(#code) #login_code_field:has(#code:focus):after,
#login_box:has(#code) #login_code:has(#code:focus):after {
  opacity: 0 !important;
}
#login_box:has(#code) #login_code_field .input,
#login_box:has(#code) #login_code .input {
  position: relative !important;
  z-index: 1 !important;
}
/* END PLEXUS 2FA PLACEHOLDER VISIBILITY FIX */

/* PLEXUS 2FA OTP SLOT POLISH - 2026-05-06 v14
   Remove redundant text placeholder/label and use six clean OTP slots instead. */
#login_box:has(#code) #login_code_field:before,
#login_box:has(#code) #login_code:before,
#login_box:has(#code) #login_code_field:after,
#login_box:has(#code) #login_code:after {
  content: none !important;
  display: none !important;
}
#login_box:has(#code) #login_code_field,
#login_box:has(#code) #login_code {
  margin-top: 22px !important;
  margin-bottom: 20px !important;
}
#login_box:has(#code) #code {
  height: 62px !important;
  min-height: 62px !important;
  line-height: 62px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(8,82,130,.15) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(8,82,130,.34) 0 2px, transparent 2.5px) 14.2% 50% / 16.66% 100% no-repeat,
    radial-gradient(circle at 50% 50%, rgba(8,82,130,.34) 0 2px, transparent 2.5px) 30.8% 50% / 16.66% 100% no-repeat,
    radial-gradient(circle at 50% 50%, rgba(8,82,130,.34) 0 2px, transparent 2.5px) 47.4% 50% / 16.66% 100% no-repeat,
    radial-gradient(circle at 50% 50%, rgba(8,82,130,.34) 0 2px, transparent 2.5px) 64.0% 50% / 16.66% 100% no-repeat,
    radial-gradient(circle at 50% 50%, rgba(8,82,130,.34) 0 2px, transparent 2.5px) 80.6% 50% / 16.66% 100% no-repeat,
    radial-gradient(circle at 50% 50%, rgba(8,82,130,.34) 0 2px, transparent 2.5px) 97.2% 50% / 16.66% 100% no-repeat,
    linear-gradient(#fbfdff,#f8fbfd) padding-box !important;
  color: var(--plexus-ink) !important;
  caret-color: #085282 !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  letter-spacing: .42em !important;
  text-align: center !important;
  padding: 0 16px 0 calc(16px + .42em) !important;
  font-variant-numeric: tabular-nums !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 12px 26px rgba(8,82,130,.07) !important;
}
#login_box:has(#code) #code:focus {
  background:
    linear-gradient(#fff,#fff) padding-box !important;
  border-color: rgba(8,82,130,.44) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 0 0 4px rgba(8,82,130,.10), 0 14px 30px rgba(8,82,130,.10) !important;
}
#login_box:has(#code) #buttons {
  margin-top: 0 !important;
}
/* END PLEXUS 2FA OTP SLOT POLISH */

/* PLEXUS 2FA MODERN MFA LAYOUT - 2026-05-06 v15
   Modern MFA best-practice polish: tighter vertical rhythm, compact OTP zone,
   six visual code cells, and action buttons close enough to feel connected. */
#login_box:has(#code) #logo {
  margin-bottom: 20px !important;
}
#login_box:has(#code) h1 {
  margin-bottom: 0 !important;
}
#login_box:has(#code) h1:before {
  font-size: 32px !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
}
#login_box:has(#code) h1:after {
  max-width: 330px !important;
  margin: 8px auto 0 !important;
  font-size: 14px !important;
  line-height: 1.38 !important;
  color: rgba(35,31,32,.66) !important;
  font-weight: 500 !important;
}
#login_box:has(#code) #login_code_field,
#login_box:has(#code) #login_code {
  position: relative !important;
  width: min(100%, 336px) !important;
  margin: 18px auto 14px !important;
  padding: 0 !important;
  height: 58px !important;
  min-height: 58px !important;
  overflow: visible !important;
}
#login_box:has(#code) #login_code_field:before,
#login_box:has(#code) #login_code:before,
#login_box:has(#code) #login_code_field:after,
#login_box:has(#code) #login_code:after {
  content: none !important;
  display: none !important;
}
#login_box:has(#code) #login_code_field .input,
#login_box:has(#code) #login_code .input {
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
}
#login_box:has(#code) #code {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 58px !important;
  min-height: 58px !important;
  line-height: 58px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  background:
    linear-gradient(#ffffff,#ffffff) 0 0 / 46px 58px no-repeat,
    linear-gradient(#ffffff,#ffffff) 58px 0 / 46px 58px no-repeat,
    linear-gradient(#ffffff,#ffffff) 116px 0 / 46px 58px no-repeat,
    linear-gradient(#ffffff,#ffffff) 174px 0 / 46px 58px no-repeat,
    linear-gradient(#ffffff,#ffffff) 232px 0 / 46px 58px no-repeat,
    linear-gradient(#ffffff,#ffffff) 290px 0 / 46px 58px no-repeat !important;
  box-shadow:
    0 0 0 1px rgba(8,82,130,.14) inset,
    58px 0 0 -57px rgba(8,82,130,.14) inset,
    116px 0 0 -115px rgba(8,82,130,.14) inset,
    174px 0 0 -173px rgba(8,82,130,.14) inset,
    232px 0 0 -231px rgba(8,82,130,.14) inset,
    290px 0 0 -289px rgba(8,82,130,.14) inset,
    0 12px 24px rgba(8,82,130,.07) !important;
  color: var(--plexus-ink) !important;
  caret-color: #085282 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: 32px !important;
  text-align: left !important;
  padding: 0 0 0 17px !important;
  font-variant-numeric: tabular-nums !important;
  font-family: var(--plexus-font), ui-monospace, SFMono-Regular, Menlo, monospace !important;
  transition: box-shadow .16s ease, filter .16s ease !important;
  clip-path: inset(0 round 16px) !important;
}
#login_box:has(#code) #code:focus {
  background:
    linear-gradient(#ffffff,#ffffff) 0 0 / 46px 58px no-repeat,
    linear-gradient(#ffffff,#ffffff) 58px 0 / 46px 58px no-repeat,
    linear-gradient(#ffffff,#ffffff) 116px 0 / 46px 58px no-repeat,
    linear-gradient(#ffffff,#ffffff) 174px 0 / 46px 58px no-repeat,
    linear-gradient(#ffffff,#ffffff) 232px 0 / 46px 58px no-repeat,
    linear-gradient(#ffffff,#ffffff) 290px 0 / 46px 58px no-repeat !important;
  box-shadow:
    0 0 0 1px rgba(8,82,130,.34) inset,
    0 0 0 4px rgba(8,82,130,.10),
    0 14px 28px rgba(8,82,130,.10) !important;
}
#login_box:has(#code) #buttons {
  width: min(100%, 336px) !important;
  margin: 0 auto !important;
  gap: 12px !important;
}
#login_box:has(#code) #buttons > *,
#login_box:has(#code) #buttons a,
#login_box:has(#code) #buttons #back_button_link,
#login_box:has(#code) #buttons #back_button,
#login_box:has(#code) #buttons input[type="submit"] {
  height: 52px !important;
  min-height: 52px !important;
}
#login_box:has(#code) #buttons #back_button_label,
#login_box:has(#code) #buttons #login_button_label,
#login_box:has(#code) #buttons input[type="submit"] {
  height: 52px !important;
  min-height: 52px !important;
  border-radius: 16px !important;
}
@media (max-width:640px) {
  #login_box:has(#code) #login_code_field,
  #login_box:has(#code) #login_code,
  #login_box:has(#code) #buttons { width: min(100%, 318px) !important; }
  #login_box:has(#code) #code {
    background:
      linear-gradient(#ffffff,#ffffff) 0 0 / 43px 56px no-repeat,
      linear-gradient(#ffffff,#ffffff) 55px 0 / 43px 56px no-repeat,
      linear-gradient(#ffffff,#ffffff) 110px 0 / 43px 56px no-repeat,
      linear-gradient(#ffffff,#ffffff) 165px 0 / 43px 56px no-repeat,
      linear-gradient(#ffffff,#ffffff) 220px 0 / 43px 56px no-repeat,
      linear-gradient(#ffffff,#ffffff) 275px 0 / 43px 56px no-repeat !important;
    letter-spacing: 29px !important;
    padding-left: 16px !important;
  }
}
/* END PLEXUS 2FA MODERN MFA LAYOUT */

/* PLEXUS 2FA DUPLICATE LOGO GUARD - 2026-05-06 v16
   Some representative/live 2FA DOMs can render a second logo asset. Keep the
   primary #logo and hide extra logo images/links inside the 2FA card. */
#login_box:has(#code) #logo ~ #logo,
#login_box:has(#code) img[src*="logo"],
#login_box:has(#code) img[src*="plexus"],
#login_box:has(#code) .logo:not(#logo),
#login_box:has(#code) a.logo,
#login_box:has(#code) .branding-logo {
  display: none !important;
  visibility: hidden !important;
}
#login_box:has(#code) #logo {
  display: block !important;
  visibility: visible !important;
}
/* END PLEXUS 2FA DUPLICATE LOGO GUARD */

/* PLEXUS 2FA SPACING TIGHTEN - 2026-05-06 v17
   Specifically closes the visual gap above the OTP input. */
#login_box:has(#code) h1:after {
  margin: 6px auto 0 !important;
  max-width: 326px !important;
  line-height: 1.34 !important;
}
#login_box:has(#code) #login_code_field,
#login_box:has(#code) #login_code {
  margin-top: 8px !important;
  margin-bottom: 12px !important;
}
#login_box:has(#code) #buttons {
  margin-top: 0 !important;
}
/* END PLEXUS 2FA SPACING TIGHTEN */

/* PLEXUS 2FA COMPACT MFA REDESIGN - 2026-05-06 v18
   Rebalances the 2FA card: shorter helper copy, less vertical whitespace,
   and a compact six-cell OTP group instead of a wide field. */
#login_box_bg:has(#code),
#login_box_bg:has(#login_code_field) {
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}
#login_box:has(#code) #logo {
  margin-bottom: 16px !important;
}
#login_box:has(#code) h1:before {
  font-size: 30px !important;
  line-height: 1.02 !important;
  letter-spacing: -.042em !important;
}
#login_box:has(#code) h1:after {
  content: "Use the 6-digit code from your authenticator or password manager." !important;
  max-width: 305px !important;
  margin: 6px auto 0 !important;
  font-size: 13.5px !important;
  line-height: 1.32 !important;
  color: rgba(35,31,32,.62) !important;
  font-weight: 500 !important;
}
#login_box:has(#code) #login_code_field,
#login_box:has(#code) #login_code {
  position: relative !important;
  width: 316px !important;
  max-width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  margin: 12px auto 10px !important;
  padding: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
#login_box:has(#code) #login_code_field:before,
#login_box:has(#code) #login_code:before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(#fff,#fff) 0 0 / 44px 54px no-repeat,
    linear-gradient(#fff,#fff) 54px 0 / 44px 54px no-repeat,
    linear-gradient(#fff,#fff) 108px 0 / 44px 54px no-repeat,
    linear-gradient(#fff,#fff) 162px 0 / 44px 54px no-repeat,
    linear-gradient(#fff,#fff) 216px 0 / 44px 54px no-repeat,
    linear-gradient(#fff,#fff) 270px 0 / 44px 54px no-repeat !important;
  filter: drop-shadow(0 10px 18px rgba(8,82,130,.06)) !important;
}
#login_box:has(#code) #login_code_field:after,
#login_box:has(#code) #login_code:after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(rgba(8,82,130,.18),rgba(8,82,130,.18)) 0 0 / 44px 54px no-repeat,
    linear-gradient(rgba(8,82,130,.18),rgba(8,82,130,.18)) 54px 0 / 44px 54px no-repeat,
    linear-gradient(rgba(8,82,130,.18),rgba(8,82,130,.18)) 108px 0 / 44px 54px no-repeat,
    linear-gradient(rgba(8,82,130,.18),rgba(8,82,130,.18)) 162px 0 / 44px 54px no-repeat,
    linear-gradient(rgba(8,82,130,.18),rgba(8,82,130,.18)) 216px 0 / 44px 54px no-repeat,
    linear-gradient(rgba(8,82,130,.18),rgba(8,82,130,.18)) 270px 0 / 44px 54px no-repeat !important;
  clip-path: inset(0 round 14px) !important;
  opacity: .72 !important;
  mask:
    linear-gradient(#000 0 0) 0 0 / 44px 54px no-repeat,
    linear-gradient(#000 0 0) 54px 0 / 44px 54px no-repeat,
    linear-gradient(#000 0 0) 108px 0 / 44px 54px no-repeat,
    linear-gradient(#000 0 0) 162px 0 / 44px 54px no-repeat,
    linear-gradient(#000 0 0) 216px 0 / 44px 54px no-repeat,
    linear-gradient(#000 0 0) 270px 0 / 44px 54px no-repeat !important;
  -webkit-mask:
    linear-gradient(#000 0 0) 0 0 / 44px 54px no-repeat,
    linear-gradient(#000 0 0) 54px 0 / 44px 54px no-repeat,
    linear-gradient(#000 0 0) 108px 0 / 44px 54px no-repeat,
    linear-gradient(#000 0 0) 162px 0 / 44px 54px no-repeat,
    linear-gradient(#000 0 0) 216px 0 / 44px 54px no-repeat,
    linear-gradient(#000 0 0) 270px 0 / 44px 54px no-repeat !important;
}
#login_box:has(#code) #login_code_field .input,
#login_box:has(#code) #login_code .input {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  background: transparent !important;
}
#login_box:has(#code) #code {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  line-height: 54px !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--plexus-ink) !important;
  caret-color: #085282 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: 30px !important;
  text-align: left !important;
  padding: 0 0 0 15px !important;
  font-variant-numeric: tabular-nums !important;
  font-family: var(--plexus-font), ui-monospace, SFMono-Regular, Menlo, monospace !important;
}
#login_box:has(#code) #login_code_field:has(#code:focus):after,
#login_box:has(#code) #login_code:has(#code:focus):after {
  opacity: 1 !important;
  background:
    linear-gradient(rgba(8,82,130,.34),rgba(8,82,130,.34)) 0 0 / 44px 54px no-repeat,
    linear-gradient(rgba(8,82,130,.34),rgba(8,82,130,.34)) 54px 0 / 44px 54px no-repeat,
    linear-gradient(rgba(8,82,130,.34),rgba(8,82,130,.34)) 108px 0 / 44px 54px no-repeat,
    linear-gradient(rgba(8,82,130,.34),rgba(8,82,130,.34)) 162px 0 / 44px 54px no-repeat,
    linear-gradient(rgba(8,82,130,.34),rgba(8,82,130,.34)) 216px 0 / 44px 54px no-repeat,
    linear-gradient(rgba(8,82,130,.34),rgba(8,82,130,.34)) 270px 0 / 44px 54px no-repeat !important;
}
#login_box:has(#code) #buttons {
  width: 316px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  gap: 10px !important;
}
#login_box:has(#code) #buttons > *,
#login_box:has(#code) #buttons a,
#login_box:has(#code) #buttons #back_button_link,
#login_box:has(#code) #buttons #back_button,
#login_box:has(#code) #buttons input[type="submit"],
#login_box:has(#code) #buttons #back_button_label,
#login_box:has(#code) #buttons #login_button_label {
  height: 50px !important;
  min-height: 50px !important;
  border-radius: 15px !important;
}
@media (max-width:640px) {
  #login_box_bg:has(#code),
  #login_box_bg:has(#login_code_field) { padding-top: 30px !important; padding-bottom: 30px !important; }
  #login_box:has(#code) #login_code_field,
  #login_box:has(#code) #login_code,
  #login_box:has(#code) #buttons { width: 306px !important; }
  #login_box:has(#code) h1:before { font-size: 29px !important; }
}
/* END PLEXUS 2FA COMPACT MFA REDESIGN */

/* PLEXUS 2FA FINAL BALANCE - 2026-05-06 v19
   Corrects v18 over-tightening: keep compact MFA layout, but restore clean
   breathing room and strengthen the six OTP cells. */
#login_box:has(#code) h1:after {
  content: "Use the 6-digit code from your authenticator or password manager." !important;
  max-width: 312px !important;
  margin: 7px auto 0 !important;
  font-size: 13.5px !important;
  line-height: 1.34 !important;
  color: rgba(35,31,32,.64) !important;
}
#login_box:has(#code) #login_code_field,
#login_box:has(#code) #login_code {
  margin-top: 16px !important;
  margin-bottom: 11px !important;
}
#login_box:has(#code) #login_code_field:before,
#login_box:has(#code) #login_code:before {
  background:
    linear-gradient(#fff,#fff) 0 0 / 44px 54px no-repeat,
    linear-gradient(#fff,#fff) 54px 0 / 44px 54px no-repeat,
    linear-gradient(#fff,#fff) 108px 0 / 44px 54px no-repeat,
    linear-gradient(#fff,#fff) 162px 0 / 44px 54px no-repeat,
    linear-gradient(#fff,#fff) 216px 0 / 44px 54px no-repeat,
    linear-gradient(#fff,#fff) 270px 0 / 44px 54px no-repeat !important;
  filter: drop-shadow(0 10px 18px rgba(8,82,130,.08)) !important;
}
#login_box:has(#code) #login_code_field:after,
#login_box:has(#code) #login_code:after {
  opacity: .92 !important;
  background:
    linear-gradient(rgba(8,82,130,.28),rgba(8,82,130,.28)) 0 0 / 44px 54px no-repeat,
    linear-gradient(rgba(8,82,130,.28),rgba(8,82,130,.28)) 54px 0 / 44px 54px no-repeat,
    linear-gradient(rgba(8,82,130,.28),rgba(8,82,130,.28)) 108px 0 / 44px 54px no-repeat,
    linear-gradient(rgba(8,82,130,.28),rgba(8,82,130,.28)) 162px 0 / 44px 54px no-repeat,
    linear-gradient(rgba(8,82,130,.28),rgba(8,82,130,.28)) 216px 0 / 44px 54px no-repeat,
    linear-gradient(rgba(8,82,130,.28),rgba(8,82,130,.28)) 270px 0 / 44px 54px no-repeat !important;
}
#login_box:has(#code) #buttons {
  margin-top: 0 !important;
}
/* END PLEXUS 2FA FINAL BALANCE */

/* PLEXUS 2FA DASH INPUT FINAL - 2026-05-06 v20
   Replace fragile six-cell rendering with a robust modern single OTP input using
   six centered dash markers. */
#login_box:has(#code) h1:after {
  content: "Use the 6-digit code from your authenticator or password manager." !important;
  max-width: 314px !important;
  margin: 7px auto 0 !important;
  font-size: 13.5px !important;
  line-height: 1.34 !important;
  color: rgba(35,31,32,.64) !important;
}
#login_box:has(#code) #login_code_field,
#login_box:has(#code) #login_code {
  position: relative !important;
  width: 316px !important;
  max-width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  margin: 16px auto 12px !important;
  padding: 0 !important;
  overflow: visible !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
#login_box:has(#code) #login_code_field:before,
#login_box:has(#code) #login_code:before,
#login_box:has(#code) #login_code_field:after,
#login_box:has(#code) #login_code:after {
  content: none !important;
  display: none !important;
}
#login_box:has(#code) #login_code_field .input,
#login_box:has(#code) #login_code .input {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  display: block !important;
  background: transparent !important;
}
#login_box:has(#code) #code {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 54px !important;
  min-height: 54px !important;
  line-height: 54px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(8,82,130,.16) !important;
  outline: none !important;
  background:
    linear-gradient(rgba(8,82,130,.34),rgba(8,82,130,.34)) 54px 34px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.34),rgba(8,82,130,.34)) 91px 34px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.34),rgba(8,82,130,.34)) 128px 34px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.34),rgba(8,82,130,.34)) 165px 34px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.34),rgba(8,82,130,.34)) 202px 34px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.34),rgba(8,82,130,.34)) 239px 34px / 20px 2px no-repeat,
    linear-gradient(#fff,#fff) padding-box !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 10px 22px rgba(8,82,130,.07) !important;
  color: var(--plexus-ink) !important;
  caret-color: #085282 !important;
  font-size: 23px !important;
  font-weight: 800 !important;
  letter-spacing: 18px !important;
  text-align: center !important;
  padding: 0 0 0 18px !important;
  font-variant-numeric: tabular-nums !important;
  font-family: var(--plexus-font), ui-monospace, SFMono-Regular, Menlo, monospace !important;
}
#login_box:has(#code) #code:focus {
  border-color: rgba(8,82,130,.42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 0 0 4px rgba(8,82,130,.10), 0 12px 26px rgba(8,82,130,.10) !important;
}
#login_box:has(#code) #buttons {
  width: 316px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  gap: 10px !important;
}
#login_box:has(#code) #buttons > *,
#login_box:has(#code) #buttons a,
#login_box:has(#code) #buttons #back_button_link,
#login_box:has(#code) #buttons #back_button,
#login_box:has(#code) #buttons input[type="submit"],
#login_box:has(#code) #buttons #back_button_label,
#login_box:has(#code) #buttons #login_button_label {
  height: 50px !important;
  min-height: 50px !important;
  border-radius: 15px !important;
}
/* END PLEXUS 2FA DASH INPUT FINAL */


/* PLEXUS 2FA FIELD GROUP CLEANUP - 2026-05-06 v21
   Cory feedback: close the helper-to-code gap and make the focused code field
   feel stable/clean instead of visually expanding or creating broken spacing. */
#login_box:has(#code) h1:after {
  margin: 4px auto 0 !important;
  line-height: 1.26 !important;
}
#login_box:has(#code) #login_code_field,
#login_box:has(#code) #login_code {
  height: 52px !important;
  min-height: 52px !important;
  margin: 8px auto 10px !important;
}
#login_box:has(#code) #login_code_field .input,
#login_box:has(#code) #login_code .input {
  height: 52px !important;
  min-height: 52px !important;
}
#login_box:has(#code) #code {
  height: 52px !important;
  min-height: 52px !important;
  line-height: 52px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(rgba(8,82,130,.30),rgba(8,82,130,.30)) 54px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.30),rgba(8,82,130,.30)) 91px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.30),rgba(8,82,130,.30)) 128px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.30),rgba(8,82,130,.30)) 165px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.30),rgba(8,82,130,.30)) 202px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.30),rgba(8,82,130,.30)) 239px 32px / 20px 2px no-repeat,
    linear-gradient(#fff,#fff) padding-box !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 8px 18px rgba(8,82,130,.055) !important;
}
#login_box:has(#code) #code:focus,
#login_box:has(#code) #code:focus-visible {
  outline: none !important;
  border-color: rgba(8,82,130,.46) !important;
  /* Same box size and no fat halo: focus should read active, not shift the layout. */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 8px 18px rgba(8,82,130,.075) !important;
  background:
    linear-gradient(rgba(8,82,130,.38),rgba(8,82,130,.38)) 54px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.38),rgba(8,82,130,.38)) 91px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.38),rgba(8,82,130,.38)) 128px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.38),rgba(8,82,130,.38)) 165px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.38),rgba(8,82,130,.38)) 202px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.38),rgba(8,82,130,.38)) 239px 32px / 20px 2px no-repeat,
    linear-gradient(#fff,#fff) padding-box !important;
}
#login_box:has(#code) #buttons {
  margin-top: 0 !important;
}
/* END PLEXUS 2FA FIELD GROUP CLEANUP */



/* PLEXUS 2FA AUTOFILL CLEANUP - 2026-05-06 v22
   Hide browser/password-manager affordances that crowd the OTP field and keep
   dash markers visible in focused empty state. */
#login_box:has(#code) #code {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-clip: padding-box !important;
  padding-right: 0 !important;
}
#login_box:has(#code) #code::-webkit-credentials-auto-fill-button,
#login_box:has(#code) #code::-webkit-contacts-auto-fill-button,
#login_box:has(#code) #code::-webkit-caps-lock-indicator,
#login_box:has(#code) #code::-ms-reveal,
#login_box:has(#code) #code::-ms-clear {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
#login_box:has(#code) #login_code_field iframe,
#login_box:has(#code) #login_code iframe,
#login_box:has(#code) #login_code_field [class*="1password" i],
#login_box:has(#code) #login_code [class*="1password" i],
#login_box:has(#code) #login_code_field [id*="1password" i],
#login_box:has(#code) #login_code [id*="1password" i],
#login_box:has(#code) #login_code_field [class*="lastpass" i],
#login_box:has(#code) #login_code [class*="lastpass" i],
#login_box:has(#code) #login_code_field [id*="lastpass" i],
#login_box:has(#code) #login_code [id*="lastpass" i],
#login_box:has(#code) #login_code_field [class*="bitwarden" i],
#login_box:has(#code) #login_code [class*="bitwarden" i],
#login_box:has(#code) #login_code_field [id*="bitwarden" i],
#login_box:has(#code) #login_code [id*="bitwarden" i],
#login_box:has(#code) #login_code_field [class*="dashlane" i],
#login_box:has(#code) #login_code [class*="dashlane" i],
#login_box:has(#code) #login_code_field [id*="dashlane" i],
#login_box:has(#code) #login_code [id*="dashlane" i],
#login_box:has(#code) #login_code_field [class*="keeper" i],
#login_box:has(#code) #login_code [class*="keeper" i],
#login_box:has(#code) #login_code_field [id*="keeper" i],
#login_box:has(#code) #login_code [id*="keeper" i],
#login_box:has(#code) #login_code_field com-1password-button,
#login_box:has(#code) #login_code com-1password-button,
#login_box:has(#code) #login_code_field [data-lastpass-icon-root],
#login_box:has(#code) #login_code [data-lastpass-icon-root] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* If an extension injects an in-page menu, keep PBXware actions visually above it. */
#login_box:has(#code) #buttons {
  position: relative !important;
  z-index: 2147483647 !important;
}
/* END PLEXUS 2FA AUTOFILL CLEANUP */



/* PLEXUS 2FA FOCUS EMPTY CLEANUP - 2026-05-06 v23
   Cory feedback: once the OTP/password-manager field is clicked/focused, the
   decorative dash placeholders should disappear so the field reads as active. */
#login_box:has(#code) #code:focus,
#login_box:has(#code) #code:focus-visible {
  background: linear-gradient(#fff,#fff) padding-box !important;
}
/* Restore dash placeholders only while the field is not focused and empty. */
#login_box:has(#code) #code:not(:focus):placeholder-shown,
#login_box:has(#code) #code:not(:focus-visible):placeholder-shown {
  background:
    linear-gradient(rgba(8,82,130,.30),rgba(8,82,130,.30)) 54px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.30),rgba(8,82,130,.30)) 91px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.30),rgba(8,82,130,.30)) 128px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.30),rgba(8,82,130,.30)) 165px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.30),rgba(8,82,130,.30)) 202px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.30),rgba(8,82,130,.30)) 239px 32px / 20px 2px no-repeat,
    linear-gradient(#fff,#fff) padding-box !important;
}
/* END PLEXUS 2FA FOCUS EMPTY CLEANUP */



/* PLEXUS 2FA CLOSE HELPER GAP - 2026-05-06 v24
   Cory feedback: the vertical gap between the instruction copy and OTP input
   was still too tall. Pull the OTP field tight under the helper while keeping
   the button spacing stable and preserving the PBXware auth mechanics. */
#login_box:has(#code) h1:after {
  margin: 2px auto 0 !important;
  line-height: 1.22 !important;
}
#login_box:has(#code) #login_code_field,
#login_box:has(#code) #login_code {
  margin-top: 2px !important;
  margin-bottom: 10px !important;
}
#login_box:has(#code) #buttons {
  margin-top: 0 !important;
}
/* END PLEXUS 2FA CLOSE HELPER GAP */



/* PLEXUS 2FA REAL-DOM VERTICAL COMPACT - 2026-05-06 v25
   Cory's live screenshot showed the OTP group still rendered far below the
   helper text in the real PBXware 2FA DOM. Move the actual OTP/action group up
   visually while keeping the field-to-button relationship intact. */
#login_box:has(#code) #login_code_field,
#login_box:has(#code) #login_code {
  transform: translateY(-76px) !important;
}
#login_box:has(#code) #buttons {
  transform: translateY(-76px) !important;
  margin-bottom: -76px !important;
}
/* END PLEXUS 2FA REAL-DOM VERTICAL COMPACT */



/* PLEXUS 2FA CLEAN MODERN BALANCE - 2026-05-06 v26
   v25 over-corrected and let the OTP input crowd/overlap the helper text on the
   real PBXware 2FA page. Use a shorter one-line helper and a gentler upward
   shift so the form reads as a clean, modern grouped MFA control. */
#login_box:has(#code) h1:after {
  content: "Use your 6-digit authenticator code." !important;
  max-width: 340px !important;
  margin: 6px auto 0 !important;
  line-height: 1.28 !important;
  white-space: nowrap !important;
}
#login_box:has(#code) #login_code_field,
#login_box:has(#code) #login_code {
  transform: translateY(-46px) !important;
  margin-top: 18px !important;
  margin-bottom: 12px !important;
}
#login_box:has(#code) #buttons {
  transform: translateY(-46px) !important;
  margin-bottom: -46px !important;
}
/* END PLEXUS 2FA CLEAN MODERN BALANCE */



/* PLEXUS 2FA PREMIUM MFA POLISH - 2026-05-06 v27
   Final premium pass: keep the now-correct compact layout, but make the MFA
   control feel intentionally designed rather than plain. Avoid another large
   layout fight; refine copy, field, buttons, and spacing rhythm. */
#login_box:has(#code) h1:after {
  content: "Enter your 6-digit verification code." !important;
  max-width: 340px !important;
  margin: 7px auto 0 !important;
  line-height: 1.28 !important;
  white-space: nowrap !important;
  color: rgba(35,31,32,.60) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}
#login_box:has(#code) #login_code_field,
#login_box:has(#code) #login_code {
  transform: translateY(-42px) !important;
  width: 318px !important;
  height: 52px !important;
  min-height: 52px !important;
  margin-top: 22px !important;
  margin-bottom: 14px !important;
}
#login_box:has(#code) #login_code_field .input,
#login_box:has(#code) #login_code .input {
  height: 52px !important;
  min-height: 52px !important;
}
#login_box:has(#code) #code {
  height: 52px !important;
  min-height: 52px !important;
  line-height: 52px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(8,82,130,.18) !important;
  background:
    linear-gradient(rgba(8,82,130,.28),rgba(8,82,130,.28)) 55px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.28),rgba(8,82,130,.28)) 92px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.28),rgba(8,82,130,.28)) 129px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.28),rgba(8,82,130,.28)) 166px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.28),rgba(8,82,130,.28)) 203px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.28),rgba(8,82,130,.28)) 240px 32px / 20px 2px no-repeat,
    linear-gradient(180deg,#ffffff 0%,#fbfdff 100%) padding-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 22px rgba(8,82,130,.065) !important;
}
#login_box:has(#code) #code:focus,
#login_box:has(#code) #code:focus-visible {
  border-color: rgba(8,82,130,.44) !important;
  background: linear-gradient(180deg,#ffffff 0%,#fbfdff 100%) padding-box !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 0 0 3px rgba(8,82,130,.075),
    0 12px 26px rgba(8,82,130,.09) !important;
}
#login_box:has(#code) #buttons {
  transform: translateY(-42px) !important;
  width: 318px !important;
  gap: 10px !important;
  margin-bottom: -42px !important;
}
#login_box:has(#code) #buttons > *,
#login_box:has(#code) #buttons a,
#login_box:has(#code) #buttons #back_button_link,
#login_box:has(#code) #buttons #back_button,
#login_box:has(#code) #buttons input[type="submit"],
#login_box:has(#code) #buttons #back_button_label,
#login_box:has(#code) #buttons #login_button_label {
  height: 50px !important;
  min-height: 50px !important;
  border-radius: 15px !important;
}
#login_box:has(#code) #buttons #back_button_label,
#login_box:has(#code) #buttons #back_button,
#login_box:has(#code) #buttons #back_button_link {
  border: 1px solid rgba(8,82,130,.10) !important;
  background: rgba(8,82,130,.055) !important;
  color: rgba(35,31,32,.78) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78) !important;
}
#login_box:has(#code) #buttons input[type="submit"],
#login_box:has(#code) #buttons #login_button_label {
  background: linear-gradient(180deg,#0b70ad 0%,#085282 100%) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(8,82,130,.20), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
/* END PLEXUS 2FA PREMIUM MFA POLISH */



/* PLEXUS 2FA GAP MICRO-TUNE - 2026-05-06 v28
   Cory requested closing the gap between the instruction text and OTP/password
   field by 15px. Move the OTP field and button group upward together by exactly
   15px from v27 (-42px -> -57px) so field-to-button spacing is preserved. */
#login_box:has(#code) #login_code_field,
#login_box:has(#code) #login_code {
  transform: translateY(-57px) !important;
}
#login_box:has(#code) #buttons {
  transform: translateY(-57px) !important;
  margin-bottom: -57px !important;
}
/* END PLEXUS 2FA GAP MICRO-TUNE */



/* PLEXUS 2FA FIELD CENTERING - 2026-05-06 v29
   Cory requested the OTP/password field be centered vertically between the
   instruction text and the buttons. Keep the buttons in their v28 position and
   move only the field upward so the whitespace above and below the field reads
   balanced instead of button-crowded. */
#login_box:has(#code) #login_code_field,
#login_box:has(#code) #login_code {
  transform: translateY(-91px) !important;
}
#login_box:has(#code) #buttons {
  transform: translateY(-57px) !important;
  margin-bottom: -57px !important;
}
/* END PLEXUS 2FA FIELD CENTERING */



/* PLEXUS 2FA FIELD CENTERING CORRECTION - 2026-05-06 v30
   Cory's screenshot after v29 showed the OTP field too close to the instruction
   text and too far from the buttons. Move only the field down 20px from v29
   (-91px -> -71px) while leaving the buttons unchanged. */
#login_box:has(#code) #login_code_field,
#login_box:has(#code) #login_code {
  transform: translateY(-71px) !important;
}
#login_box:has(#code) #buttons {
  transform: translateY(-57px) !important;
  margin-bottom: -57px !important;
}
/* END PLEXUS 2FA FIELD CENTERING CORRECTION */

/* PLEXUS 2FA DASH FILLED CLEANUP - 2026-05-11 v25
   Cory feedback: keep the dash markers before OTP entry, but once a 6-digit
   code/password-manager value is present, do not let the decorative dashes
   reappear on blur. Focus stays clean as well. Presentation only. */
#login_box:has(#code) #code {
  background: linear-gradient(#fff,#fff) padding-box !important;
}
#login_box:has(#code) #code:focus,
#login_box:has(#code) #code:focus-visible,
#login_box:has(#code) #code:valid {
  background: linear-gradient(#fff,#fff) padding-box !important;
}
#login_box:has(#code) #code:not(:focus):not(:focus-visible):placeholder-shown,
#login_box:has(#code) #code:not(:focus):not(:focus-visible):not(:valid) {
  background:
    linear-gradient(rgba(8,82,130,.30),rgba(8,82,130,.30)) 54px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.30),rgba(8,82,130,.30)) 91px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.30),rgba(8,82,130,.30)) 128px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.30),rgba(8,82,130,.30)) 165px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.30),rgba(8,82,130,.30)) 202px 32px / 20px 2px no-repeat,
    linear-gradient(rgba(8,82,130,.30),rgba(8,82,130,.30)) 239px 32px / 20px 2px no-repeat,
    linear-gradient(#fff,#fff) padding-box !important;
}
/* END PLEXUS 2FA DASH FILLED CLEANUP */