/* ============================================================
   Layout7 — Prairie Paper (refined)
   Light rail, quiet top bar, LeftPane7 as the only visible menu
   ============================================================ */

html.layout7 { height: 100%; }

html.layout7,
.layout7-body {
	--l7-ink: #1c2b24;
	--l7-mute: #5c6f64;
	--l7-forest: #2a4a3a;
	--l7-line: #d8e2db;
	--l7-paper: #fbfcfb;
	--l7-panel: #ffffff;
	--l7-wash: #f0f4f1;
	--l7-copper: #b86b32;
	--l7-rail: 260px;
	--l7-nav-h: 44px;
	--l7-font: "Source Sans 3", "Segoe UI", Tahoma, Geneva, sans-serif;
	--l7-display: "Syne", "Source Sans 3", sans-serif;
	margin: 0;
	padding: 0;
	min-height: 100%;
	font-family: var(--l7-font);
	color: var(--l7-ink);
	background: var(--l7-wash);
}

.layout7-body > form#form1 {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.layout7-shell {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* ----- Banner header: let SetAs imagery breathe ----- */
.layout7-header {
	position: relative;
	flex-shrink: 0;
	background: #fff;
	border-bottom: 1px solid var(--l7-line);
	overflow: hidden;
}
.layout7-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--l7-forest) 0%, var(--l7-copper) 50%, transparent 100%);
	pointer-events: none;
}

img.layout7-home-link,
img#cHomeLink {
	display: none !important;
}

.layout7-header-html { width: 100%; }
.layout7-header-html table { width: 100% !important; }
.layout7-header-html img {
	display: block;
	max-width: 100%;
	height: auto;
}

.layout7-body-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.layout7-toolbar-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	width: 100% !important;
	min-height: 0;
}

/* ----- Quiet top bar (not a dark slab) ----- */
/* Never let AppFrame CheckForDevice hide this — menu lives here on mobile */
#cTDMasterToolbarDIV.layout7-nav,
.layout7-nav {
	display: block !important;
	visibility: visible !important;
	position: sticky;
	top: 0;
	z-index: 200;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--l7-line);
}

.layout7-nav-inner {
	display: flex;
	align-items: center;
	min-height: var(--l7-nav-h);
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 8px 0 4px;
	gap: 4px;
}

.layout7-nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 36px;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--l7-forest) !important;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	position: relative;
}

.layout7-nav-btn:hover,
.layout7-nav-btn:focus {
	background: var(--l7-wash) !important;
	outline: none;
}

.layout7-nav-menu { display: none; } /* desktop: rail always open */

/* Explicit menu control — always tappable on narrow screens */
@media (max-width: 900px) {
	.layout7-nav-menu {
		display: inline-flex !important;
		min-width: 48px;
		height: 40px;
		border: 1px solid var(--l7-line);
		background: #fff !important;
		margin-left: 4px;
	}
	.layout7-nav-menu:hover,
	.layout7-nav-menu:focus {
		border-color: #b7c8bc;
		background: var(--l7-wash) !important;
	}
}

.layout7-burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 20px;
}
.layout7-burger span {
	display: block;
	height: 2px;
	background: var(--l7-forest);
	border-radius: 1px;
}

.layout7-nav-tagline { flex: 1; }

.layout7-nav-quick {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
}

.layout7-nav-share { display: none; }

.layout7-nav-signin {
	border: 1px solid var(--l7-line);
	background: #fff !important;
}
.layout7-nav-signin:hover { border-color: #b7c8bc; }

#janrainEngageShare,
#janrainEngageSignIn {
	color: var(--l7-forest) !important;
	font-weight: 700;
	font-size: 13px;
}

.layout7-nav-collapse {
	opacity: 0.55;
	min-width: 40px;
}

/* ----- Workspace ----- */
.layout7-workspace {
	flex: 1;
	display: flex;
	align-items: stretch;
	min-height: 0;
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
	position: relative;
}

/* Light rail */
.layout7-drawer {
	flex: 0 0 var(--l7-rail);
	width: var(--l7-rail);
	background: var(--l7-panel);
	border-right: 1px solid var(--l7-line);
	display: flex;
	flex-direction: column;
	min-height: 280px;
	z-index: 220;
}

.layout7-drawer-head {
	display: none;
	align-items: center;
	justify-content: flex-end;
	padding: 16px 18px 12px;
	border-bottom: 1px solid var(--l7-line);
}

.layout7-drawer-title {
	font-family: var(--l7-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--l7-forest);
	letter-spacing: -0.02em;
}

