/* eDelaney interface kit.
   header.asp links this file on dev unless the page sets kitOff = True
   before the include. Catalog pages also link it.
   Meant to replace the shared parts of the header style block,
   SchoolStyle.css, and the copied style blocks on Settings, Data management,
   ePass, and reports. Page-only rules stay on the page.
   The top bar and class seating are not in this file.
   Pages that set kitChrome = True before the header include
   also pick up the menu and card-title colors at the bottom.
   body.ui-kit rules at the bottom beat a later page style block. */

:root {
	--primary-color: #0767A9;
	--faded-color: rgba(7, 103, 169, 0.06);
	--period-now: #eef3ff;
	--ui-blue: #0767A9;
	--ui-fade: rgba(7, 103, 169, 0.06);
	--ui-line: #d7e0ec;
	--ui-muted: #5b6b7c;
	--ui-text: #263238;
	--ui-panel: #F3F6FA;
	--ui-ok: #146c36;
	--ui-ok-bg: #e3f5e8;
	--ui-ok-ink: #146c36;
	--ui-err: #b42318;
	--ui-err-bg: #fde8e8;
	--ui-warn: #6a4500;
	--ui-warn-bg: #fff3d6;
	--ui-info-bg: #eef3ff;
	--ui-over: #fd7e14;
	--ui-pending: #800000;
	--ui-rejected: #6c757d;
	--ui-head: #eef3ff;
	--ui-blue-down: #05548b;
	--ui-navy: #03406e;
	--ui-wash: #d6e4f5;
	--ui-radius: 6px;
	--ui-font: "Segoe UI", system-ui, Arial, sans-serif;
}

.ui-page,
.ui-page * { box-sizing: border-box; }

