@page {
	@bottom-right {
		content: counter(page) " of " counter(pages);
	}
}

/* GetConnect's fonts (GCT-2981), from Google Fonts, kept here so pages don't load them from Google: Jost for headings
   and the menu, Plus Jakarta Sans for text. Montserrat came with them and isn't used yet. Each file is a variable font for
   every weight given. */

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url("fonts/jost-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 600 800;
	font-display: swap;
	src: url("fonts/jost-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Plus Jakarta Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/montserrat-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/montserrat-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Every colour and font of the dashboard, with GetConnect's values (ADR-0014, GCT-3013). Nothing below names a colour
   or font of its own, so an installation's stylesheet can rebrand the dashboard by setting these (GCT-3012). The brand
   guidelines' colours: orange #f4600a, muted navy #2c3e50, GetJohn steel #474546, steel grey #7a8c99, warm light grey
   #f5f5f5, lime #a4c400. Contrast ratios are WCAG 2.2: AA needs 4.5:1 for text, 3:1 for large text and UI parts. */
:root {
	--hub-font-heading: "Jost", sans-serif;
	--hub-font-text: "Plus Jakarta Sans", sans-serif;

	--hub-page: #f5f5f5;            /* behind the panels */
	--hub-panel: #fff;
	--hub-text: #2c3e50;            /* 11:1 on white, 10:1 on the page */
	--hub-text-muted: #474546;      /* 9.5:1 on white */
	--hub-rule: #e3e7ea;            /* lines between rows and round panels (decoration) */
	--hub-border: #7a8c99;          /* inputs and outlines: 3.5:1 on white */
	--hub-hover: #f5f7f8;

	--hub-rail: #2c3e50;
	--hub-rail-active: #3d5267;     /* white 8:1 */
	--hub-rail-rule: rgba(255, 255, 255, .12);
	--hub-on-rail: #fff;            /* 11:1 */
	--hub-on-rail-muted: #e6ebef;   /* 9.2:1 */
	--hub-rail-heading: #9fb0bc;    /* 4.9:1 */
	--hub-rail-width: 232px;

	--hub-primary: #2c3e50;         /* buttons, selection, links */
	--hub-primary-hover: #474546;
	--hub-on-primary: #fff;         /* 11:1 */
	--hub-caution: #474546;         /* the outline of an action to think twice about */

	--hub-accent: #f4600a;          /* edges, underlines, focus and marks; never text on white (3.2:1) */
	--hub-accent-soft: #fff1e8;     /* the selected row, and Failed and Error rows; navy 9.9:1 */
	--hub-on-accent: #fff;          /* only at 19px bold or larger (3.2:1, AA for large text) */

	--hub-mark-success: #a4c400;    /* lime: a mark only, never text on white (2:1) */
	--hub-mark-waiting: #7a8c99;
	--hub-mark-active: #2c3e50;
	--hub-mark-problem: #f4600a;
	--hub-mark-off: #b8c3cb;
}

body, html {
	font-family: var(--hub-font-text);
	font-size:17px;
	color: var(--hub-text)
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--hub-font-heading);
	font-weight: 600;
}

h1 {
	font-size: 25px;
	margin-bottom: 0 !important;
}

.h2, h2 {
  font-size: 20px;
  text-transform: uppercase;
  margin-bottom: 0;
}

.h3, h3 {
  font-size: 18px;
}

.h4, h4 {
  font-size: 16px;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.table td, .table th {
  padding: 9px;
  vertical-align: middle;
  border-top: 1px solid #dee2e6;
  font-size:17px;

}

.table.prodtable td, .table.prodtable th {
	white-space: inherit;
}

.table-right td, .table-right th {
	padding: 7.2px;
}

.table th {
	background: var(--hub-page);
	font-weight: 700;
	text-transform: uppercase;
}

.table th span.relative  {
	margin-left:10px
}


.toplogo {
  height: 162px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

p {
	font-size:17px
}

p.small {
	font-size: 13px;
	margin-bottom: 0
}

.mb15 {
	margin-bottom: 15px
}

.borderblock {
	border: 1px solid #dee2e6;
	padding: 30px;
}


/* DOCUMENT SINGLE HTML*/

.custombreadcrumb {
	background: none !important;
	font-size: 14px;
	padding: 0;
	margin: 0;
}

.bg-light-gray {
	background: var(--hub-page);
}

/* GetConnect orange is for edges, underlines, focus and marks, never text on white. Text on orange is white, and at least
   19px bold (GCT-2981, ADR-0014) */
a {
	color: var(--hub-primary) !important;
	text-decoration-color: var(--hub-accent);
}

a:hover {
	color: var(--hub-primary-hover) !important;
}

.card-header {
	background-color: var(--hub-page);
	border: 1px solid rgba(0,0,0,.125);
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	margin-top:30px
}

.tab-content {
	border: 1px solid rgba(0,0,0,.125);
	padding: 25px 11px;
	border-top: none
}

.card-header-tabs .nav-item a {
	color: var(--hub-text-muted) !important;
	text-transform: uppercase;
	font-family: var(--hub-font-heading);
	font-weight: 600;
}

.card-header-tabs .nav-item a.active {
	color: var(--hub-text) !important;
	border-bottom: 3px solid var(--hub-accent);
}

/* Buttons (ADR-0014). The class names are older than their colours: hub-button-green is the primary (navy),
   hub-button-green-outline the secondary (a navy outline) and hub-button-red the cautionary (a steel outline). Orange
   with white text is only for large buttons (hub-button-orange, 19px bold), because white on orange is 3.2:1. */
.hub-button {
	margin-right: 1em;
	min-width: 125px;
	height: auto;
	white-space: normal;
	word-break: break-word;
	word-wrap: break-word;
	padding: 8px 14px !important;
	line-height: 1.3;
	font-family: var(--hub-font-text);
	font-size: 14px;
	font-weight: 600;
	border: 1px solid var(--hub-primary);
	border-radius: 4px !important;
	background: var(--hub-panel);
	color: var(--hub-primary);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	cursor: pointer;
	display: inline-block;
	text-decoration: none !important;
}

.hub-button:focus-visible {
	outline: 2px solid var(--hub-accent);
	outline-offset: 2px;
}

/* the primary action: navy with white text (11:1) */
.hub-button-green {
	border-color: var(--hub-primary);
	color: var(--hub-on-primary) !important;
	background: var(--hub-primary);
}

.hub-button-green:hover {
	border-color: var(--hub-primary-hover) !important;
	background: var(--hub-primary-hover);
}

/* a secondary action: a navy outline */
.hub-button-green-outline {
	border: 1px solid var(--hub-primary) !important;
	color: var(--hub-primary) !important;
	background: var(--hub-panel);
}

/* an action to think twice about (disable, resolve, delete): a steel outline */
.hub-button-red {
	border: 1px solid var(--hub-caution) !important;
	color: var(--hub-caution) !important;
	background: var(--hub-panel);
}

.hub-button-green-outline:hover,
.hub-button-red:hover {
	color: var(--hub-on-primary) !important;
	background: var(--hub-caution);
}

/* the one large action on the sign-in pages: orange, at 19px bold so white text passes AA for large text */
.hub-button-orange {
	padding: 10px 22px !important;
	border-color: var(--hub-accent);
	background: var(--hub-accent);
	color: var(--hub-on-accent) !important;
	font-family: var(--hub-font-heading);
	font-size: 19px;
	font-weight: 700;
}

.hub-button-orange:hover {
	border-color: var(--hub-primary);
	background: var(--hub-primary);
}

/* Bootstrap's grey secondary button (Back to List) as a navy outline */
.btn-secondary {
	border-color: var(--hub-primary);
	background: var(--hub-panel);
	color: var(--hub-primary) !important;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
	border-color: var(--hub-primary) !important;
	background: var(--hub-primary) !important;
	color: var(--hub-on-primary) !important;
}

.list-group-item.pd0 {
	padding:0 !important
}

/* The dashboard (hub::page, ADR-0014): a navy menu down the left (the rail) beside the content. The rail has the owner's
   logo and name at the top, the menu grouped by who uses it, and the user, Sign out and a small GetConnect Hub mark at
   the bottom. */

.hub-app {
	display: flex;
	min-height: 100vh;
	background: var(--hub-page);
	font-size: 14px;
}

.hub-app p {
	font-size: 14px;
}

.hub-rail {
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	flex: 0 0 var(--hub-rail-width);
	width: var(--hub-rail-width);
	height: 100vh;
	overflow-y: auto;
	background: var(--hub-rail);
	color: var(--hub-on-rail);
	font-family: var(--hub-font-heading);
}

.hub-rail a {
	color: var(--hub-on-rail) !important;
	text-decoration: none;
}

.hub-rail a:focus-visible, .hub-rail button:focus-visible {
	outline: 2px solid var(--hub-accent);
	outline-offset: -2px;
}

.hub-rail-owner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--hub-rail-rule);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.25;
}

/* the owner's logo on a white tile, because a logo is usually drawn for a light background */
.hub-rail-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	max-width: 100%;
	padding: 6px;
	border-radius: 4px;
	background: var(--hub-panel);
}