.layout7-drawer-close {
	width: 36px;
	height: 36px;
	border: 1px solid var(--l7-line);
	border-radius: 8px;
	background: #fff;
	color: var(--l7-ink);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.layout7-drawer-backdrop {
	display: none;
	border: 0;
	padding: 0;
	margin: 0;
	background: rgba(28, 43, 36, 0.35);
}

/* Pane */
.layout7-pane {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}

.layout7-pane-brand {
	padding: 20px 20px 10px;
}

.layout7-pane-brand-text {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--l7-forest);
}

.layout7-pane-scroll {
	flex: 1;
	overflow: auto;
	padding: 4px 12px 24px;
	-webkit-overflow-scrolling: touch;
}

.layout7-pane-featured { margin: 0 0 12px; }
.layout7-pane-featured-item {
	padding: 10px 12px;
	margin-bottom: 6px;
	border-radius: 8px;
	border: 1px solid #ead7c4;
	background: #fff8f0;
	color: #7a4a22;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
.layout7-pane-featured-item:hover { background: #fff1e4; }

.layout7-pane-section { margin: 0 0 14px; }

.layout7-pane-section-head,
.MenuItemHeader.layout7-pane-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 10px;
	margin: 0;
	border: 0 !important;
	border-radius: 8px;
	background: transparent !important;
	cursor: pointer;
	font-weight: 700;
	font-size: 14px;
	color: var(--l7-forest) !important;
}
.layout7-pane-section-head::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 2px solid #9aafa3;
	border-bottom: 2px solid #9aafa3;
	transform: rotate(45deg);
	margin-left: 8px;
	flex-shrink: 0;
	opacity: 0.7;
}
.layout7-pane-section-head:hover { background: var(--l7-wash) !important; }
.layout7-pane-section-head label,
.layout7-pane-section-head span {
	color: inherit !important;
	cursor: pointer;
	font-weight: 700;
}

.layout7-pane-section-body,
.LeftPanelWebPagesItems.layout7-pane-section-body {
	padding: 2px 0 0 2px;
	border-left: 2px solid var(--l7-line);
	margin: 2px 0 0 10px;
}

.layout7-pane-link,
.MenuItem.layout7-pane-link {
	padding: 9px 12px;
	margin: 1px 0;
	border-radius: 6px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: var(--l7-ink) !important;
	line-height: 1.35;
	transition: background 120ms ease, color 120ms ease;
}
.layout7-pane-link:hover,
.MenuItem.layout7-pane-link:hover {
	background: var(--l7-wash);
	color: var(--l7-copper) !important;
}

.layout7-pane-link-nested {
	padding-left: 18px !important;
	font-weight: 600;
	color: var(--l7-ink) !important;
	font-size: 13.5px;
	opacity: 1;
}
.layout7-pane-link-nested:hover {
	color: var(--l7-copper) !important;
}

.layout7-pane-subject-head {
	padding: 7px 8px;
	margin-top: 2px;
	border-radius: 6px;
	cursor: pointer;
	color: var(--l7-forest) !important;
}
.layout7-pane-subject-head:hover { background: var(--l7-wash); }

.layout7-pane-subject-table {
	width: 100%;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--l7-forest);
}
.layout7-pane-subject-table td,
.layout7-pane-subject-table td.LeftMenuContent {
	color: var(--l7-forest) !important;
	border: 0 !important;
	font-weight: 700;
}

/* Legacy LeftMenuContent spans can wash out — keep them ink-dark in this rail */
.layout7-pane .LeftMenuContent,
.layout7-pane .LeftPanelWebPagesItems,
.layout7-pane label {
	color: inherit !important;
}

/* Hide tiny arrow gifs — use text hierarchy instead */
.layout7-pane-subject-table img {
	opacity: 0.35;
	width: 6px !important;
	height: 6px !important;
}

.layout7-pane-custom {
	padding: 12px 16px 18px;
	border-top: 1px solid var(--l7-line);
	font-size: 12px;
	color: var(--l7-mute);
}

/* Main — soft paper panel (not a heavy dashboard card) */
.layout7-main {
	flex: 1;
	min-width: 0;
	padding: 24px 28px 40px;
}

.layout7-main-inner {
	max-width: 880px;
	margin: 0 auto;
	background: var(--l7-panel);
	border: 1px solid var(--l7-line);
	border-radius: 12px;
	box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 10px 28px rgba(28, 43, 36, 0.04);
	padding: 28px 32px 36px;
	min-height: 200px;
}

