/* ============================================================
   GLOBAL SITE CSS  —  Refactored 3-6-2026  |  Phase 1-3 Merge 3-6-2026  |  Fix 2 (naming convention + matrixBackground) 3-6-2026  |  Fix 4 (nav text chain, subitem bg, .t2 height, tabPanel/SubPane/popup/svgP/btn_N vars) 3-12-2026
   
   VARIABLE ARCHITECTURE (three tiers):
   
   TIER 1 — Brand Palette  (client override: change ~6-8 vars)
            --brand-primary                    Main nav / header background
            --text_on_brand-primary            Text & icons on primary bg
            --brand-primary-dark               Submenu / deeper nav
            --brand-accent                     Interactive highlight color
            --text_on_brand-accent             Text on accent backgrounds (buttons, badges)
            --brand-accent-dark                Hover/pressed state of accent
            --brand-surface                    Page / section background
            --brand-surface-mid                Borders, subtle backgrounds
            --brand-text                       Default body text
            --brand-focus                      Keyboard focus ring color
   NAMING CONVENTION — paired background/text variables:
            Every background a client may change has a companion
            --text_on_[background-variable-name] that must be
            overridden together with it to preserve contrast.
   TIER 2 — System Palette  (neutral UI; rarely client-changed)
            --sys-border           Standard UI borders
            --sys-bg-subtle        Lightest background tint
            --sys-bg-light         Light background (panels)
            --sys-bg-mid           Mid-tone background (rows)
            --sys-bg-dark          Darker UI background
            --sys-text-primary     Primary body text
            --sys-text-secondary   Secondary / muted text
            --sys-link             Default link color
            --sys-error            Error / required field color
            --sys-disabled         Disabled element color
   TIER 3 — Component Variables  (reference Tiers 1 & 2;
            preserve existing variable names so no page-level
            code changes are required)
   ============================================================ */

/* ============================================================
   TIER 1: BRAND PALETTE
   Client override file only needs to redefine these.
   ============================================================ */
:root {
	--brand-primary: #000;			/* Primary brand color — top nav background */
	--brand-primary-dark: #000;		/* Darker variant — submenu bar, deeper nav elements */
	--text_on_brand-primary: #fff;	/* Text / icon color that sits on top of brand-primary */
	--brand-accent: #369;			/* Accent / interactive color — buttons, highlights, links */
	--text_on_brand-accent:#fff;	/* Text / icon color on accent backgrounds */
	--brand-accent-dark: #06396C;	/* Darker accent for hover / active states */
	--brand-surface: #f5f5f5;		/* Page / section surface background */
	--brand-surface-mid:  #ddd;		/* Mid-tone surface — borders, panel fills */
	--brand-text: #2b2b2b;			/* Default body text color */
	--brand-focus: blue;			/* Keyboard focus ring color */
}

/* ============================================================
   TIER 2: SYSTEM PALETTE
   Neutral UI colors used across all components.
   Override in client file only when shifting the full tone.
   ============================================================ */
:root {
	--sys-border: #999;			/* Borders and dividers */
	--sys-bg-subtle: #f9f9f9;	/* Subtlest background — near-white */
	--sys-bg-light: #f5f5f5;	/* Light panel backgrounds */
	--sys-bg-mid: #e5e5e5;		/* Alternating row / mid-tone backgrounds */
	--sys-bg-dark: #444;		/* Darker background — nav links, inactive tabs */
	--sys-text-primary: #212121;/* Primary text */
	--sys-text-secondary: #333;	/* Secondary / muted text */
	--sys-link: #039;			/* Default link / anchor color */
	--sys-error: #D50000;		/* Error states, required field markers */
	--sys-disabled: #bbb;		/* Disabled state color */
}

/* ============================================================
   TIER 3: COMPONENT VARIABLES
   Named variables consumed by rules throughout this file.
   Each references a Tier 1 or Tier 2 palette token.
   Client code references these names — no page changes needed.
   ============================================================ */
:root {
	/* --- Login page --- */
	--login_image-background: white;
	--login_image-logo: 0px;
	/* --- Top navigation (desktop) --- */
	--menu_top_height: 60px;
	--menu_top-background: var(--brand-primary);
	/* --nav-text is independent from --text_on_brand-primary so that
	   white-header clients can set dark nav text without side-effects */
	--nav-text: var(--text_on_brand-primary);
	--nav-text-hover-line: var(--nav-text);
	--nav-icon-text: var(--nav-text);
	--nav-icon-background: transparent;
	--menu_top-text: var(--nav-text);
	--menu_top-link-text: var(--nav-text);
	--menu_top-link-background: var(--nav-icon-background);
	--menu_top-hover-line: var(--nav-text-hover-line);
	/* --- Popup / flyout menus --- */
	--menu_popup-background: white;
	--menu_popup-outer-background: #F1F3F1; /* shell/header bg — slightly off-white by design */
	--menu_popup-item-selected: #B6CCE2;
	--menu_popup-item-selected-border: #80A4C6;
	--menu_div-border: var(--sys-border);
	/* --- Logo padding --- */
	--menu_leftlogo-padding: 10px;
	/* --- Subitem nav bar --- */
	--nav-subitem-text: var(--text_on_brand-primary);
	--menu_subitem-text: var(--nav-subitem-text);
	--menu_subitem-background: var(--brand-accent-dark);
	--menu_subitem-borderbottom: var(--brand-accent-dark);
	/* --- User side panel header (legacy aliases — use --th-bg / --text_on_th-bg instead) --- */
	--thUserSideBG: var(--th-bg);
	--thUserSideText: var(--text_on_th-bg);
	/* --- Page layout backgrounds --- */
	--site_page-margin-background: var(--brand-surface);
	--site_page-body-background: #ffffff;
	/* --- Section headers --- */
	--section_userside_header_background: var(--sys-bg-mid);
	--section_header-background: var(--brand-surface-mid);
	--section_header-border: var(--brand-surface-mid);
	--text_on_section_header-background: black;
	/* --- Section body --- */
	--section_body-background: white;
	--section_body-text: var(--brand-text);
	--section_body-link: var(--sys-link);
	/* --- Content width --- */
	--content-max-width: 1024px;
	/* --- Mobile top navigation --- */
	--menu_top-mob-height: 50px;
	--menu_top-mob-background: var(--sys-bg-mid);
	--menu_leftlogo-mob-padding: 10px;
	--menu_top-mob-text: black;
	--menu_top-mob-link-text: black;
	/* --- Mobile tab states --- */
	--menu_tab-mob-hover-left: var(--brand-accent);
	--menu_tab-mob-background-hover: var(--sys-bg-mid);
	--menu_tab-mob-background-current: #cccccc;
	--menu_tab-mob-text-current: white;
	--menu-tab-mob-text-hover: #000000;
	/* --- Mobile left nav --- */
	--menu_leftnav-mob-background: var(--sys-bg-mid);
	--menu_leftnavcontent-mob-border: var(--sys-border);
	--menu_leftnavcontent-background: var(--brand-surface);
	--menu_icon-mob-main: var(--text_on_brand-primary);
	--menu_icon-mob-hide: black;
	/* --- Layout --- */
	--leftnav-width: 222px;
	/* --- Focus & accessibility --- */
	--focus-color: var(--brand-focus);
	/* --- Branch Exam folder icon --- */
	--be-folder-main-color: var(--sys-text-secondary);
	/* --- CE section header (overridden by client theme) --- */
	--text_on_CEsection_header-background: black;
	--CEsection_header-background: var(--brand-surface-mid);
	--CEsection_header-border: var(--brand-surface-mid);
	/* --- CE Status badge --- */
	--cestatus_background: #cccccc;
	--cestatus_text: #000000;
	/* --- Section accent stripe (left inset shadow on headers/bodies) --- */
	/* Default: transparent (no stripe). Set to a color in the client CSS to opt in. */
	--section_stripe-standard: transparent;
	--section_stripe-CE: transparent;
	/* --- CE section header (used by sec_leftCE Tier 1 bars) --- */
	/* NOTE: --CEsection_header-background / -border / --text_on_CEsection_header-background
	   are legacy names no longer consumed by any rule. Active variables are below. */
	--CEsection_header-bg-tier1: var(--brand-accent-dark);
	--text_on_CEsection_header-bg-tier1: var(--text_on_brand-primary);
	/* --- Table header tiers (three-tier hierarchy) --- */
	/* Tier 2 column headers */
	--th-bg: var(--brand-surface-mid);
	--text_on_th-bg: #171a20; /* text ON --th-bg — must be overridden together with --th-bg */
	--th-border: var(--sys-border);
	/* Tier 1 structural / grouping headers — driven by --CEsection_header-bg-tier1 above */

	--submenu-background: var(--sys-bg-light);
	--text_on_submenu-background: var(--brand-text);
	--submenu-border: var(--brand-primary-dark);
	--submenu-2nd_background: var(--sys-bg-light);
	--submenu-2nd_text: var(--sys-text-primary);
	--submenu-2nd_border: var(--brand-primary-dark);
	--text_on_brand-primary-dark:white;
}


