/* Matches the Aperture skin on the DNN site that hosts these pages in an iframe. Loads after cvweb.css. */

body {
	font-family: "Raleway", Helvetica, Arial, sans-serif;
	color: #555555;
}
h1, h2, h3, h4, h5, h6, legend {
	font-family: "Raleway", Helvetica, Arial, sans-serif;
	font-weight: 600;
	color: #333333;
}

/* Same specificity as Bootstrap's link rules, so .btn and .nav colors still win. a:visited would not. */
a { color: #3A7D28; }
a:hover, a:focus { color: #2F6B24; }

/* iCheck only ships the blue sprite; rotate its hue to the theme green. */
.icheckbox_flat-blue,
.iradio_flat-blue { filter: hue-rotate(-95deg); }

/* Bootstrap's #777 is 4.48:1 on white, just short of AA */
.text-muted,
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) :is(small, .small) { color: #6B6B6B; }
/* Bootstrap's label fills are 1.9 to 4:1 under white text */
.label-primary { background-color: #1673B0; }
.label-success { background-color: #3A7D28; }
.label-info { background-color: #13708A; }
.label-warning { background-color: #9A5700; }
.label-danger { background-color: #C9302C; }
/* Bootstrap's success green is 2.5:1 under white text */
.btn-success,
.btn-euclidGreen { color: #FFFFFF; background-color: #3A7D28; border-color: #3A7D28; }
.btn-success:is(:hover, :focus, :active, .active),
.btn-euclidGreen:is(:hover, :focus, :active, .active) { color: #FFFFFF; background-color: #2F6B24; border-color: #2F6B24; }
.btn-primary {
	color: #FFFFFF;
	background-color: #3A7D28;
	border-color: #3A7D28;
	font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active:focus,
.btn-primary.active,
.btn-primary.focus,
.open > .dropdown-toggle.btn-primary {
	color: #FFFFFF;
	background-color: #2F6B24;
	border-color: #2F6B24;
}
/* loading() adds .disabled while the clicked button still has focus, so every disabled state needs covering. */
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
	background-color: #3A7D28;
	border-color: #3A7D28;
}

.form-control:focus {
	border-color: #3A7D28;
	outline: 0;
	box-shadow: 0 0 0 3px rgba(58, 125, 40, .25);
}

/* Full-bleed gradient behind the login card, using the DNN home page's banner art. */
.euclid-hero {
	position: relative;
	width: 100vw;
	margin: -32px 0 0 calc(50% - 50vw);
	padding: 64px 16px 128px;
	overflow: hidden;
	background: #00A266 url("https://0e7a000690e459a56d52-30e35267d637ea926fe4efdb042a5806.ssl.cf2.rackcdn.com/images/homepage-angle.svg") no-repeat center / cover;
	isolation: isolate;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), 0 100%);
}
/* A dark green wash takes the art's lightest green to 4.6:1 under white text. The mask has the art's size, so cover scales both alike and the art's white wedge stays white. */
.euclid-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 60, 35, .6);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1702' height='1265'%3E%3Cpolygon points='0,0 1702,0 1702,970 0,1129'/%3E%3C/svg%3E") no-repeat center / cover;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1702' height='1265'%3E%3Cpolygon points='0,0 1702,0 1702,970 0,1129'/%3E%3C/svg%3E") no-repeat center / cover;
}
/* 100vw includes the scrollbar, so clip the few extra pixels instead of showing a sideways scrollbar. */
html:has(.euclid-hero) { overflow-x: hidden; }

/* White footer on the login page so the hero is the only block of green. */
html:has(.euclid-hero) .euclid-footer { margin-top: 24px; color: #555555; background: #FFFFFF; }
html:has(.euclid-hero) .euclid-footer a,
html:has(.euclid-hero) .euclid-footer a:focus { color: #333333; }
html:has(.euclid-hero) .euclid-footer a:hover { color: #2F6B24; }
html:has(.euclid-hero) .euclid-footer-links .fa { color: #3A7D28; opacity: 1; }
html:has(.euclid-hero) .euclid-footer-social a { color: #2F6B24; border-color: #3A7D28; }
html:has(.euclid-hero) .euclid-footer .euclid-footer-social a:hover,
html:has(.euclid-hero) .euclid-footer .euclid-footer-social a:focus { color: #FFFFFF; background: #3A7D28; }
.euclid-hero :is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) { margin: 0 auto; }
.euclid-hero :is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-eyebrow,
.euclid-hero #div_launching .launch-title { color: #FFFFFF; }
.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, .2); }
.euclid-hero #div_launching { margin: 0 auto; }
.euclid-hero #div_launching .launch-subtitle { color: rgba(255, 255, 255, .85); }
.euclid-hero #div_launching .launch-ring::before { border-color: rgba(255, 255, 255, .3); border-top-color: #FFFFFF; border-right-color: #FFFFFF; }

/* Inside the DNN iframe the header script removes #euclidHeader, so drop the banner and keep just the card. */
body:not(:has(#euclidHeader)) .euclid-hero {
	width: auto;
	margin: 0;
	padding: 24px 0;
	overflow: visible;
	background: none;
	clip-path: none;
}
body:not(:has(#euclidHeader)) .euclid-hero::before { content: none; }
body:not(:has(#euclidHeader)) .euclid-hero :is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-eyebrow { color: #2F6B24; }
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: #3A7D28; box-shadow: 0 6px 20px rgba(0, 0, 0, .08); }
body:not(:has(#euclidHeader)) .euclid-hero #div_launching .launch-title { color: #333333; }
body:not(:has(#euclidHeader)) .euclid-hero #div_launching .launch-subtitle { color: #6B6B6B; }
body:not(:has(#euclidHeader)) .euclid-hero #div_launching .launch-ring::before { border-color: #E5E5E5; border-top-color: #3A7D28; border-right-color: #3A7D28; }

/* On a DNN hero page the frame sits on the green banner, so keep the white-on-green treatment. */
html.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,
html.cv-on-hero body:not(:has(#euclidHeader)) .euclid-hero #div_launching .launch-title { color: #FFFFFF; }
html.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-card { border-top-color: #7CCB63; box-shadow: 0 16px 40px rgba(0, 0, 0, .2); }
html.cv-on-hero body:not(:has(#euclidHeader)) .euclid-hero #div_launching .launch-subtitle { color: rgba(255, 255, 255, .85); }
html.cv-on-hero body:not(:has(#euclidHeader)) .euclid-hero #div_launching .launch-ring::before { border-color: rgba(255, 255, 255, .3); border-top-color: #FFFFFF; border-right-color: #FFFFFF; }
/* Brand-green top bars vanish into the banner, so cards on a hero page use the light green and float on a shadow. Add new card classes here. */
html.cv-on-hero body :is(.dash-card, .ca-card, .sd-card, .gdpr-card, .sms-card, .pf-card, .horizontalTab_Top_6 .resp-tabs-container, .horizontalTab_Top_6 .resp_margin > fieldset, .horizontalTab_Top_6 .resp_margin > form > fieldset) {
	border-color: transparent;
	border-top-color: #7CCB63;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

/* AI Quick View pop-up (aipopup() loads ActionItemsdll/cv_AI_Modal_Admin.htm into a bootbox dialog) */
.modal-content[id^="modal-"] {
	border: 0;
	border-top: 5px solid #3A7D28;
	border-radius: 12px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.modal-content[id^="modal-"] .modal-body { padding: 24px 28px 28px; }
.modal-content[id^="modal-"] .ai-popup-loading { padding: 56px 0 48px; text-align: center; }
.modal-content[id^="modal-"] .ai-popup-loading .fa { font-size: 36px; color: #3A7D28; }
.modal-content[id^="modal-"] .ai-popup-loading p { margin: 14px 0 0; font-size: 15px; font-weight: 600; color: #6B6B6B; }
/* Quick view skeleton: title, pills, a Details list, the last message and the button bar of the loaded popup */
.modal-content[id^="modal-"] .ai-popup-skel { padding: 4px 0 0; }
.modal-content[id^="modal-"] .aps-bar,
.modal-content[id^="modal-"] .aps-pill {
	display: block;
	height: 12px;
	border-radius: 6px;
	background: linear-gradient(90deg, #EEE 25%, #F7F7F7 50%, #EEE 75%);
	background-size: 200% 100%;
	animation: apsShimmer 1.2s ease-in-out infinite;
}
.modal-content[id^="modal-"] .aps-pill { display: inline-block; height: 26px; margin-right: 6px; border-radius: 50px; }
.modal-content[id^="modal-"] .aps-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-right: 36px; }
.modal-content[id^="modal-"] .aps-head .aps-bar { height: 20px; }
.modal-content[id^="modal-"] .aps-head .aps-pill { margin: 0; }
.modal-content[id^="modal-"] .aps-pills { margin: 14px 0 0; }
.modal-content[id^="modal-"] .aps-section { height: 16px; margin: 26px 0 14px; }
.modal-content[id^="modal-"] .aps-row { display: flex; gap: 20px; margin-bottom: 11px; }
.modal-content[id^="modal-"] .aps-row .aps-bar:first-child { flex: none; width: 110px; margin-left: 50px; }
.modal-content[id^="modal-"] .aps-msg { padding: 14px 16px; border: 1px solid #EEE; border-left: 3px solid #CFE6C6; border-radius: 4px; }
.modal-content[id^="modal-"] .aps-msg .aps-bar + .aps-bar { margin-top: 12px; }
.modal-content[id^="modal-"] .aps-btns { display: flex; gap: 8px; margin-top: 24px; }
.modal-content[id^="modal-"] .aps-btns .aps-pill { flex: 1; height: 36px; margin: 0; }
@keyframes apsShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .modal-content[id^="modal-"] :is(.aps-bar, .aps-pill) { animation: none; } }
.modal-content[id^="modal-"] .bootbox-close-button { margin-top: -6px; font-size: 26px; opacity: .4; }
.modal-content[id^="modal-"] .bootbox-body > h3 { margin: 0 0 12px; padding-right: 36px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.modal-content[id^="modal-"] .bootbox-body > h3 .label { padding: 5px 12px; font-size: 14px; border-radius: 50px !important; bottom: 0 !important; }
.modal-content[id^="modal-"] .label { display: inline-block; padding: 5px 12px; font-weight: 600; border-radius: 50px; }
.modal-content[id^="modal-"] legend {
	margin: 20px 0 12px;
	padding-bottom: 8px;
	font-size: 16px;
	font-weight: 600;
	color: #333 !important;
	border-bottom-color: #EEE;
}
.modal-content[id^="modal-"] .dl-horizontal dt { font-size: 13px; font-weight: 600; color: #666; }
.modal-content[id^="modal-"] .dl-horizontal dd { margin-bottom: 4px; font-size: 14px; color: #333; }
.modal-content[id^="modal-"] #lastMsg .panel {
	border: 1px solid #E5E5E5;
	border-left: 4px solid #3A7D28;
	border-radius: 8px;
	box-shadow: none;
}
.modal-content[id^="modal-"] #lastMsg .panel-heading { padding: 10px 16px; font-weight: 700; background: #F4F8F3; border-color: #EEE; border-radius: 0 7px 0 0; }
.modal-content[id^="modal-"] #lastMsg .panel-body { padding: 14px 16px; font-size: 14px; line-height: 1.6; }
.modal-content[id^="modal-"] .form-actions { margin-top: 20px; padding-top: 20px; border-top: 1px solid #EEE; }
.modal-content[id^="modal-"] .btn-group-justified { border-radius: 50px; overflow: hidden; }
.modal-content[id^="modal-"] .btn-group-justified .btn { padding: 9px 12px; font-size: 13px; font-weight: 600; border-radius: 0; }
.modal-content[id^="modal-"] .btn-group-justified .btn-default { color: #3B5A87; background: #EEF3F9; border-color: #D3DDE8; }
.modal-content[id^="modal-"] .btn-group-justified .btn-default:hover { background: #E1E9F3; }
.modal-content[id^="modal-"] .btn-group-justified .btn-primary { padding: 11px 16px; font-size: 15px; color: #FFF; background: #3A7D28; border-color: #3A7D28; }
.modal-content[id^="modal-"] .btn-group-justified .btn-primary:hover { background: #2F6B24; }

/* Alerts: soft tint with a solid left bar, matching the card accents elsewhere */
.alert {
	padding: 16px 20px;
	border: 1px solid transparent;
	border-left-width: 4px;
	border-radius: 8px;
}
.alert .alert-heading { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.alert ul { margin: 0; padding-left: 20px; }
.alert li { margin: 2px 0; font-size: 15px; }
.alert a:not(.btn) { font-weight: 600; text-decoration: underline; }

.alert-danger { color: #8A2A26; background: #FDF3F2; border-color: #F2D4D2; border-left-color: #D9534F; }
.alert-danger .alert-heading,
.alert-danger a:not(.btn) { color: #A94442; }
.alert-danger .alert-heading .fa { color: #D9534F; }

.alert-warning { color: #7A5410; background: #FFF9EC; border-color: #F5E2B8; border-left-color: #F0AD4E; }
.alert-warning .alert-heading,
.alert-warning a:not(.btn) { color: #8A6D3B; }
.alert-warning .fa { color: #E09A2E; }

.alert-info { color: #2C4F6E; background: #F1F6FB; border-color: #D4E3F0; border-left-color: #4A90C2; }
.alert-info .alert-heading,
.alert-info a:not(.btn) { color: #31708F; }
.alert-info .fa { color: #4A90C2; }

.alert-success { color: #2F5E1F; background: #F2F9EF; border-color: #D5EBCB; border-left-color: #3A7D28; }
.alert-success .alert-heading,
.alert-success a:not(.btn) { color: #3C763D; }
.alert-success .fa { color: #3A7D28; }

/* Login card. Sizes are px because Bootstrap 3 sets the root font size to 10px. */
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) {
	max-width: 420px;
	margin: 48px auto;
}
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-eyebrow {
	margin-bottom: 12px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #2F6B24;
}
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-card {
	padding: 32px;
	background: #FFFFFF;
	border: 1px solid #E5E5E5;
	border-top: 4px solid #3A7D28;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-title {
	margin: -4px 0 28px;
	padding-bottom: 20px;
	text-align: center;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	background: linear-gradient(#3A7D28, #3A7D28) no-repeat center bottom / 60px 4px;
}
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .form-group { margin-bottom: 20px; }
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) label {
	margin-bottom: 6px;
	font-size: 15px;
	font-weight: 600;
	color: #333333;
}
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .form-control {
	height: auto;
	padding: 10px 12px;
	font-size: 16px;
	border-color: #CCCCCC;
	border-radius: 4px;
	box-shadow: none;
}
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .form-control:focus { border-color: #3A7D28; box-shadow: 0 0 0 3px rgba(58, 125, 40, .25); }
#div_mainlogin .mfa-label { display: block; margin-bottom: 12px; text-align: center; }
#div_mainlogin .mfa-digits { display: flex; justify-content: center; gap: 8px; }
#div_mainlogin .mfa-digits .form-control {
	flex: 0 1 48px;
	min-width: 0;
	padding: 10px 0;
	font-size: 24px;
	font-weight: 700;
	text-align: center;
}
:is(#div_mainlogin, #div_pwdchange) .login-pwd { position: relative; }
:is(#div_mainlogin, #div_pwdchange) .login-pwd .form-control { padding-right: 44px; }

/* Edge draws its own reveal eye, which would duplicate ours. */
:is(#div_mainlogin, #div_pwdchange) .login-pwd input::-ms-reveal { display: none; }
:is(#div_mainlogin, #div_pwdchange) .login-pwd-toggle {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 44px;
	padding: 0;
	font-size: 18px;
	color: #6B6B6B;
	background: none;
	border: 0;
	border-radius: 0 4px 4px 0;
}
:is(#div_mainlogin, #div_pwdchange) .login-pwd-toggle::before {
	content: "";
	position: absolute;
	top: 25%;
	bottom: 25%;
	left: 0;
	border-left: 1px solid #DDDDDD;
}
:is(#div_mainlogin, #div_pwdchange) .login-pwd-toggle:hover,
:is(#div_mainlogin, #div_pwdchange) .login-pwd-toggle:focus-visible { color: #3A7D28; }
:is(#div_mainlogin, #div_pwdchange) .login-pwd-toggle:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px rgba(58, 125, 40, .5); }
:is(#div_mainlogin, #div_pwdchange) .login-pwd-toggle .login-tip-text { width: auto; white-space: nowrap; }
:is(#div_mainlogin, #div_pwdchange) .login-pwd-toggle:hover .login-tip-text,
:is(#div_mainlogin, #div_pwdchange) .login-pwd-toggle:focus-visible .login-tip-text { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-remember { display: flex; align-items: center; gap: 8px; margin: -4px 0 24px; }
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-remember input {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 0;
	background: #FFFFFF no-repeat center / 12px 12px;
	border: 2px solid #CCCCCC;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-remember label:hover input { border-color: #3A7D28; }
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-remember input:checked {
	background-color: #3A7D28;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	border-color: #3A7D28;
}
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-remember input:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(58, 125, 40, .3); }

:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-tip { position: relative; display: inline-flex; color: #6B6B6B; cursor: help; outline: 0; }
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-tip:hover,
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-tip:focus { color: #3A7D28; }
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-tip-text {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 50%;
	z-index: 10;
	width: 230px;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	color: #FFFFFF;
	background: #333333;
	border-radius: 8px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	pointer-events: none;
}
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-tip-text::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -6px;
	border: 6px solid transparent;
	border-top-color: #333333;
}
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-tip:hover .login-tip-text,
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-tip:focus .login-tip-text { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
	:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-remember input,
	:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-tip-text { transition: none; }
}
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .btn-primary {
	display: block;
	width: 100%;
	padding: 12px 16px;
	font-size: 16px;
	border-radius: 4px;
}
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;

	/* Hidden links drop out of the flex row, so one link centers and two spread evenly. */
	justify-content: space-evenly;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #EEEEEE;
	font-size: 15px;
	font-weight: 500;
}
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-links a:hover { text-decoration: underline; }
:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .alert { margin: 20px 0 0; }
#div_mainlogin .login-error { margin: -4px 0 20px; padding: 12px 16px; }
#div_mainlogin .login-error .alert-heading { margin-bottom: 4px; font-size: 15px; }
#div_mainlogin .login-error p { margin: 0; font-size: 14px; line-height: 1.5; }
#div_mainlogin .has-error label { color: #A94442; }
#div_mainlogin .has-error .form-control { border-color: #D9534F; }
:is(#div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-intro { margin: -8px 0 24px; text-align: center; font-size: 15px; line-height: 1.6; color: #666666; }
:is(#div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-intro a { font-weight: 600; color: #2F6B24; }
#div_pwdchange .login-hint { margin: -8px 0 20px; font-size: 13px; line-height: 1.5; color: #6B6B6B; }
:is(#div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .alert { margin: 0 0 20px; }
:is(#div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .btn-primary .fa { margin-right: 6px; }

/* Password result cards (ReturnPassword/FpwdDeny, FPwdConfirmation, PassChange_Confirm, PwdErrorMessage) */
.login-result { text-align: center; }
.login-result-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	font-size: 24px;
	border-radius: 50%;
}
.login-result-success .login-result-icon { color: #2F6B24; background: #EAF5E6; }
.login-result-error .login-result-icon { color: #D9534F; background: #FDF3F2; }
.login-result-empty .login-result-icon { color: #6B7785; background: #F1F4F7; }
.login-result .login-intro { margin-top: 0; overflow-wrap: anywhere; }
.login-result .login-links { flex-direction: column; align-items: center; }
.login-result .login-links .fa { margin-right: 4px; color: #3A7D28; }
.login-result .error-stamp {
	margin-top: 20px;
	padding: 10px 12px;
	text-align: left;
	font: 12px/1.6 Consolas, Menlo, monospace;
	color: #555555;
	background: #F7F8F9;
	border: 1px solid #E5E7EA;
	border-radius: 6px;
}
.login-result .error-stamp div { display: flex; gap: 12px; }
.login-result .error-stamp span:first-child { flex: none; width: 34px; font-weight: 700; color: #6B6B6B; }
.login-result .error-stamp span:last-child { min-width: 0; word-break: break-all; }
/* Error card from an embedded section, unwrapped into the host page by accessDenied.htm / ErrorMessage.htm */
:is(#div_accessdenied, #div_errormessage).cv-inline-error { max-width: none; margin: 0; }
:is(#div_accessdenied, #div_errormessage).cv-inline-error .login-card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 14px;
	align-items: start;
	padding: 16px 18px;
	text-align: left;
	border-top-width: 1px;
	border-left: 4px solid #D9534F;
	box-shadow: none;
}
:is(#div_accessdenied, #div_errormessage).cv-inline-error .login-result-icon { grid-row: span 4; width: 36px; height: 36px; margin: 0; font-size: 16px; }
:is(#div_accessdenied, #div_errormessage).cv-inline-error .login-card .login-title { margin: 6px 0 0; padding: 0; font-size: 16px; text-align: left; background: none; }
:is(#div_accessdenied, #div_errormessage).cv-inline-error .login-intro { margin: 0; font-size: 14px; text-align: left; }
:is(#div_accessdenied, #div_errormessage).cv-inline-error :is(.login-eyebrow, .login-links, .btn) { display: none; }
:is(#div_accessdenied, #div_errormessage).cv-inline-error .error-stamp { grid-column: 2; margin-top: 8px; }

@media (max-width: 480px) {
	:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) { margin: 32px auto; }
	:is(#div_mainlogin, #div_forgotpwd, #div_pwdchange, #div_accessdenied, #div_errormessage, #div_norecords, #div_loginrequired) .login-card { padding: 24px 20px; }
}

/* Redirect screen shown by mainLogin.htm and LoginDLL/Logout.htm. */
#div_launching {
	margin: 50px auto;
	text-align: center;
}
#div_launching .launch-ring {
	position: relative;
	width: 120px;
	height: 120px;
	margin: 0 auto 32px;
}
#div_launching .launch-ring::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 4px solid #E5E5E5;
	border-top-color: #3A7D28;
	border-right-color: #3A7D28;
	border-radius: 50%;
	animation: launch-spin 1s linear infinite;
}
#div_launching .launch-ring img {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 80px;
	height: 80px;

	/* The reversed logo has transparent lettering. The green fills only the letter band so it can't bleed through the disc's anti-aliased rim. */
	background: linear-gradient(#3A7D28, #3A7D28) 3px 27px / 74px 27px no-repeat;
}
#div_launching .launch-title {
	margin: 0 0 8px;
	font-size: 32px;
	font-weight: 700;
}
#div_launching .launch-subtitle {
	margin: 0;
	font-size: 15px;
	color: #6B6B6B;
}
@keyframes launch-spin { to { transform: rotate(360deg); } }

/* Slowed instead of stopped so the page still reads as working. */
@media (prefers-reduced-motion: reduce) {
	#div_launching .launch-ring::before { animation-duration: 3s; }
}

/* Standalone header and footer from LeftNav.htm and RightNav.htm. Their scripts remove them inside the DNN iframe. */
.euclid-shell {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 32px;
}
.euclid-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	margin-bottom: 32px;
	font-family: "Raleway", Helvetica, Arial, sans-serif;
	box-shadow: 0 4px 4px -2px rgba(51, 51, 51, .3);
}
.euclid-eyebrow {
	padding: 8px 0;
	background-image: linear-gradient(to right, #007A4D 0%, #3A7D28 100%);
}
.euclid-eyebrow .euclid-shell { display: flex; justify-content: flex-end; gap: 16px; }
.euclid-eyebrow a,
.euclid-eyebrow a:hover,
.euclid-eyebrow a:focus { font-size: 16px; color: #FFFFFF; }
.euclid-eyebrow a:hover { text-decoration: underline; }
.euclid-eyebrow #euclidProfile { display: inline-flex; align-items: center; gap: 8px; }
.euclid-eyebrow #euclidProfile.hidden { display: none; }
.euclid-eyebrow #euclidLogoff { display: inline-flex; align-items: center; }
.euclid-eyebrow #euclidLogoff.hidden { display: none; }
.euclid-eyebrow #euclidLogoff::before { content: ""; width: 1px; height: 16px; margin-right: 16px; background: rgba(255, 255, 255, .5); }
.euclid-avatar { width: 22px; height: 22px; object-fit: cover; background: rgba(255, 255, 255, .3); border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%; }
.euclid-logobar { padding: 8px 0; background: #FFFFFF; }
.euclid-logobar .euclid-shell {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 62px;
}
.euclid-logo img { display: block; max-height: 60px; max-width: 240px; }
/* Negative right margin pulls the pill padding into the gutter so link text lines up with the eyebrow links. */
.euclid-menu { display: flex; gap: 4px; margin: 0 -16px 0 0; padding: 0; list-style: none; }
.euclid-menu > li > a {
	display: block;
	padding: 8px 16px;
	font-size: 16px;
	font-weight: 600;
	color: #333333;
	white-space: nowrap;
	border-radius: 20px;
}
.euclid-menu .dropdown-menu {
	min-width: 180px;
	margin-top: 8px;
	padding: 8px;
	border: 1px solid #E5E5E5;
	border-top: 5px solid #3A7D28;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}
.euclid-menu .dropdown-menu > li > a { padding: 8px 12px; font-size: 15px; border-radius: 6px; }
.euclid-menu > li > a:hover,
.euclid-menu > li > a:focus,
.euclid-menu > .open > a,
.euclid-menu .dropdown-menu > li > a:hover,
.euclid-menu .dropdown-menu > li > a:focus {
	color: #FFFFFF;
	background-color: #3A7D28;
	text-decoration: none;
}

/* Short pages: content grows to fill the window so the footer sits at the bottom. It stays in normal flow, so it never covers content. Skipped in the DNN iframe, where the footer is removed. */
body:has(> #euclidFooter) {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
body:has(> #euclidFooter) > #content { flex: 1 0 auto; }

/* Content edges line up with the header and footer .euclid-shell. */
body:has(> #euclidHeader) > #content { width: 100%; max-width: 1320px; padding-left: 32px; padding-right: 32px; }
@media (max-width: 767px) {
	body:has(> #euclidHeader) > #content { padding-left: 20px; padding-right: 20px; }
}
body:has(> #euclidFooter) > #euclidFooter { flex-shrink: 0; }

.euclid-footer {
	margin-top: 48px;
	padding: 32px 0;
	font-family: "Raleway", Helvetica, Arial, sans-serif;
	color: #FFFFFF;
	background-image: linear-gradient(to right bottom, #007A4D 0%, #3A7D28 60%);
}
.euclid-footer a,
.euclid-footer a:hover,
.euclid-footer a:focus { color: #FFFFFF; }
.euclid-footer a:hover { text-decoration: underline; }
.euclid-footer .euclid-shell { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.euclid-footer p { margin: 0; }
.euclid-footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; }
.euclid-footer-copyright { margin-top: 12px !important; font-size: 14px; line-height: 1.6; opacity: .85; }
.euclid-footer-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.euclid-footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 24px; font-size: 15px; }
.euclid-footer-links a { display: inline-flex; align-items: center; gap: 8px; }
.euclid-footer-links .fa { opacity: .8; }
.euclid-footer-social { display: flex; gap: 12px; }
.euclid-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 18px;
	border: 2px solid rgba(255, 255, 255, .85);
	border-radius: 50%;
	transition: background-color .2s ease, color .2s ease;
}
.euclid-footer .euclid-footer-social a:hover,
.euclid-footer .euclid-footer-social a:focus {
	color: #007A4D;
	background: #FFFFFF;
	text-decoration: none;
}
@media (max-width: 767px) {
	.euclid-shell { padding: 0 20px; }
	.euclid-footer .euclid-shell { flex-direction: column-reverse; }
	.euclid-footer-contact { align-items: flex-start; }
	.euclid-footer-links { flex-direction: column; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
	.euclid-footer-social a { transition: none; }
}

/* Step card and pill buttons from the DNN skin (markup in MemberDLL/timesheet.htm). Its rem values are converted to px here. */
.euclid-step {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	padding: 32px;
	background: #FFFFFF;
	border: 1px solid #E5E5E5;
	border-left: 5px solid #3A7D28;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}
.euclid-step-badge {
	display: inline-flex;
	flex: 0 0 48px;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	font-size: 22px;
	font-weight: 700;
	color: #FFFFFF;
	background: #3A7D28;
	border-radius: 50%;
}
.euclid-step-body { flex: 1 1 auto; min-width: 0; }
.euclid-step-body h3 { margin: 8px 0 16px; font-size: 24px; }
.euclid-step-body p { margin: 0 0 16px; font-size: 16px; line-height: 1.7; }
/* Excludes .euclid-btn, which would otherwise lose its white text on the timesheet card. */
.euclid-step-body a:not(.euclid-btn) { color: #2F6B24; font-weight: 500; }
.euclid-steps { display: grid; gap: 24px; max-width: 900px; margin: 0 auto 48px; }
.euclid-step-muted { background: #F7F7F7; border-left-color: #999999; box-shadow: none; }
.euclid-step-muted .euclid-step-badge { background: #999999; font-size: 18px; }

.euclid-callout {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	align-items: center;
	padding: 16px 20px;
	background: #F4F8F3;
	border-radius: 6px;
}
.euclid-callout strong { flex: 1 0 100%; color: #333333; }
.euclid-callout a { display: inline-flex; align-items: center; gap: 8px; word-break: break-word; }
.euclid-callout .fa { color: #3A7D28; }

.euclid-checklist { counter-reset: euclid-step; margin: 0; padding: 0; list-style: none; }
.euclid-checklist li {
	position: relative;
	margin: 0 0 14px;
	padding-left: 40px;
	font-size: 16px;
	line-height: 1.6;
	counter-increment: euclid-step;
}
.euclid-checklist li:last-child { margin-bottom: 0; }
.euclid-checklist li::before {
	content: counter(euclid-step);
	position: absolute;
	top: 0;
	left: 0;
	width: 27px;
	height: 27px;
	font-size: 14px;
	font-weight: 700;
	line-height: 27px;
	text-align: center;
	color: #2F6B24;
	background: #EAF5E6;
	border-radius: 50%;
}

/* Schedule Demo page (markup in MemberDLL/scheduledemo.htm). */
.euclid-intro { max-width: 820px; margin: 16px auto 32px; text-align: center; }
.euclid-intro-eyebrow {
	display: block;
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #2F6B24;
}
.euclid-intro h1,
.euclid-intro h2 { margin: 0 0 20px; font-size: 44px; font-weight: 700; }
.euclid-intro h1::after,
.euclid-intro h2::after {
	content: "";
	display: block;
	width: 60px;
	height: 4px;
	margin: 20px auto 0;
	background: #3A7D28;
	border-radius: 2px;
}
.euclid-intro p { margin: 0; font-size: 18px; line-height: 1.75; }

.euclid-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 32px;
	max-width: 900px;
	margin: 0 auto 48px;
	padding: 20px 32px;
	background: #F4F8F3;
	border-radius: 50px;
}
.euclid-contact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: 18px;
	color: #FFFFFF;
	background: #3A7D28;
	border-radius: 50%;
}
.euclid-contact-label { font-size: 16px; font-weight: 600; color: #333333; }
.euclid-contact-item,
.euclid-contact-item:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 500;
	color: #2F6B24;
	text-decoration: none;
}
.euclid-contact-item .fa { color: #3A7D28; }
.euclid-contact-item:hover,
.euclid-contact-item:focus { color: #2F6B24; text-decoration: underline; }

.euclid-features { max-width: 1100px; margin: 0 auto 48px; }
.euclid-features-intro { max-width: 820px; margin: 0 auto 40px; text-align: center; font-size: 18px; line-height: 1.7; }
.euclid-features-grid { display: grid; grid-template-columns: 1fr; column-gap: 32px; }
.euclid-features-list { margin: 0; padding: 0; list-style: none; }
.euclid-features-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font-size: 16px;
	color: #333333;
}
.euclid-features-list li .fa {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	font-size: 16px;
	color: #2F6B24;
	background: #EAF5E6;
	border-radius: 50%;
}
@media (min-width: 576px) { .euclid-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .euclid-features-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) {
	.euclid-intro h1,
	.euclid-intro h2 { font-size: 32px; }
	.euclid-contact { flex-direction: column; border-radius: 12px; }
	.euclid-contact-icon { display: none; }
}


/* Terms and Privacy pages (Word-exported markup in MemberDLL/terms.htm and privacy.htm). */
.euclid-legal { max-width: 900px; margin: 0 auto 48px; overflow-wrap: break-word; color: #333333; }
.euclid-legal table { max-width: 100%; }

/* !important beats the inline Times New Roman, Aptos and pt sizes that Word stamps on every span. */
.euclid-legal * {
	font-family: "Raleway", Helvetica, Arial, sans-serif !important;
	font-size: inherit !important;
	line-height: inherit !important;
	letter-spacing: normal !important;
}
.euclid-legal p,
.euclid-legal li,
.euclid-legal td { margin-bottom: 12px !important; font-size: 16px !important; line-height: 1.7 !important; color: #333333 !important; }
.euclid-legal p[style*="justify"] { text-align: left !important; }
.euclid-legal a[href],
.euclid-legal a[href] span { color: #2F6B24 !important; font-weight: 500; }
.euclid-legal a:not([href]) { color: inherit !important; }

.euclid-btn-group { display: flex; flex-wrap: wrap; gap: 12px; }
.euclid-btn,
.euclid-btn:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 36px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: #FFFFFF;
	background: #3A7D28;
	border: 0;
	border-radius: 50px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.euclid-btn:hover,
.euclid-btn:focus { color: #FFFFFF; background: #2F6B24; text-decoration: none; }
.euclid-btn:focus-visible { outline: 3px solid rgba(58, 125, 40, .4); outline-offset: 2px; }
.euclid-btn-outline,
.euclid-btn-outline:visited {
	color: #2F6B24;
	background: #FFFFFF;
	box-shadow: inset 0 0 0 2px #3A7D28;
}
.euclid-btn-outline:hover,
.euclid-btn-outline:focus { color: #FFFFFF; background: #3A7D28; }
.euclid-frame {
	display: block;
	position: relative;
	left: 50%;
	width: min(130%, calc(100vw - 64px));
	transform: translateX(-50%);
	height: 75vh;
	min-height: 600px;
	margin-top: 24px;
	background: #FFFFFF;
	border: 1px solid #E5E5E5;
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .05);
}
.euclid-btn .fa { transition: transform .4s ease; }
.euclid-btn:hover .fa-refresh { transform: rotate(180deg); }
@media (max-width: 575px) {
	.euclid-step { flex-direction: column; gap: 12px; padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.euclid-btn,
	.euclid-btn .fa { transition: none; }
}

/* Flat on/off switch (cvweb.css draws a skeuomorphic one). */
.nqToggleSwitchLabel div { width: 64px; height: 28px; background: #CCCCCC; transition: background-color .2s; }
.nqToggleSwitchLabel input:checked + div { background: #3A7D28; }
.nqToggleSwitchLabel div:after,
.nqToggleSwitchLabel i:after { display: none; }
.nqToggleSwitchLabel i {
	top: 50%;
	left: 11px;
	width: 22px;
	height: 22px;
	background: #FFFFFF;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	transform: translateY(-50%);
}
.nqToggleSwitchLabel input:checked ~ i { top: 50%; left: 47px; }
.nqToggleSwitchLabel .on,
.nqToggleSwitchLabel .off { font-size: 11px; font-weight: 700; text-shadow: none; }
.nqToggleSwitchLabel .on { left: 9px; }
.nqToggleSwitchLabel .off { right: 8px; }

/* select2 multi-select chips; body outranks select2.css, which loads later. */
body .select2-container--default .select2-selection--multiple .select2-selection__choice {
	color: #333333;
	background: #F4F8F3;
	border: 1px solid #DCEFD5;
	border-radius: 12px;
	max-width: calc(100% - 10px);
	white-space: normal;
}
body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #2F6B24; }
body .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #3A7D28; }

/* cvweb.css pins the required star to the label box's right edge, which drifts from left-aligned mobile labels. */
@media (max-width: 768px) {
	label.required { background: none; }
	label.required::after { content: "*"; margin-left: 3px; color: #D9534F; }
}

/* cvweb.css stacks justified groups on mobile, which breaks the pill shape; keep them in a row. */
@media (max-width: 768px) {
	.btn-group-justified { display: flex; }
	.btn-group-justified > .btn:not(.hidden) { flex: 1 1 0; flex-direction: row; align-items: center; justify-content: center; gap: 6px; width: auto; white-space: normal; text-align: left; }
}

/* cvweb.css gives dd a fixed 180px indent, but only floats dt from 550px up. */
@media (max-width: 549px) {
	.dl-horizontal dd { margin: 0 0 8px; overflow-wrap: anywhere; }
}