.hub-rail-owner-name {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* a logo can be any shape, so it has the whole width, with the name under it */
.hub-rail-owner.hub-rail-owner-has-logo {
	flex-direction: column;
	align-items: flex-start;
}

img.hub-owner-logo, span.hub-owner-logo svg {
	display: block;
	max-height: 40px;
	max-width: 176px;
	width: auto;
	height: auto;
}

span.hub-owner-logo svg {
	height: 40px;
}

.hub-rail-submark {
	display: block;
	width: 40px;
	height: 40px;
}

.hub-rail-menu {
	flex: 1 0 auto;
	padding: 10px 0;
}

.hub-rail-heading {
	margin: 14px 20px 4px;
	color: var(--hub-rail-heading);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hub-rail-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hub-rail-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 20px 8px 17px;
	border-left: 3px solid transparent;
	color: var(--hub-on-rail-muted) !important;
	font-size: 15px;
	font-weight: 500;
}

.hub-rail-link svg {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
}

.hub-rail-link:hover {
	background: var(--hub-rail-rule);
	color: var(--hub-on-rail) !important;
}

.hub-rail-link.active {
	border-left-color: var(--hub-accent);
	background: var(--hub-rail-active);
	color: var(--hub-on-rail) !important;
	font-weight: 600;
}

.hub-rail-foot {
	padding: 14px 20px 16px;
	border-top: 1px solid var(--hub-rail-rule);
	font-family: var(--hub-font-text);
	font-size: 13px;
}

.hub-rail-user {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	color: var(--hub-on-rail-muted);
}

.hub-rail-user-name {
	min-width: 0;
	overflow-wrap: anywhere;
}

.hub-rail-user a {
	flex: 0 0 auto;
	text-decoration: underline !important;
	text-decoration-color: var(--hub-accent) !important;
	text-underline-offset: 3px;
}

.hub-rail-product {
	display: block;
	margin-top: 14px;
}

.hub-rail-product img {
	display: block;
	height: 11px;
	width: auto;
}

.hub-main {
	flex: 1 1 auto;
	min-width: 0;
	padding: 24px 28px 40px;
}

/* a list or form on a white panel */
.hub-panel {
	background: var(--hub-panel);
	border: 1px solid var(--hub-rule);
	border-radius: 6px;
	padding: 16px;
}

.hub-page-head {
	margin-bottom: 14px;
}

.hub-page-head h1 {
	font-size: 24px;
	color: var(--hub-text);
}

.hub-page-head p {
	margin: 2px 0 0;
	color: var(--hub-text-muted);
}

.hub-breadcrumb {
	background: none;
	padding: 0;
	margin: 0 0 12px;
	font-size: 13px;
}

/* Small screens get a navy bar and lists as cards in a later task (ADR-0014). Until then the rail goes above the
   content, so nothing is hidden. */
@media (max-width: 767.98px) {
	.hub-app {
		flex-direction: column;
	}

	.hub-rail {
		position: static;
		width: auto;
		height: auto;
		flex-basis: auto;
	}

	.hub-main {
		padding: 16px;
	}
}

@media print {
	.hub-rail {
		display: none;
	}
}

.horizintalTable {
	display: inline;
	padding-left: 10px;
}

.horizintalTable li {
	display: inline-block;
}

.buttonsSectionRight {
	float:right
}

.buttonsSectionRight button {
	float: right;
	margin-right: 0;
	margin-left: 20px;
}

/* Tables elsewhere (document views, the sidebar) */

table {
	border-collapse: collapse;
}

table td,
table th {
	border: 1px solid rgba(0,0,0,.125);
	white-space: nowrap;
}

/* The lists (ADR-0014): compact, like a spreadsheet. 13.5px text and 6px padding make rows about 31px; rules between
   rows only; uppercase Jost headers; numbers right-aligned in figures of one width; a light hover; the selected row
   with an orange edge. */

.stickyTable {
	max-width: 100%;
}

.stickyTable .laravel-livewire-table {
	margin-bottom: 0;
	font-size: 13.5px;
	color: var(--hub-text);
}

.stickyTable .laravel-livewire-table th,
.stickyTable .laravel-livewire-table td {
	padding: 6px 10px;
	border: 0;
	border-bottom: 1px solid var(--hub-rule);
	font-size: 13.5px;
	line-height: 1.4;
	vertical-align: middle;
	white-space: nowrap;
	background: var(--hub-panel);
}

.stickyTable .laravel-livewire-table th {
	padding-top: 8px;
	padding-bottom: 8px;
	border-bottom-color: var(--hub-border);
	color: var(--hub-text);
	font-family: var(--hub-font-heading);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.stickyTable .laravel-livewire-table th span.relative {
	margin-left: 0;
}

.stickyTable .laravel-livewire-table th button {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

.stickyTable .laravel-livewire-table td.hub-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.stickyTable .laravel-livewire-table tbody tr {
	cursor: pointer;
}

.stickyTable .laravel-livewire-table tbody tr:hover > td {
	background: var(--hub-hover);
}

.stickyTable .laravel-livewire-table tbody tr.hub-row-problem > td {
	background: color-mix(in srgb, var(--hub-accent-soft) 60%, var(--hub-panel));
}

.stickyTable .laravel-livewire-table tbody tr.hub-row-selected > td {
	background: var(--hub-accent-soft);
}

.stickyTable .laravel-livewire-table tbody tr.hub-row-selected > td:first-child {
	box-shadow: inset 3px 0 0 var(--hub-accent);
}

/* the actions stay at the right while the list scrolls sideways */
.stickyTable .laravel-livewire-table th:last-child,
.stickyTable .laravel-livewire-table td:last-child {
	position: sticky;
	right: 0;
	text-align: right;
	box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .18);
}

.hub-row-actions {
	display: inline-flex;
	gap: 4px;
}

/* a row's actions: small navy outline buttons, so the row stays one line high */
.hub-row-action {
	padding: 1px 8px;
	border: 1px solid var(--hub-primary);
	border-radius: 3px;
	background: var(--hub-panel);
	color: var(--hub-primary);
	font-family: var(--hub-font-text);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
}

.hub-row-action:hover, .hub-row-action:focus-visible {
	background: var(--hub-primary);
	color: var(--hub-on-primary);
}

.hub-row-action-caution {
	border-color: var(--hub-caution);
	color: var(--hub-caution);
}

.hub-row-action-caution:hover, .hub-row-action-caution:focus-visible {
	background: var(--hub-caution);
}

/* a status: a 9px mark beside the word, which carries the meaning. Filled is settled, hollow is waiting on the Hub */
.hub-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.hub-status::before {
	content: "";
	flex: 0 0 9px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 2px solid var(--hub-mark-waiting);
	box-sizing: border-box;
}

.hub-status-completed::before { background: var(--hub-mark-success); border-color: var(--hub-mark-success); }
.hub-status-queued::before, .hub-status-received::before, .hub-status-matched::before { border-color: var(--hub-mark-waiting); }
.hub-status-processing::before { background: var(--hub-mark-active); border-color: var(--hub-mark-active); }
.hub-status-failed::before { border-color: var(--hub-mark-problem); }
.hub-status-error::before { background: var(--hub-mark-problem); border-color: var(--hub-mark-problem); }
.hub-status-cancelled::before { border-color: var(--hub-mark-off); }

/* the list's toolbar: search, filters, Columns and the page size, in navy outlines */
.stickyTable .form-control, .stickyTable .form-select {
	font-size: 13.5px;
	border-color: var(--hub-border);
}

.stickyTable .form-control:focus, .stickyTable .form-select:focus {
	border-color: var(--hub-primary);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--hub-accent) 35%, transparent);
}