/* ============================================================
   BASE
   ============================================================ */
body {
	margin: 0px;
	background: #fff;
	font-family: Roboto, Arial, sans-serif;
	font-weight: 400;
	font-size: 13px;
	color: var(--sys-text-primary)
}
iframe { border: none }
div, select, div, fieldset {
	box-sizing: border-box;
}
a:focus {
	outline: 2px solid var(--focus-color)
}
.print_vis			{ display: none }
.btn_D				{ height: 22px; float: left; border: 1px solid var(--sys-border); outline-color: var(--focus-color); cursor: pointer }
.spanSep			{ margin: 0px 3px 0 6px; text-align: center }
.spanDiffDeleted	{ text-decoration: line-through; color: red }
.spanDiffMod		{ color: green }
.spanDiffInserted	{ background: yellow }
tr[class=t1] .tdBookListPadding, tr[class=t1] .tdBookListPadding { padding: 8px }
textarea { border-radius: 6px }
.AppFooter			{ background: var(--sys-bg-mid); color: var(--sys-text-secondary) }
.IL					{ cursor: pointer }
.th8				{ padding-left: 5px; font-size: 12px; color: var(--sys-error); visibility: hidden }
.inputError			{ font-size: 12px; color: var(--sys-error); visibility: hidden; display: inline-block; padding-left: 5px }
.th8n				{ font-size: 12px }
.nt, a				{ font-weight: 400; font-size: 14px }
.ntadmin			{ font-weight: 400; font-size: 12px }
.nladmin			{ font-weight: 400; font-size: 12px; color: var(--sys-text-primary) }
	.nladmin:focus {
		outline: 2px solid var(--focus-color);
		outline-offset: -2px;
	}