.layout7-main-inner a { color: var(--l7-forest); }
.layout7-main-inner a:hover { color: var(--l7-copper); }
.layout7-main-inner h1,
.layout7-main-inner h2,
.layout7-main-inner h3 {
	font-family: var(--l7-display);
	color: var(--l7-forest);
	letter-spacing: -0.025em;
	font-weight: 700;
}
/* height:auto on ALL imgs overrides HTML height="70px" attrs → gear/money explode to natural 200px */
.layout7-main-inner img { max-width: 100%; }
.layout7-main-inner img:not([height]) { height: auto; }
.layout7-main-inner table { max-width: 100%; }

/* Soften dense legacy content tables a bit */
.layout7-main-inner font { line-height: 1.55; }

/* ============================================================
   Authenticated — same LeftPane7 rail as public pages (no TopStrip).
   Widen stage beside rail; do not invent a second menu system.
   ============================================================ */
.layout7-topstrip { display: none !important; }

html.layout7-app .layout7-workspace {
	max-width: none;
	width: 100%;
}
html.layout7-app .layout7-main {
	padding: 10px 12px 18px;
	min-width: 0;
}
html.layout7-app .layout7-main-inner {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 8px 10px 14px;
	border-radius: 8px;
	min-height: calc(100vh - 160px);
	/* visible so Authenticated balloon/modals are not clipped */
	overflow: visible;
}

html.layout7-app #Table0,
html.layout7-app #cAuthDiv0,
html.layout7-app #cTDAuthenticatedNow,
html.layout7-app #cAuthenticatedNow,
html.layout7-app #cDiv1,
html.layout7-app #cDiv2,
html.layout7-app #cDiv3,
html.layout7-app #cAccount,
html.layout7-app #cDiv5,
html.layout7-app #cDiv6,
html.layout7-app #cDiv7,
html.layout7-app #cDiv8,
html.layout7-app #cDiv9,
html.layout7-app #cDiv10 {
	width: 100% !important;
	max-width: none !important;
	box-sizing: border-box;
}
html.layout7-app #Table0 {
	text-align: left !important;
	margin: 0 !important;
}

/*
  Pedigree sex fills — proc <style> uses background-color:ffcccc / ccccff WITHOUT '#'.
  That is valid only in quirks mode (prod Main.master). Layout7 is standards mode,
  so those colors are dropped unless we redefine with proper hex.
*/
html.layout7-app .femalePedigree,
html.layout7-app .femalePedigreeBack,
.layout7-body .femalePedigree,
.layout7-body .femalePedigreeBack {
	background-color: #ffcccc !important;
}
html.layout7-app .malePedigree,
html.layout7-app .malePedigreeBack,
.layout7-body .malePedigree,
.layout7-body .malePedigreeBack {
	background-color: #ccccff !important;
}

/* Popups / balloon tips must clear sticky nav + shell stacking */
html.layout7 .balloonstyle:not(#balloonLogin),
html.layout7-app .balloonstyle:not(#balloonLogin),
.layout7-body .balloonstyle:not(#balloonLogin) {
	z-index: 10050 !important;
	position: absolute !important;
	color: #1c2b24 !important;
	background-color: #fff !important;
	background: #fff !important;
}
html.layout7 .balloonstyle:not(#balloonLogin) *,
html.layout7-app .balloonstyle:not(#balloonLogin) *,
.layout7-body .balloonstyle:not(#balloonLogin) * {
	color: #1c2b24 !important;
}
html.layout7 #balloonLogin,
html.layout7-app #balloonLogin,
.layout7-body #balloonLogin {
	z-index: 10050 !important;
	position: absolute !important;
}
html.layout7-app .layout7-shell,
html.layout7-app .layout7-body-wrap,
html.layout7-app .layout7-toolbar-panel,
html.layout7-app .layout7-workspace {
	overflow: visible;
}

/* Footer — slim, light */
.layout7-footer {
	flex-shrink: 0;
	background: #fff;
	border-top: 1px solid var(--l7-line);
	color: var(--l7-mute);
}
.layout7-footer-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.layout7-footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	font-size: 13px;
	font-weight: 600;
}
.layout7-footer-link,
.layout7-footer-links span { color: var(--l7-mute) !important; }
.layout7-footer-link:hover,
.layout7-footer-links span:hover { color: var(--l7-forest) !important; }
.layout7-footer-tools { display: flex; align-items: center; gap: 10px; }
.layout7-login-status,
.layout7-footer label,
.layout7-footer small { color: var(--l7-mute) !important; }

/* Hide noisy footer hamburger on desktop — rail is open */
@media (min-width: 901px) {
	#cToggleMobileStandardMenu0 { display: none !important; }
}

/* Login */
#balloonLogin.layout7-login {
	width: 400px !important;
	background: transparent !important;
	padding: 0 !important;
	border: 0 !important;
}
.layout7-login-card {
	background: #fff;
	border: 1px solid var(--l7-line);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(28, 43, 36, 0.16);
	overflow: hidden;
}
.layout7-login-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: var(--l7-wash);
	border-bottom: 1px solid var(--l7-line);
	color: var(--l7-forest);
}
.layout7-login-title {
	font-family: var(--l7-display);
	font-weight: 700;
	font-size: 1.1rem;
}
.layout7-login-close {
	border: 0;
	background: transparent;
	cursor: pointer;
	padding: 4px;
	border-radius: 6px;
}
.layout7-login-social { padding: 16px; text-align: center; }
.layout7-login-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 18px 10px;
	color: var(--l7-mute);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.layout7-login-divider::before,