.stickyTable .btn.dropdown-toggle {
	border: 1px solid var(--hub-primary) !important;
	color: var(--hub-primary);
	background: var(--hub-panel);
	font-family: var(--hub-font-heading);
	font-weight: 600;
	font-size: 13.5px;
}

/* the list's main action ("Add New …"): navy with an orange bottom edge */
.stickyTable .btn.hub-table-add {
	border: 1px solid var(--hub-primary);
	border-bottom: 3px solid var(--hub-accent);
	background: var(--hub-primary);
	color: var(--hub-on-primary) !important;
	font-family: var(--hub-font-heading);
	font-weight: 600;
	font-size: 13.5px;
	white-space: nowrap;
}

.stickyTable .btn.hub-table-add:hover, .stickyTable .btn.hub-table-add:focus {
	border-color: var(--hub-primary-hover);
	border-bottom-color: var(--hub-accent);
	background: var(--hub-primary-hover);
}

/* filter badges (Bootstrap's bg-info, in the table package's views) */
.stickyTable .bg-info, .stickyTable .badge-info {
	background-color: var(--hub-caution) !important;
	color: var(--hub-on-primary) !important;
}

.stickyTable ul.dropdown-menu {
	background: var(--hub-panel);
	border-color: var(--hub-rule);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

.stickyTable .dropdown-menu label {
	font-family: var(--hub-font-heading);
	font-weight: 600;
}

/* pagination */

.stickyTable .pagination {
	font-size: 13px;
}

.page-link {
	color: var(--hub-primary) !important
}

.active > .page-link, .page-link.active span {
	background: var(--hub-primary) !important;
	border-color: var(--hub-primary) !important;
	color: var(--hub-on-primary) !important
}

/* login screen style */

/* GetConnect Hub's logo and the owner's side by side, centred as one row (GCT-2981) */
.hub-signin-brands {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 24px;
	margin-bottom: 40px;
}

.hub-signin-getconnect {
	display: block;
	height: 26px;
	width: auto;
	max-width: 100%;
}

img.hub-signin-owner, span.hub-signin-owner svg {
	display: block;
	max-height: 56px;
	max-width: 160px;
	width: auto;
	height: auto;
}

span.hub-signin-owner svg {
	height: 56px;
}

/* an Organisation's logo in its sidebar */
.ownerLogo {
	max-width: 200px;
	max-height: 80px;
	margin: -20px auto 30px;
	display: block;
}

span.ownerLogo {
	width: 200px;
}

span.ownerLogo svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 80px;
}