.drpdwn				{ font-family: Roboto, Arial, sans-serif; border: 1px solid #ccc; vertical-align: middle; padding: 2px; box-sizing: border-box }
	.drpdwn.n {
		font-size: 16px;
		border-radius: 6px;
		height: 26px !important;
		line-height: 22px !important
	}
.qsearch			{ width: 110px; float: left; border-radius: 6px; font-size: 16px }
	.qsearch:focus {
		outline-color: var(--focus-color)
	}
select.drpdwn, input[type=text], input[type=date].drpdwn {
	height: 22px
}
.svgP[disabled=disabled] {
	stroke: var(--sys-disabled);
	cursor: default;
}
.drpdwn:focus {
	outline: 2px solid var(--focus-color);
	outline-offset: -1px;
	border: 1px solid transparent !important
}
.req				{ color: var(--sys-error); font-family: Roboto, Arial, sans-serif; font-weight: 300; font-size: 12px }
.tdR				{ text-align: right; font-weight: bold; padding-right: 5px }
.tdR.n				{ font-weight: normal }
.tdC				{ text-align: center }
.tdL				{ text-align: left; padding-left: 3px }
a:link:hover, a:link:visited:hover	{ color: var(--section_body-link); text-decoration: underline }
a:active, a:link, a:visited			{ color: var(--section_body-link); text-decoration: none }
a.aSkipNav:active, a.aSkipNav:link, a.aSkipNav:visited, a.aSkipNav:hover { position: absolute; background: var(--menu_top-text); top: -50px; width: 0px; height: 0px; overflow: hidden; border-radius: 3px; padding: 2px }
a.aSkipNav:focus	{ color: var(--menu_top-background); width: auto; height: auto; outline-offset: -1px; outline: 2px solid var(--focus-color); top: 5px; left: 5px }

.SubMenu {
	height: 40px;
	overflow: hidden;
	align-items: center;
	padding: 2px 10px;
	position: relative;
	border-bottom: 2px solid var(--submenu-2nd_border);
	background: var(--submenu-background);
	color: var(--text_on_submenu-background)
}
.btn_N			{ border-radius: 6px; cursor: pointer; text-decoration: none; /*border: 1px solid var(--text_on_brand-primary); */background-color: var(--brand-primary-dark); height: 20px; font-size: 11px; color: var(--text_on_brand-primary-dark); padding: 0px 8px;border-style:none }
	.btn_N:focus {
		outline: 2px solid var(--focus-color);
		outline-offset: 0px;
	}
.btn_N[disabled] {
	background: var(--sys-bg-mid);
	color: #aaa;
	border: 1px solid var(--sys-border);
}

/* --- Left navigation tree styles --- */
.TL0	{ font-family: Roboto, Arial, sans-serif; font-weight: 300; font-size: 13px; text-align: left; overflow: hidden; color: var(--sys-text-secondary); white-space: nowrap; text-overflow: ellipsis; padding: 4px 3px 0px 6px; cursor: pointer }
.TL1	{ font-family: Roboto, Arial, sans-serif; font-weight: 300; font-size: 13px; text-align: left; overflow: hidden; color: var(--sys-text-secondary); white-space: nowrap; text-overflow: ellipsis; padding: 4px 3px 0px 6px; cursor: pointer; border: 1px solid #CCC; background: #ccc }
.TL20	{ font-family: Roboto, Arial, sans-serif; font-weight: 300; font-size: 11px; text-align: left; overflow: hidden; color: var(--sys-text-secondary); white-space: nowrap; text-overflow: ellipsis; padding: 2px 3px 1px 3px; cursor: pointer; height: 20px }
.TL21	{ font-family: Roboto, Arial, sans-serif; font-weight: 300; font-size: 11px; text-align: left; overflow: hidden; color: var(--sys-text-secondary); white-space: nowrap; text-overflow: ellipsis; padding: 2px 3px 1px 3px; cursor: pointer; border: 1px solid #000; background: #ccc; height: 20px }
.BL0	{ font-weight: normal; margin: 2px 3px 2px 3px }
.DC {
	display: none;
	transition: all 0.3s ease;
	padding: 0px;
	margin: 0px;
}
.DO {
	display: block;
	transition: all 0.3s ease;
	overflow: hidden;
	padding: 0px;
	margin: 0px;
	clear: both
}
.divTopFirstLogin {
	border-bottom: 2px solid var(--sys-border);
	text-align: center;
	background-color: var(--login_image-background);
	padding: var(--login_image-logo);
	border-radius: 15px;
}
.ddl_INPUT div		{ padding-left: 5px !important }
.ddl_Sel			{ text-overflow: ellipsis; white-space: nowrap; line-height: 24px; padding: 0px 0px 0px 4px; height: 24px; border-radius: 6px; cursor: default; background: #ccc; color: #000 }
.ddl_Nor			{ text-overflow: ellipsis; white-space: nowrap; line-height: 24px; padding: 0px 0px 0px 2px; height: 24px; border-radius: 6px; cursor: default; background: white; color: #000 }
.ddl_DIV			{ border-radius: 6px; height: 26px; background: white; padding-left: 5px; cursor: default; vertical-align: middle; float: left }
.ddl_INPUT			{ font-size: 16px; cursor: default; text-align: left; border: transparent; vertical-align: top; padding-top: 3px }
.ddl_DropDiv		{ overflow-y: auto; border: 1px solid #000; background: white; position: absolute; display: none; text-align: left; z-index: 100; padding: 2px; border-radius: 6px }
.ddl_Nor:hover {
	background: #eee;
	outline: 2px solid var(--sys-border);
	outline-offset: -2px;
}
.ddl_Nor:focus, .ddl_Sel:focus {
	outline: 2px solid var(--focus-color);
	outline-offset: -2px;
	background: #cde !important
}
.ddl_DIV:focus {
	outline: 2px solid var(--focus-color);
	outline-offset: -2px;
}

/* --- Tab styles --- */
.sepR {
	white-space: nowrap
}
.cellA		{ white-space: nowrap; text-align: center; padding: 3px 10px 4px 4px; cursor: pointer; font-family: Roboto, Arial, sans-serif; font-weight: 600; font-size: 13px; color: var(--brand-accent) }
.cellI		{ white-space: nowrap; text-align: center; padding: 3px 10px 4px 4px; cursor: pointer; font-family: Roboto, Arial, sans-serif; font-weight: 300; font-size: 13px }
	.cellI:focus, .cellA:focus {
		outline: 2px solid var(--focus-color);
		outline-offset: -2px;
	}
.tabPanel {
	border-top: 2px solid var(--sys-bg-dark);
	border-bottom: 2px solid var(--sys-bg-dark);
	width: 100%;
	background: var(--sys-bg-light);
	position: relative
}
.tabBody	{ background: #e8e8e8 }
.tabBodyN	{ background: #f8f8f8 }

/* --- Tab panel links --- */
.aBookLink {
	font-size: 16px
}

/* --- Profile header --- */
.divProfileHeader {
	font-weight: bold;
	margin-top: 10px;
	margin-left: -1px;
	font-size: 16px
}

/* --- Additional focus rules (globally applicable) --- */
.nl:focus {
	outline: 2px solid var(--focus-color);
	outline-offset: -1px;
}

/* --- Content for Review --- */
.aReviewLink		{ background: #7B7D7D; color: #fff; padding: 6px 12px }
a.aReviewLink, a.aReviewLink:hover	{ margin-left: 5px; color: #fff; text-decoration: none }
.filterNameDis { margin-left: 1px; float: left; width: 250px; background: #f2f2f2; text-align: left }

/* --- Three-tier table header hierarchy ---
   TIER 1  Structural/grouping headers: .sec_leftCE, .thUserSide (panel headers)
           Background: --tier1-bg  Text: --text_on_tier1-bg  Stripe: --tier1-stripe
   TIER 2  Column headers: th, .divTH — all tables
           Background: --th-bg  Text: --text_on_th-bg  Separator: --th-border
   TIER 3  Data rows: .t1 white / .t2 off-white, warm hover
   -------------------------------------------------------------------- */

/* ── Tier 2: Column headers — all tables ── */
th, .divTH {
	background-color: var(--th-bg) !important;
	color:            var(--text_on_th-bg) !important;
	font-weight:      600;
	font-size:        12px;
}
/* Sort links inside column headers */
th a:link,
th a:visited,
th .nladmin:link {
	color: var(--text_on_th-bg)
}
th .nladmin:link:hover { text-decoration-color: var(--text_on_th-bg) }
th a:hover {
	color: var(--brand-accent);
	text-decoration: underline
}

/* ── Tier 2: thUserSide — sortable panel column headers ── */
/* Promoted from Tier 1: these are data columns despite the name  */
.thUserSide {
	background:    var(--th-bg) !important;
	color:         var(--text_on_th-bg) !important;
	font-weight:   600;
	border-bottom: 2px solid var(--th-border);
	box-shadow:    none;
	padding:       8px;
}
th.thUserSide { font-size: 14px }
div.thUserSide {border-bottom:none}
	.thUserSide svg {
		stroke: var(--text_on_th-bg) !important;
	}
th a:active,
th.thUserSide a:link,
th.thUserSide a:visited,
th.thUserSide nl:link,
th.thUserSide,
th.thUserSide > span { color: var(--text_on_th-bg); font-weight: bold }

/* ── Tier 2 exception: tblFilters "Select All" row ── */
/* This is a <th> but must NOT look like a column header  */
.tblFilters th {
	background-color: transparent !important;
	color:            inherit !important;
	font-weight:      normal !important;
	border-bottom:    none !important;
	padding:          1px !important;
}

/* ── Tier 2: CE Info table ── */
.CEInfo th {
	color:            var(--text_on_th-bg);
	background-color: var(--th-bg);
	padding:          8px;
}

/* ── Tier 3: Data rows ── */
.t1			{ background: white }
.t1:hover	{ background: var(--sys-bg-light) }
/* Row separator and vertical alignment */
.t1 td {
/*	border-bottom:   1px solid var(--brand-surface-mid);*/
	vertical-align:  middle;
}
/* General table border utility */
.thBorder { border: 1px solid var(--sys-border) }

/* --- Subpane table styles --- */
.SubPane		{ border: 1px solid var(--sys-bg-mid); padding: 3px 0 0 5px; height: 25px; background-color: var(--sys-bg-mid); font-weight: bold }
.SubPaneBody	{ border: 1px solid var(--sys-bg-mid) }

.divMain {
	position: relative;
	width: 100%;
	overflow: auto;
	background: var(--site_page-margin-background)
}
.divUserRole {	float:right;margin:10px}
.divSearchContainer {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 100%;
	float: left;
}
	.divSearchContainer > * {
		margin-right: 0;
		height: 24px !important;
		box-sizing: border-box
	}
	.divSearchContainer .btn_N {
		height: 28px;
		vertical-align: middle;
	}
	.divSearchContainer .svgP {
		vertical-align: middle;
	}
.divSecondLevel {
	overflow: hidden;
	min-width: 365px;
	margin: 10px auto 0 auto;
	max-width: var(--content-max-width);
	border: 1px solid var(--sys-bg-mid);
	padding: 10px;
	border-radius: 10px;
	background: white
}
.divAllContent {
	margin: 10px auto;
	border-radius: 10px;
	padding: 10px;
	max-width: var(--content-max-width);
	background-color: var(--site_page-body-background);
	border: 1px solid var(--sys-bg-mid)
}

/* --- Login page defaults --- */
.Login_Error {
	color: var(--sys-error);
	font-size: 10pt;
	width: 90%;
	max-width: 450px;
	background-color: var(--sys-bg-subtle);
	border: 1px solid #bbb;
	border-radius: 5px;
	padding: 0px 10px;
	text-align: center;
}
#spanRegister {
	width: 100%;
	background: green;
	outline: none;
	border-radius: 3px;
	margin-top: 10px;
	padding: 10px;
	text-align: center
}
	#spanRegister a:link {
		color: var(--menu_top-text) !important;
		letter-spacing: 0.10rem;
	}
#imgLoginLeft {
	max-width: 450px;
	object-fit: cover;
}
.divLoginTitle, .divLoginInstructions, .Login_LinkBox {
	width: 90%;
	max-width: 450px;
	margin-top: 10px;
}
.divSelfRegisterFooter {
	position: absolute;
	top: calc(100vh - 25px);
	left: 0px;
	text-align: center;
	padding-top: 7px;
	font-size: 10px;
	background: #eee;
	color: #555;
	height: 25px
}
.SelfRegister_Logo {
	margin-top: 0px;
	background-color: var(--login_image-background);
	text-align: center;
	padding: var(--login_image-logo)
}
.Login_Logo {
	width: 90%;
	max-width: 450px;
	margin-top: 10px;
	background-color: var(--login_image-background);
	text-align: center;
	padding: var(--login_image-logo)
}
.Login_DictionaryBox {
	width: 90%;
	margin-top: 20px;
	text-align: center;
	max-width: 450px;
}
.Login_HelpLink a:link {
	font-size: 10pt;
}
.Login_HelpLink {
	overflow: hidden;
	margin: 5px 0px;
	clear: both
}
#divLoginRightBox {
	margin-left: 50px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 100vh;
	overflow: auto;
	width: 100%
}
.Login_Label {
	font-size: 10pt;
}
.Login_Credentials {
	max-width: 450px;
	width: 90%;
	margin-top: 20px
}
.Login_SignInButton {
	width: 100%;
	background: var(--menu_top-background);
	color: var(--menu_top-text);
	border-radius: 3px;
	margin-top: 10px;
	padding: 10px;
	letter-spacing: 0.10rem;
	text-transform: uppercase;
	border: 1px solid var(--menu_top-text);
	outline-color: var(--focus-color)
}
	.Login_SignInButton:focus {
		border: 2px solid black
	}
	.Login_SignInButton:disabled {
		background: var(--sys-bg-mid)
	}
.Login_InpuBox {
	width: calc(100% - 22px);
	padding: 10px;
	font-size: 10pt;
	vertical-align: middle;
	background: var(--sys-bg-subtle);
	border: 1px solid #f0f0f0;
	outline: none;
}
	.Login_InpuBox:focus {
		background: white;
		border: 1px solid black;
	}
.Login_InputLine {
	margin: 5px 0px;
}
.secCESummary {
	background-image: linear-gradient(to right, white 20%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 0) 80%), url(/Graphics/Graphics_Site/231.jpg);
	background-position: top right;
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
	max-width: var(--content-max-width);
	margin: 10px auto;
	border-radius: 10px;
	padding: 30px 20px;
}

@media (max-width: 800px) {
	.secCESummary {
		background-image: none;
		margin: 0px;
		padding: 5px
	}
	.tdBookListPadding {
		padding: 3px
	}
	a.aSkipNav {
		display: none
	}
	.divAllContent {
		margin: 5px auto;
		border-radius: 0px;
		padding: 10px 10px 30px 10px;
	}
	.Login_LeftImage {
		max-width: 250px
	}
	#imgLoginLeft {
		display: none
	}
	.divLoginTitle, .divLoginInstructions, .Login_Logo, .Login_DictionaryBox, .Login_LinkBox, .Login_Credentials, .Login_Footer, .Login_Error {
		margin: 4px auto;
	}
	#divLoginRightBox {
		margin: 0px;
		padding: 0px 20px;
		width: 100%;
		float: none;
	}
	.divSecondLevel {
		border-radius: 0px;
		border: none;
		padding: 3px;
	}
}

/* --- Popup menu --- */
.popmenu_main	{ border-radius:5px;position: absolute; width: 250px; display: none; z-index: 110; border: 1px solid var(--sys-border); background: var(--menu_popup-outer-background); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.8); overflow: hidden }
.popmenu_header	{ border-bottom: 1px solid #ddc; background: var(--menu_popup-outer-background) }
.popmenu_text	{ border: 1px solid transparent; background: white; cursor: pointer }
	.popmenu_text:focus {
		outline-color: var(--focus-color);
		outline-offset: 0px;
		background: #def;
	}
.popmenu_text.selected { font-weight: bold; background: var(--menu_popup-outer-background); border: 1px solid var(--sys-border) }
.popmenu_text:hover { background: var(--menu_popup-item-selected); border: 1px solid var(--brand-accent) }

/* --- Top navigation --- */
.menu_img_banner {
/*	max-height:50px;*/
}
#menu_nav {
	float: left;
	display: flex;
	flex-direction: row;
	margin: 10px 0 2px 0px;
	flex-wrap: wrap;
	width: 100%;
	clear: both
}
#menu_main {
	display: block;
	overflow: hidden;
/*	height: var(--menu_top_height);*/
	background-color: var(--menu_top-background)
}
#menu_topsystemlinks_panel {
	position: absolute;
	top: 0px;
	right:15px;
}
.menu_topsystemlinks_item {
	float: left;
	background: var(--menu_top-link-background);
	margin: 3px 5px 0 0;
	padding: 5px 4px 3px 4px;
	height: 31px;
	border-radius: 5px;
	border:none
}
	.menu_topsystemlinks_item svg {
		stroke: var(--menu_top-text);
		float: none;
	}
	.menu_topsystemlinks_item > span {
		cursor: pointer;
		stroke-width: 2px;
		stroke: var(--menu_top-text);
		color: var(--menu_top-text);
		font-size: 14px;
	}
	.menu_topsystemlinks_item:focus {
		outline: 2px solid var(--focus-color);
		outline-offset: -1px
	}

.menu_divMob {
	width: 250px;
	display: none;
	background: var(--menu_popup-background);
	z-index: 110;
	position: absolute;
	border: 1px solid var(--menu_div-border);
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.8);
}
.menu_item {
	cursor: pointer;
	white-space: nowrap;
	height: 24px;
	padding: 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--section_body-link);
	font-weight: 400;
	font-size: 14px;
}
	.menu_item:focus {
		background-color: #cde !important;
		outline: 2px solid var(--focus-color) !important;
	}
	.menu_item:hover, .menu_item_selected {
		background-color: var(--menu_popup-item-selected);
		outline: 2px solid var(--menu_popup-item-selected-border);
		border-color: transparent;
	}
