/* Dark mode. Every rule is scoped to html[data-theme="dark"], which the <head> script in main_template_cms.htm sets from localStorage (framed pages follow the parent page). Page-specific dark rules live with each template's own <style> block. */

html[data-theme="dark"] {
	color-scheme: dark;

	--dk-bg: #15181B;
	--dk-surface: #1D2125;
	--dk-surface-2: #252A2F;
	--dk-border: #343A40;
	--dk-text: #DDE1E4;
	--dk-muted: #9AA3AB;
	--dk-heading: #F1F3F5;
	--dk-tint: #1D2A20;
	--dk-tint-border: #2E4430;
	--dk-link: #7CCB63;
}

/* Base */
html[data-theme="dark"] body { color: var(--dk-text); background: var(--dk-bg); }
/* :where() keeps these at element specificity so component colors (white header links, etc.) still win. */
:where(html[data-theme="dark"]) :is(h1, h2, h3, h4, h5, h6, legend) { color: var(--dk-heading); }
:where(html[data-theme="dark"]) a { color: var(--dk-link); }
:where(html[data-theme="dark"]) a:hover,
:where(html[data-theme="dark"]) a:focus { color: #95D980; }
html[data-theme="dark"] :is(legend, hr) { border-color: var(--dk-border); }
html[data-theme="dark"] :is(.text-muted, .help-block) { color: var(--dk-muted); }
html[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) :is(small, .small) { color: var(--dk-muted); }
html[data-theme="dark"] :is(code, pre, kbd) { color: var(--dk-text); background: var(--dk-surface-2); border-color: var(--dk-border); }

/* Bootstrap surfaces */
html[data-theme="dark"] :is(.panel, .well, .list-group-item, .jumbotron, .thumbnail, .breadcrumb) { color: var(--dk-text); background-color: var(--dk-surface); border-color: var(--dk-border); }
html[data-theme="dark"] .panel-default > .panel-heading { color: var(--dk-heading); background-color: var(--dk-surface-2); border-color: var(--dk-border); }
html[data-theme="dark"] .panel-footer { background-color: var(--dk-surface-2); border-color: var(--dk-border); }
html[data-theme="dark"] .img-thumbnail { background-color: var(--dk-surface-2); border-color: var(--dk-border); }

/* Forms */
html[data-theme="dark"] :is(.form-control, .input-group-addon) { color: var(--dk-text); background-color: var(--dk-surface-2); border-color: var(--dk-border); }
html[data-theme="dark"] .form-control::placeholder { color: #737D86; }
html[data-theme="dark"] .form-control:is([disabled], [readonly]),
html[data-theme="dark"] fieldset[disabled] .form-control { color: var(--dk-muted); background-color: #1A1E21; }
:where(html[data-theme="dark"]) :where(label, .control-label) { color: var(--dk-text); }

/* Tables */
html[data-theme="dark"] .table { color: var(--dk-text); }
html[data-theme="dark"] .table > :is(thead, tbody, tfoot) > tr > :is(th, td) { border-color: var(--dk-border); }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .03); }
/* Bootstrap paints the hover on the cells, not the row */
html[data-theme="dark"] .table-hover > tbody > tr:hover > :is(td, th),
html[data-theme="dark"] .table-hover.rowlink tr:hover td { background-color: rgba(58, 125, 40, .08); }
html[data-theme="dark"] .table-bordered { border-color: var(--dk-border); }

/* Buttons */
html[data-theme="dark"] .btn-default { color: var(--dk-text); background-color: var(--dk-surface-2); border-color: var(--dk-border); }
html[data-theme="dark"] .btn-default:is(:hover, :focus, :active, .active) { color: var(--dk-heading); background-color: #2E343A; border-color: #454C53; }
html[data-theme="dark"] .close { color: var(--dk-text); text-shadow: none; opacity: .6; }
html[data-theme="dark"] .close:hover { color: var(--dk-heading); opacity: .9; }

/* Overlays (many are appended to body, so none of these are page-scoped) */
html[data-theme="dark"] .dropdown-menu { background-color: var(--dk-surface); border-color: var(--dk-border); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .dropdown-menu > li > a { color: var(--dk-text); }
html[data-theme="dark"] .dropdown-menu > li > a:is(:hover, :focus) { color: #FFFFFF; background-color: #3A7D28; }
html[data-theme="dark"] .dropdown-menu .divider { background-color: var(--dk-border); }
html[data-theme="dark"] .modal-content { color: var(--dk-text); background-color: var(--dk-surface); border-color: var(--dk-border); box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }
html[data-theme="dark"] :is(.modal-header, .modal-footer) { border-color: var(--dk-border); }
html[data-theme="dark"] .modal-backdrop.in { opacity: .7; }
html[data-theme="dark"] .popover { color: var(--dk-text); background-color: var(--dk-surface-2); border-color: var(--dk-border); }
html[data-theme="dark"] .popover-title { background-color: var(--dk-surface); border-color: var(--dk-border); }
html[data-theme="dark"] .pagination > li > :is(a, span) { color: var(--dk-text); background-color: var(--dk-surface); border-color: var(--dk-border); }
html[data-theme="dark"] .pagination > .active > :is(a, span) { color: #FFFFFF; background-color: #3A7D28; border-color: #3A7D28; }
html[data-theme="dark"] .nav-tabs { border-color: var(--dk-border); }
html[data-theme="dark"] .nav-tabs > li > a:hover { background-color: var(--dk-surface-2); border-color: var(--dk-border); }
html[data-theme="dark"] .nav-tabs > li.active > a { color: var(--dk-heading); background-color: var(--dk-surface); border-color: var(--dk-border) var(--dk-border) transparent; }

/* select2 (its dropdown is appended to body) */
/* !important matches cvweb.css, which forces a #ccc border */
html[data-theme="dark"] .select2-container--default :is(.select2-selection--single, .select2-selection--multiple) { background-color: var(--dk-surface-2); border-color: var(--dk-border) !important; }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--dk-text); }
html[data-theme="dark"] .select2-dropdown { color: var(--dk-text); background-color: var(--dk-surface); border-color: var(--dk-border); }
html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field { color: var(--dk-text); background-color: var(--dk-surface-2); border-color: var(--dk-border); }
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] { background-color: var(--dk-surface-2); }
html[data-theme="dark"] body .select2-container--default .select2-selection--multiple .select2-selection__choice { color: var(--dk-text); background: var(--dk-tint); border-color: var(--dk-tint-border); }

/* Alerts */
html[data-theme="dark"] .alert-danger { color: #F2C4C2; background: #2C1C1C; border-color: #4A2A29; border-left-color: #D9534F; }
html[data-theme="dark"] .alert-danger :is(.alert-heading, a:not(.btn)) { color: #F5A9A6; }
html[data-theme="dark"] .alert-warning { color: #F1DDB0; background: #2B2417; border-color: #4A3D22; border-left-color: #F0AD4E; }
html[data-theme="dark"] .alert-warning :is(.alert-heading, a:not(.btn)) { color: #F5CF85; }
html[data-theme="dark"] .alert-info { color: #C7DCEE; background: #18232D; border-color: #26394A; border-left-color: #4A90C2; }
html[data-theme="dark"] .alert-info :is(.alert-heading, a:not(.btn)) { color: #9CC6E8; }
html[data-theme="dark"] .alert-success { color: #CDE8C3; background: var(--dk-tint); border-color: var(--dk-tint-border); border-left-color: #3A7D28; }
html[data-theme="dark"] .alert-success :is(.alert-heading, a:not(.btn)) { color: #A7DB94; }

/* Header and footer */
html[data-theme="dark"] .euclid-header { box-shadow: 0 4px 6px -2px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .euclid-logobar { background: var(--dk-surface); }
html[data-theme="dark"] .euclid-menu > li > a { color: var(--dk-text); }
html[data-theme="dark"] .euclid-menu .dropdown-menu { border-top-color: #3A7D28; }
html[data-theme="dark"] .euclid-footer { background-image: linear-gradient(to right bottom, #0B5E3F 0%, #2F6B24 60%); }
html[data-theme="dark"] .euclid-footer .euclid-footer-social a:is(:hover, :focus) { color: #0B5E3F; }
html[data-theme="dark"] .euclid-eyebrow { background-image: linear-gradient(to right, #0B5E3F 0%, #2F6B24 100%); }

/* Login, password and launch screens */
/* The banner SVG has a white wedge along its bottom that only blends into a white page, so dark mode uses the footer gradient instead */
html[data-theme="dark"] .euclid-hero { background: linear-gradient(to right bottom, #0B5E3F 0%, #2F6B24 60%); }
html[data-theme="dark"] .euclid-hero::before { content: none; }
/* Framed on the DNN hero banner, which has its own dark gradient */
html.cv-on-hero[data-theme="dark"] body { background: transparent; }
html.cv-on-hero[data-theme="dark"] body:not(:has(#euclidHeader)) .euclid-hero :is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-card { border-top-color: #7CCB63; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
html[data-theme="dark"]:has(.euclid-hero) .euclid-footer { color: var(--dk-muted); background: var(--dk-bg); }
html[data-theme="dark"]:has(.euclid-hero) .euclid-footer a { color: var(--dk-text); }
html[data-theme="dark"]:has(.euclid-hero) .euclid-footer-social a { color: var(--dk-link); }
html[data-theme="dark"] :is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-card { background: var(--dk-surface); border-color: var(--dk-border); }
html[data-theme="dark"] .euclid-hero :is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-card { border-top-color: #3A7D28; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
html[data-theme="dark"] :is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) label { color: var(--dk-text); }
html[data-theme="dark"] :is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .form-control { border-color: var(--dk-border); }
html[data-theme="dark"] :is(#div_mainlogin, #div_pwdchange) .login-pwd-toggle::before { border-left-color: var(--dk-border); }
html[data-theme="dark"] :is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-remember input { background-color: var(--dk-surface-2); border-color: #4A5158; }
html[data-theme="dark"] :is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-links { border-top-color: var(--dk-border); }
html[data-theme="dark"] :is(#div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-intro { color: var(--dk-muted); }
html[data-theme="dark"] #div_pwdchange .login-hint { color: var(--dk-muted); }
html[data-theme="dark"] .login-result-success .login-result-icon { color: var(--dk-link); background: var(--dk-tint); }
html[data-theme="dark"] .login-result-error .login-result-icon { background: #2C1C1C; }
html[data-theme="dark"] .login-result-empty .login-result-icon { color: var(--dk-muted); background: var(--dk-surface-2); }
html[data-theme="dark"] :is(#div_accessdenied, #div_errormessage).cv-inline-error .login-card { border-color: var(--dk-border); border-left-color: #D9534F; }
html[data-theme="dark"] .login-result .error-stamp { color: var(--dk-muted); background: var(--dk-surface-2); border-color: var(--dk-border); }
/* The launch screen sits on the hero, so it keeps the white ring and subtitle. The reversed logo's white disc inverts to near-black;
   the green band behind its see-through letters moves to the ring (same 23px 47px spot) so the filter doesn't invert it too. */
html[data-theme="dark"] #div_launching .launch-ring { background: linear-gradient(#3A7D28, #3A7D28) 23px 47px / 74px 27px no-repeat; }
html[data-theme="dark"] #div_launching .launch-ring img { background: none; filter: invert(.9); }

/* AI Quick View pop-up */
html[data-theme="dark"] .modal-content[id^="modal-"] { border-top-color: #3A7D28; }
/* The pop-up title has an inline color: #333 */
html[data-theme="dark"] .modal-content[id^="modal-"] #ai-header-span { color: var(--dk-heading) !important; }
html[data-theme="dark"] .modal-content[id^="modal-"] .ai-popup-loading p { color: var(--dk-muted); }
html[data-theme="dark"] .modal-content[id^="modal-"] :is(.aps-bar, .aps-pill) { background-image: linear-gradient(90deg, var(--dk-border) 25%, var(--dk-surface) 50%, var(--dk-border) 75%); }
html[data-theme="dark"] .modal-content[id^="modal-"] .aps-msg { border-color: var(--dk-border); border-left-color: var(--dk-tint-border); }
html[data-theme="dark"] .modal-content[id^="modal-"] legend { color: var(--dk-heading) !important; border-bottom-color: var(--dk-border); }
html[data-theme="dark"] .modal-content[id^="modal-"] .dl-horizontal dt { color: var(--dk-muted); }
html[data-theme="dark"] .modal-content[id^="modal-"] .dl-horizontal dd { color: var(--dk-text); }
html[data-theme="dark"] .modal-content[id^="modal-"] #lastMsg .panel { border-color: var(--dk-border); border-left-color: #3A7D28; }
html[data-theme="dark"] .modal-content[id^="modal-"] #lastMsg .panel-heading { background: var(--dk-tint); border-color: var(--dk-border); }
html[data-theme="dark"] .modal-content[id^="modal-"] .form-actions { border-top-color: var(--dk-border); }
html[data-theme="dark"] .modal-content[id^="modal-"] .btn-group-justified .btn-default { color: #B8CBE4; background: #1F2833; border-color: #2E3B4A; }
html[data-theme="dark"] .modal-content[id^="modal-"] .btn-group-justified .btn-default:hover { background: #26313E; }

/* Step cards, callouts, checklist (VPN, Timesheet) */
html[data-theme="dark"] .euclid-step { background: var(--dk-surface); border-color: var(--dk-border); border-left-color: #3A7D28; box-shadow: none; }
html[data-theme="dark"] .euclid-step-muted { background: #1A1D20; border-left-color: #6B737A; }
html[data-theme="dark"] .euclid-step-muted .euclid-step-badge { background: #6B737A; }
html[data-theme="dark"] .euclid-step-body a:not(.euclid-btn) { color: var(--dk-link); }
html[data-theme="dark"] .euclid-callout { background: var(--dk-tint); }
html[data-theme="dark"] .euclid-callout strong { color: var(--dk-heading); }
html[data-theme="dark"] .euclid-checklist li::before { color: var(--dk-link); background: var(--dk-tint); }
html[data-theme="dark"] .euclid-btn-outline { color: var(--dk-link); background: transparent; }
html[data-theme="dark"] .euclid-btn-outline:is(:hover, :focus) { color: #FFFFFF; background: #3A7D28; }
/* Black matches the timesheet module's dark body, so reloads don't flash white */
html[data-theme="dark"] .euclid-frame { background: #000000; border-color: var(--dk-border); }

/* Schedule Demo */
html[data-theme="dark"] .euclid-intro-eyebrow { color: var(--dk-link); }
html[data-theme="dark"] .euclid-contact { background: var(--dk-tint); }
html[data-theme="dark"] .euclid-contact-label,
html[data-theme="dark"] .euclid-features-list li { color: var(--dk-text); }
html[data-theme="dark"] :is(.euclid-contact-item, .euclid-contact-item:visited) { color: var(--dk-link); }
html[data-theme="dark"] .euclid-features-list li .fa { color: var(--dk-link); background: var(--dk-tint); }

/* Terms and Privacy: Word stamps inline white backgrounds and black text on every span. */
html[data-theme="dark"] .euclid-legal,
html[data-theme="dark"] .euclid-legal :is(p, li, td) { color: var(--dk-text) !important; }
html[data-theme="dark"] .euclid-legal [style*="background"] { background: transparent !important; }
html[data-theme="dark"] .euclid-legal span[style*="color"]:not(a span) { color: inherit !important; }
html[data-theme="dark"] .euclid-legal :is(a[href], a[href] span) { color: var(--dk-link) !important; }

/* Shared widgets */
/* iCheck's unchecked sprite is a white box; invert it, then rotate the hue back to the theme green for the hover border. */
html[data-theme="dark"] :is(.icheckbox_flat-blue, .iradio_flat-blue):not(.checked) { filter: invert(.85) hue-rotate(85deg); }
html[data-theme="dark"] .nqToggleSwitchLabel div { background: #4A5158; }
html[data-theme="dark"] .nqToggleSwitchLabel input:checked + div { background: #3A7D28; }

/* CKEditor chrome (the editing area is an iframe; LeftNav.htm themes its body) */
html[data-theme="dark"] .cke_chrome { border-color: var(--dk-border); box-shadow: none; }
html[data-theme="dark"] :is(.cke_top, .cke_bottom) { background: var(--dk-surface-2); border-color: var(--dk-border); box-shadow: none; }
html[data-theme="dark"] :is(.cke_toolgroup, .cke_combo_button) { background: var(--dk-surface); border-color: var(--dk-border); box-shadow: none; }
html[data-theme="dark"] a.cke_button:is(:hover, :focus, .cke_button_on) { background: var(--dk-surface-2); box-shadow: none; }
html[data-theme="dark"] :is(.cke_button_icon, .cke_button_arrow, .cke_combo_arrow) { filter: invert(.85); }
html[data-theme="dark"] :is(.cke_button_label, .cke_combo_text, .cke_path_item) { color: var(--dk-text); text-shadow: none; }
html[data-theme="dark"] .cke_toolbar_separator { background: var(--dk-border); }

/* Settings cog in the eyebrow nav (between the name and Logoff) with the theme choice in its dropdown */
.euclid-settings { position: relative; display: inline-flex; align-items: center; }
.euclid-settings.hidden { display: none; }
/* Same divider as before Logoff (euclid-theme.css), so the cog sits between two separators */
.euclid-settings::before { content: ""; width: 1px; height: 16px; margin-right: 16px; background: rgba(255, 255, 255, .5); }
/* Logged out there's no avatar before the cog, so no divider there; Login gets the one Logoff has */
#euclidProfile.hidden + .euclid-settings::before { display: none; }
.euclid-eyebrow #euclidLogin::before { content: ""; width: 1px; height: 16px; margin-right: 16px; background: rgba(255, 255, 255, .5); }
.euclid-settings-btn {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 6px;
	font-family: inherit;
	font-size: 16px;
	color: #FFFFFF;
	background: transparent;
	border: 0;
	border-radius: 14px;
	cursor: pointer;
	transition: background-color .15s;
}
.euclid-settings-btn .fa { font-size: 17px; }
.euclid-settings-btn:hover,
.euclid-settings.open .euclid-settings-btn { background: rgba(255, 255, 255, .2); }
.euclid-settings-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.euclid-settings .dropdown-menu {
	min-width: 160px;
	margin-top: 10px;
	padding: 6px;
	font-family: "Raleway", Helvetica, Arial, sans-serif;
	border: 1px solid #E5E5E5;
	border-top: 4px solid #3A7D28;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.euclid-settings .dropdown-header { padding: 6px 12px 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #999999; }
.euclid-settings .divider { margin: 0 0 6px; background-color: #EEEEEE; }
.euclid-settings .dropdown-menu > li > a.euclid-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 12px;
	font-size: 14px;
	color: #333333;
	border-radius: 6px;
}
.euclid-settings .dropdown-menu > li > a.euclid-option:is(:hover, :focus) { color: #333333; background: #F2F9EF; text-decoration: none; }
.euclid-option .fa { width: 16px; margin-right: 6px; text-align: center; color: #3A7D28; }

/* On/off switch inside the menu */
.euclid-switch { position: relative; flex: none; width: 34px; height: 20px; background: #CCCCCC; border-radius: 10px; transition: background-color .2s; }
.euclid-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: #FFFFFF; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .2s; }
.euclid-option[aria-checked="true"] .euclid-switch { background: #3A7D28; }
.euclid-option[aria-checked="true"] .euclid-switch::after { transform: translateX(14px); }

html[data-theme="dark"] .euclid-settings .dropdown-menu { background: var(--dk-surface); border-color: var(--dk-border); border-top-color: #3A7D28; }
html[data-theme="dark"] .euclid-settings .dropdown-header { color: var(--dk-muted); }
html[data-theme="dark"] .euclid-settings .divider { background-color: var(--dk-border); }
html[data-theme="dark"] .euclid-settings .dropdown-menu > li > a.euclid-option { color: var(--dk-text); }
html[data-theme="dark"] .euclid-settings .dropdown-menu > li > a.euclid-option:is(:hover, :focus) { color: var(--dk-heading); background: var(--dk-tint); }

/* Self-hosted Material Symbols subset with only the logout, notifications and settings icons */
@font-face { font-family: "Material Symbols Outlined"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/material-symbols-outlined.woff2") format("woff2"); }
.material-symbols-outlined { display: inline-block; font-family: "Material Symbols Outlined"; font-size: 24px; font-style: normal; font-weight: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; }
.euclid-settings-btn .material-symbols-outlined,
#euclidLogoff .material-symbols-outlined { font-size: 20px; }

/* Notification bell before the cog; it shares the cog's button and menu styles, and only shows with Desktop alerts on */
.euclid-bell[hidden],
.euclid-bell [hidden] { display: none; }
.euclid-bell:not([hidden]) + .euclid-settings { margin-left: 4px; }
.euclid-bell:not([hidden]) + .euclid-settings::before,
#euclidProfile.hidden + .euclid-bell + .euclid-settings::before { display: none; }
.euclid-bell .euclid-settings-btn { position: relative; }
.euclid-bell-dot { position: absolute; top: 3px; left: 18px; width: 8px; height: 8px; background: #D9534F; border: 1px solid #FFFFFF; border-radius: 50%; }
.euclid-bell .dropdown-menu { width: 320px; max-width: calc(100vw - 24px); }
.euclid-bell-head { display: flex; align-items: center; justify-content: space-between; padding-right: 12px; border-bottom: 1px solid #EEEEEE; margin-bottom: 6px; }
.euclid-eyebrow .euclid-bell-all,
.euclid-eyebrow .euclid-bell-all:is(:hover, :focus) { font-size: 12px; color: #3A7D28; }
.euclid-bell-list { max-height: 360px; margin: 0; overflow-y: auto; }
.euclid-bell-list > li { position: relative; border-radius: 6px; }
.euclid-bell-list > li:hover { background: #F2F9EF; }
.euclid-bell-empty { padding: 12px; font-size: 13px; color: #999999; text-align: center; }
.euclid-eyebrow .euclid-bell-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 8px 24px; font-size: 13px; color: #333333; }
.euclid-eyebrow .euclid-bell-item:is(:hover, :focus) { font-size: 13px; color: #333333; text-decoration: none; }
.euclid-bell-title { font-weight: 700; }
.euclid-bell-org,
.euclid-bell-time { font-size: 12px; color: #777777; }
.euclid-bell-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.euclid-bell-list > li.is-unread::before { content: ""; position: absolute; top: 14px; left: 10px; width: 8px; height: 8px; background: #3A7D28; border-radius: 50%; }
.euclid-bell-list > li:not(.is-unread) .euclid-bell-item { opacity: .7; }
.euclid-bell-read { position: absolute; top: 6px; right: 8px; padding: 2px 6px; font-size: 11px; color: #3A7D28; background: transparent; border: 0; border-radius: 4px; }
.euclid-bell-read:is(:hover, :focus-visible) { background: rgba(58, 125, 40, .15); }
.euclid-bell-list > li.is-unread .euclid-bell-title { padding-right: 72px; }

html[data-theme="dark"] .euclid-bell-head { border-bottom-color: var(--dk-border); }
html[data-theme="dark"] .euclid-bell-list > li:hover { background: var(--dk-tint); }
html[data-theme="dark"] .euclid-bell-item,
html[data-theme="dark"] .euclid-bell-item:is(:hover, :focus) { color: var(--dk-text); }
html[data-theme="dark"] :is(.euclid-bell-org, .euclid-bell-time, .euclid-bell-empty) { color: var(--dk-muted); }
html[data-theme="dark"] .euclid-eyebrow :is(.euclid-bell-all, .euclid-bell-all:hover, .euclid-bell-all:focus, .euclid-bell-read) { color: #7FCB63; }

/* The first name and "Options" slide out beside the avatar and cog on hover or keyboard focus */
.euclid-eyebrow #euclidProfile { gap: 0; }
.euclid-eyebrow :is(#euclidProfile, #euclidLogin, #euclidLogoff):hover { text-decoration: none; }
.euclid-eyebrow #euclidLogin { display: inline-flex; align-items: center; }
.euclid-eyebrow #euclidLogin.hidden { display: none; }
.euclid-eyebrow :is(#euclidLogin, #euclidLogoff) .fa { font-size: 17px; }
/* Same hover pill as the Options button; it wraps the icon and label so the link's divider stays outside it */
.euclid-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 6px; border-radius: 14px; transition: background-color .15s; }
:is(#euclidProfile, #euclidLogin, #euclidLogoff):is(:hover, :focus-visible) .euclid-pill { background: rgba(255, 255, 255, .2); }
.euclid-reveal {
	display: inline-block;
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	transition: max-width .25s ease, margin-left .25s ease, opacity .2s ease;
}
#euclidProfile:is(:hover, :focus-visible, .is-revealed) .euclid-reveal,
:is(#euclidLogin, #euclidLogoff):is(:hover, :focus-visible) .euclid-reveal,
.euclid-settings-btn:is(:hover, :focus-visible) .euclid-reveal,
.euclid-settings.open .euclid-reveal { max-width: 140px; margin-left: 8px; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.euclid-settings-btn,
	.euclid-pill,
	.euclid-reveal { transition: none; }
}

/* euclid-theme.css sets these in the deep web green, which reads on white but not on the dark surfaces */
html[data-theme="dark"] :is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) :is(.login-eyebrow, .login-intro a, .login-tip:focus) { color: var(--dk-link); }
html[data-theme="dark"] :is(#div_mainlogin, #div_pwdchange) .login-pwd-toggle:focus-visible { color: var(--dk-link); }
html[data-theme="dark"] :is(.login-result .login-links .fa, .euclid-callout .fa, .euclid-contact-item .fa) { color: var(--dk-link); }
html[data-theme="dark"] .euclid-legal a[href] span { color: var(--dk-link) !important; }
html[data-theme="dark"]:not(.cv-on-hero) body:not(:has(#euclidHeader)) .euclid-hero :is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-eyebrow { color: var(--dk-link); }
html[data-theme="dark"] body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--dk-link); }
html[data-theme="dark"] :is(.login-result .error-stamp span:first-child, #div_launching .launch-subtitle, .dashboard-list li) { color: var(--dk-muted); }
html[data-theme="dark"] :is(#div_mainlogin, #div_pwdchange) .login-pwd-toggle { color: var(--dk-muted); }