.loginItem {
	border-left: none;
	border-right: none;
	background: var(--hub-page);
}

.loginItem input.form-control {
	background: var(--hub-panel);
	border-radius: 0;
}

.loginItem input.form-control:focus {
	border-color: var(--hub-primary);
  outline: 0;
  box-shadow: none;
}

/* a sign-in error: navy text on pale orange with an orange edge (white on orange fails at this size) */
.loginItem .text-danger {
	color: var(--hub-text) !important;
	background: var(--hub-accent-soft);
	border-left: 3px solid var(--hub-accent);
	font-size: 13px;
	width: 100%;
	display: block;
	padding: 3px 12px;
}

.print-logo {
	display: none;
}

/** blur confindential info
 */
/*
.table-striped tr>td:first-child { filter:blur(3px); }
ol.breadcrumb>li:nth-child(3) { filter:blur(3px); }
.pd0 ul.list-group>li:nth-child(1) { filter:blur(3px); }
.test02 .list-group-item *:nth-child(2) { filter:blur(3px); }
.print-6 table tr>td:nth-child(2) { filter:blur(3px); }
#rawinput pre, #mappedxml pre { filter:blur(2px); }
*/


/** Livewire busy indicator (resources/assets/js/busy.js, GCT-2827).
 * The bar shows after 150ms, and the overlay blocks clicks at once but only
 * shows after 400ms.
 */