.mmm_tab {
	border-top: 1px solid transparent;
	padding: 2px;
	margin: 0px 10px;
	cursor: pointer;
	font-family: HelveticaNeue-Light, Helvetica Neue Light, Helvetica, Roboto, Arial, sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: var(--menu_top-text);
	text-decoration: none;
	border-radius: 3px;
	border-top: 2px solid transparent
}
	.mmm_tab:focus {
		outline: 2px solid var(--focus-color);
		outline-offset: -1px;
		border-top-width: 2px;
		border-color: transparent;
	}
.mmm_tab_on:hover {
	border-top-width: 1px !important;
}
.mmm_tab_on {
	font-weight: 600;
	border-top: 2px solid var(--menu_top-hover-line);
	border-radius: 0px
}
.mmm_tab:hover {
/*	padding-top: 3px;*/
	border-top-color: var(--menu_top-hover-line);
}
.mmm_tab_Image {
	padding: var(--menu_leftlogo-padding)
}
#menu_page_name, .btnHideLeft, .mmm_tabSub, #menu_mobile, .mob_vis {
	display: none;
}
svg.menu_top_link_selected {
	stroke-width: 4px;
}
.menu_sub_main {
	background: var(--submenu-2nd_background);
	min-height: 25px;
	overflow: hidden;
	padding: 2px 5px 0 15px;
	border-bottom: 2px solid var(--submenu-2nd_border);
}
.menu_sub_item {
	float: left;
	font: 12px Arial, Helvetica, sans-serif;
	color: var(--submenu-2nd_text);
	white-space: nowrap;
	height: 19px;
	padding: 2px 1px;
	margin-top: 2px;
	border-radius: 3px
}
	.menu_sub_item span:hover {
		text-decoration: underline;
		cursor: pointer
	}
	.menu_sub_item:focus, .menu_sub_link:focus {
		outline: 2px solid var(--focus-color);
		outline-offset: 0px;
	}
	.menu_sub_item:not(:first-child):before {
		content: ">";
		padding: 1px 5px 1px 1px;
	}
.menu_sub_item_selected {
	text-overflow: ellipsis;
	overflow: hidden;
	font-weight: bold;
	text-decoration: none !important;
	cursor: default !important
}
.menu_sub_item_selected {
	font-weight: bold !important;
}
.menu_sub_link {
	font: 12px Arial, Helvetica, sans-serif;
	float: left;
	color: var(--submenu-2nd_text);
	padding: 2px;
	border-radius: 3px
}
	.menu_sub_link span:hover {
		text-decoration: underline;
		cursor: pointer;
	}
	.menu_sub_link:not(:first-child):before {
		content: "•";
		padding: 1px 5px 1px 1px;
	}