.ui-page {
	max-width: 1180px;
	margin: 0 auto 48px;
	padding: 8px 18px 40px;
	color: var(--ui-text);
	font-family: var(--ui-font);
	font-size: 14px;
	line-height: 1.4;
}
.ui-page h1 {
	color: var(--ui-blue);
	font-size: 28px;
	margin: 8px 0 8px;
	font-weight: 700;
}
.ui-page h1 i { margin-right: 8px; }
.ui-lead { margin: 0 0 16px; max-width: 760px; color: #243140; }
.ui-page h2 {
	margin: 4px 0 8px;
	color: var(--ui-navy);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	font-family: var(--ui-font);
	border: 0;
	clear: none;
}
.ui-page h3 {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	font-family: var(--ui-font);
}
.ui-page .w3-card h3 { background: var(--ui-blue); color: #fff; margin: 0; }
.ui-report-title { width: 100%; margin: 0; }
.ui-kicker { margin: 0 0 10px; color: var(--ui-muted); font-size: 13px; }
.ui-spec-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 4px 18px;
	align-items: start;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--ui-line);
}
.ui-spec-row > :first-child { margin-top: 0; margin-bottom: 0; min-width: 0; }
.ui-spec-row > img { max-height: 48px; width: auto; }
.ui-spec-row p img {
	width: 48px;
	height: 64px;
	object-fit: cover;
	vertical-align: middle;
}
.ui-spec-name {
	margin: 0;
	color: var(--ui-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.35;
}
.ui-block { margin: 0 0 26px; }
.ui-page code {
	font-family: Consolas, "Courier New", monospace;
	font-size: 12px;
	background: var(--ui-fade);
	padding: 1px 5px;
	border-radius: 4px;
}
.ui-page a { color: var(--ui-blue); }

/* Tabs. Same idea as Settings and Data management. Settings corner radius. */
.ui-tabs > ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	border-bottom: 2px solid var(--ui-blue);
}
.ui-tabs > ul li { margin: 0; padding: 0; }
.ui-tabs > ul a {
	display: block;
	padding: 10px 16px;
	text-decoration: none;
	color: var(--ui-blue);
	font-weight: 600;
	background: #fff;
	border-radius: 8px 8px 0 0;
}
.ui-tabs > ul a:hover,
.ui-tabs > ul a.is-on,
.ui-tabs > ul a:hover i,
.ui-tabs > ul a.is-on i { background: var(--ui-blue); color: #fff; }
.ui-tabs > ul a:hover i,
.ui-tabs > ul a.is-on i { background: transparent; }
.ui-tabs .tab-icon { margin-right: 8px; }
.ui-panel {
	display: none;
	background: #fff;
	border: 1px solid var(--ui-line);
	border-top: 0;
	border-radius: 0 0 12px 12px;
	padding: 16px 18px 8px;
}
.ui-panel.is-on { display: block; }

/* Buttons. Settings shape: inline, no outer margin, icon gap.
   header.asp still sets display:block and margin:20px auto on .dark-button. */
.dark-button,
.lite-button,
a.dark-button,
a.lite-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 8px 16px;
	border-radius: var(--ui-radius);
	border: 1px solid var(--ui-blue);
	cursor: pointer;
	font-family: var(--ui-font);
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	box-sizing: border-box;
	vertical-align: middle;
}
.dark-button,
a.dark-button { background: var(--ui-blue); color: #fff; }
.lite-button,
a.lite-button { background: #fff; color: var(--ui-blue); }
.dark-button:hover,
a.dark-button:hover,
.dark-button.is-hover,
a.dark-button.is-hover {
	background: var(--ui-navy);
	color: #fff;
	border-color: var(--ui-navy);
	text-decoration: none;
}
.lite-button:hover,
a.lite-button:hover,
.lite-button.is-hover,
a.lite-button.is-hover {
	background: var(--ui-wash);
	color: var(--ui-blue);
	border-color: var(--ui-blue);
	text-decoration: none;
}
/* Open choice. White is the kit. Pale is the table header, shown only as a sample. */
.dark-button.is-pale,
a.dark-button.is-pale,
.dark-button.is-pale:hover,
a.dark-button.is-pale:hover {
	background: #eef3ff;
	color: var(--ui-blue);
}
.lite-button.is-rest-pale,
a.lite-button.is-rest-pale {
	background: #eef3ff;
	color: var(--ui-blue);
}
.lite-button.is-rest-pale:hover,
a.lite-button.is-rest-pale:hover {
	background: var(--ui-blue);
	color: #fff;
}
.lite-button.is-hover-pale,
a.lite-button.is-hover-pale,
.lite-button.is-hover-pale:hover,
a.lite-button.is-hover-pale:hover {
	background: #eef3ff;
	color: var(--ui-blue);
}
.dark-button.is-down,
a.dark-button.is-down,
.lite-button.is-down,
a.lite-button.is-down,
.dark-button.is-down:hover,
.lite-button.is-down:hover {
	background: var(--ui-blue-down);
	color: #fff;
	border-color: var(--ui-blue-down);
}
/* Checklist hovers. These beat the kit hover on purpose. */
.ui-page .hover-pale .lite-button:hover,
.ui-page .hover-pale .dark-button:hover,
.ui-page .hover-pale a.lite-button:hover,
.ui-page .hover-pale a.dark-button:hover {
	background: #eef3ff;
	color: var(--ui-blue);
	border-color: var(--ui-blue);
}
.ui-page .hover-down .lite-button:hover,
.ui-page .hover-down a.lite-button:hover {
	background: var(--ui-blue);
	color: #fff;
	border-color: var(--ui-blue);
}
.ui-page .hover-down .dark-button:hover,
.ui-page .hover-down a.dark-button:hover {
	background: var(--ui-blue-down);
	color: #fff;
	border-color: var(--ui-blue-down);
}
.ui-page .hover-wash .lite-button:hover,
.ui-page .hover-wash .dark-button:hover,
.ui-page .hover-wash a.lite-button:hover,
.ui-page .hover-wash a.dark-button:hover {
	background: #d6e4f5;
	color: var(--ui-blue);
	border-color: var(--ui-blue);
}
.ui-hover-list { list-style: none; margin: 8px 0 0; padding: 0; }
.ui-hover-list li { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; }
.ui-hover-list li span { color: var(--ui-muted); font-size: 13px; }
.ui-page .dh-white .dark-button:hover { background: #fff; color: var(--ui-blue); border-color: var(--ui-blue); }
.ui-page .dh-wash .dark-button:hover { background: #d6e4f5; color: var(--ui-blue); border-color: var(--ui-blue); }
.ui-page .dh-ice .dark-button:hover { background: #f3f9fd; color: var(--ui-blue); border-color: var(--ui-blue); }
.ui-page .dh-soft .dark-button:hover { background: #c5e4f7; color: var(--ui-blue); border-color: var(--ui-blue); }
.ui-page .dh-sky .dark-button:hover { background: #8ec9ef; color: var(--ui-blue); border-color: #8ec9ef; }
.ui-page .dh-clear .dark-button:hover { background: #3d9ad6; color: #fff; border-color: #3d9ad6; }
.ui-page .dh-vivid .dark-button:hover { background: #1c92d4; color: #fff; border-color: #1c92d4; }
.ui-page .dh-hot .dark-button:hover { background: #0095e8; color: #fff; border-color: #0095e8; }
.ui-page .dh-down .dark-button:hover { background: #05548b; color: #fff; border-color: #05548b; }
.ui-page .dh-navy .dark-button:hover { background: #03406e; color: #fff; border-color: #03406e; }
.dark-button:focus-visible,
.lite-button:focus-visible,
a.dark-button:focus-visible,
a.lite-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ui-blue);
}
.dark-button:disabled,
.lite-button:disabled,
.dark-button.is-disabled {
	opacity: 0.45;
	cursor: default;
	pointer-events: none;
}
.dark-button.is-on { box-shadow: inset 0 0 0 2px #fff; filter: brightness(1.08); }
.ui-btn-sm { padding: 4px 10px; font-size: 13px; }
.ui-btn-xs { padding: 2px 8px; font-size: 13px; }
.ui-btn-block { display: flex; width: 100%; margin: 8px 0 0; }
.ui-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ui-actions input[type="text"] {
	width: 180px;
	max-width: 180px;
	padding: 6px 10px;
	border: 1px solid #c5d0de;
	border-radius: var(--ui-radius);
	font-family: var(--ui-font);
	font-size: 14px;
	box-sizing: border-box;
}
.ui-gap { margin-top: 12px; }

.ui-segment {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--ui-blue);
	border-radius: 8px;
	overflow: hidden;
	height: 36px;
}
.ui-segment button {
	margin: 0;
	padding: 8px 12px;
	border: 0;
	background: #fff;
	color: var(--ui-blue);
	font-family: var(--ui-font);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.ui-segment button.is-on { background: var(--ui-blue); color: #fff; }
.ui-segment button:hover,
.ui-segment button.is-hover { background: var(--ui-wash); color: var(--ui-blue); }
.ui-segment button.is-on:hover,
.ui-segment button.is-on.is-hover,
.ui-segment button.is-on.is-hover:hover { background: var(--ui-navy); color: #fff; }
.ui-segment button.is-rest-pale { background: #eef3ff; }
.ui-segment button.is-rest-pale:hover { background: var(--ui-blue); color: #fff; }
.ui-segment button.is-on.is-pale,
.ui-segment button.is-on.is-pale:hover { background: #eef3ff; color: var(--ui-blue); }

.ui-icon-btn {
	background: #fff;
	border: 1px solid var(--ui-blue);
	color: var(--ui-blue);
	padding: 4px 8px;
	cursor: pointer;
	border-radius: var(--ui-radius);
}
.ui-icon-btn:hover,
.ui-icon-btn.is-hover { background: var(--ui-wash); color: var(--ui-blue); border-color: var(--ui-blue); }
.ui-icon-btn.is-on { background: var(--ui-blue); color: #fff; border-color: var(--ui-blue); }
.ui-icon-btn.is-on:hover,
.ui-icon-btn.is-on.is-hover,
.ui-icon-btn.is-on.is-hover:hover { background: var(--ui-navy); color: #fff; border-color: var(--ui-navy); }
.ui-icon-btn.is-rest-pale { background: #eef3ff; }
.ui-icon-btn.is-rest-pale:hover { background: var(--ui-blue); color: #fff; }
.ui-icon-btn.is-on.is-pale,
.ui-icon-btn.is-on.is-pale:hover { background: #eef3ff; color: var(--ui-blue); border-color: var(--ui-blue); }

/* Fields */
.ui-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }
.ui-field { margin: 0 0 10px; }
.ui-field > label,
.ui-label { display: block; font-weight: 700; margin-bottom: 4px; }
.ui-hint { display: block; margin-top: 3px; color: var(--ui-muted); font-size: 12px; }
.ui-input,
.ui-field input[type="text"],
.ui-field input[type="password"],
.ui-field input[type="date"],
.ui-field input[type="number"],
.ui-field input[type="email"],
.ui-field select,
.ui-field textarea,
.card input[type="text"],
.card input[type="password"],
.card input[type="date"],
.card input[type="number"],
.card select,
.card textarea,
.report-sidebar input[type="text"],
.report-sidebar input[type="password"],
.report-sidebar input[type="date"],
.report-sidebar select,
.report-content input[type="text"],
.report-content input[type="password"],
.report-content input[type="date"],
.report-content input[type="number"],
.report-content select:not(.hidden):not(.ui-status),
.report-content textarea,
.ui-search input {
	width: 100%;
	max-width: 420px;
	padding: 1px 4px;
	border: 1px solid #c5d0de;
	border-radius: var(--ui-radius);
	background: #fff;
	color: var(--ui-text);
	font-family: var(--ui-font);
	font-size: 14px;
	height: auto;
	box-sizing: border-box;
}
.ui-field textarea { max-width: 520px; min-height: 64px; }
/* One field style for every kit page. A page does not add a class for this. */
body.ui-kit input:not([type]),
body.ui-kit input[type="text"],
body.ui-kit input[type="password"],
body.ui-kit input[type="date"],
body.ui-kit input[type="number"],
body.ui-kit input[type="email"],
body.ui-kit input[type="search"],
body.ui-kit input[type="tel"],
body.ui-kit input[type="url"],
body.ui-kit select:not(.ui-status):not(.hidden),
body.ui-kit textarea {
	max-width: 420px;
	padding: 1px 4px;
	border: 1px solid #c5d0de;
	border-radius: var(--ui-radius);
	background: #fff;
	color: var(--ui-text);
	font-family: var(--ui-font);
	font-size: 14px;
	box-sizing: border-box;
}
body.ui-kit textarea { max-width: 520px; }
body.ui-kit table input:not([type]),
body.ui-kit table input[type="text"],
body.ui-kit table input[type="password"],
body.ui-kit table input[type="date"],
body.ui-kit table input[type="number"],
body.ui-kit table input[type="email"],
body.ui-kit table input[type="search"] {
	max-width: 100%;
}
body.ui-kit table select:not(.ui-status):not(.hidden),
body.ui-kit table textarea {
	width: 100%;
	max-width: 100%;
}
body.ui-kit table.pdTable input,
body.ui-kit table.pdTable select,
body.ui-kit table.pdTable textarea {
	width: auto;
	max-width: none;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: inherit;
	color: inherit;
}
body.ui-kit table.pdTable input:focus,
body.ui-kit table.pdTable select:focus,
body.ui-kit table.pdTable textarea:focus {
	border-color: transparent;
	box-shadow: none;
}
.ui-page input:focus,
.ui-page select:focus,
.ui-page textarea:focus {
	outline: none;
	border-color: var(--ui-blue);
	box-shadow: 0 0 0 3px rgba(7, 103, 169, 0.18);
}
.ui-input.is-error,
.ui-field input.is-error { border-color: var(--ui-err); }
.ui-page .input-error {
	color: var(--ui-err);
	font-size: 12px;
	margin-top: 4px;
	display: block;
	border: 0;
}
.ui-page input[type="checkbox"],
.ui-page input[type="radio"] { accent-color: var(--ui-blue); margin-right: 4px; }
.ui-checks label,
.ui-radios label { font-weight: 600; margin-right: 14px; }
.ui-radios,
.ui-checks { display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; }

.ui-switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	vertical-align: middle;
}
.ui-switch input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
	margin: 0;
}
.ui-switch span {
	position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
	background: #c5d0de;
	border-radius: 999px;
	cursor: pointer;
	transition: 0.15s;
}
.ui-switch span:before {
	content: "";
	position: absolute;
	height: 18px;
	width: 18px;
	left: 3px;
	top: 3px;
	background: #fff;
	border-radius: 50%;
	transition: 0.15s;
}
.ui-switch input:checked + span { background: var(--ui-blue); }
.ui-switch input:checked + span:before { transform: translateX(20px); }

.ui-file { position: relative; }
.ui-file-input { display: none; }
.ui-file-name { margin-left: 8px; color: var(--ui-muted); font-size: 13px; }

.ui-search { position: relative; max-width: 420px; }
.ui-search input { padding-right: 28px; }
.ui-search-clear {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	color: var(--ui-blue);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: none;
	padding: 0 4px;
}
.ui-search.has-value .ui-search-clear { display: block; }

.ui-input-tight {
	font-size: 10px;
	height: 25px;
	padding: 2px 4px;
	width: 160px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-family: var(--ui-font);
}

/* Settings-style label row */
.ui-form-row {
	display: grid;
	grid-template-columns: 220px 1fr auto;
	gap: 8px 14px;
	padding: 10px 0;
	border-top: 1px solid var(--ui-fade);
	align-items: start;
}
.ui-form-row:first-of-type { border-top: 0; }
.ui-form-row > label { font-weight: 700; padding-top: 8px; }
.ui-form-state { font-size: 12px; color: var(--ui-ok); min-width: 52px; padding-top: 10px; text-align: right; }
.ui-roval { padding: 8px 0; font-weight: 600; }

/* Report shell. Class names match header.asp so pages can move over as-is. */
.report-container {
	font-family: var(--ui-font);
	color: var(--ui-text);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
}
.key-metrics {
	background: #fff;
	border-radius: 8px;
	padding: 0;
	width: 100%;
}
.card,
.stat {
	border-radius: 8px;
	margin: 0;
	padding: 16px;
	background: var(--ui-head);
}
.card { text-align: left; }
.stat { text-align: center; }
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.stats .stat { flex: 1 1 180px; }
.stat h3 { margin: 0; font-size: 14px; color: var(--ui-muted); font-weight: 600; }
.stat p { font-size: 22px; margin: 8px 0 0; color: var(--ui-text); }
.card ul { list-style: none; margin: 0; padding: 0; }
.card ul li { margin: 6px 0; padding: 8px 10px; background: #fff; border-radius: 6px; }
.report-content {
	flex: 1;
	background: #fff;
	border-radius: 8px;
	padding: 0;
	min-width: 0;
}
.report-sidebar {
	width: 300px;
	background: #fff;
	border-radius: 8px;
	padding: 10px;
}
.report-sidebar h4,
.card > h4,
.ui-side h3 { margin: 14px 0 6px; color: var(--ui-blue); font-size: 15px; font-weight: 600; }
.report-sidebar h4:first-child,
.card > h4:first-child { margin-top: 0; }
.ui-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 0 0 10px;
}
.ui-loglink { margin-left: auto; font-size: 13px; }
.ui-log {
	display: block;
	white-space: pre-wrap;
	background: #111;
	color: #eee;
	padding: 10px 12px;
	border-radius: 6px;
	margin: 0 0 12px;
	font-size: 12px;
}
.ui-log[hidden] { display: none; }
.ui-wait { margin: 8px 0 0; min-height: 1.2em; }
.ui-narrow { max-width: 240px; }

/* Tables. report-table is the one list. The outline is part of the class. */
.report-table,
.ui-grid {
	width: 100%;
	margin: 0;
	font-size: 14px;
}
.report-table {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--ui-line);
	border-radius: 8px;
}
.ui-grid { border-collapse: collapse; }
.ui-page .report-table th,
.ui-page .report-table td,
.ui-page .report-container table.report-table th,
.ui-page .report-container table.report-table td {
	border-bottom: 1px solid #ddd;
	text-align: left;
	padding: 5px 7px;
	vertical-align: middle;
	word-wrap: break-word;
}
.ui-page .report-table th,
.ui-page .report-container table.report-table th {
	background: var(--ui-head);
	position: sticky;
	top: 0;
	z-index: 1;
	font-weight: 700;
}
.ui-page .report-table tbody tr:nth-child(odd) { background: #fff; }
.ui-page .report-table tbody tr:nth-child(even) { background: #f9f9f9; }
.ui-page .report-table.ui-tight th,
.ui-page .report-table.ui-tight td { padding: 4px 6px; font-size: 13px; }
.ui-page .report-table tr.attnStudent,
.ui-page .report-table tr.attnStudent td { background: #ffff99; }
.ui-page .report-table tr.ui-attn,
.ui-page .report-table tr.ui-attn td { background: var(--ui-head); }
.ui-page .report-table:not(.is-grid) tbody tr:hover,
.ui-page .ui-grid tbody tr:hover,
body.ui-kit .report-table:not(.is-grid) tbody tr:hover { opacity: 0.45; }
.ui-page .report-table:not(.is-grid) tbody tr:hover td,
.ui-page .ui-grid tbody tr:hover td,
body.ui-kit .report-table:not(.is-grid) tbody tr:hover td { background: var(--ui-blue); color: #fff; }
.ui-page .report-table tr.odd,
.ui-page .report-table tr.odd td { background: coral; }
.ui-scroll {
	max-height: 260px;
	overflow: auto;
}
.ui-grid th,
.ui-grid td {
	border: 1px solid #ccc;
	padding: 5px 7px;
	text-align: left;
	font-size: 14px;
}
.ui-grid th { background: var(--ui-head); }
.ui-page .ui-grid tbody tr:nth-child(odd) { background: #fff; }
.ui-page .ui-grid tbody tr:nth-child(even) { background: #f9f9f9; }
.ui-grid td.tx-ok,
.tx-ok { color: var(--ui-ok); font-weight: 400; }
.tx-err { color: var(--ui-err); font-weight: 400; }

table.pdTable { border-collapse: collapse; }
tr.pdNow,
tr.pdNow td,
tr.pdNow th { background: var(--period-now); }
/* Period table. Second list. No frame, no zebra, no blue row. */
body.ui-kit table.pdTable {
	border: 0;
	border-radius: 0;
	background: transparent;
	border-collapse: collapse;
	border-spacing: 0;
}
body.ui-kit table.pdTable th,
body.ui-kit table.pdTable td {
	border: 0;
	background: transparent;
}
body.ui-kit table.pdTable tr.pdNow,
body.ui-kit table.pdTable tr.pdNow th,
body.ui-kit table.pdTable tr.pdNow td {
	background: var(--period-now);
	border: 0;
}

tr.deleted,
tr.rDel,
tr.is-deleted { color: #888; text-decoration: line-through; }
.attnStudent { background: #ffff99; }
.ui-page tr.odd { background: coral; }

/* ePass-style page with a filter sidebar */
.ui-epass { display: flex; gap: 16px; align-items: flex-start; }
.ui-side { width: 220px; flex: none; }
.ui-sidemain { flex: 1; min-width: 0; }
.ui-viewswitch { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.ui-viewswitch h3 { margin: 0 8px 0 0; }
.ui-tiles { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.ui-tile { width: 92px; text-align: center; font-size: 12px; }
.ui-tile img {
	width: 67px;
	height: 100px;
	object-fit: cover;
	display: block;
	margin: 0 auto 4px;
	background: #eee;
}
.ui-sidemain.is-list .ui-tiles { display: none; }
.ui-sidemain .ui-list { display: none; }
.ui-sidemain.is-list .ui-list { display: block; }
.ui-person[style*="display: none"] { display: none; }

img.stuActive { border: 2px solid var(--ui-blue); }
img.stuOverdue { border: 2px solid var(--ui-over); }
img.stuPending { border: 2px solid var(--ui-pending); }
img.stuRejected { border: 2px solid var(--ui-rejected); }
img.stuEnded { border: 3px solid #000; }
td.stuActive,
.stuActive { color: var(--ui-blue); }
td.stuOverdue,
.stuOverdue { color: var(--ui-over); }
td.stuPending,
.stuPending { color: var(--ui-pending); }
td.stuRejected,
.stuRejected { color: var(--ui-rejected); }
td.stuEnded,
.stuEnded { color: #000; }

.ui-legend { list-style: none; margin: 8px 0 0; padding: 0; }
.ui-legend li { margin: 4px 0; font-size: 13px; }
.ui-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0; font-size: 13px; }
.tx-import { color: var(--ui-blue); font-weight: 400; }
.tx-replace { color: var(--ui-over); font-weight: 400; }
.ui-seats { display: flex; flex-wrap: wrap; gap: 22px 28px; align-items: flex-start; margin: 8px 0 14px; }
.ui-seat { position: relative; width: 80px; }
.ui-seat img { width: 80px; height: 106px; object-fit: cover; object-position: center top; display: block; border: 2px solid green; background: #eee; }
.ui-seat.s-out img { border-color: #800000; opacity: 0.4; }
.ui-seat.s-pass img,
.ui-seat.s-blue img { border-color: #0767A9; opacity: 0.65; }
.ui-seat.s-late img { border-color: #fd7e14; opacity: 0.65; }
.ui-shot { position: relative; width: 80px; border: 2px solid green; }
.ui-seat.s-out .ui-shot { border-color: #800000; }
.ui-seat.s-pass .ui-shot,
.ui-seat.s-blue .ui-shot { border-color: #0767A9; }
.ui-seat.s-late .ui-shot { border-color: #fd7e14; }
.ui-page .ui-shot img { border: 0; opacity: 1; }
.ui-page .ui-seat.s-out .ui-shot img { opacity: 0.4; }
.ui-page .ui-seat.s-pass .ui-shot img,
.ui-page .ui-seat.s-blue .ui-shot img,
.ui-page .ui-seat.s-late .ui-shot img { opacity: 0.65; }
.ui-timer {
	position: absolute;
	left: 2px;
	right: 2px;
	bottom: 0;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;
	background: #0767A9;
	color: #fff;
}
.ui-seat.s-late .ui-timer { background: #fd7e14; color: #1b2430; }
.ui-seat .imgLabel { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.6); font-size: 11px; white-space: nowrap; padding: 0 3px; }
.ui-seat .ui-kicker { margin: 4px 0 0; text-align: center; }
.ui-passbox { border: 2px solid var(--ui-blue); background: #fefefe; padding: 14px 16px; max-width: 320px; }
.ui-passbox h3 { margin-bottom: 6px; }
.legendSquare {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 6px;
	vertical-align: middle;
}
.legendActive { background: var(--ui-blue); }
.legendOverdue { background: var(--ui-over); }
.legendPending { background: var(--ui-pending); }
.legendRejected { background: var(--ui-rejected); }
.legendEnded { background: transparent; border: 1px solid #000; }
.legendGreen { background: #28a745; }
.legendLink { background: #007bff; }

.ui-badge {
	display: inline-block;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 13px;
}
.ui-badge-import { background: #4287f5; }
.ui-badge-replace { background: #e6ca6e; }
.ui-badge-import-solid { background: var(--ui-blue); color: #fff; }
.ui-badge-replace-solid { background: #e6ca6e; color: #222; }

/* Messages, dialog, tooltip */
.ui-msgs { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ui-msg,
.ui-toast {
	width: 350px;
	max-width: 100%;
	padding: 5px 8px;
	border-radius: 10px;
	opacity: 0.9;
	font-size: 14px;
	box-sizing: border-box;
}
.ui-toast {
	position: fixed;
	z-index: 300000;
	top: 70px;
	right: 40%;
	display: none;
}
.ui-msg-ok { background: var(--ui-ok-bg); color: var(--ui-ok-ink); }
.ui-msg-note { background: var(--ui-warn-bg); color: var(--ui-warn); }
.ui-msg-note a { float: right; }
.ui-msg-err { background: var(--ui-err-bg); color: var(--ui-err); }
.ui-msg-info { background: var(--ui-info-bg); color: var(--ui-blue); }
.ui-msg-live-ok { background: #000; color: #fff; border-radius: 10px; }
.ui-msg-live-note { background: #ffff99; color: #000; border-radius: 10px; }
.ui-msg-live-note a { float: right; color: #000; }
.ui-msg-live-err { background: #ffff00; color: #ff0000; border-radius: 10px; }
.alertMessage { text-align: center; color: red; font-weight: bold; }
.errorMessage { text-align: center; color: maroon; font-weight: bold; }
.ui-title {
	color: var(--ui-blue);
	font-size: 28px;
	font-weight: 700;
	margin: 8px 0;
	font-family: var(--ui-font);
}
.ui-title i { margin-right: 8px; }
.ui-sub {
	margin: 4px 0 8px;
	color: var(--ui-navy);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	border: 0;
	font-family: var(--ui-font);
}
.ui-title + .ui-sub,
body.ui-kit h1 + h2,
body.ui-kit h1 + .ui-sub { margin-top: 0; }
.ui-sub.is-rule { padding-bottom: 4px; border-bottom: 2px solid var(--ui-blue); }
.ui-page .hd-h {
	margin: 0 0 4px;
	font-size: 28px;
	font-weight: 700;
	font-family: var(--ui-font);
	line-height: 1.2;
}
.ui-page .hd-s {
	margin: 0;
	font-family: var(--ui-font);
	font-weight: 600;
	line-height: 1.3;
}
.ui-page .hd-s.is-22 { font-size: 22px; }
.ui-page .hd-s.is-16 { font-size: 16px; }
.ui-page .hd-s.is-regular { font-weight: 400; }
.ui-page .hd-s.is-air { margin-top: 8px; }
.ui-page .hd-blue { color: var(--ui-blue); }
.ui-page .hd-ink { color: var(--ui-text); }
.ui-page .hd-navy { color: var(--ui-navy); }
.ui-page .hd-muted { color: var(--ui-muted); }
.ui-page .hd-deep { color: #3d4c5c; }
.ui-page .hd-page .ui-kicker { margin: 6px 0 0; }
.ui-page .hd-sheet {
	background: #fff;
	border: 1px solid var(--ui-line);
	border-radius: 8px;
	padding: 8px 16px 16px;
	margin: 0 0 16px;
}
.ui-page .hd-sheet > h1 { margin: 0; }
.ui-page .hd-sheet > p { margin: 8px 0 12px; }
.ui-page .hd-sheet .report-table { margin: 0; }

.ui-loading {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--ui-muted);
	font-size: 14px;
	padding: 8px 0;
}

/* Full-page wait. uiBusy('page' | 'spin' | 'card') in ui.js. uiBusy(false) hides it. */
.ui-busy {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 9000;
	display: none;
	background: rgba(0, 0, 0, 0.5);
}
.ui-busy > .fa-spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 42px;
	color: #fff;
}
.ui-busy.is-spin { background: transparent; pointer-events: none; }
.ui-busy.is-spin > .fa-spinner { color: var(--ui-blue); font-size: 48px; }
.ui-busy.is-card { background: transparent; pointer-events: none; }
.ui-busy.is-card.is-hold {
	pointer-events: auto;
	background: rgba(255, 255, 255, 0.72);
}
.ui-busy-card {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	border: 1px solid var(--ui-blue);
	border-radius: 8px;
	padding: 18px 22px 14px;
	text-align: center;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
}
.ui-busy-card .fa-spinner { font-size: 42px; color: var(--ui-blue); }
.ui-busy-bar {
	width: 120px;
	height: 4px;
	margin: 12px auto 0;
	background: #e6eef8;
	overflow: hidden;
	border-radius: 2px;
}
.ui-busy-bar span {
	display: block;
	height: 100%;
	width: 40%;
	background: var(--ui-blue);
	animation: uiBusySlide 1s ease-in-out infinite;
}
.ui-busy-inline {
	display: flex;
	justify-content: center;
	padding: 12px 0;
}
.ui-busy-inline .ui-busy-card {
	position: static;
	left: auto;
	top: auto;
	transform: none;
}
@keyframes uiBusySlide {
	0% { transform: translateX(-120%); }
	100% { transform: translateX(280%); }
}

/* jQuery dialog skin. Opt in with dialogClass ui-dlg, or uiDialog() in ui.js.
   is-bar is the blue title. Without ui-dlg the window stays Smoothness. */
.ui-dialog.ui-dlg {
	background: #fff;
	background-image: none;
	border: 1px solid var(--ui-line);
	border-radius: 8px;
	padding: 0;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	font-family: var(--ui-font);
	color: var(--ui-text);
}
.ui-dialog.ui-dlg .ui-dialog-titlebar {
	background: var(--ui-head);
	background-image: none;
	border: 0;
	border-bottom: 1px solid var(--ui-line);
	border-radius: 8px 8px 0 0;
	color: var(--ui-text);
	font-family: var(--ui-font);
	font-weight: 700;
	padding: 10px 14px;
}
.ui-dialog.ui-dlg.is-bar .ui-dialog-titlebar {
	background-color: var(--ui-blue);
	background-image: none;
	color: #fff;
	border: 0;
	border-bottom: 0;
}
.ui-dialog.ui-dlg.is-bar .ui-dialog-title {
	float: none;
	display: block;
	width: auto;
	margin: 0;
	padding: 0 28px 0 0;
	overflow: visible;
	background: transparent;
	background-image: none;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	font-family: var(--ui-font);
}
.ui-dialog.ui-dlg.is-bar .ui-dialog-titlebar-close,
.ui-dialog.ui-dlg.is-bar .ui-dialog-titlebar-close:hover,
.ui-dialog.ui-dlg.is-bar .ui-dialog-titlebar-close:focus,
.ui-dialog.ui-dlg.is-bar .ui-dialog-titlebar-close.ui-state-default,
.ui-dialog.ui-dlg.is-bar .ui-dialog-titlebar-close.ui-state-hover,
.ui-dialog.ui-dlg.is-bar .ui-dialog-titlebar-close.ui-state-focus,
.ui-dialog.ui-dlg.is-bar .ui-dialog-titlebar-close.ui-state-active,
.ui-dialog.ui-dlg.is-bar .ui-dialog-titlebar-close.ui-button {
	background: transparent;
	background-image: none;
	border: 0;
	box-shadow: none;
	color: #fff;
	width: 28px;
	height: 28px;
	padding: 0;
	right: 6px;
	margin-top: -14px;
	text-indent: 0;
	overflow: hidden;
	font-size: 0;
}
.ui-dialog.ui-dlg.is-bar .ui-dialog-titlebar-close .ui-icon,
.ui-dialog.ui-dlg.is-bar .ui-dialog-titlebar-close .ui-button-icon,
.ui-dialog.ui-dlg.is-bar .ui-dialog-titlebar-close .ui-button-icon-space {
	display: none;
}
.ui-dialog.ui-dlg.is-bar .ui-dialog-titlebar-close:after {
	content: "\00d7";
	color: #fff;
	font-size: 22px;
	line-height: 28px;
	font-weight: 400;
	font-family: var(--ui-font);
	text-indent: 0;
	display: block;
}
.ui-dialog.ui-dlg .ui-dialog-title { font-size: 16px; margin: 0; }
.ui-dialog.ui-dlg .ui-dialog-content {
	background: #fff;
	background-image: none;
	border: 0;
	color: var(--ui-text);
	font-family: var(--ui-font);
	font-size: 14px;
	padding: 14px 16px 8px;
}
.ui-dialog.ui-dlg .ui-dialog-content label {
	display: block;
	font-weight: 700;
	margin: 0 0 4px;
}
.ui-dialog.ui-dlg .ui-actions { margin-top: 14px; }
.ui-choice-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

.ui-modal {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 80;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding-top: 12vh;
}
.ui-modal[hidden] { display: none; }
.ui-modal-card {
	background: #fff;
	width: 360px;
	max-width: calc(100% - 24px);
	padding: 0;
	border: 2px solid var(--ui-blue);
	border-radius: 8px;
	text-align: left;
	overflow: hidden;
}
.ui-modal-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: var(--ui-blue);
	color: #fff;
	padding: 10px 14px;
}
.ui-modal-bar h2,
.ui-modal-card .ui-modal-bar h2 {
	margin: 0;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	font-family: var(--ui-font);
	line-height: 1.3;
}
.ui-modal-body { padding: 14px 16px 16px; }
.ui-modal-card.b-active { border-color: var(--ui-blue); }
.ui-modal-card.b-over { border-color: var(--ui-over); }
.ui-modal-card.b-pending { border-color: var(--ui-pending); }
.ui-modal-card.b-rej { border-color: var(--ui-rejected); }
.ui-modal-card.b-ended { border-color: #000; }
.ui-modal-x {
	float: none;
	border: 0;
	background: transparent;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: #fff;
	padding: 0;
}
.ui-modal-card h2 { margin: 0 0 10px; }
.ui-modal-card p { margin: 6px 0; }

.ui-tip {
	display: inline-block;
	position: relative;
	margin-left: 4px;
	color: var(--ui-blue);
	font-weight: 700;
	cursor: help;
	font-size: 12px;
}
.ui-tip-text {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	left: 50%;
	bottom: 130%;
	transform: translateX(-50%);
	background: #333;
	color: #fff;
	padding: 4px 8px;
	border-radius: 6px;
	white-space: nowrap;
	font-weight: 400;
	font-size: 12px;
	z-index: 5;
}
.ui-tip:hover .ui-tip-text { visibility: visible; opacity: 1; }

/* Specimens of older controls, so this file is the only place they live
   once header.asp no longer draws them. */
.ui-old-block {
	display: block;
	margin: 20px auto;
	padding: 8px 16px;
	background: #054BA8;
	color: #fff;
	border: 1px solid #054BA8;
	border-radius: 5px;
	cursor: pointer;
	font-family: var(--ui-font);
	font-size: 14px;
}
.ui-old-block.is-hover { background: #fff; color: #054BA8; }
.destinationButton {
	background: #fff;
	border: 1px solid var(--ui-blue);
	padding: 10px;
	width: 80px;
	text-align: center;
	cursor: pointer;
	border-radius: var(--ui-radius);
	color: var(--ui-blue);
	font-family: var(--ui-font);
}
.destinationButton:hover,
.destinationButton.is-hover { background: var(--ui-wash); color: var(--ui-blue); }
.destinationButton.selected,
.destinationButton.opt-brand-selected { background: var(--ui-blue); color: #fff; }
.destinationButton.selected:hover,
.destinationButton.opt-brand-selected:hover,
.destinationButton.selected.is-hover,
.destinationButton.selected.is-hover:hover { background: var(--ui-navy); color: #fff; }
.destinationButton.is-rest-pale { background: #eef3ff; }
.destinationButton.is-rest-pale:hover { background: var(--ui-blue); color: #fff; }
.destinationButton.selected.is-pale,
.destinationButton.selected.is-pale:hover { background: #eef3ff; color: var(--ui-blue); }
.destinationButton.opt-old-selected,
.destinationButton.opt-old-selected:hover { background: #007BFF; color: #fff; }
.ui-dest-row { display: flex; flex-wrap: wrap; gap: 8px; }

.ui-page .lite-button.delete-listitem-button { color: var(--ui-err) !important; border-color: var(--ui-err) !important; }
.ui-page .lite-button.delete-listitem-button:hover { background: var(--ui-err) !important; color: #fff !important; }
.ui-hl { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 8px; }
.ui-hl th, .ui-hl td { padding: 5px 7px; border-bottom: 1px solid #ddd; text-align: left; }
.ui-hl th { background: var(--ui-head); }
.hl-flat,
.ui-page table.ui-hl tbody tr.hl-flat td,
.ui-page table.ui-hl tbody tr.hl-flat:hover td { background: #eef3ff; }
.hl-fade,
.ui-page table.ui-hl tbody tr.hl-fade td,
.ui-page table.ui-hl tbody tr.hl-fade:hover td { background: #8fbbd8; }
.hl-ink,
.ui-page table.ui-hl tbody tr.hl-ink td,
.ui-page table.ui-hl tbody tr.hl-ink:hover td { background: #0767A9; color: #263238; }
.hl-solid,
.ui-page table.ui-hl tbody tr.hl-solid td,
.ui-page table.ui-hl tbody tr.hl-solid:hover td { background: #0767A9; color: #fff; }
.hl-navy,
.ui-page table.ui-hl tbody tr.hl-navy td,
.ui-page table.ui-hl tbody tr.hl-navy:hover td { background: #03406e; color: #fff; }
.ui-page table.ui-hl tbody tr.hl-solid .stuActive,
.ui-page table.ui-hl tbody tr.hl-solid .stuOverdue,
.ui-page table.ui-hl tbody tr.hl-solid .stuPending,
.ui-page table.ui-hl tbody tr.hl-solid .stuRejected,
.ui-page table.ui-hl tbody tr.hl-solid .stuEnded,
.ui-page table.ui-hl tbody tr.hl-solid .tx-import,
.ui-page table.ui-hl tbody tr.hl-solid .tx-replace,
.ui-page table.ui-hl tbody tr.hl-navy .stuActive,
.ui-page table.ui-hl tbody tr.hl-navy .stuOverdue,
.ui-page table.ui-hl tbody tr.hl-navy .stuPending,
.ui-page table.ui-hl tbody tr.hl-navy .stuRejected,
.ui-page table.ui-hl tbody tr.hl-navy .stuEnded,
.ui-page table.ui-hl tbody tr.hl-navy .tx-import,
.ui-page table.ui-hl tbody tr.hl-navy .tx-replace { color: #fff; }
.ui-page table.ui-hl.hv-flat tbody tr:hover td { background: #eef3ff; }
.ui-page table.ui-hl.hv-fade tbody tr:hover td { background: #8fbbd8; color: #263238; }
.ui-page table.ui-hl.hv-ink tbody tr:hover td { background: #0767A9; color: #263238; }
.ui-page table.ui-hl.hv-solid tbody tr:hover td { background: #0767A9; color: #fff; }
.ui-page table.ui-hl.hv-navy tbody tr:hover td { background: #03406e; color: #fff; }
.ui-page table.ui-hl.hv-solid tbody tr:hover .stuActive,
.ui-page table.ui-hl.hv-solid tbody tr:hover .stuOverdue,
.ui-page table.ui-hl.hv-solid tbody tr:hover .stuPending,
.ui-page table.ui-hl.hv-solid tbody tr:hover .stuRejected,
.ui-page table.ui-hl.hv-solid tbody tr:hover .stuEnded,
.ui-page table.ui-hl.hv-solid tbody tr:hover .tx-import,
.ui-page table.ui-hl.hv-solid tbody tr:hover .tx-replace,
.ui-page table.ui-hl.hv-navy tbody tr:hover .stuActive,
.ui-page table.ui-hl.hv-navy tbody tr:hover .stuOverdue,
.ui-page table.ui-hl.hv-navy tbody tr:hover .stuPending,
.ui-page table.ui-hl.hv-navy tbody tr:hover .stuRejected,
.ui-page table.ui-hl.hv-navy tbody tr:hover .stuEnded,
.ui-page table.ui-hl.hv-navy tbody tr:hover .tx-import,
.ui-page table.ui-hl.hv-navy tbody tr:hover .tx-replace { color: #fff; }
.ui-page table.rows-blue tbody tr:hover td { background: #d6e4f5; }
.ui-page table.rows-deep tbody tr:hover td { background: #b7d0ea; }
.ui-page table.rows-grey tbody tr:hover td { background: #e6ebf0; }
.pair-same .card,
.pair-same .ui-hl th { background: #F3F6FA; }
.pair-blue .card,
.pair-blue .ui-hl th { background: #eef3ff; }
.ui-pair { display: flex; gap: 12px; align-items: flex-start; }
.ui-pair > div { flex: 1; min-width: 0; }
.ui-pair .card { width: 210px; margin: 0; flex: 0 0 210px; }
.ui-pair .card h3 { margin: 0 0 8px; font-size: 15px; }
.ui-pair .card label { display: block; font-weight: 700; margin: 8px 0 4px; }
.ui-pair .card select { width: 100%; }
.ui-pair .ui-hl { width: auto; flex: 1; min-width: 0; }
.ui-page .ui-hl tbody tr:nth-child(odd) { background: #fff; }
.ui-page .ui-hl tbody tr:nth-child(even) { background: #f9f9f9; }
.ui-page .ui-hl tbody tr:hover td { background: #e6ebf0; }
.ui-page table.ui-hl.hv-opac tbody tr:hover { opacity: 0.45; }
.ui-page table.ui-hl.hv-opac tbody tr:hover td { background: #0767A9; color: #fff; }
.ui-page table.ui-hl.hv-ink tbody tr:hover td { background: #0767A9; color: #263238; }
.ui-page table.ui-hl.hv-solid tbody tr:hover td { background: #0767A9; color: #fff; }
.ui-page table.ui-hl.hv-flat tbody tr:hover td { background: #eef3ff; color: #263238; }
.ui-page table.ui-hl.hv-navy tbody tr:hover td { background: #03406e; color: #fff; }
.ui-page table.ui-hl.hv-opac tbody tr:hover .stuActive,
.ui-page table.ui-hl.hv-opac tbody tr:hover .stuOverdue,
.ui-page table.ui-hl.hv-opac tbody tr:hover .stuPending,
.ui-page table.ui-hl.hv-opac tbody tr:hover .stuRejected,
.ui-page table.ui-hl.hv-opac tbody tr:hover .stuEnded,
.ui-page table.ui-hl.hv-opac tbody tr:hover .tx-import,
.ui-page table.ui-hl.hv-opac tbody tr:hover .tx-replace,
.ui-page table.ui-hl.hv-solid tbody tr:hover .stuActive,
.ui-page table.ui-hl.hv-solid tbody tr:hover .stuOverdue,
.ui-page table.ui-hl.hv-solid tbody tr:hover .stuPending,
.ui-page table.ui-hl.hv-solid tbody tr:hover .stuRejected,
.ui-page table.ui-hl.hv-solid tbody tr:hover .stuEnded,
.ui-page table.ui-hl.hv-solid tbody tr:hover .tx-import,
.ui-page table.ui-hl.hv-solid tbody tr:hover .tx-replace,
.ui-page table.ui-hl.hv-navy tbody tr:hover .stuActive,
.ui-page table.ui-hl.hv-navy tbody tr:hover .stuOverdue,
.ui-page table.ui-hl.hv-navy tbody tr:hover .stuPending,
.ui-page table.ui-hl.hv-navy tbody tr:hover .stuRejected,
.ui-page table.ui-hl.hv-navy tbody tr:hover .stuEnded,
.ui-page table.ui-hl.hv-navy tbody tr:hover .tx-import,
.ui-page table.ui-hl.hv-navy tbody tr:hover .tx-replace { color: #fff; }
.ui-datepicker-current-day a {
	background-color: #0767A9 !important;
	color: #fff !important;
	background-image: none !important;
}

.ui-compare {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}
.ui-compare .card { margin: 0; }
.ui-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.ui-swatch { width: 128px; font-size: 12px; color: var(--ui-muted); }
.ui-swatch b {
	display: block;
	height: 36px;
	border-radius: 6px;
	border: 1px solid var(--ui-line);
	margin-bottom: 4px;
}
.sw-brand { background: #0767A9; }
.sw-navy { background: #03406e; }
.sw-link { background: #007BFF; }
.sw-w3 { background: #2196F3; }
.sw-import { background: #4287f5; }
.sw-fade { background: #f9f9f9; }
.sw-oldrow { background: #f7f8fa; }
.sw-hover { background: #0767A9; opacity: 0.45; }
.sw-white { background: #fff; }
.sw-head { background: #eef3ff; }
.sw-ok { background: #146c36; }
.sw-over { background: #fd7e14; }
.sw-pend { background: #800000; }
.sw-pend2 { background: #007bff; }
.sw-green { background: #28a745; }
.sw-rej { background: #6c757d; }
.sw-note { background: #ffff99; }
.sw-err { background: #b42318; }
.sw-gold { background: #7a5b10; }
.sw-coral { background: coral; }

.ui-split { display: flex; gap: 12px; align-items: stretch; }
.ui-split-side {
	width: 240px;
	flex: none;
	background: #fff;
	border: 1px solid var(--ui-line);
	border-radius: 8px;
	padding: 12px;
}
.ui-split-main {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--ui-line);
	border-radius: 8px;
	padding: 12px;
}
.ui-w3note { margin-top: 8px; }

.ui-empty {
	padding: 14px;
	text-align: center;
	color: var(--ui-muted);
	background: var(--ui-fade);
	border-radius: 8px;
}

@media (max-width: 800px) {
	.ui-fields,
	.ui-form-row { grid-template-columns: 1fr; }
	.ui-form-state { text-align: left; padding-top: 0; }
	.report-sidebar,
	.ui-side { width: 100%; }
	.ui-epass,
	.ui-split,
	.ui-choice-row,
	.ui-spec-row { display: block; }
	.ui-msg { width: 100%; }
}

/* Choice sheet (ui-compare.asp) */
.ui-jumps { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 18px; }
.ui-jumps a { font-weight: 600; }
.ui-choice { margin: 0 0 28px; }
.ui-choice-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	align-items: stretch;
}
.ui-using, .ui-other, .ui-keep, .ui-open {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 4px;
	margin-left: 6px;
	vertical-align: middle;
}
.ui-using { background: var(--ui-blue); color: #fff; }
.ui-other { background: #eef3ff; color: var(--ui-blue); }
.ui-open { background: #fff3d6; color: #6a4500; }
.ui-keep { background: #e7eef2; color: #263238; }
.font-segoe { font-family: "Segoe UI", system-ui, sans-serif; font-size: 15px; }
.font-site { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; }
.tx-black { color: #000; }
.tx-ink { color: #263238; }
.ui-choice-one {
	border: 1px solid var(--ui-line);
	border-radius: 8px;
	padding: 12px;
	background: #fff;
	max-width: 720px;
}
.ui-choice-one.wide { max-width: none; }
.ui-choice-col {
	border: 1px solid var(--ui-line);
	border-radius: 8px;
	padding: 12px;
	background: #fff;
}
.ui-choice-col h3 { margin: 0 0 2px; font-size: 15px; }
.ui-choice-col .ui-kicker { margin-bottom: 8px; }
.ui-choice-col .dark-button,
.ui-choice-col .lite-button,
.ui-choice-col .ui-old-block { margin-bottom: 8px; }
.ui-opt .dark-button,
.ui-opt a.dark-button {
	background: var(--opt);
	border-color: var(--opt);
	color: #fff;
}
.ui-opt .dark-button:hover,
.ui-opt a.dark-button:hover,
.ui-opt .dark-button.is-hover {
	background: #fff;
	color: var(--opt);
}
.ui-opt .lite-button,
.ui-opt a.lite-button {
	background: #fff;
	color: var(--opt);
	border-color: var(--opt);
}
.ui-opt .lite-button:hover,
.ui-opt .lite-button.is-hover {
	background: var(--opt);
	color: #fff;
}
.ui-sample-link { font-weight: 600; }
.ui-opt .ui-sample-link { color: var(--opt); font-weight: 600; }
.ui-chip {
	display: block;
	height: 28px;
	border-radius: 6px;
	background: var(--opt, var(--ui-blue));
	margin-bottom: 8px;
}
.opt-054 { --opt: #054BA8; }
.opt-076 { --opt: #0767A9; }
.opt-003 { --opt: #0039B1; }
.opt-007 { --opt: #007BFF; }
.opt-219 { --opt: #2196F3; }
.opt-428 { --opt: #4287F5; }

.opt-field {
	display: block;
	width: 100%;
	margin: 0 0 8px;
	box-sizing: border-box;
	font-family: var(--ui-font);
}
.opt-field-set {
	padding: 6px 10px;
	border: 1px solid #c5d0de;
	border-radius: 6px;
	font-size: 14px;
}
.opt-field-tight {
	padding: 5px 8px;
	border: 1px solid #c5d0de;
	border-radius: 6px;
	font-size: 14px;
}
.opt-field-report {
	padding: 2px 4px;
	height: 25px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 10px;
}
.opt-field-epass {
	padding: 7px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 1rem;
}

.opt-tabs { margin-top: 4px; }
.opt-tabs ul { list-style: none; display: flex; margin: 0; padding: 0; border-bottom: 2px solid var(--ui-blue); }
.opt-tabs li a {
	display: block;
	padding: 8px 12px;
	text-decoration: none;
	color: var(--ui-blue);
	font-weight: 700;
	background: #fff;
}
.opt-set li a { border-radius: 8px 8px 0 0; font-weight: 600; }
.opt-set li a.is-on { background: var(--ui-blue); color: #fff; }
.opt-set .opt-panel {
	border: 1px solid #d7e0ec;
	border-top: 0;
	border-radius: 0 0 12px 12px;
	background: #fff;
	padding: 10px;
	box-shadow: 0 1px 2px rgba(7, 103, 169, 0.04);
}
.opt-gray .opt-panel { background: #e7edf3; }
.opt-gray .opt-long tr,
.opt-gray .opt-long td { background: transparent; }
.opt-gray .opt-long tr:nth-child(even),
.opt-gray .opt-long tr:nth-child(even) td { background: rgba(255, 255, 255, 0.55); }
.opt-gray .opt-long th { background: #e4ecf5; }
.opt-dm li a { border: 1px solid transparent; border-bottom: 0; }
.opt-dm li a.is-on {
	background: #054BA8;
	color: #fff;
	border-color: #054BA8;
	border-bottom: 1px solid #f9f9f9;
}
.opt-dm .opt-panel {
	border: 1px solid #ccc;
	border-top: 0;
	background: #f9f9f9;
	padding: 10px;
}
.opt-pills { margin-top: 8px; }
.opt-pills span {
	display: inline-block;
	height: 50px;
	line-height: 50px;
	padding: 0 14px;
	margin-right: 3px;
	border-radius: 20px 20px 0 0;
	background: #e8eef5;
	color: #054BA8;
	font-weight: 600;
}
.opt-pills span.is-on { background: #054BA8; color: #fff; }

.opt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.opt-table th, .opt-table td { text-align: left; vertical-align: middle; }
.opt-tight th, .opt-tight td { padding: 2px 4px; border-bottom: 1px solid #ddd; }
.opt-tight th { background: rgba(5, 75, 168, 0.05); }
.opt-roomy th, .opt-roomy td { padding: 5px 7px; border-bottom: 1px solid #ddd; }
.opt-roomy th { background: #eef3ff; }
.opt-long th, .opt-long td { padding: 4px 6px; border-bottom: 1px solid #ddd; }
.opt-long th { background: #eef3ff; }
.opt-grid th, .opt-grid td { padding: 5px 7px; border: 1px solid #ccc; }
.opt-grid th { background: #eef3ff; }
.opt-epass th, .opt-epass td { padding: 10px; border-bottom: 1px solid #ddd; }
.opt-epass th { background: #f2f2f2; }
.opt-tight tr:nth-child(even),
.opt-roomy tr:nth-child(even),
.opt-long tr:nth-child(even),
.opt-grid tr:nth-child(even) { background: #f9f9f9; }
.opt-roomy tr.is-sel,
.opt-roomy tr.is-sel td { background: #eef3ff; }

.opt-pair { display: flex; gap: 10px; align-items: flex-start; }
.opt-pair img { width: 67px; height: 100px; object-fit: cover; background: #eee; }
.opt-pair p { margin: 0 0 4px; font-size: 13px; }
img.b-green { border: 2px solid #28a745; }
img.b-link { border: 2px solid #007bff; }
img.b-gray { border: 2px solid #6c757d; }
img.b-over { border: 2px solid #fd7e14; }

.opt-frame {
	display: flex;
	min-height: 88px;
	border: 1px solid var(--ui-line);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 8px;
}
.opt-side { background: rgba(5, 75, 168, 0.06); padding: 8px; font-size: 12px; }
.opt-main { flex: 1; padding: 8px; font-size: 12px; }
.side-220 { width: 220px; }
.side-280 { width: 280px; }
.side-300 { width: 300px; }
.tx-green { color: #28a745; }
.tx-link { color: #007bff; }
.ui-choice-col > label { display: block; font-weight: 700; margin: 6px 0 4px; }
.ui-page .opt-field-report:focus {
	outline: none;
	border-color: #054BA8;
	box-shadow: 0 0 3px 1px rgba(5, 75, 168, 0.05);
}
.ui-page .opt-field-epass:focus {
	box-shadow: none;
	border-color: #ccc;
	outline: 2px solid #054BA8;
}

@media print {
	.ui-tabs > ul,
	.ui-lead,
	.ui-kicker,
	.ui-noprint { display: none !important; }
	.ui-panel { display: none !important; border: 0; padding: 0; }
	.ui-panel.is-on { display: block !important; }
	.report-sidebar,
	.ui-side { display: none !important; }
}
@media (max-width: 800px) {
	.ui-choice-row,
	.ui-pair { display: block; }
	.ui-pair .ui-hl { width: 100%; }
}

/* Status samples. Compare page only. Colors match Import attendance and the kit. */
.ui-page .ui-stat-table { width: 100%; border-collapse: collapse; background: #fff; }
.ui-page .ui-stat-table th,
.ui-page .ui-stat-table td {
	text-align: left;
	padding: 5px 7px;
	border: 0;
	border-bottom: 1px solid #ddd;
	font-size: 14px;
	font-weight: 400;
	vertical-align: middle;
	background: #fff;
	color: var(--ui-text);
}
.ui-page .ui-stat-table th { font-weight: 700; background: var(--ui-head); }
.ui-page .ui-stat-table tbody tr:nth-child(even) td { background: #f9f9f9; }
.ui-page .ui-stat-table tr.cv-present td,
.ui-page .ui-stat-table tr.cv-present select { background: #a3e3a7; }
.ui-page .ui-stat-table tr.cv-late td,
.ui-page .ui-stat-table tr.cv-late select { background: #fcfbc5; }
.ui-page .ui-stat-table tr.cv-absent td,
.ui-page .ui-stat-table tr.cv-absent select { background: #fcc5c5; }
.ui-page .ui-stat-table tr.wash-present td { background: var(--ui-ok-bg); }
.ui-page .ui-stat-table tr.wash-late td { background: var(--ui-warn-bg); }
.ui-page .ui-stat-table tr.wash-absent td { background: var(--ui-err-bg); }
.ui-page .ui-stat-table tr.edge-present td:last-child { box-shadow: inset 4px 0 0 var(--ui-ok); }
.ui-page .ui-stat-table tr.edge-late td:last-child { box-shadow: inset 4px 0 0 var(--ui-over); }
.ui-page .ui-stat-table tr.edge-absent td:last-child { box-shadow: inset 4px 0 0 var(--ui-err); }
.ui-page select.ui-stat-sel {
	width: auto;
	max-width: 140px;
	margin: 0;
	padding: 2px 6px;
	height: auto;
	font-family: var(--ui-font);
	font-size: 13px;
	line-height: 1.2;
	border: 1px solid #c5d0de;
	border-radius: var(--ui-radius);
	cursor: pointer;
}
.ui-page select.ui-stat-field { width: auto; max-width: 160px; }
.ui-page select.kit-present { background: var(--ui-ok-bg); color: var(--ui-ok); }
.ui-page select.kit-late { background: var(--ui-warn-bg); color: var(--ui-over); }
.ui-page select.kit-absent { background: var(--ui-err-bg); color: var(--ui-err); }
.ui-page select.ui-stat-field.kit-present,
.ui-page select.ui-stat-field.kit-late,
.ui-page select.ui-stat-field.kit-absent { background: #fff; }
.ui-page .ui-stat-val { margin-right: 8px; }
.ui-page .ui-stat-val.kit-present { color: var(--ui-ok); }
.ui-page .ui-stat-val.kit-late { color: var(--ui-over); }
.ui-page .ui-stat-val.kit-absent { color: var(--ui-err); }
.ui-page .ui-stat-hit { position: relative; display: inline-block; vertical-align: middle; }
.ui-page .ui-stat-hit select {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
}
.ui-page .ui-stat-caret {
	position: relative;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 4px;
	line-height: 16px;
	text-align: center;
	vertical-align: middle;
	color: var(--ui-blue);
	cursor: pointer;
}
.ui-page .ui-stat-caret .fa-caret-down { font-size: 14px; line-height: 16px; }
.ui-page .ui-stat-caret select {
	position: absolute;
	left: 0;
	top: 0;
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
}
.ui-page select.ui-stat-sel.tx.kit-present,
.ui-page select.ui-stat-sel.tx.kit-late,
.ui-page select.ui-stat-sel.tx.kit-absent { background: #fff; }
.ui-page select.ui-stat-sel.tx.kit-present { color: var(--ui-ok); }
.ui-page select.ui-stat-sel.tx.kit-late { color: var(--ui-over); }
.ui-page select.ui-stat-sel.tx.kit-absent { color: var(--ui-err); }
.ui-page select.fld-line {
	-webkit-appearance: none;
	appearance: none;
	border-style: solid;
	border-width: 2px;
	padding-right: 22px;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%235b6b7c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
}
.ui-page select.fld-line.kit-present { background-color: #fff; color: var(--ui-ok); border-color: var(--ui-ok); }
.ui-page select.fld-line.kit-late { background-color: #fff; color: var(--ui-over); border-color: var(--ui-over); }
.ui-page select.fld-line.kit-absent { background-color: #fff; color: var(--ui-err); border-color: var(--ui-err); }
.ui-page select.fld-fill.kit-present { background: var(--ui-ok-bg); color: var(--ui-ok); border-color: #c5d0de; }
.ui-page select.fld-fill.kit-late { background: var(--ui-warn-bg); color: var(--ui-over); border-color: #c5d0de; }
.ui-page select.fld-fill.kit-absent { background: var(--ui-err-bg); color: var(--ui-err); border-color: #c5d0de; }
.ui-page select.fld-fill.cv-present { background: #a3e3a7; color: var(--ui-text); border-color: #c5d0de; }
.ui-page select.fld-fill.cv-late { background: #fcfbc5; color: var(--ui-text); border-color: #c5d0de; }
.ui-page select.fld-fill.cv-absent { background: #fcc5c5; color: var(--ui-text); border-color: #c5d0de; }
.ui-page select.fld-ink.kit-present { background: var(--ui-ok-bg); color: var(--ui-text); border-color: #c5d0de; }
.ui-page select.fld-ink.kit-late { background: var(--ui-warn-bg); color: var(--ui-text); border-color: #c5d0de; }
.ui-page select.fld-ink.kit-absent { background: var(--ui-err-bg); color: var(--ui-text); border-color: #c5d0de; }
.ui-page select.fld-bar.kit-present { background: #fff; color: var(--ui-text); border-color: #c5d0de; border-left: 4px solid var(--ui-ok); }
.ui-page select.fld-bar.kit-late { background: #fff; color: var(--ui-text); border-color: #c5d0de; border-left: 4px solid var(--ui-over); }
.ui-page select.fld-bar.kit-absent { background: #fff; color: var(--ui-text); border-color: #c5d0de; border-left: 4px solid var(--ui-err); }
.ui-page select.fld-bar.tx.kit-present { color: var(--ui-ok); }
.ui-page select.fld-bar.tx.kit-late { color: var(--ui-over); }
.ui-page select.fld-bar.tx.kit-absent { color: var(--ui-err); }
/* Short form of sample 10. Same 14px type. Padding is what stays small. */
.ui-page select.fld-slim {
	-webkit-appearance: none;
	appearance: none;
	width: auto;
	max-width: 148px;
	margin: 0;
	padding: 0 16px 0 6px;
	height: 22px;
	font-family: var(--ui-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	vertical-align: middle;
	border: 1px solid #c5d0de;
	border-radius: var(--ui-radius);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%235b6b7c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 5px center;
	cursor: pointer;
	box-shadow: none;
}
.ui-page select.fld-slim:focus { outline: none; box-shadow: none; }
.ui-page select.fld-slim.kit-present { color: var(--ui-ok); border-left: 4px solid var(--ui-ok); }
.ui-page select.fld-slim.kit-late { color: var(--ui-over); border-left: 4px solid var(--ui-over); }
.ui-page select.fld-slim.kit-absent { color: var(--ui-err); border-left: 4px solid var(--ui-err); }
.ui-page select.fld-slim.tx-rest.kit-present { color: var(--ui-text); }
.ui-page select.fld-slim.tx-rest option[data-tone="kit-present"] { color: var(--ui-text); }
.ui-page select.fld-slim.tx-rest option[data-tone="kit-late"] { color: var(--ui-over); }
.ui-page select.fld-slim.tx-rest option[data-tone="kit-absent"] { color: var(--ui-err); }
.ui-page select.fld-slim.hv-quiet {
	background-color: transparent;
	background-image: none;
	border-color: transparent;
	border-left-color: transparent;
	border-left-width: 4px;
}
.ui-page select.fld-slim.hv-quiet:hover,
.ui-page select.fld-slim.hv-quiet:focus {
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%235b6b7c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 5px center;
	border-color: #c5d0de;
}
.ui-page select.fld-slim.hv-quiet.kit-present:hover,
.ui-page select.fld-slim.hv-quiet.kit-present:focus { color: var(--ui-ok); border-left-color: var(--ui-ok); }
.ui-page select.fld-slim.hv-quiet.kit-late:hover,
.ui-page select.fld-slim.hv-quiet.kit-late:focus { color: var(--ui-over); border-left-color: var(--ui-over); }
.ui-page select.fld-slim.hv-quiet.kit-absent:hover,
.ui-page select.fld-slim.hv-quiet.kit-absent:focus { color: var(--ui-err); border-left-color: var(--ui-err); }
.ui-page select.fld-slim.arr-ink.kit-present {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%23146c36' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ui-page select.fld-slim.arr-ink.kit-late {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%23fd7e14' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ui-page select.fld-slim.arr-ink.kit-absent {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%23b42318' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ui-page select.fld-slim.arr-ink.tx-rest.kit-present {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%23263238' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ui-page select.fld-slim.hv-box { background-color: transparent; border-color: transparent; }
.ui-page select.fld-slim.hv-box.kit-present,
.ui-page select.fld-slim.hv-box.kit-late,
.ui-page select.fld-slim.hv-box.kit-absent { border-left-color: transparent; }
.ui-page select.fld-slim.hv-box:hover,
.ui-page select.fld-slim.hv-box:focus { background-color: #fff; border-color: #c5d0de; }
.ui-page select.fld-slim.hv-box.kit-present:hover,
.ui-page select.fld-slim.hv-box.kit-present:focus { border-left-color: var(--ui-ok); }
.ui-page select.fld-slim.hv-box.kit-late:hover,
.ui-page select.fld-slim.hv-box.kit-late:focus { border-left-color: var(--ui-over); }
.ui-page select.fld-slim.hv-box.kit-absent:hover,
.ui-page select.fld-slim.hv-box.kit-absent:focus { border-left-color: var(--ui-err); }
.ui-page select.fld-slim.hv-line { border-color: transparent; }
.ui-page select.fld-slim.hv-line.kit-present { border-left-color: var(--ui-ok); }
.ui-page select.fld-slim.hv-line.kit-late { border-left-color: var(--ui-over); }
.ui-page select.fld-slim.hv-line.kit-absent { border-left-color: var(--ui-err); }
.ui-page select.fld-slim.hv-line:hover,
.ui-page select.fld-slim.hv-line:focus { border-color: #c5d0de; }
.ui-page select.fld-slim.hv-line.kit-present:hover,
.ui-page select.fld-slim.hv-line.kit-present:focus { border-left-color: var(--ui-ok); }
.ui-page select.fld-slim.hv-line.kit-late:hover,
.ui-page select.fld-slim.hv-line.kit-late:focus { border-left-color: var(--ui-over); }
.ui-page select.fld-slim.hv-line.kit-absent:hover,
.ui-page select.fld-slim.hv-line.kit-absent:focus { border-left-color: var(--ui-err); }
.ui-page select.fld-slim.hv-wash.kit-present:hover,
.ui-page select.fld-slim.hv-wash.kit-present:focus { background-color: var(--ui-ok-bg); }
.ui-page select.fld-slim.hv-wash.kit-late:hover,
.ui-page select.fld-slim.hv-wash.kit-late:focus { background-color: var(--ui-warn-bg); }
.ui-page select.fld-slim.hv-wash.kit-absent:hover,
.ui-page select.fld-slim.hv-wash.kit-absent:focus { background-color: var(--ui-err-bg); }
.ui-page select.fld-slim.hv-pop {
	background-color: transparent;
	background-image: none;
	border-color: transparent;
	border-left-color: transparent;
	border-left-width: 4px;
}
.ui-page select.fld-slim.hv-pop.kit-present,
.ui-page select.fld-slim.hv-pop.kit-late,
.ui-page select.fld-slim.hv-pop.kit-absent { border-left-color: transparent; }
.ui-page select.fld-slim.hv-pop:hover,
.ui-page select.fld-slim.hv-pop:focus {
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: right 5px center;
	border-color: #c5d0de;
}
.ui-page select.fld-slim.hv-pop.kit-present:hover,
.ui-page select.fld-slim.hv-pop.kit-present:focus {
	color: var(--ui-ok);
	border-left-color: var(--ui-ok);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%23146c36' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ui-page select.fld-slim.hv-pop.tx-rest.kit-present:hover,
.ui-page select.fld-slim.hv-pop.tx-rest.kit-present:focus {
	color: var(--ui-text);
	border-left-color: var(--ui-ok);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%23263238' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ui-page select.fld-slim.hv-pop.kit-late:hover,
.ui-page select.fld-slim.hv-pop.kit-late:focus {
	color: var(--ui-over);
	border-left-color: var(--ui-over);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%23fd7e14' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ui-page select.fld-slim.hv-pop.kit-absent:hover,
.ui-page select.fld-slim.hv-pop.kit-absent:focus {
	color: var(--ui-err);
	border-left-color: var(--ui-err);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%23b42318' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ui-page select.fld-slim.hv-tone { border-color: transparent; }
.ui-page select.fld-slim.hv-tone.kit-present { border-left-color: var(--ui-ok); }
.ui-page select.fld-slim.hv-tone.kit-late { border-left-color: var(--ui-over); }
.ui-page select.fld-slim.hv-tone.kit-absent { border-left-color: var(--ui-err); }
.ui-page select.fld-slim.hv-tone.kit-present:hover,
.ui-page select.fld-slim.hv-tone.kit-present:focus { border-color: var(--ui-ok); }
.ui-page select.fld-slim.hv-tone.kit-late:hover,
.ui-page select.fld-slim.hv-tone.kit-late:focus { border-color: var(--ui-over); }
.ui-page select.fld-slim.hv-tone.kit-absent:hover,
.ui-page select.fld-slim.hv-tone.kit-absent:focus { border-color: var(--ui-err); }
.ui-page select.fld-slim.hv-tonebox {
	background-color: transparent;
	border-color: transparent;
}
.ui-page select.fld-slim.hv-tonebox.kit-present,
.ui-page select.fld-slim.hv-tonebox.kit-late,
.ui-page select.fld-slim.hv-tonebox.kit-absent { border-left-color: transparent; }
.ui-page select.fld-slim.hv-tonebox.kit-present:hover,
.ui-page select.fld-slim.hv-tonebox.kit-present:focus { background-color: #fff; border-color: var(--ui-ok); }
.ui-page select.fld-slim.hv-tonebox.kit-late:hover,
.ui-page select.fld-slim.hv-tonebox.kit-late:focus { background-color: #fff; border-color: var(--ui-over); }
.ui-page select.fld-slim.hv-tonebox.kit-absent:hover,
.ui-page select.fld-slim.hv-tonebox.kit-absent:focus { background-color: #fff; border-color: var(--ui-err); }
.ui-page select.fld-solid.kit-present { background: var(--ui-ok); color: #fff; border-color: var(--ui-ok); }
.ui-page select.fld-solid.kit-late { background: var(--ui-over); color: #fff; border-color: var(--ui-over); }
.ui-page select.fld-solid.kit-absent { background: var(--ui-err); color: #fff; border-color: var(--ui-err); }
.ui-page select.fld-solid option { background: #fff; color: var(--ui-text); }
.ui-page select.fld-match.kit-present { background: var(--ui-ok-bg); color: var(--ui-ok); border-color: var(--ui-ok); }
.ui-page select.fld-match.kit-late { background: var(--ui-warn-bg); color: var(--ui-over); border-color: var(--ui-over); }
.ui-page select.fld-match.kit-absent { background: var(--ui-err-bg); color: var(--ui-err); border-color: var(--ui-err); }

/* Dev site kit. Wins over header.asp and over a page style block
   that repeats .dark-button or .report-table. */
body.ui-kit {
	font-family: var(--ui-font);
	color: var(--ui-text);
}
body.ui-kit .dark-button,
body.ui-kit a.dark-button,
body.ui-kit .lite-button,
body.ui-kit a.lite-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 8px 16px;
	border-radius: var(--ui-radius);
	border: 1px solid var(--ui-blue);
	cursor: pointer;
	font-family: var(--ui-font);
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	box-sizing: border-box;
	vertical-align: middle;
}
body.ui-kit .dark-button.ui-btn-sm,
body.ui-kit a.dark-button.ui-btn-sm,
body.ui-kit .lite-button.ui-btn-sm,
body.ui-kit a.lite-button.ui-btn-sm {
	padding: 4px 10px;
	font-size: 13px;
}
body.ui-kit .dark-button,
body.ui-kit a.dark-button { background: var(--ui-blue); color: #fff; }
body.ui-kit .lite-button,
body.ui-kit a.lite-button { background: #fff; color: var(--ui-blue); }
body.ui-kit .dark-button:hover,
body.ui-kit a.dark-button:hover { background: var(--ui-navy); color: #fff; border-color: var(--ui-navy); }
body.ui-kit .lite-button:hover,
body.ui-kit a.lite-button:hover { background: var(--ui-wash); color: var(--ui-blue); border-color: var(--ui-blue); }
body.ui-kit .dark-button:disabled,
body.ui-kit .lite-button:disabled { opacity: 0.45; cursor: default; }
body.ui-kit .lite-button.delete-listitem-button { color: var(--ui-err) !important; border-color: var(--ui-err) !important; background: #fff !important; }
body.ui-kit .lite-button.delete-listitem-button:hover { background: var(--ui-err) !important; color: #fff !important; border-color: var(--ui-err) !important; }
body.ui-kit .card,
body.ui-kit .stat { background: var(--ui-head); }
body.ui-kit .report-container { font-family: var(--ui-font); color: var(--ui-text); }
body.ui-kit table.report-table {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--ui-line);
	border-radius: 8px;
}
body.ui-kit table.report-table.pdTable {
	border-collapse: separate;
	border-spacing: 0;
}
body.ui-kit table.report-table > :first-child > tr:first-child > :first-child { border-top-left-radius: 7px; }
body.ui-kit table.report-table > :first-child > tr:first-child > :last-child { border-top-right-radius: 7px; }
body.ui-kit table.report-table > :last-child > tr:last-child > :first-child { border-bottom-left-radius: 7px; }
body.ui-kit table.report-table > :last-child > tr:last-child > :last-child { border-bottom-right-radius: 7px; }
body.ui-kit table.report-table > :last-child > tr:last-child > th,
body.ui-kit table.report-table > :last-child > tr:last-child > td { border-bottom: 0; }
body.ui-kit .report-table th,
body.ui-kit .report-table td,
body.ui-kit .report-container table.report-table th,
body.ui-kit .report-container table.report-table td {
	border-bottom: 1px solid #ddd;
	text-align: left;
	padding: 5px 7px;
	vertical-align: middle;
	font-size: 14px;
}
body.ui-kit .report-table th,
body.ui-kit .report-container table.report-table th {
	background: var(--ui-head);
	font-weight: 700;
}
body.ui-kit .report-table tbody tr:nth-child(odd) { background: #fff; }
body.ui-kit .report-table tbody tr:nth-child(even) { background: #f9f9f9; }
body.ui-kit .report-table:not(.is-grid) tbody tr:hover { opacity: 0.45; }
body.ui-kit .report-table:not(.is-grid) tbody tr:hover td { background: var(--ui-blue); color: #fff; }
body.ui-kit .odd { background-color: inherit; }
body.ui-kit input:focus,
body.ui-kit select:not(.ui-status):focus,
body.ui-kit textarea:focus {
	outline: none;
	border-color: var(--ui-blue);
	box-shadow: 0 0 0 3px rgba(7, 103, 169, 0.18);
}
/* Status list, option 6. Arrow stays and matches the word.
   The left bar stays on. The other borders show while the pointer is on it.
   Present uses the normal text color. */
select.ui-status {
	-webkit-appearance: none;
	appearance: none;
	width: auto;
	max-width: 200px;
	margin: 0;
	box-sizing: border-box;
	padding: 0 20px 0 6px;
	height: 22px;
	font-family: var(--ui-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	vertical-align: middle;
	color: var(--ui-text);
	border: 1px solid transparent;
	border-left-width: 4px;
	border-left-color: var(--ui-line);
	border-radius: var(--ui-radius);
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%235b6b7c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 4px center;
	cursor: pointer;
	box-shadow: none;
}
select.ui-status:hover,
select.ui-status:focus {
	outline: none;
	background-color: #fff;
	border-color: #c5d0de;
	box-shadow: none;
}
select.ui-status.is-present {
	color: var(--ui-text);
	border-left-color: var(--ui-ok);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%23263238' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select.ui-status.is-late {
	color: var(--ui-over);
	border-left-color: var(--ui-over);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%23fd7e14' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select.ui-status.is-absent {
	color: var(--ui-err);
	border-left-color: var(--ui-err);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%23b42318' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
select.ui-status.is-present:hover,
select.ui-status.is-present:focus { color: var(--ui-text); border-left-color: var(--ui-ok); }
select.ui-status.is-late:hover,
select.ui-status.is-late:focus { color: var(--ui-over); border-left-color: var(--ui-over); }
select.ui-status.is-absent:hover,
select.ui-status.is-absent:focus { color: var(--ui-err); border-left-color: var(--ui-err); }
/* Report fields are just as specific, and the header focus rule uses !important.
   These put option 6 back on a status list that sits in a report. */
.report-content select.ui-status {
	width: auto;
	max-width: 200px;
	margin: 0;
	box-sizing: border-box;
	padding: 0 20px 0 6px;
	height: 22px;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	vertical-align: middle;
	border: 1px solid transparent;
	border-left-width: 4px;
	border-left-color: var(--ui-line);
	border-radius: var(--ui-radius);
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%235b6b7c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 4px center;
	box-shadow: none;
}
select.ui-status option {
	color: #263238;
	background-color: #fff;
}
select.ui-status option[data-tone="is-present"] { color: var(--ui-ok); }
.dropdown select.ui-status {
	width: auto !important;
	max-width: 200px;
	background-image: none;
	text-indent: 0;
	position: static;
}
select.ui-status option[data-tone="is-late"] { color: #fd7e14; }
select.ui-status option[data-tone="is-absent"] { color: #b42318; }
.report-content select.ui-status.is-present {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%23263238' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.report-content select.ui-status.is-late {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%23fd7e14' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.report-content select.ui-status.is-absent {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%23b42318' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.report-content select.ui-status:hover,
.report-content select.ui-status:focus {
	background-color: #fff;
	border-color: #c5d0de !important;
	box-shadow: none !important;
	outline: none;
}
.report-content select.ui-status.is-present:hover,
.report-content select.ui-status.is-present:focus { color: var(--ui-text); border-left-color: var(--ui-ok) !important; }
.report-content select.ui-status.is-late:hover,
.report-content select.ui-status.is-late:focus { color: var(--ui-over); border-left-color: var(--ui-over) !important; }
.report-content select.ui-status.is-absent:hover,
.report-content select.ui-status.is-absent:focus { color: var(--ui-err); border-left-color: var(--ui-err) !important; }
/* One face for every status list. The real select stays in the page for the save. */
.ui-status-wrap { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; }
.ui-status-wrap > select.ui-status {
	position: absolute !important;
	left: 0;
	top: 0;
	width: 1px !important;
	height: 1px !important;
	max-width: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}
.ui-status-face {
	display: inline-block;
	box-sizing: border-box;
	width: auto;
	margin: 0;
	padding: 0 20px 0 6px;
	height: 22px;
	font-family: var(--ui-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	vertical-align: middle;
	color: var(--ui-text);
	border: 1px solid transparent;
	border-left-width: 4px;
	border-left-color: var(--ui-line);
	border-radius: var(--ui-radius);
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%235b6b7c' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 4px center;
	cursor: pointer;
	box-shadow: none;
	white-space: nowrap;
}
.ui-status-face.is-present {
	color: var(--ui-text);
	border-left-color: var(--ui-ok);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%23263238' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ui-status-face.is-late {
	color: var(--ui-over);
	border-left-color: var(--ui-over);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%23fd7e14' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ui-status-face.is-absent {
	color: var(--ui-err);
	border-left-color: var(--ui-err);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.2 L5 6.6 L8 3.2' fill='none' stroke='%23b42318' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ui-status-face:hover,
.ui-status-face:focus,
.ui-status-wrap.is-open .ui-status-face {
	outline: none;
	background-color: #fff;
	border-color: #c5d0de;
	border-left-color: currentColor;
	box-shadow: none;
}
.ui-status-face.is-present:hover,
.ui-status-face.is-present:focus,
.ui-status-wrap.is-open .ui-status-face.is-present { color: var(--ui-text); border-left-color: var(--ui-ok); }
.ui-status-face.is-late:hover,
.ui-status-face.is-late:focus,
.ui-status-wrap.is-open .ui-status-face.is-late { color: var(--ui-over); border-left-color: var(--ui-over); }
.ui-status-face.is-absent:hover,
.ui-status-face.is-absent:focus,
.ui-status-wrap.is-open .ui-status-face.is-absent { color: var(--ui-err); border-left-color: var(--ui-err); }
body.ui-kit .report-table tbody tr:hover .ui-status-face.is-present { color: var(--ui-text); }
body.ui-kit .report-table tbody tr:hover .ui-status-face.is-late { color: var(--ui-over); }
body.ui-kit .report-table tbody tr:hover .ui-status-face.is-absent { color: var(--ui-err); }
.ui-status-pop {
	display: none;
	position: fixed;
	z-index: 2000;
	margin: 0;
	padding: 4px 0;
	background: #fff;
	border: 1px solid #c5d0de;
	border-radius: var(--ui-radius);
	box-shadow: 0 8px 20px rgba(16, 42, 67, 0.12);
}
.ui-status-pop.is-open { display: block; }
.ui-status-opt {
	display: block;
	margin: 0;
	padding: 2px 12px 2px 6px;
	border-left: 4px solid transparent;
	background: #fff;
	color: var(--ui-text);
	font-family: var(--ui-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
}
.ui-status-opt.is-present,
.ui-status-opt.is-present:hover,
.ui-status-opt.is-present.is-on,
.ui-status-opt.is-present.is-on:hover { color: var(--ui-ok); border-left-color: var(--ui-ok); }
.ui-status-opt.is-late,
.ui-status-opt.is-late:hover,
.ui-status-opt.is-late.is-on { color: var(--ui-over); border-left-color: var(--ui-over); }
.ui-status-opt.is-absent,
.ui-status-opt.is-absent:hover,
.ui-status-opt.is-absent.is-on { color: var(--ui-err); border-left-color: var(--ui-err); }
.ui-status-opt:hover,
.ui-status-opt.is-on { background: #fff; border-left-color: currentColor; }
.ui-status-opt.is-present:hover,
.ui-status-opt.is-present.is-on,
.ui-status-opt.is-present.is-on:hover { color: var(--ui-ok); border-left-color: var(--ui-ok); }
.ui-status-opt.is-late:hover,
.ui-status-opt.is-late.is-on,
.ui-status-opt.is-late.is-on:hover { color: var(--ui-over); border-left-color: var(--ui-over); }
.ui-status-opt.is-absent:hover,
.ui-status-opt.is-absent.is-on,
.ui-status-opt.is-absent.is-on:hover { color: var(--ui-err); border-left-color: var(--ui-err); }
body.ui-kit input[type="checkbox"],
body.ui-kit input[type="radio"] { accent-color: var(--ui-blue); }
body.ui-kit .destinationButton {
	background: #fff;
	border: 1px solid var(--ui-blue);
	color: var(--ui-blue);
	border-radius: var(--ui-radius);
}
body.ui-kit .destinationButton:hover { background: var(--ui-wash); color: var(--ui-blue); }
body.ui-kit .destinationButton.selected { background: var(--ui-blue); color: #fff; }
body.ui-kit .destinationButton.selected:hover { background: var(--ui-navy); color: #fff; }
body.ui-kit .report-table tbody tr:hover .tx-ok,
body.ui-kit .report-table tbody tr:hover .tx-err,
body.ui-kit .report-table tbody tr:hover .tx-import,
body.ui-kit .report-table tbody tr:hover .tx-replace { color: #fff; }

/* Plain button matches lite-button. Keep lite-button on markup that already has it.
   The skipped classes are icon, tab, dialog, W3, and tile controls. */
body.ui-kit button:not(.dark-button, .lite-button, .ui-icon-btn, .jamf-btn, .or-tab, .ui-button, .w3-button, .w3-btn, .menuIcon, .destinationButton, .ui-search-clear, .ui-modal-x, .ui-ico) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 8px 16px;
	border-radius: var(--ui-radius);
	border: 1px solid var(--ui-blue);
	cursor: pointer;
	font-family: var(--ui-font);
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	box-sizing: border-box;
	vertical-align: middle;
	background: #fff;
	color: var(--ui-blue);
}
body.ui-kit button:not(.dark-button, .lite-button, .ui-icon-btn, .jamf-btn, .or-tab, .ui-button, .w3-button, .w3-btn, .menuIcon, .destinationButton, .ui-search-clear, .ui-modal-x, .ui-ico):hover {
	background: var(--ui-wash);
	color: var(--ui-blue);
	border-color: var(--ui-blue);
}
body.ui-kit button:not(.dark-button, .lite-button, .ui-icon-btn, .jamf-btn, .or-tab, .ui-button, .w3-button, .w3-btn, .menuIcon, .destinationButton, .ui-search-clear, .ui-modal-x, .ui-ico):disabled {
	opacity: 0.45;
	cursor: default;
}
body.ui-kit button:not(.dark-button, .lite-button, .ui-icon-btn, .jamf-btn, .or-tab, .ui-button, .w3-button, .w3-btn, .menuIcon, .destinationButton, .ui-search-clear, .ui-modal-x, .ui-ico):focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ui-blue);
}
body.ui-kit .ui-segment button {
	margin: 0;
	padding: 8px 12px;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: var(--ui-blue);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
}
body.ui-kit .ui-segment button.is-on { background: var(--ui-blue); color: #fff; }
body.ui-kit .ui-segment button:hover,
body.ui-kit .ui-segment button.is-hover { background: var(--ui-wash); color: var(--ui-blue); }
body.ui-kit .ui-segment button.is-on:hover,
body.ui-kit .ui-segment button.is-on.is-hover,
body.ui-kit .ui-segment button.is-on.is-hover:hover { background: var(--ui-navy); color: #fff; }
body.ui-kit .ui-segment button.is-rest-pale { background: #eef3ff; }
body.ui-kit .ui-segment button.is-rest-pale:hover { background: var(--ui-blue); color: #fff; }
body.ui-kit .ui-segment button.is-on.is-pale,
body.ui-kit .ui-segment button.is-on.is-pale:hover { background: #eef3ff; color: var(--ui-blue); }

body.ui-kit a { color: var(--ui-blue); }
body.ui-kit td a,
body.ui-kit a.ui-lnk,
body.ui-kit td a:visited,
body.ui-kit a.ui-lnk:visited {
	color: var(--ui-text);
	text-decoration: none;
}
body.ui-kit td a:hover,
body.ui-kit a.ui-lnk:hover {
	color: var(--ui-blue);
	text-decoration: underline;
}
body.ui-kit i.fa,
body.ui-kit i.fas,
body.ui-kit i.far,
body.ui-kit i.fal,
body.ui-kit i.fad,
body.ui-kit i.fab,
body.ui-kit .svg-inline--fa { color: var(--ui-blue); }
body.ui-kit .svg-inline--fa path { fill: currentColor; }
body.ui-kit button i,
body.ui-kit button .svg-inline--fa,
body.ui-kit .dark-button i,
body.ui-kit .dark-button .svg-inline--fa,
body.ui-kit a.dark-button i,
body.ui-kit a.dark-button .svg-inline--fa,
body.ui-kit .lite-button i,
body.ui-kit .lite-button .svg-inline--fa,
body.ui-kit a.lite-button i,
body.ui-kit a.lite-button .svg-inline--fa,
body.ui-kit .ui-icon-btn i,
body.ui-kit .ui-icon-btn .svg-inline--fa,
body.ui-kit .menu-item i,
body.ui-kit .menu-item .svg-inline--fa,
body.ui-kit .destinationButton i,
body.ui-kit .destinationButton .svg-inline--fa,
body.ui-kit .ui-tabs a i,
body.ui-kit .ui-tabs a .svg-inline--fa,
body.ui-kit .w3-card h3 i,
body.ui-kit .w3-card h3 .svg-inline--fa,
body.ui-kit .report-table tr:hover i,
body.ui-kit .report-table tr:hover .svg-inline--fa,
body.ui-kit .ui-modal-bar i,
body.ui-kit .ui-modal-bar .svg-inline--fa,
body.ui-kit .ui-dialog i,
body.ui-kit .ui-dialog .svg-inline--fa { color: inherit; }

/* Bare icon buttons. Duotone (fad). A brand icon stays fab.
   Hover is navy and a medium grow.
   Size is px on the control. Do not also add fa-2x or fa-3x. */
body.ui-kit a.ui-ico,
body.ui-kit button.ui-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ui-blue);
	line-height: 1;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	box-sizing: border-box;
}
body.ui-kit .ui-ico i,
body.ui-kit .ui-ico .svg-inline--fa {
	display: inline-block;
	color: inherit;
	transform-origin: center center;
	transition: transform .12s ease, color .12s ease;
}
body.ui-kit .ui-ico-sm { width: 24px; height: 24px; font-size: 14px; }
body.ui-kit .ui-ico-md { width: 32px; height: 32px; font-size: 22px; }
body.ui-kit a.ui-ico-lg,
body.ui-kit button.ui-ico-lg,
body.ui-kit a.ui-ico-dash {
	display: inline-grid;
	justify-items: center;
	width: auto;
	height: auto;
	padding: 12px 16px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.15;
	text-align: center;
	gap: 4px;
}
body.ui-kit .ui-ico-lg i,
body.ui-kit .ui-ico-lg .svg-inline--fa { font-size: 36px; }
body.ui-kit a.ui-ico-dash { padding: 16px 18px; }
body.ui-kit .ui-ico-dash i,
body.ui-kit .ui-ico-dash .svg-inline--fa { font-size: 54px; }
body.ui-kit .ui-ico.is-off,
body.ui-kit .ui-ico.is-off i,
body.ui-kit .ui-ico.is-off .svg-inline--fa { color: #888; }
/* Clicked, visited, and focused stay the rest color. A table link rule would otherwise turn these dark. */
body.ui-kit a.ui-ico:link,
body.ui-kit a.ui-ico:visited,
body.ui-kit a.ui-ico:active,
body.ui-kit a.ui-ico:focus,
body.ui-kit button.ui-ico:active,
body.ui-kit button.ui-ico:focus {
	color: var(--ui-blue);
	text-decoration: none;
}
body.ui-kit a.ui-ico.is-off:link,
body.ui-kit a.ui-ico.is-off:visited,
body.ui-kit a.ui-ico.is-off:active,
body.ui-kit a.ui-ico.is-off:focus,
body.ui-kit button.ui-ico.is-off:active,
body.ui-kit button.ui-ico.is-off:focus,
body.ui-kit a.ui-ico.is-off:link i,
body.ui-kit a.ui-ico.is-off:visited i,
body.ui-kit a.ui-ico.is-off:active i,
body.ui-kit a.ui-ico.is-off:focus i,
body.ui-kit button.ui-ico.is-off:active i,
body.ui-kit button.ui-ico.is-off:focus i,
body.ui-kit a.ui-ico.is-off:link .svg-inline--fa,
body.ui-kit a.ui-ico.is-off:visited .svg-inline--fa,
body.ui-kit a.ui-ico.is-off:active .svg-inline--fa,
body.ui-kit a.ui-ico.is-off:focus .svg-inline--fa,
body.ui-kit button.ui-ico.is-off:active .svg-inline--fa,
body.ui-kit button.ui-ico.is-off:focus .svg-inline--fa { color: #888; }
body.ui-kit a.ui-ico:hover,
body.ui-kit button.ui-ico:hover,
body.ui-kit a.ui-ico:hover i,
body.ui-kit a.ui-ico:hover .svg-inline--fa,
body.ui-kit button.ui-ico:hover i,
body.ui-kit button.ui-ico:hover .svg-inline--fa,
body.ui-kit a.ui-ico.is-off:hover,
body.ui-kit button.ui-ico.is-off:hover,
body.ui-kit a.ui-ico.is-off:hover i,
body.ui-kit a.ui-ico.is-off:hover .svg-inline--fa,
body.ui-kit button.ui-ico.is-off:hover i,
body.ui-kit button.ui-ico.is-off:hover .svg-inline--fa { color: var(--ui-navy); }
body.ui-kit a.ui-ico:hover i,
body.ui-kit a.ui-ico:hover .svg-inline--fa,
body.ui-kit button.ui-ico:hover i,
body.ui-kit button.ui-ico:hover .svg-inline--fa { transform: scale(1.32); }
body.ui-kit .report-table:not(.is-grid) tr:hover .ui-ico,
body.ui-kit .report-table:not(.is-grid) tr:hover .ui-ico i,
body.ui-kit .report-table:not(.is-grid) tr:hover .ui-ico .svg-inline--fa { color: #fff; }
body.ui-kit .report-table:not(.is-grid) tr:hover .ui-ico:hover,
body.ui-kit .report-table:not(.is-grid) tr:hover .ui-ico:hover i,
body.ui-kit .report-table:not(.is-grid) tr:hover .ui-ico:hover .svg-inline--fa { color: var(--ui-navy); }
body.ui-kit a.ui-ico:link,
body.ui-kit a.ui-ico:visited,
body.ui-kit a.ui-ico:hover,
body.ui-kit a.ui-ico:active,
body.ui-kit a.ui-ico:focus,
body.ui-kit a.menu-item.ui-ico,
body.ui-kit a.menu-item.ui-ico:link,
body.ui-kit a.menu-item.ui-ico:visited,
body.ui-kit a.menu-item.ui-ico:hover,
body.ui-kit a.menu-item.ui-ico:active,
body.ui-kit a.menu-item.ui-ico:focus { text-decoration: none; }
body.ui-kit .ui-page a.lnk-ink,
body.ui-kit .ui-page a.lnk-navy,
body.ui-kit .ui-page a.lnk-old {
	color: var(--ui-text);
	text-decoration: none;
}
body.ui-kit .ui-page a.lnk-muted {
	color: var(--ui-muted);
	text-decoration: none;
}
body.ui-kit .ui-page a.lnk-stay {
	color: var(--ui-blue);
	text-decoration: none;
}
body.ui-kit .ui-page a.lnk-ink:hover { color: var(--ui-blue); text-decoration: underline; }
body.ui-kit .ui-page a.lnk-navy:hover { color: var(--ui-navy); text-decoration: underline; }
body.ui-kit .ui-page a.lnk-old:hover { color: #054BA8; text-decoration: underline; }
body.ui-kit .ui-page a.lnk-stay:hover { color: var(--ui-blue); text-decoration: underline; }
body.ui-kit .ui-page a.lnk-muted:hover { color: var(--ui-blue); text-decoration: underline; }
body.ui-kit .tx-link { color: #007bff; }
body.ui-kit .menu-item,
body.ui-kit .menu-item:visited,
body.ui-kit #mySidebar a,
body.ui-kit .grid-menu { color: var(--ui-blue); }
body.ui-kit .menu-item:hover { color: navy; }
.ui-side-sample {
	width: 220px;
	border: 1px solid var(--ui-line);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}
body.ui-kit #mySidebar a.side-link,
body.ui-kit .ui-side-sample a.side-link,
body.ui-kit #mySidebar a.side-link:link,
body.ui-kit .ui-side-sample a.side-link:link,
body.ui-kit #mySidebar a.side-link:visited,
body.ui-kit .ui-side-sample a.side-link:visited,
body.ui-kit #mySidebar a.side-link:active,
body.ui-kit .ui-side-sample a.side-link:active,
body.ui-kit #mySidebar a.side-link:focus,
body.ui-kit .ui-side-sample a.side-link:focus {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 10px 14px;
	box-sizing: border-box;
	background: transparent;
	color: var(--ui-blue);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
}
body.ui-kit #mySidebar a.side-link i,
body.ui-kit .ui-side-sample a.side-link i,
body.ui-kit #mySidebar a.side-link .svg-inline--fa,
body.ui-kit .ui-side-sample a.side-link .svg-inline--fa {
	color: inherit;
	font-size: 24px;
	width: 28px;
	text-align: center;
	transform-origin: center center;
	transition: transform .12s ease, color .12s ease;
}
body.ui-kit #mySidebar a.side-link:hover,
body.ui-kit .ui-side-sample a.side-link:hover {
	background: var(--ui-blue);
	color: #fff;
	opacity: 0.45;
	text-decoration: none;
}
body.ui-kit #mySidebar a.side-link:hover i,
body.ui-kit .ui-side-sample a.side-link:hover i,
body.ui-kit #mySidebar a.side-link:hover .svg-inline--fa,
body.ui-kit .ui-side-sample a.side-link:hover .svg-inline--fa {
	color: #fff;
	transform: scale(1.32);
}
body.ui-kit .demoModeToggle { border-color: var(--ui-blue); }
body.ui-kit .demoModeToggle a { color: var(--ui-blue); }
body.ui-kit .demoModeToggle a.is-on { background: var(--ui-blue); color: #fff; }
body.ui-kit h1 {
	color: var(--ui-blue);
	font-family: var(--ui-font);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	margin: 8px 0 12px;
}
body.ui-kit h2 {
	margin: 4px 0 8px;
	color: var(--ui-navy);
	font-family: var(--ui-font);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
}
body.ui-kit .ui-modal-bar h2,
body.ui-kit .ui-modal-card .ui-modal-bar h2 {
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	border: 0;
}
body.ui-kit .ui-modal-card.is-help { border: 1px solid var(--ui-line); }
body.ui-kit h3 {
	font-family: var(--ui-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}
body.ui-kit .report-table:not(.is-grid) tbody tr:hover a { color: #fff; }

/* Menu and card titles only when the page set kitChrome = True.
   Other pages keep the colors in header.asp. */
body.ui-chrome .menu-item,
body.ui-chrome .menu-item:visited,
body.ui-chrome #mySidebar a,
body.ui-chrome .grid-menu { color: var(--ui-blue); }
body.ui-chrome .menu-item:hover { color: var(--ui-navy); }
body.ui-chrome .demoModeToggle { border-color: var(--ui-blue); }
body.ui-chrome .demoModeToggle a { color: var(--ui-blue); }
body.ui-chrome .demoModeToggle a.is-on { background: var(--ui-blue); color: #fff; }
body.ui-chrome .w3-card h3 { background-color: var(--ui-head); color: var(--ui-text); }