.layout7-login-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--l7-line);
}
.layout7-login-form {
	padding: 4px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.layout7-login-label {
	font-size: 12px;
	font-weight: 700;
	color: var(--l7-mute);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-top: 6px;
}
.layout7-login-input {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--l7-line);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 15px;
	font-family: var(--l7-font);
	background: #fff;
}
.layout7-login-input:focus {
	outline: none;
	border-color: #9bb5a6;
	box-shadow: 0 0 0 3px rgba(42, 74, 58, 0.12);
}
.layout7-login-actions {
	display: flex;
	gap: 10px;
	margin-top: 14px;
	flex-wrap: wrap;
}
.layout7-btn {
	flex: 1;
	min-width: 120px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 8px;
	padding: 10px 14px;
	font-family: var(--l7-font);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	border: 1px solid transparent;
}
.layout7-btn-ghost {
	background: #fff;
	border-color: var(--l7-line);
	color: var(--l7-forest);
}
.layout7-btn-primary {
	background: var(--l7-forest);
	color: #fff;
	border-color: var(--l7-forest);
}
.layout7-btn-primary:hover { background: #203c2f; }
.layout7-login-error {
	color: #b42318;
	font-weight: 700;
	min-height: 1.2em;
	margin-top: 8px;
	font-size: 13px;
}

/* ----- Mobile drawer ----- */
@media (max-width: 900px) {
	.layout7-nav-menu { display: inline-flex; }
	.layout7-nav-tagline { font-size: 0.9rem; }
	.layout7-workspace { display: block; max-width: none; }

	.layout7-drawer {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: min(88vw, 300px);
		max-width: min(88vw, 300px);
		flex: none;
		transform: translateX(-105%);
		transition: transform 220ms ease;
		box-shadow: 8px 0 32px rgba(28, 43, 36, 0.18);
		z-index: 700;
	}
	.layout7-drawer.is-open,
	.layout7-drawer-open .layout7-drawer { transform: translateX(0); }
	.layout7-drawer-head { display: flex; }

	.layout7-drawer-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		opacity: 0;
		pointer-events: none;
		transition: opacity 200ms ease;
		z-index: 650;
	}
	.layout7-drawer-backdrop.is-open,
	.layout7-drawer-open .layout7-drawer-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	.layout7-main { padding: 16px 14px 72px; }
	.layout7-main-inner { max-width: 100%; }

	.layout7-header { max-height: 96px; }
	.layout7-header-html img {
		max-height: 96px;
		width: 100%;
		object-fit: cover;
	}

	.layout7-footer {
		position: sticky;
		bottom: 0;
		z-index: 400;
		background: rgba(255,255,255,0.96);
		backdrop-filter: blur(8px);
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	#balloonLogin.layout7-login {
		width: min(400px, 94vw) !important;
		left: 50% !important;
		transform: translateX(-50%);
		z-index: 10060 !important;
	}
}