/* --- Mobile navigation --- */
.searchSection {
	width: 140px
}
#Search {
	width: 200px
}
.menu_mainmobile {
	display:none;
}
@media (max-width: 800px) {
	.divSearchContainer {
		justify-content: center;
		width: 100%;
		float: none;
	}
	#Search, .searchSection {width: 140px}
	.mob_hid { display: none }
	:root {
		--leftnav-width: 0px;
	}
	.mmm_tab:hover {
		border-color: transparent;
		background-color: var(--menu_tab-mob-background-hover);
	}
	.mmm_tab:focus {
		background-color: #cde;
	}
	.menu_sub_main {
		display: none
	}
	.menu_mainmobile {
		background-color: var(--menu_top-mob-background);
		overflow: hidden;
		border-bottom: 1px solid var(--menu_leftnavcontent-mob-border);
		display: block;

	}
	.mmm_tab {
		color: var(--menu_top-mob-text);
		margin: 2px 0px;
		padding-left: 11px;
		overflow: hidden;
		text-overflow: ellipsis;
		border: none
	}
	.mmm_tab_selected {
		background: var(--menu_tab-mob-background-current)
	}
	.mmm_tabSub, .mob_vis {
		display: block
	}
	.mob_vis {
		display: revert
	}
	.btnHideLeft {
		stroke: var(--menu_icon-mob-hide);
		position: absolute;
		right: 5px;
		top: 5px;
		display: block;
		width: 24px;
		height: 24px;
		stroke-width: 2px;
		stroke-linecap: round;
		stroke-linejoin: round;
		fill: none;
		border-radius: 5px
	}
		.btnHideLeft:focus {
			outline: 2px solid var(--focus-color);
			outline-offset: -1px;
		}
	#menu_page_name {
		float: left;
		display: block;
		font-size: 15px;
		font-weight: 600;
		margin: 7px 0 0 5px;
		color: var(--menu_icon-mob-main);
	}
	#menu_nav {
		flex-direction: column;
		margin: 30px 5px 5px 5px;
		padding-top: 10px;
		display: none;
		width: calc(100% - 14px);
		border-radius: 7px;
		border: 1px solid var(--menu_leftnavcontent-mob-border);
		background: var(--menu_leftnavcontent-background);
	}
	.mmm_tab_Image {
		padding: var(--menu_leftlogo-mob-padding)
	}
	.divLeftFrame {
		display: none
	}
	#menu_main {
		height: var(--menu_top-mob-height);
	}
	#menu_mobile {
		float: left;
		margin: 3px 5px 3px 8px;
		display: block;
		stroke: var(--menu_icon-mob-main);
		cursor: pointer;
		clear: both;
		stroke-width: 2px;
		stroke-linecap: round;
		width: 24px;
		height: 24px;
		stroke-linejoin: round;
		border-radius: 5px
	}
		#menu_mobile:focus {
			outline: 2px solid var(--focus-color);
			outline-offset: -1px;
		}
		#menu_panel {
			top: 0px;
			width: 100%;
			height: 100%;
			position: absolute;
			border-radius: 2px;
			display: none;
			transition: background-color 0.3s ease-in-out;
			min-width: 250px;
			z-index: 100;
		}
	.menu_panel_canvas {
		width: 0px;
		max-width: 100%;
		transition: width 0.3s ease;
		background-color: var(--menu_leftnav-mob-background);
		height: 100%;
		overflow-x: hidden;
		padding: 5px;
		position: relative
	}
		.menu_panel_canvas:focus {
			outline: 2px solid var(--focus-color)
		}
		.panel-open {
			width: 400px;
/*			display:block !important;*/
		}
}

/* --- SVG icons --- */
.svgP { cursor: pointer; fill: none; stroke-width: 2px; stroke-linecap: round; width: 20px; height: 20px; stroke: var(--sys-text-primary); stroke-linejoin: round; float: left; border-radius: 5px }
	.svgP:focus {
		outline: 2px solid var(--focus-color);
		outline-offset: -1px;
	}
.draggable-svg .svgP {
	float: none
}
.svgM { cursor: pointer; fill: none; stroke-width: 2px; stroke-linecap: round; width: 24px; height: 24px; stroke: var(--text_on_th-bg); stroke-linejoin: round;border-radius:6px}
	.svgM:focus {
		outline: 2px solid var(--focus-color);
		outline-offset: -1px;
	}

.link_div1 {
	padding: 5px;
	font: 16pt Arial;
	border: 1px solid transparent;
	cursor: pointer;
	outline-color: var(--focus-color)
}
.link_div1 a:link, .link_div1 a:active, .link_div1 a:visited { font: 16pt Arial }
.link_div1:hover {
	background: var(--menu_popup-item-selected);
	border: 1px solid var(--brand-accent)
}
.link_div2 {
	padding-left: 10px;
	margin: 5px 0 15px 0
}

@media screen {
	.secClosed {
		height: 2px !important;
		overflow: hidden;
		padding: 0px !important;
		border-radius: 0px !important;
		display: none;
		pointer-events: none;
		user-select: none;
		max-height: 0px;
	}
	.secSubClosed {
		border-radius: 7px !important;
	}
		.secSubClosed:before {
			transform: scaleY(-1) !important;
		}
}

@media print {
	.SubMenu, #menu_main, .btn_N {
		display: none
	}
	.print_vis { display: revert }
	.matrixMainContent {
		flex-direction: column;
	}
	.sectionBody, .tabPanel {
		display: block !important;
		height: auto !important
	}
	.divDrag {
		margin: 0px
	}
	.cellI, .cellA, imgResizer, .print_hide, .svgClose, .imgResizer {
		display: none !important;
	}
	.tabPanel, .tabBody {
		background: transparent
	}
	.sectionHead .sec_left, .sectionHead .sec_leftCE {
		background-image: none;
	}
}

/* --- Messaging / home content --- */
.Sec_Mess_Title {
	font-size: 32px;
	font-weight: 300;
	color: var(--brand-text);
	margin-block-end: 0
}
.Sec_Mess {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3
}
.matrixInstructions {
	font: bold 12pt Arial, Helvetica, sans-serif;
}

/* --- Matrix layout --- */
.matrixBackground {
	background: var(--site_page-margin-background);
}
.matrixMainContent {
	display: flex;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 0px auto;
	padding: 0 10px;
}
.matrixTop {
	overflow: hidden;
	max-width: 1200px;
	margin: 0px auto 0px auto;
	padding: 10px 20px
}
.matrixSearchHeaderBox {
	font: 12pt HelveticaNeue-Light, Helvetica Neue Light, Helvetica, Roboto, Arial, sans-serif;
	font-weight: 300;
	color: var(--sys-text-secondary);
	border-bottom: 1px solid #E0E0E0;
	padding: 3px;
	height: 30px;
}
.matrixPageTitle {
	font: bold 12pt Arial, Helvetica, sans-serif;
}
.matrixRightPane, .matrixLeftPane {
	padding: 10px;
	min-width: 350px;
	flex-grow: 1;
	flex-basis: 0;
}
.matrixSectionBody {
	font-family: HelveticaNeue-Light, Helvetica Neue Light, Helvetica, Roboto, Arial, sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 24px;
}

.divSearchBook {
	display: inline;
	font-size: 13px;
	font-weight: 600
}

/* --- Section headers --- */
.sectionHead {
	display: flex;
	overflow: visible;
	height: 30px;
}
	.sectionHead .sec_left {
		font-size: 16px;
		color: var(--text_on_section_header-background);
		background-color: var(--section_header-background);
		cursor: pointer;
		width: 290px;
		padding: 5px 0 0 24px;
		min-width: 290px;
		border: 1px solid var(--sys-bg-mid);
		border-bottom: none;
		border-radius: 7px 7px 0 0;
		transition: border-radius 0.15s ease-out 0s;
		position: relative;
		box-shadow: inset 4px 0 0 var(--section_stripe-standard);
	}
	.sec_left:before {
		transition: transform 0.3s ease-in-out;
		-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px' viewBox='0 0 18 18' style='fill:none'><path d='M4 7l3-3l3 3M4 10.5l3-3l3 3' style='stroke:black;stroke-width:1'/></svg>");
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px' viewBox='0 0 18 18' style='fill:none'><path d='M4 7l3-3l3 3M4 10.5l3-3l3 3' style='stroke:black;stroke-width:1'/></svg>");
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		background-color: currentColor;
		background-image: none;
		content: "";
		width: 18px;
		height: 18px;
		transform: scaleY(1);
		position: absolute;
		left: 5px;
	}
	.sectionHead .sec_leftCE {
		font-size: 16px;
		color: var(--text_on_CEsection_header-bg-tier1);
		cursor: pointer;
		width: 290px;
		padding: 5px 0 0 24px;
		background-color: var(--CEsection_header-bg-tier1);
		min-width: 290px;
		border: none;
		border-radius: 7px 7px 0 0;
		transition: border-radius 0.15s ease-out 0s;
		position: relative;
		box-shadow: inset 4px 0 0 var(--section_stripe-CE);
	}
	.sec_leftCE:before {
		transition: transform 0.3s ease-in-out;
		-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px' viewBox='0 0 18 18' style='fill:none'><path d='M4 7l3-3l3 3M4 10.5l3-3l3 3' style='stroke:black;stroke-width:1.5'/></svg>");
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px' viewBox='0 0 18 18' style='fill:none'><path d='M4 7l3-3l3 3M4 10.5l3-3l3 3' style='stroke:black;stroke-width:1.5'/></svg>");
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		background-color: currentColor;
		background-image: none;
		content: "";
		width: 18px;
		height: 18px;
		transform: scaleY(1);
		position: absolute;
		left: 5px;
	}
		.sectionHead .sec_left:focus, .sectionHead .sec_leftCE:focus {
			outline: 2px solid var(--focus-color);
			outline-offset: -2px
		}