.hub-busy-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 2001;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s;
}

.hub-busy-bar::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40%;
	background: var(--hub-accent);
	animation: hub-busy-slide 1.2s ease-in-out infinite;
}

@keyframes hub-busy-slide {
	from { left: -40%; }
	to { left: 100%; }
}

.hub-busy .hub-busy-bar {
	opacity: 1;
	transition-delay: .15s;
}

.hub-busy,
.hub-busy * {
	cursor: progress !important;
}

.hub-busy-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .6);
	color: var(--hub-text);
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s;
}

.hub-busy-block .hub-busy-overlay {
	pointer-events: auto;
	cursor: wait !important;
	opacity: 1;
	transition: opacity .2s .4s;
}

@media (prefers-reduced-motion: reduce) {
	.hub-busy-bar::before {
		left: 0;
		width: 100%;
		animation: none;
	}
}

@media print {
	.hub-busy-bar,
	.hub-busy-overlay {
		display: none;
	}
}

/* A map in a config form: rows of a name and its value (GCT-2974) */
.hub-map-row {
	margin-top: .5rem;
	padding: .5rem .5rem .25rem .75rem;
	border-left: 3px solid var(--hub-border);
	background: var(--hub-hover);
}

/* Bootstrap's blue primary button (Add Row, Add Item, the table's bulk actions) in muted navy (GCT-2981) */
.btn-primary {
	background-color: var(--hub-primary);
	border-color: var(--hub-primary);
	color: var(--hub-on-primary) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
	background-color: var(--hub-primary-hover) !important;
	border-color: var(--hub-primary-hover) !important;
	color: var(--hub-on-primary) !important;
}