/* Authenticated mobile popup sheet — shell chrome, not host-zoom content */
html.layout7-auth-mobile #balloonMobileNav,
html.layout7-is-mobile #balloonMobileNav,
html.layout7-auth-mobile #balloonTasks,
html.layout7-is-mobile #balloonTasks,
html.layout7 #balloonMobileNav.layout-popup-sheet,
html.layout7 #balloonTasks.layout-popup-sheet {
	max-width: min(100vw - 24px, 420px) !important;
	width: min(100vw - 24px, 420px) !important;
	max-height: min(85vh, 720px) !important;
	box-sizing: border-box !important;
	color: #1c2b24 !important;
	background: #fff !important;
	background-color: #fff !important;
	border: 1px solid var(--l7-line, #c5ccd6) !important;
	border-radius: 10px !important;
	box-shadow: 0 16px 40px rgba(28, 43, 36, 0.22) !important;
	padding: 10px !important;
	z-index: 10060 !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
}
html.layout7-auth-mobile #balloonMobileNav *,
html.layout7-is-mobile #balloonMobileNav *,
html.layout7-auth-mobile #balloonTasks *,
html.layout7-is-mobile #balloonTasks *,
html.layout7 #balloonMobileNav.layout-popup-sheet *,
html.layout7 #balloonTasks.layout-popup-sheet * {
	color: #1c2b24 !important;
}
html.layout7-auth-mobile #cDiv8,
html.layout7-is-mobile #cDiv8,
html.layout7-auth-mobile #cDiv10,
html.layout7-is-mobile #cDiv10 {
	max-height: calc(100vh - 140px) !important;
	overflow: auto !important;
}
html.layout7-auth-mobile #cDiv8 iframe,
html.layout7-is-mobile #cDiv8 iframe,
html.layout7-auth-mobile #cDiv10 iframe,
html.layout7-is-mobile #cDiv10 iframe {
	max-height: calc(100vh - 160px) !important;
}

/*
   Class-driven mobile drawer (same rules as max-width:900px).
   Needed when Authenticated uses prod scale 0.45 and layout width exceeds 900px.
*/
html.layout7-is-mobile .layout7-nav-menu {
	display: inline-flex !important;
	min-width: 48px;
	height: 40px;
	border: 1px solid var(--l7-line);
	background: #fff !important;
	margin-left: 4px;
}
html.layout7-is-mobile .layout7-workspace { display: block; max-width: none; }
html.layout7-is-mobile .layout7-drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(88vw, 300px);
	max-width: min(88vw, 300px);
	flex: none;
	transform: translateX(-105%);
	transition: transform 220ms ease;
	box-shadow: 8px 0 32px rgba(28, 43, 36, 0.18);
	z-index: 700;
}
html.layout7-is-mobile .layout7-drawer.is-open,
html.layout7-is-mobile.layout7-drawer-open .layout7-drawer { transform: translateX(0); }
html.layout7-is-mobile .layout7-drawer-head { display: flex; }
html.layout7-is-mobile .layout7-drawer-backdrop {
	display: block;
	position: fixed;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
	z-index: 650;
}
html.layout7-is-mobile .layout7-drawer-backdrop.is-open,
html.layout7-is-mobile.layout7-drawer-open .layout7-drawer-backdrop {
	opacity: 1;
	pointer-events: auto;
}
html.layout7-is-mobile .layout7-main { padding: 16px 14px 72px; }