.sectionHead .sec_left_full {
	width: 100%;
}
.divCBHolder { border-radius: 6px; padding: 3px; overflow: hidden; border: 1px solid #ccc; background: #fff; font-size: 14px }
.cb {
	vertical-align: middle;
	margin: -1px 0.5rem 0px 0px
}
	.cb:focus, input[type=checkbox]:focus {
		outline: 2px solid var(--focus-color);
		outline-offset: 0px;
	}
	.sectionBody {
		padding: 5px;
		border-left:   1px solid var(--sys-bg-mid);
		border-right:  1px solid var(--sys-bg-mid);
		border-top:    none;
		border-bottom: 1px solid var(--sys-bg-mid);
		width: 100%;
		overflow: hidden;
		border-radius: 0 0 7px 7px;
		background-color: var(--section_body-background);
		position: relative;
		transition: all 0.3s ease-out;
		height: auto;
		box-shadow: inset 4px 0 0 var(--section_stripe-standard);
	}
	/* CE section bodies — stripe matches .sec_leftCE header */
	.sectionHead:has(.sec_leftCE) + .sectionBody {
		box-shadow: inset 4px 0 0 var(--section_stripe-CE);
	}
	.sec_overflow {
		height: 250px;
		overflow-y: hidden;
	}

.sec_expander {
	cursor: pointer;
	transition: top 0.3s ease-out;
	position: absolute;
	left: 0px;
	bottom: 0px;
	padding-top: 2px;
	background: var(--section_header-background);
	text-align: center;
	display: block;
	width: 100%;
	height: 16px;
	background-image: url(/images/more.png);
	background-repeat: no-repeat;
	background-position-x: center;
	background-position-y: 2px
}
.liHomeBulletItem > a:link {
	color: var(--section_body-link);
}

/* --- Home Page Section Settings --- */
.divProgramTable	{ border: none; padding: 5px }
.divHomeBarCenter	{
	width: 300px;
	border: 1px solid #ccc;
	filter: drop-shadow(#333 0px 2px 2px);
	background: var(--sys-bg-subtle);
	font: normal bold 10pt Arial, Tahoma, Helvetica, sans-serif;
	color: var(--sys-text-secondary);
	height: 26px;
	padding: 4px 20px;
	margin-bottom: 5px
}
.tdHomePadding		{ padding-top: 5px }
.divHomeBarBody		{ clear: left }
.divBookLeftNav		{ height: 500px; overflow: auto; background: #fbfbfb; padding: 7px }
.divRightFrame		{ float: left; padding: 10px; overflow: auto; width: 800px }
.divLeftFrame		{ float: left; padding: 3px 5px; width: 222px; background: var(--sys-bg-subtle); overflow: auto; min-width: 222px }
.divLeftDate		{ border-bottom: 1px solid var(--sys-border); padding: 5px; text-align: center; font-weight: bold }
.divLeftWelcome		{ border-bottom: 1px solid var(--sys-border); padding: 5px; font-size: 10pt }
.divLeftMessage		{ padding: 15px 5px 5px 5px }
.divLeftSectionTitle { border-bottom: 1px solid #ccc; font-size: 11pt; font-weight: bold; padding: 3px }

.tNormal	{ background: #fff; height: 20px }
.tHover		{ background: #eee; height: 20px }

/* --- Content Manager: Book Status Colors --- */
/* 1-Live (Editable)  2-Inactive  3-Live (Locked)  5-Draft */
.spanBookStatus1	{ display: inline-block; width: 100px; background: #f8f8f8; border: 2px solid #fee087; border-radius: 5px; padding: 1px }
.spanBookStatus2	{ display: inline-block; width: 100px; background: #f8f8f8; border: 2px solid #ffb444; border-radius: 5px; padding: 1px }
.spanBookStatus3	{ display: inline-block; width: 100px; background: transparent; padding: 1px }
.spanBookStatus5	{ display: inline-block; width: 100px; background: #f8f8f8; border: 2px solid #ffb444; border-radius: 5px; padding: 1px }

/* Change Status: 0-No Changes  1-Changes Pending  2-In Review */
.spanBookChangeStatus0	{ display: inline-block; width: 100px; background: transparent; padding: 1px }
.spanBookChangeStatus1	{ display: inline-block; width: 100px; background: #f8f8f8; border: 2px solid #e99a9b; border-radius: 5px; padding: 1px }
.spanBookChangeStatus2	{ display: inline-block; width: 100px; background: #f8f8f8; border: 2px solid #ffb444; border-radius: 5px; padding: 1px }

/* Book Review Status (0-Active  1-Inactive  2-Completed) — uncomment if needed
.spanBookReviewStatus0	{display:block; width:80px; background:#fee087}
.spanBookReviewStatus1	{display:block; width:80px; background:#e99a9b}
.spanBookReviewStatus2	{display:block; width:80px; background:#fff}
*/


/* ── do not modify ─────────────────────────────────────── */
.iE	{ display: block; width: 1px; height: 1px }
.tdTitle		{ color: var(--sys-link); padding-right: 5px; text-align: right }
.ulHomePageBulletList	{ margin-top: 0px; list-style-position: outside; margin-left: -20px }
.liHomeBulletItem		{ padding-top: 10px; color: #666; padding-left: 0px }
/* ─────────────────────────────────────────────────────── */

/* --- Table Popup (DGT) --- */
.secDGT				{ background: #dcdcdc }
.secDivDGT			{ width: 345px; padding: 5px 0px 5px 10px; font-size: 18px }
.secTdDGT			{ padding: 2px 1px 1px 10px }
.secTdDGTLeft		{ padding: 2px 1px 1px 0px; width: 325px }
.secTdDGTRight		{ padding: 2px 0px 1px 0px }
.secTableDGT		{ width: 100%; margin-top: 10px; border: 0px solid #fff; background: #dcdcdc; cursor: default }
.secBodyDGT			{ border-bottom: 1px solid #dcdcdc; background: #f7f7f7 }
.divExpandableLabelOpened { background-color: #eee; height: 38px; cursor: pointer; padding: 11px 0px 0px 33px; font-weight: 400; font-size: 14px; background-repeat: no-repeat; background-position: left center; background-image: url(/images/dgtSectionMinus.png) }
.divExpandableLabelClosed { background-color: #eee; height: 38px; cursor: pointer; padding: 11px 0px 0px 33px; font-weight: 400; font-size: 14px; background-repeat: no-repeat; background-position: left center; background-image: url(/images/dgtSectionPlus.png) }
	.divExpandableLabelClosed:focus, .divExpandableLabelOpened:focus {
		outline: 2px solid var(--focus-color);
		cursor: pointer;
		outline-offset: -2px;
	}
.divExpandableBody {
	background: var(--sys-bg-light);
	border-bottom: 1px solid black;
	transition: all 0.3s ease-out;
	overflow: hidden
}

/* --- Branch Exam Dashboards --- */
.divBEHeader {
	font-weight: bold;
}
.dashTabPanel {
	background-color: #f7f7f7;
	border: 1px solid #a5a5a5;
	margin-top: 8px;
	margin-bottom: 2px;
	padding: 4px;
	border-radius: 8px
}
.dashValue		{ min-width: 80px }
.dashBookTitle	{ font: bold 16px Arial }
.dashSecTitle	{ font: bold 16px Arial; padding: 3px }
.dashChartTitle	{ font: bold 13px Arial; padding: 4px }
.dashTile {
	display: inline-block;
	float: left;
	margin-left: 10px;
	margin-top: 10px;
	margin-right: 40px;
}

/* --- Search bar --- */
.drpdwnSEARCH {
	height: 22px;
	float: left;
	width: 200px;
	padding: 0px 4px;
	font: 10pt Tahoma, Arial, Helvetica, sans-serif;
	vertical-align: middle;
	border: 0px solid var(--sys-text-secondary);
	border-bottom: 1px solid #e5e6e7
}
.drpdwnSEARCHFull {
	padding: 0px 4px;
	height: 22px;
	float: left;
	width: 200px;
	font: 10pt Tahoma, Arial, Helvetica, sans-serif;
	vertical-align: middle;
	border-radius: 3px 0px 0px 3px;
	border: 1px solid var(--sys-text-secondary);
	background: white
}
.drpdwnSEARCH:focus {
	border: 1px solid black;
	background: white;
}
.searchIMG {
	float: left;
	width: 26px;
	height: 24px;
	border: 0px solid var(--sys-text-secondary);
	cursor: pointer;
}
.SepLineNew {
	position: absolute;
	top: 0px;
	width: 4px;
	display: none;
	cursor: col-resize;
	background: #d6d6d6 url(/images/vgrabber.gif) no-repeat center;
	transition: background 0.15s ease-in;
}
	.SepLineNew.active, .SepLineNew:hover {
		background: #B6CCF3 url(/images/vgrabber.gif) no-repeat center;
	}

/* --- Branch Exam Tasks --- */
.tdTask {
	border: 2px solid red;
	background: none;
	padding: 4px;
	border-radius: 7px
}
.wfTitle	{ font-size: 32px; font-weight: 400 }
button.btnSect {
	float: left;
	text-align: left;
	padding: 7px 8px 7px 19px;
	border: none;
	background-color: transparent;
	border-radius: 5px;
	width: calc(100% - 100px);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}
button.btnSect:before {
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' width='14' height='12' style='stroke:black;fill:black'%3E%3Cpolygon points='4 3, 4 13, 12 8' /%3E%3C/svg%3E");
	content: "";
	position: absolute;
	transition: transform 0.3s ease-in-out;
	transform: rotate(90deg);
	width: 14px;
	height: 14px;
	left: 9px;
}
	button.btnSect[aria-expanded="false"]::before {
		transform: rotate(0deg);
	}
	button.btnSect:hover {
		outline: 2px solid var(--focus-color);
		background-color: #def;
		cursor: pointer;
		outline-offset: -2px;
	}
	button.btnSect:focus {
		background-color: #def;
		outline: 2px solid var(--focus-color);
		cursor: pointer;
		outline-offset: -2px;
	}

.btnNavSvg {
	stroke: var(--be-folder-main-color);
	width: 40px;
	height: 40px;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	outline-color: var(--focus-color);
	outline-offset: -1px;
	stroke-width: 3.5px;
	cursor: pointer
}

/* --- CE Info table --- */
table.CEInfo {
	width: calc(100% - 10px);
	margin: 5px;
	font-size: 14px
}
.divCEleadin {
	text-align: center
}
.CEInfo td {
	text-align: center;
	padding: 8px;
	background-color: #eee
}

/* --- Branch Exam Status Badges --- */
.divBEStatusT	{ padding: 7px 0px; font-size: 16px; font-weight: 500; text-align: center; border: 2px solid #666; border-radius: 14px; float: left; width: 110px; height: 35px; margin: 0 0 0 10px }
.divBEStatus0	{ padding: 5px; border-radius: 10px; font-weight: bold; margin: 0 0 0 10px; overflow: hidden; width: 110px; text-align: center; float: left; background: #e8e8e8 }
.divBEStatus1_2	{ padding: 5px; border-radius: 10px; font-weight: bold; margin: 0 0 0 10px; overflow: hidden; width: 110px; text-align: center; float: left; background: #e67f29 }
.divBEStatus9_3	{ padding: 5px; border-radius: 10px; font-weight: bold; margin: 0 10px 0 20px; overflow: hidden; width: 110px; text-align: center; float: left; background: #f9B927 }
.divBEStatus4_10 { padding: 5px; border-radius: 10px; font-weight: bold; margin: 0 0 0 10px; overflow: hidden; width: 110px; text-align: center; float: left; background: #b7d950 }
.divBEStatus8	{ padding: 5px; border-radius: 10px; font-weight: bold; margin: 0 0 0 10px; overflow: hidden; width: 110px; text-align: center; float: left; background: #e8e8e8 }

/* --- CE Status widget --- */
.divCEStatus {
	padding: 5px;
	border-radius: 6px;
	font-weight: bold;
	margin: 0;
	text-align: center;
	height: 90px;
	float: none;
	width: 100%;
	cursor: pointer;
	transition: all 0.3s ease;
	background: var(--CEsection_header-bg-tier1);
	color: var(--text_on_CEsection_header-bg-tier1);
}
/* Unselected CE provider counter — muted, recedes */
.divCEStatus.divSumNotSelected {
	background: var(--sys-bg-mid) !important;
	color: var(--sys-text-secondary) !important;
	opacity: 1;
}

.divBETask		{ padding: 7px 0px; font-size: 16px; font-weight: 500; text-align: center; border: 2px solid #d33234; border-radius: 14px; float: left; width: 110px; height: 35px; margin: 0 0 0 10px; color: #d33234 }
.divBETask0		{ border-color: #ccc; color: #999 }
.divBETaskB		{ padding: 5px 5px; border-radius: 10px; font-weight: bold; margin: 0 0 0 10px; overflow: hidden; width: 110px; text-align: center; float: left; background: #e8e8e8; color: #000 }

/* --- Filter / View controls --- */
.divFilterSelector	{ height: 26px; width: 250px; line-height: 20px; padding-left: 4px; padding-right: 2px; font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; cursor: pointer; background: #fcfcfc; color: #000; border-radius: 6px }
.divFilterSelector:focus { outline-color: var(--focus-color); outline-offset: -2px }
#divFiltersButtons	{ margin: 0 24px 2px 0; width: 620px; overflow: hidden; padding: 2px }
.divTOC				{ border: 1px solid #aaa; border-radius: 6px; background: #fff }
.liF {
	cursor: pointer;
	display: block;
	min-width: 100px;
	margin: 2px;
	border-radius: 6px;
	padding-bottom: 0px;
	overflow: hidden
}
.liP {
	cursor: pointer;
	display: block;
	min-width: 100px;
	margin: 2px;
	border-radius: 6px;
	padding-bottom: 0px;
}
	.liP:focus, .liF:focus {
		background: #def;
		outline: 2px solid var(--focus-color)
	}

.svgTN {
	cursor: pointer;
	fill: none;
	stroke-width: 2px;
	stroke-linecap: round;
	stroke: var(--sys-text-primary);
	stroke-linejoin: round;
	border-radius: 3px;
	transition: all 0.3s ease;
	width: 16px;
	height: 16px;
	margin-top: 6px;
	flex-grow: 0;
	flex-shrink: 0;
	transform: rotate(0deg)
}
.TLM0 {
	line-height: 28px;
	font-size: 10pt;
	overflow: hidden;
	font-family: HelveticaNeue-Light, Helvetica Neue Light, Helvetica, Roboto, Arial, sans-serif;
	font-weight: 300;
	padding-left: 7px;
	text-overflow: ellipsis;
	white-space: nowrap;
	height: 28px;
	color: var(--sys-text-primary);
	flex-grow: 1
}
.imgLeftNavIcon {
	stroke: var(--sys-text-primary);
	stroke-width: 2;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	flex-shrink: 0
}
.imgDisabled {
	stroke: var(--sys-bg-mid);
	color: red
}

@media (max-width: 800px) {
	.Sec_Mess        { min-width: 300px; border-radius: 0; padding: 10px }
	.divSumCont      { width: 150px !important }
	.divSumNum       { font-size: 28px }
	.tblFilters > tbody > tr > td {
		display: block;
		text-align: left !important;
		padding: 1px !important;
		float: left;
	}
	.tblFilters > tbody > tr {
		display: block;
		overflow: hidden;
		border: 1px solid #aaa;
		border-radius: 6px;
		margin-bottom: 5px;
		padding: 5px;
		background: var(--sys-bg-subtle)
	}
	.divFilterSelector {
		width: 150px
	}
	#divFiltersButtons {
		margin: 0px 24px 2px 0;
		display: flex;
		justify-content: flex-end;
		width: 100%
	}
}
.divFilterSum		{ margin: -2px 0 0 5px; font-size: 13px; padding: 2px 2px 0px 5px; display: inline-block; color: #666 }
.tdFW				{ overflow: hidden; text-overflow: ellipsis }
.divStaticFixed		{ position: fixed; width: calc(100vw - 36px) }
.divStaticFloat		{ background: #fff; min-width: 900px }
.divCbField			{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden }
.divMessageOldSystem { display: none !important }
.accessibility {
	position: absolute;
	left: -9999px;
	width: 100px;
	height: auto;
	overflow: hidden;
}

/* --- Floating label input fields --- */
.divField {
	position: relative;
	color: #666;
	font-size: 13px;
	transition: font-size 0.3s ease;
}
	.divField:focus-within .divLabelN {
		color: var(--brand-focus) !important;
		font-size: 11px;
	}
.drpdwnN {
	padding: 18px 6px 0px 6px !important;
	font-family: Arial, sans-serif;
	border: 1px solid #949494;
	border-bottom: 2px solid #949494;
	vertical-align: bottom;
	padding: 2px;
	box-sizing: border-box;
	height: 42px !important;
	border-radius: 6px;
	font-size: 16px !important;
	color: #004
}
	.drpdwnN::placeholder {
		color: #ddd;
	}
	.drpdwnN:focus {
		outline: 2px solid var(--focus-color);
		outline-offset: -1px;
		border: 1px solid transparent !important;
		border-bottom: 2px solid transparent !important;
	}
.drpdwnS {
	padding-top: revert !important;
	height: 30px !important;
	line-height: 30px
}
.divLabelN {
	margin: 5px 0 2px 0;
	position: absolute;
	top: -2px;
	left: 8px;
	display: block;
	transition: all 0.3s ease;
}

/* --- Group-by / view controls --- */
.svgGroup {
	stroke: var(--text_on_brand-accent);
	transition: transform 0.3s ease-in-out;
}
.divGroupBy[isselected=true] {
	border: 1px solid var(--brand-accent);
	background: var(--brand-accent);
	color: var(--text_on_brand-accent)
}
.divGroupBy {
	float: left;
	margin-left: 10px;
	border: 1px solid var(--sys-border);
	background: #fff;
	padding: 5px 8px;
	border-radius: 8px;
	color: black;
	font-size: 15px
}
	.divGroupBy label { cursor: pointer }
	.divGroupBy input[type=radio]:focus {
		outline: 1px solid var(--brand-accent);
	}
#divGroupByLabel {
	float: left;
	margin-top: 5px;
	padding-top: 3px
}
.divGroupH {
	background: var(--brand-accent);
	color: var(--text_on_brand-accent);
	font-size: 15px;
	padding: 4px;
	cursor: pointer;
	border-radius: 6px 6px 0px 0px;
	transition: all 0.3s ease-in-out;
}
	.divGroupH:focus {
		outline: 2px solid var(--focus-color);
		outline-offset: -1px;
	}
.divGroupP {
	margin-top: 2px;
	margin-bottom: 8px;
}
.divGroupB {
	transition: all 0.3s ease-in-out;
	overflow: hidden;
	border-left: 1px solid var(--sys-border);
	border-right: 1px solid var(--sys-border);
	border-bottom: 1px solid var(--sys-border)
}

/* --- View toggle buttons --- */
.btn_View {
	border-radius: 6px;
	border: 1px solid var(--brand-accent);
	height: 26px;
	font-size: 15px;
	padding: 2px 10px;
	cursor: pointer;
	background: #fff;
	color: var(--brand-accent);
}
	.btn_View:focus {
		outline: 2px solid var(--focus-color);
		outline-offset: -1px
	}
.divViewCont {
	padding: 1px;
	float: left;
	margin-right: 8px
}
.btnViewSel {
	background: var(--brand-accent);
	color: var(--text_on_brand-accent);
}
#divFiltersEmpty {
	border: 1px solid #aaa;
	padding: 3px;
	border-radius: 6px;
	max-width: 620px;
	text-align: center;
	margin-bottom: 5px
}
#divViews {
	overflow: hidden;
	padding: 20px 8px 5px 8px
}
div#divFilters2 {
	border: 1px solid var(--brand-surface-mid);
	border-top: none;
	background: var(--sys-bg-subtle)
}

/* --- CE Summary counts --- */
.divSumCont {
	float: left;
	margin: 0 0px 0 5px;
	width: 150px;
	cursor: pointer;
}
.divSumName {
	color: var(--text_on_CEsection_header-bg-tier1);
	opacity: 0.8;
	padding-top: 5px
}
.divSUMT {
	margin-bottom: 0;
	border-bottom: none;
	padding: 0 0 0 10px;
	font-size: 18px;
	text-align: left;
	color: var(--text_on_CEsection_header-bg-tier1)
}
.divSumNum {
	font-size: 30px;
	color: var(--text_on_CEsection_header-bg-tier1)
}
/* --- CE load button --- */
#btnLoadCE {
	height: 30px;
	font-size: 15px;
	background: var(--brand-accent);
	border: 1px solid var(--brand-accent);
	color: var(--text_on_brand-accent);
}

/* --- CE provider name row --- */
.tdProviderName {
	color: black;
	background: rgba(0,0,0,0.04);
	width: 100%;
	font-size: 15px
}
/* --- Radio button styles --- */
@keyframes cbchecked {
	0%		{ outline-offset: -1px }
	100%	{ outline-offset: 2px }
}
.cb[type=radio] {
	border-radius: 50%;
	border: 3px solid #FFF;
	appearance: none;
	height: 1rem;
	width: 1rem;
	background: white;
	box-shadow: 0 0 0 1px var(--sys-border);
	cursor: pointer;
	margin: 1px 0.5rem 2px 3px
}
	.cb[type=radio]:checked {
		background: var(--brand-focus);
		animation-name: cbchecked;
		animation-duration: 0.2s;
		animation-iteration-count: 1;
	}
	.cb[type=radio]:focus {
		outline: 2px solid var(--focus-color);
		outline-offset: 2px;
	}
	.cb[type=radio]:disabled {
		background-color: #d8d8d8;
		border: 3px solid #ccc;
	}
	.cb[type=radio]:disabled:checked {
		background-color: #555;
	}

.divMore {
	overflow: hidden;
	border-radius: 6px;
	padding: 2px;
	cursor: pointer;
	color: var(--brand-accent)
}
	.divMore:focus {
		outline: 2px solid var(--focus-color);
		outline-offset: -2px;
		background: #cde
	}


[role="toolbar"] button .popup-label {
	display: block;
	width: initial;
	border: 2px solid var(--menu_top-background);
	padding: 2px 4px;
	border-radius: 5px;
	position: absolute;
	top: -30000em;
	background-color: var(--menu_top-text);
	color: var(--menu_top-background);
	font-weight: normal;
	margin-left: -20px;
	white-space: nowrap
}
	[role="toolbar"] button .popup-label.show {
		text-align: center;
		top: 3em;
	}

	[role="toolbar"] button .popup-label::before {
		top: -100%;
		left: 25px;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		border-color: rgb(255 255 255 / 0%);
		border-top-color: var(--menu_top-text);
		border-width: 12px;
		margin-left: -12px;
		transform: rotate(180deg);
	}