/* The 3D logo over the dashboard as it opens (hub::intro, GCT-2981) */
.hub-intro {
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--hub-page) 85%, transparent);
	backdrop-filter: blur(4px);
	transition: opacity .6s ease;
	cursor: pointer;
}

.hub-intro[hidden] {
	display: none;
}

.hub-intro-out {
	opacity: 0;
	pointer-events: none;
}

.hub-intro-logo {
	width: min(50vmin, 420px);
	aspect-ratio: 1 / 1;
}

.hub-intro-logo canvas {
	display: block;
	width: 100%;
	height: 100%;
}

@media print {
	.hub-intro {
		display: none;
	}
}

/* The Documents list's status buttons (hub::livewire.table-status, ADR-0014) */
.hub-status-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.hub-status-button {
	display: inline-flex;
	align-items: center;
	padding: 3px 12px;
	border: 1px solid var(--hub-border);
	border-radius: 999px;
	background: var(--hub-panel);
	color: var(--hub-text);
	font-size: 13px;
	line-height: 1.5;
}

.hub-status-button:hover {
	border-color: var(--hub-primary);
}

.hub-status-button:focus-visible {
	outline: 2px solid var(--hub-accent);
	outline-offset: 1px;
}

.hub-status-button.active {
	border-color: var(--hub-primary);
	background: var(--hub-primary);
	color: var(--hub-on-primary);
	font-weight: 600;
}

/* a filled navy mark on a navy button: outline it in white */
.hub-status-button.active .hub-status::before {
	box-shadow: 0 0 0 1px var(--hub-on-primary);
}

/* A list, and the selected record's pane beside it, shown only while a row is selected (ADR-0014) */
.hub-list-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.hub-list-layout.hub-has-pane {
	grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
}

.hub-pane {
	position: sticky;
	top: 16px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 36px 12px 12px;
	border: 1px solid var(--hub-rule);
	border-top: 3px solid var(--hub-accent);
	border-radius: 6px;
	background: var(--hub-panel);
	font-size: 13.5px;
}

.hub-pane .card {
	border: 0;
}

.hub-pane .list-group-item {
	padding: 6px 4px;
	font-size: 13.5px;
}

.hub-pane .list-group-item.bg-light-gray {
	background: none;
	padding-top: 0;
}

.hub-pane h3 {
	font-size: 16px;
	overflow-wrap: anywhere;
}

.hub-pane-close {
	position: absolute;
	top: 6px;
	right: 8px;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	color: var(--hub-text);
	font-size: 22px;
	line-height: 1;
}

.hub-pane-close:hover {
	background: var(--hub-hover);
}

.hub-pane-close:focus-visible {
	outline: 2px solid var(--hub-accent);
}

@media (max-width: 1099.98px) {
	.hub-list-layout.hub-has-pane {
		grid-template-columns: minmax(0, 1fr);
	}

	.hub-pane {
		position: static;
		max-height: none;
	}
}

/* What an Integration's template says about one of its records (hub::integration.notes) */
.hub-notes {
	border-left: 3px solid var(--hub-accent);
	background: var(--hub-page);
	padding: 0.5rem 0.75rem;
	margin-bottom: 0.75rem;
	font-size: 0.85rem;
}

.hub-notes p {
	margin: 0 0 0.35rem;
}

.hub-notes p:last-child {
	margin-bottom: 0;
}