/*
  Authenticated mobile grid host (class-driven — not media-query).
  Proc HTML assumes prod's document scale 0.45; Layout7 keeps viewport at 1 for the
  drawer, so scale only #cAuthenticatedNow. Do not clamp proc img/font sizes.
*/
html.layout7-app.layout7-auth-mobile #cAuthenticatedTab9,
html.layout7-app.layout7-auth-mobile #cAuthenticatedTab7,
html.layout7-app.layout7-auth-mobile #cAuthenticatedTab8,
html.layout7-app.layout7-auth-mobile #cAuthenticatedTab1,
html.layout7-app.layout7-auth-mobile #cAuthenticatedTab6 {
	display: none !important;
}
/*
  Scale #Table0 (tab row + grid host) together — same 900px design width as prod.
  Do NOT wrap tab labels; do NOT zoom only #cAuthenticatedNow (that made tabs huge
  and the toolbar denser).
*/
html.layout7-app.layout7-auth-mobile #Table0 {
	width: 900px !important;
	max-width: none !important;
	zoom: 0.45;
	transform-origin: top left;
	-webkit-text-size-adjust: 100%;
	box-sizing: border-box;
	table-layout: auto; /* fixed squeezed tabs into two uneven boxes */
}
html.layout7-app.layout7-auth-mobile #cAuthenticatedNow,
html.layout7-app.layout7-auth-mobile #cTDAuthenticatedNow,
html.layout7-app.layout7-auth-mobile #cAuthDiv0 {
	width: 100% !important;
	max-width: none !important;
	zoom: 1; /* inherit Table0 zoom only */
}
/* Shell rule `.layout7-main-inner table { max-width:100% }` wraps toolbar — undo for auth grid */
html.layout7-app.layout7-auth-mobile .layout7-main-inner #Table0,
html.layout7-app.layout7-auth-mobile .layout7-main-inner #Table0 table,
html.layout7-app.layout7-auth-mobile .layout7-main-inner #cAuthenticatedNow,
html.layout7-app.layout7-auth-mobile .layout7-main-inner #cAuthenticatedNow table {
	max-width: none !important;
}
html.layout7-app.layout7-auth-mobile #cAuthenticatedTab0,
html.layout7-app.layout7-auth-mobile #cAuthenticatedTab2,
html.layout7-app.layout7-auth-mobile #cAuthenticatedTab3,
html.layout7-app.layout7-auth-mobile #cAuthenticatedTab4,
html.layout7-app.layout7-auth-mobile #cAuthenticatedTab5 {
	font-size: 15px !important;
	height: 35px !important;
	min-height: 35px !important;
	line-height: 33px !important;
	padding: 0 6px !important;
	white-space: nowrap !important;
	vertical-align: middle !important;
	overflow: visible !important;
	border: 1px solid #ACA899 !important;
	box-sizing: border-box;
}
/* Two ASPX tab tables sit side-by-side — drop outer frames so they read as one strip */
html.layout7-app.layout7-auth-mobile #cAuthenticatedTabDescriptiveTABLE,
html.layout7-app.layout7-auth-mobile #cAuthenticatedTabAccountTABLE {
	white-space: nowrap !important;
	vertical-align: middle !important;
	padding: 0 !important;
}
html.layout7-app.layout7-auth-mobile #cAuthenticatedTabDescriptiveTABLE > table,
html.layout7-app.layout7-auth-mobile #cAuthenticatedTabAccountTABLE > table {
	white-space: nowrap !important;
	border: none !important;
	border-collapse: collapse !important;
	background: transparent !important;
	width: 100% !important;
}
html.layout7-app.layout7-auth-mobile #c_Header_QUADRANT1,
html.layout7-app.layout7-auth-mobile #c_Header_QUADRANT1 table {
	white-space: nowrap !important;
}
/*
  Host zoom owns scale. Shell no longer applies height:auto to img[height], so
  proc height="50|70px" attrs size toolbar/action icons (not natural 200–512px).
*/
html.layout7-app.layout7-auth-mobile #cAuthenticatedNow img,
html.layout7-app.layout7-auth-mobile #Table0 img {
	max-width: none !important;
	max-height: none !important;
}
/*
  Prod stacks "search :" above the input (width:100% wraps in the TD).
  Our header nowrap kept them inline and the input overlapped People Search.
*/
html.layout7-app.layout7-auth-mobile #c_Header_QUADRANT1 td:has(#cClientHistorySearch),
html.layout7-app.layout7-auth-mobile #c_Header_QUADRANT1 td.auth-search-cell {
	white-space: normal !important;
	text-align: right !important;
	vertical-align: top !important;
	overflow: hidden !important;
	max-width: 220px;
}
html.layout7-app.layout7-auth-mobile #cClientHistorySearch,
html.layout7-app.layout7-auth-mobile #c_Header_QUADRANT1 input[type="text"] {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 36px !important;
	max-height: 36px !important;
	min-height: 0 !important;
	padding: 2px 6px !important;
	font-size: 16px !important;
	line-height: 20px !important;
	box-sizing: border-box !important;
	margin: 2px 0 0 0 !important;
	float: none !important;
}
html.layout7-app.layout7-auth-mobile #c_Header_QUADRANT1 td {
	vertical-align: middle !important;
}
html.layout7-app.layout7-auth-mobile #c_Header_QUADRANT1 td:has(#cClientHistorySearch),
html.layout7-app.layout7-auth-mobile #c_Header_QUADRANT1 td.auth-search-cell {
	vertical-align: top !important;
}
html.layout7-app.layout7-auth-mobile .layout7-main {
	padding-left: 4px;
	padding-right: 4px;
}
html.layout7-app.layout7-auth-mobile .layout7-main-inner {
	overflow-x: hidden;
	overflow-y: auto;
	padding: 4px !important;
	-webkit-overflow-scrolling: touch;
}

@media (prefers-reduced-motion: reduce) {
	.layout7-drawer,
	.layout7-drawer-backdrop { transition: none !important; }
}