/*
===============================================================================
TICKET EXPERIENCE - UNIFIED STYLESHEET (styles.css)
Copyright (c) 1999-2026 KB Group (UK) Ltd. All Rights Reserved.

Revisions
=========
Merged from:	custom.css  +  common.css
Product Setup:	September 2026 - modernised dashboard cards and setup status presentation.
Modernised:		April 2026 - removed legacy vendor-prefixed gradients, IE filter hacks, and Firefox 3.6 / Opera 11 prefixes.
				Where a class used a multi-stop gradient only for old browsers, it has been replaced with a plain modern linear-gradient() equivalent.

========
Sections
========
1.  Global Reset & Main Structure
2.  Typography & Page Headings
3.  Anchors & Link States
4.  Form Elements - Inputs, Selects, Fieldsets
5.  Buttons & Action Controls
6.  Tables & Data Grids
7.  Navigation - Top Menu
8.  Navigation - Tab Menus (tabmenu / tabmenupricelayer)
9.  Navigation - Pagination
10.  Product Search - Metro-style Tile Boxes
11.  Product Setup Dashboard
12.  Panels, Popups & Modal Overlays
13.  Progress Indicators
14.  Search & Quick Search Bar
15.  Login Page
16.  Fieldsets & Legend Groups
17.  Display-only & Colour Utility Classes
18.  Layout Utilities & Misc Helpers
19.  Footer
===============================================================================
*/


/* =============================================================================
   1. GLOBAL RESET & MAIN STRUCTURE
   The outermost structural shells of every page.
   ============================================================================= */

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	background-color: #f4f7f9;
	color: #333333;
}

/* Fixed full-page background gradient layer */
#div_background {
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: #f4f7f9;
	background: linear-gradient(180deg, #ffffff 0%, #f4f7f9 100%);
	z-index: -1;
}

#div_background_login {
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	position: fixed;

	/* Use a dark slate to black gradient for that professional look */
	background-color: #1a1c1e;
	background: linear-gradient(180deg, #2c3e50 0%, #000000 100%);
}

/* Main page content wrapper */
#page_holder {
	width: 99%;
	margin: 0 0.5%;
	text-align: left;
	background-color: #FFFFFF;
	min-height: calc(100vh - 95px);
	position: relative;
}

/* Page header / branding bar */
#top_header {
	width: 100%;
	min-height: 90px;
	background-color: #f1f4f6 !important;
	background-image: linear-gradient(to bottom, #f8fafb, #e8ecef) !important;
	border-bottom: 1px solid #c8d1d9;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 2px 0 #007bb5;
	overflow: hidden;
	padding: 10px 0 0 0;
	position: relative !important; /* Required to 'contain' the absolute child */
}

#content {
	width: 100%;
	text-align: center;
}

/* Primary content area - fills available vertical space */
#page_content {
	min-height: calc(100vh - 350px); /* Accounts for buttonwrapper + footer heights */
	color: #555555;
	margin-top: 10px;
}

/* Content area variant when an info box is also present above */
#page_content_withinfo {
	min-height: calc(100vh - 400px); /* Extra offset for the info box height */
	color: #555555;
	margin-top: 10px;
}

/* Content area without top margin (specific pages) */
#page_content_withoutmargin {
	min-height: 400px;
	color: #555555;
}

#page_container {
	width: 100%;
	text-align: center;
	color: #FFFFFF;
}

/* Page-level summary text block */
.page_summary {
	font-size: 100%;
	width: 98%;
}

.contact-checklist {
	margin: 0 15px 15px 15px;
	border: 1px solid #c5c5c5;
	background-color: #ffffff;
	color: #555555;
	text-align: left;
}

.contact-summary-tab-gap {
	clear: both;
	height: 20px;
}

.product-summary-tab-gap {
	clear: both;
	height: 20px;
}

.order-summary-tab-gap {
	clear: both;
	height: 20px;
}

.contact-checklist-heading {
	padding: 8px 10px;
	background-color: #3ca2d7;
	color: #ffffff;
	font-weight: bold;
	text-transform: uppercase;
}

.contact-checklist-item {
	display: flex;
	border-top: 1px solid #e5e5e5;
}

.contact-summary-details {
	margin-right: 130px;
}

.contact-summary-picture {
	float: right;
	width: 110px;
	padding: 10px;
	text-align: center;
}

.contact-summary-picture .right {
	float: none;
}

.contact-summary-picture .profile-picture-not-found {
	border: 2px solid #b94a48;
}

.product-thumbnail-not-found {
	border: 2px solid #b94a48;
}

.profile-picture-missing-warning {
	clear: both;
	margin-top: 5px;
	color: #8a1f2d;
	font-weight: bold;
	text-align: center;
}

.contact-summary-not-selected {
	margin: 25px 15px 15px 15px;
	padding: 10px;
	color: #555555;
	text-align: left;
}

/* Shared presentation used by the Back Office summary screens. */
.summary-panel {
	margin: 20px 15px 15px 15px;
	border: 1px solid #c5c5c5;
	background-color: #ffffff;
	color: #555555;
	text-align: left;
	box-sizing: border-box;
}

.summary-panel-heading {
	padding: 8px 10px;
	background-color: #3ca2d7;
	color: #ffffff;
	font-weight: normal;
	text-transform: uppercase;
}

.summary-panel-content {
	padding: 10px 15px 15px 15px;
	box-sizing: border-box;
}

/* Checkout panels group related order-entry controls without changing their behaviour. */
.checkout-panel {
	margin-top: 15px;
}

.checkout-panel .summary-panel-heading {
	text-align: center;
}

.checkout-panel-fees .summary-panel-heading {
	background-color: #68737c;
}

.checkout-panel-payment .summary-panel-heading {
	background-color: #3ca2d7;
}

.checkout-panel-customer .summary-panel-heading {
	background-color: #345a76;
}

.checkout-panel-basket .summary-panel-heading {
	background-color: #327b9c;
}

.checkout-panel-basket .shoppingBasketLabel {
	display: block;
	margin-right: 15px;
	margin-left: 15px;
}

.checkout-panel-donation .summary-panel-heading {
	background-color: #b65f47;
}

.checkout-panel-optional .summary-panel-heading {
	background-color: #b2872d;
}

.checkout-panel-gift .summary-panel-heading {
	background-color: #8064a2;
}

.checkout-panel-summary .summary-panel-heading {
	background-color: #4f8a64;
}

.checkout-panel-subheading {
	margin: 12px 0 6px 0;
	padding-top: 10px;
	border-top: 1px solid #d9d9d9;
	color: #8a6822;
	font-size: 100%;
	text-align: center;
}

.checkout-table {
	width: calc(100% - 30px);
	margin-right: 15px !important;
	margin-left: 15px !important;
	box-sizing: border-box;
}

.operations-dashboard-toggle {
	display: flex;
	align-items: center;
	width: 100%;
	border: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.operations-dashboard-toggle-chevron {
	width: 8px;
	height: 8px;
	margin: 0 0 3px 10px;
	border-right: 2px solid #ffffff;
	border-bottom: 2px solid #ffffff;
	transform: rotate(225deg) translateY(-2px);
	transition: transform 0.15s ease-in-out;
}

.operations-dashboard-toggle[aria-expanded="false"] .operations-dashboard-toggle-chevron {
	transform: rotate(45deg) translateY(-2px);
}

.operations-dashboard-toggle:focus-visible {
	outline: 2px solid #234d70;
	outline-offset: -2px;
}

/* System operations dashboard presentation. */
.operations-dashboard {
	margin: 0 15px 20px 15px;
	color: #40505c;
	text-align: left;
}

.operations-dashboard-hero {
	margin-bottom: 15px;
	padding: 20px;
	border: 1px solid #2d668d;
	background: linear-gradient(135deg, #234d70, #3ca2d7);
	color: #ffffff;
}

.operations-dashboard-hero h1 {
	margin: 0 0 5px 0;
	font-size: 22px;
	font-weight: normal;
}

.operations-dashboard-hero p {
	margin: 0;
	font-size: 13px;
	color: #ffffff !important;
}

.applications-requests-icon {
	float: right;
	width: 42px;
	height: 42px;
	margin: 0 0 8px 15px;
}

.operations-dashboard-metrics,
.operations-dashboard-risks {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -5px 15px -5px;
}

.operations-dashboard-metric,
.operations-dashboard-risk {
	box-sizing: border-box;
	min-height: 108px;
	margin: 5px;
	padding: 14px;
	text-decoration: none;
}

.operations-dashboard-metric {
	flex: 1 1 185px;
	border: 1px solid #c7d8e4;
	border-top: 4px solid #3ca2d7;
	background: #ffffff;
	color: #40505c;
}

.operations-dashboard-metric:hover,
.operations-dashboard-metric:focus {
	border-color: #3ca2d7;
	background: #f4fbff;
	box-shadow: 0 2px 7px rgba(35, 77, 112, 0.18);
	outline: none;
}

.operations-dashboard-metric-people {
	border-top-color: #78a950;
}

.operations-dashboard-metric-access {
	border-top-color: #8768a7;
}

.operations-dashboard-metric-lease {
	border-top-color: #e69d32;
}

.operations-dashboard-metric-label,
.operations-dashboard-metric-detail {
	display: block;
}

.operations-dashboard-metric-label {
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0;
	text-transform: none;
}

.operations-dashboard-metric strong {
	display: block;
	margin: 5px 0;
	font-size: 30px;
	line-height: 32px;
	color: #234d70;
}

.operations-dashboard-metric-detail {
	font-size: 12px;
	color: #667784;
}

.operations-dashboard-risk {
	flex: 1 1 200px;
	border: 1px solid #e6d1a0;
	background: #fffaf0;
	color: #695323;
}

.operations-dashboard-risk-critical {
	border-color: #e0aeae;
	background: #fff5f5;
	color: #8a2e2e;
}

.operations-dashboard-risk-financial {
	border-color: #b8cadd;
	background: #f4f8fc;
	color: #365b7c;
}

.operations-dashboard-risk span,
.operations-dashboard-risk small {
	display: block;
}

.operations-dashboard-risk span {
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0;
	text-transform: none;
}

.operations-dashboard-risk:hover,
.operations-dashboard-risk:focus {
	box-shadow: 0 2px 7px rgba(105, 83, 35, 0.18);
	outline: none;
}

.operations-dashboard-risk strong {
	display: block;
	margin: 4px 0;
	font-size: 28px;
	line-height: 30px;
}

.operations-dashboard-risk small {
	font-size: 12px;
}

.operations-dashboard-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.operations-dashboard-table th:nth-child(1),
.operations-dashboard-table td:nth-child(1) { width: 24%; }

.operations-dashboard-table th:nth-child(2),
.operations-dashboard-table td:nth-child(2) { width: 30%; }

.operations-dashboard-table th:nth-child(3),
.operations-dashboard-table td:nth-child(3) { width: 12%; }

.operations-dashboard-table th:nth-child(4),
.operations-dashboard-table td:nth-child(4) { width: 16%; }

.operations-dashboard-table th:nth-child(5),
.operations-dashboard-table td:nth-child(5) { width: 18%; }

.operations-dashboard-table th,
.operations-dashboard-table td {
	padding: 9px 8px;
	border-bottom: 1px solid #e2e9ed;
	vertical-align: middle;
}

.operations-dashboard-table th {
	background: #edf5f9;
	color: #335a73;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
}

.operations-dashboard-table th.textr {
	text-align: right;
}

.operations-dashboard-table tbody tr:nth-child(even) {
	background: #f7fafc;
}

.owner-pack-agent-table th:nth-child(1),
.owner-pack-agent-table td:nth-child(1) {
	width: 38px;
	padding-left: 4px;
	padding-right: 4px;
	text-align: center;
}

.owner-pack-agent-table th:nth-child(2),
.owner-pack-agent-table td:nth-child(2) {
	width: 23%;
	padding-left: 0;
}

.owner-pack-agent-table th:nth-child(3),
.owner-pack-agent-table td:nth-child(3) {
	width: 30%;
	white-space: nowrap;
}

.owner-pack-agent-table th:nth-child(4),
.owner-pack-agent-table td:nth-child(4) {
	width: auto;
	overflow-wrap: anywhere;
}

.operations-dashboard-period {
	float: right;
	margin-right: 14px;
}

.operations-dashboard-detail {
	margin: 0 5px 15px 5px;
}

.operations-dashboard-detail h2 {
	margin: 0 0 10px 0;
	font-size: 16px;
	font-weight: normal;
}

.operations-system-dashboard-detail-table th:nth-child(1),
.operations-system-dashboard-detail-table td:nth-child(1) { width: 23%; }

.operations-system-dashboard-detail-table th:nth-child(2),
.operations-system-dashboard-detail-table td:nth-child(2) { width: 29%; }

.operations-system-dashboard-detail-table th:nth-child(3),
.operations-system-dashboard-detail-table td:nth-child(3) { width: 19%; }

.operations-system-dashboard-detail-table th:nth-child(4),
.operations-system-dashboard-detail-table td:nth-child(4) { width: 15%; }

.operations-system-dashboard-detail-table th:nth-child(5),
.operations-system-dashboard-detail-table td:nth-child(5) { width: 14%; }
.operations-dashboard-detail-table th:nth-child(1),
.operations-dashboard-detail-table td:nth-child(1) { width: 17%; }

.operations-dashboard-detail-table th:nth-child(2),
.operations-dashboard-detail-table td:nth-child(2) { width: 13%; }

.operations-dashboard-detail-table th:nth-child(3),
.operations-dashboard-detail-table td:nth-child(3) { width: 7%; }

.operations-dashboard-detail-table th:nth-child(4),
.operations-dashboard-detail-table td:nth-child(4) { width: 10%; }

.operations-dashboard-detail-table th:nth-child(5),
.operations-dashboard-detail-table td:nth-child(5) { width: 10%; }

.operations-dashboard-detail-table th:nth-child(6),
.operations-dashboard-detail-table td:nth-child(6) { width: 15%; }

.operations-dashboard-detail-table th:nth-child(7),
.operations-dashboard-detail-table td:nth-child(7) { width: 28%; }

.operations-dashboard-status {
	display: inline-block;
	padding: 3px 7px;
	border-radius: 10px;
	font-size: 10px;
	font-weight: bold;
	letter-spacing: 0;
	text-transform: none;
}

.operations-dashboard-status-critical {
	background: #b94a48;
	color: #ffffff;
}

.operations-dashboard-status-warning {
	background: #e6a12c;
	color: #ffffff;
}

.operations-dashboard-status-prospect {
	background: #3ca2d7;
	color: #ffffff;
}

.operations-dashboard-status-accepted {
	background: #78a950;
	color: #ffffff;
}

.operations-dashboard-status-declined {
	background: #b94a48;
	color: #ffffff;
}

.operations-dashboard-action {
	display: inline-block;
	padding: 5px 9px;
	border-radius: 3px;
	background: #316291;
	color: #ffffff !important;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

.operations-dashboard-action:hover,
.operations-dashboard-action:focus {
	background: #234d70;
	box-shadow: 0 1px 3px rgba(35, 77, 112, 0.28);
	outline: none;
}

.operations-dashboard-action + .operations-dashboard-action {
	margin-left: 5px;
}

.operations-dashboard-hero-action {
	background: #ffffff;
	color: #234d70 !important;
}

.operations-dashboard-hero-action:hover,
.operations-dashboard-hero-action:focus {
	background: #dceef8;
	color: #17344c !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
}

.operations-dashboard-source-heatmap {
	overflow-x: auto;
	padding: 5px 0;
}

.operations-dashboard-source-heatmap table {
	border-collapse: separate;
	border-spacing: 2px;
	font-size: 11px;
}

.operations-dashboard-source-heatmap th,
.operations-dashboard-source-heatmap td {
	min-width: 54px;
	padding: 6px 4px;
	border: 0;
	text-align: center;
	white-space: nowrap;
}

.operations-dashboard-source-heatmap th:first-child,
.operations-dashboard-source-heatmap td:first-child {
	position: sticky;
	left: 0;
	min-width: 145px;
	background: #ffffff;
	text-align: left;
	z-index: 1;
}

.operations-dashboard-source-heatmap th:first-child {
	background: #316291;
	color: #ffffff;
}

.operations-dashboard-empty {
	padding: 18px !important;
	color: #557080;
	text-align: center;
}

.operations-dashboard-chart {
	padding: 5px 0;
}

.operations-dashboard-chart-row {
	display: flex;
	align-items: center;
	margin: 12px 0;
}

.operations-dashboard-chart-row > span {
	width: 120px;
	font-weight: bold;
}

.operations-dashboard-chart-track {
	flex: 1;
	height: 18px;
	margin: 0 10px;
	background: #edf2f5;
}

.operations-dashboard-chart-fill {
	height: 18px;
	min-width: 2px;
	background: #3ca2d7;
}

.operations-dashboard-chart-people {
	background: #78a950;
}

.operations-dashboard-chart-access {
	background: #8768a7;
}

.operations-dashboard-chart-lease {
	background: #e69d32;
}

.operations-dashboard-chart-row strong {
	width: 45px;
	text-align: right;
}

.operations-dashboard-note {
	margin: 10px 0 0 0;
	color: #667784;
	font-size: 12px;
}

/* Home dashboard presentation. */
.home-dashboard .summary-panel {
	margin: 0 0 15px 0;
}

.home-dashboard-admin-panel .summary-panel-content {
	padding-bottom: 12px;
}

.home-dashboard-panel-heading {
	display: flex;
	align-items: center;
	padding: 0;
}

.home-dashboard-panel-heading .operations-dashboard-toggle {
	flex: 1 1 auto;
	width: auto;
	padding: 8px 10px;
	background: transparent;
	color: inherit;
}

.home-dashboard-period {
	margin: 0 10px 0 0;
}

.home-dashboard-table {
	width: 100%;
	border-collapse: collapse;
	color: #40505c;
}

.home-dashboard-table td {
	padding: 9px 8px;
	border-bottom: 1px solid #e2e9ed;
	vertical-align: middle;
}

.home-dashboard-table tr:first-child td {
	background: #edf5f9;
	color: #335a73;
	font-size: 12px;
	font-weight: bold;
	text-align: left;
}

.home-dashboard-table tr:not(:first-child):nth-child(odd) {
	background: #f7fafc;
}

.product-summary-panel .columnr {
	float: right;
	margin: 10px 0 10px 15px;
}

.product-summary-panel,
.order-summary-panel {
	margin-top: 0;
}

.product-summary-panel .columnl {
	width: 80%;
	padding: 0 !important;
	box-sizing: border-box;
}

.product-summary-panel .attr_label {
	color: #444444;
}

.order-summary-panel .summary-panel-content {
	overflow-x: auto;
}

.order-summary-totals {
	float: left !important;
	margin: 10px 0 0 0;
	padding: 10px;
	border-top: 1px solid #e5e5e5;
}

.order-summary-totals .attr_label,
.order-summary-totals .attr_disponly {
	float: left !important;
	text-align: left !important;
}

.contact-checklist-label {
	width: 190px;
	padding: 7px 10px;
	font-weight: bold;
}

.contact-checklist-value {
	flex: 1;
	padding: 7px 10px;
}

.contact-checklist-complete .contact-checklist-value {
	color: #155724;
}

.contact-checklist-review .contact-checklist-value {
	color: #5c4700;
}

.contact-checklist-missing .contact-checklist-value,
.contact-checklist-email-missing {
	color: #8a1f2d;
}

.contact-checklist-action,
.contact-checklist-email-missing {
	padding: 8px 10px;
}

.owner-payment-history-panel {
	margin-top: 0;
}

.owner-payment-history-status-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.owner-payment-history-status {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 3px;
	font-weight: bold;
	white-space: nowrap;
}

.owner-payment-history-status-current,
.owner-payment-history-remittance-current {
	color: #155724;
	background-color: #d4edda;
}

.owner-payment-history-status-watch,
.owner-payment-history-remittance-watch,
.owner-payment-history-age-watch {
	color: #5c4700;
	background-color: #fff3cd;
}

.owner-payment-history-status-review,
.owner-payment-history-remittance-review,
.owner-payment-history-age-review {
	color: #8a1f2d;
	background-color: #f8d7da;
}

.owner-payment-history-status-neutral {
	color: #555555;
	background-color: #eeeeee;
}

.owner-payment-history-note {
	color: #555555;
	font-size: 90%;
}

.owner-payment-history-subheading {
	margin: 15px 0 6px 0;
	font-weight: bold;
}

.owner-payment-history-table {
	width: 100%;
	border-collapse: collapse;
}

.owner-payment-history-table th,
.owner-payment-history-table td {
	padding: 7px 10px;
	border: 1px solid #e5e5e5;
}

.owner-payment-history-table th {
	background-color: #f5f5f5;
	font-weight: bold;
}

@media screen and (max-width: 700px) {
	.owner-payment-history-status-row {
		display: block;
	}

	.owner-payment-history-note {
		display: block;
		margin-top: 8px;
	}
}

.logoclient {
	margin-top: 7px;
	margin-right: 10px;
	margin-left: 10px;
}


/* =============================================================================
   2. TYPOGRAPHY & PAGE HEADINGS
   Heading classes and text-level display helpers used across pages.
   ============================================================================= */

/* Primary page heading - large blue title, e.g. top of most admin pages */
.attr_pghead {
	color: #3ca2d7;
	font-size: 135%;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align: left;
	padding-left: 14px;
	padding-bottom: 4px;
	padding-top: 4px;
}

/* Centred variant used in popup/modal page headings */
.attr_pghead_popup {
	color: #3ca2d7;
	font-size: 135%;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align: center;
}

/* Sub-heading used for custom messages below the main page title */
.attr_pghead_custommsg {
	color: #212121;
	font-size: 110%;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	padding-left: 250px;
	padding-bottom: 20px;
}

/* Section divider heading (e.g. within a form panel) */
.divheader {
	color: #3ca2d7;
	font-size: 115%;
	font-weight: bold;
}

/* Table or section heading - similar weight to attr_pghead but for sub-sections */
.attr_tablehead {
	color: #3ca2d7;
	font-size: 130%;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	padding-left: 14px;
}

/* Interest-type heading used on financial/product configuration pages */
.attr_sectionhead {
	color: #3ca2d7;
	font-size: 115%;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
}

/* Section and page heading navigation icon */
.page_navigation_icon {
	height: 18px;
	margin-left: -3px;
	vertical-align: text-bottom;
	width: 18px;
}

/* Large centred member/contact name display */
.attr_member {
	color: #3ca2d7;
	font-size: 150%;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	padding-left: 14px;
}

/* Page contents subtitle (blue, slightly enlarged) */
.attr_pgcontents {
	color: #467CFA;
	font-size: 120%;
}

/* Next-step indicator (e.g. wizard step labels) */
.attr_next {
	color: #5F85BB;
	font-size: 150%;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align: left;
	padding-left: 14px;
}

.attr_next:hover {
	cursor: pointer;
}

/* Help page link colour */
.attr_helpPage {
	color: #e47911;
}

/* Confirmation message styling */
.attr_confirmmsg {
	color: #000000;
	font-size: 120%;
}

/* Audit trail text - compact, grey, matching footer-link weight */
.attr_audit {
	color: #545557;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}

/* Inside-commission highlight colour (used in commission-inclusive cells) */
.attr_insidecommission {
	color: #F1D042;
	font-weight: bold;
}

/* Price rule restricted display */
.attr_priceruleonly {
	color: #d8e3ee;
	font-size: 100%;
	font-weight: bold;
}

/* Footer text colour (non-anchor) */
.attr_footer {
	color: #d8e3ee;
}

/* Login page notification (e.g. "Your account has been locked") */
.login_notification {
	color: #CC0000;
	font-weight: bold;
}


/* =============================================================================
   3. ANCHORS & LINK STATES
   Global link defaults and named link classes covering all four pseudo-states.
   ============================================================================= */

/* --- Global defaults --- */
a {
	color: #1958BD;
	text-decoration: none;
	cursor: pointer;
}

a:hover {
	color: #E47911;
	text-decoration: underline;
}

/* --- Expand / collapse toggle links (sprite sheet based) --- */
a.expand {
	background-image: url(../icons/expand-collapse.png);
	background-position: 0px 2px;
	background-repeat: no-repeat;
	padding-left: 12px;
	cursor: pointer;
	text-decoration: none;
	font-size: 110%;
}

a.collapse {
	background-image: url(../icons/expand-collapse.png);
	background-position: 0px -10px;
	background-repeat: no-repeat;
	padding-left: 15px;
	cursor: pointer;
	text-decoration: none;
	font-size: 110%;
}

/* --- Search result key link (slightly larger) --- */
a.searchkey { font-size: 110%; }
a.searchkey:hover {
	color: #E47911;
	text-decoration: underline;
	font-size: 110%;
}

/* --- Help page links --- */
a.helppage		  { color: #1958BD; }
a.helppage:hover	{ color: #E47911; text-decoration: underline; }
a.attr_helpPage:hover { color: #ffffff; text-decoration: underline; }

/* --- Logout button (styled as a compact inline tag) --- */
a.attr_logout {
	display: inline-block;
	padding: 1px 6px;
	background-color: #f1f3f5;
	border: 1px solid #ced4da;
	border-radius: 3px;
	color: #495057;		   /* Slate gray */
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	vertical-align: middle;
	position: relative;
	top: -1px;
}
a.attr_logout:hover {
	background-color: #343a40; /* Dark charcoal */
	border-color: #343a40;
	color: #ffffff;
	text-decoration: none;
}

/* --- Search results link (white text, used in dark-background search grids) --- */
a.attr_search:link,
a.attr_search:visited,
a.attr_search:hover,
a.attr_search:active {
	color: #FFF;
	text-decoration: underline;
	font-weight: bold;
	font-size: 95%;
}

/* --- Submenu text links --- */
a.attr_submenu:link,
a.attr_submenu:visited   { color: #FF2941; text-decoration: underline; }
a.attr_submenu:hover,
a.attr_submenu:active	{ color: #FE0303; text-decoration: underline; }

/* --- Footer links --- */
a.attr_footer:link,
a.attr_footer:visited,
a.attr_footer:hover,
a.attr_footer:active {
	color: #545557;
	text-decoration: underline;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}

/* --- Sortable column header links (dark bg) --- */
.attr_sortcolumn:link			  { color: #ffffff; text-decoration: underline; }
a.attr_sortcolumn:visited,
a.attr_sortcolumn:hover			{ color: #DDDDDD; text-decoration: underline; }

/* --- Currently sorted column header links --- */
a.attr_sortedcolumn:link		   { color: #FFFFFF; text-decoration: underline; }
a.attr_sortedcolumn:visited		{ color: #FDD575; text-decoration: underline; }
a.attr_sortedcolumn:hover		  { color: #DDDDDD; text-decoration: underline; }

/* --- Standard content links (slightly enlarged) --- */
a.attr_standard:link,
a.attr_standard:active  { color: #4491D7; text-decoration: underline; font-size: 110%; }
a.attr_standard:visited { color: #69A4DE; text-decoration: underline; font-size: 110%; }
a.attr_standard:hover   { color: #585858; text-decoration: underline; font-size: 110%; }

/* --- Layout block links --- */
a.attr_layoutlink:link,
a.attr_layoutlink:active  { color: #585858; }
a.attr_layoutlink:visited  { color: #585858; text-decoration: underline; }
a.attr_layoutlink:hover	{ color: #69A4DE; text-decoration: underline; }

/* --- Contact links (grey/blue scheme) --- */
a.attr_contact:link,
a.attr_contact:visited,
a.attr_contact:active { color: #585858; text-decoration: underline; }
a.attr_contact:hover  { color: #69A4DE; text-decoration: underline; }

/* --- Login page links (orange on dark background) --- */
.attr_login { color: #FFFFFF; font-weight: normal; font-size: 110%; }
a.attr_login:link,
a.attr_login:visited { color: #E49360; text-decoration: none; font-size: 110%; }
a.attr_login:hover,
a.attr_login:active  { color: #585858; text-decoration: none; }

/* --- Upselling product links --- */
.attr_upselling {
	display: block;
	margin-top: 2px;
	text-decoration: none;
	word-wrap: break-word;
}

/* --- Legacy "create order" button (oval gif sprite) --- */
a.createorderbutton {
	background: transparent url("../images/oval-orange-left.gif") no-repeat top left;
	display: block;
	float: right;
	font: normal 13px Tahoma;
	line-height: 16px;
	height: 24px;
	padding-left: 11px;
	text-decoration: none;
	margin-left: 6px;
}

a:link.createorderbutton,
a:visited.createorderbutton,
a:active.createorderbutton  { color: #d8e3ee; }
a.createorderbutton span {
	background: transparent url("../images/oval-orange-right.gif") no-repeat top right;
	display: block;
	padding: 4px 11px 4px 0;
}

a.createorderbutton:hover			{ background-position: bottom left; }
a.createorderbutton:hover span	   { background-position: bottom right; color: #1E1C15; }

/* --- Table cell anchor states (item / altitem rows) --- */
td.itemright a:link, td.itemright a:visited,
td.itemright a:hover, td.itemright a:active,
td.itemleft a:link,  td.itemleft a:visited,
td.itemleft a:hover, td.itemleft a:active,
td.altitemleft a:link,  td.altitemleft a:visited,
td.altitemleft a:hover, td.altitemleft a:active,
td.altitemright a:link, td.altitemright a:visited,
td.altitemright a:hover {
	color: #555555;
	text-decoration: underline;
}

td.altitemrights a:active { color: #555555; text-decoration: underline; }

.f110 { font-size: 110%; }
.f130 { font-size: 130%; }

/* =============================================================================
   4. FORM ELEMENTS - INPUTS, SELECTS, FIELDSETS
   All text inputs, textareas, dropdowns, and their variants.
   ============================================================================= */

/* --- Standard text input and textarea --- */
input.attr_input,
textarea.attr_input {
	color: #595E61;
	font-family: Arial, Helvetica, sans-serif;
	background: #fafafa;
	border: #d6d6d6 1px solid;
	padding: 2px 5px;
}

textarea.attr_input {
	font-size: 100%;
}

.attr_input:hover {
	color: #595E61;
	font-family: Arial, Helvetica, sans-serif;
	border: #C1C1C1 1px solid;
}

.attr_input:focus {
	color: #595E61;
	font-family: Arial, Helvetica, sans-serif;
	border: 1px solid #4D90FE;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
	outline: none;
}

/* --- Input variants --- */

/* Fieldset-scoped input */
.attr_input_fieldset {
	color: #595E61;
	font-family: Arial, Helvetica, sans-serif;
	background: #fafafa;
	border: #d6d6d6 1px solid;
}

/* Price chart cell input (right-aligned) */
.attr_input_pricechart {
	color: #595E61;
	font-family: Arial, Helvetica, sans-serif;
	background: #fafafa;
	border: #CCCCCC 1px solid;
	font-size: 115%;
	text-align: right;
}

/* Layout builder input */
.attr_input_layoutbuilder {
	color: #595E61;
	font-family: Arial, Helvetica, sans-serif;
	background: #fafafa;
	border: #A09999 1px solid;
	font-size: 115%;
}

/* Inline-cell input (inside table cells) */
.attr_input_incell {
	color: #595E61;
	background: #fafafa;
	border: #eee 1px solid;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
}

/* Validation error state - red border override */
.attr_input_missing {
	border-color: #FF0000;
	color: #595E61;
	background: #fafafa;
	border: #eee 0.8px solid;
	font-size: 100%;
}

/* Target any checkbox that immediately follows an .attr_label */
.attr_label + input[type="checkbox"] {
	margin-top: 4px;		/* Adjust this value to push it down */
	vertical-align: middle; 
	cursor: pointer;
}

/* Hard red border for failed validation (used by JS) */
.error-highlight {
	border: 2px solid red !important;
}

/* --- Select dropdowns --- */
.attr_select {
	color: #5B6662;
	font-family: Arial, Helvetica, sans-serif;
	background: #fafafa;
	border: #d6d6d6 1px solid;
	text-align: left;
	/* --- Alignment Fixes --- */
	height: 24px !important;            /* Match this to your input height */
	line-height: 24px !important;       /* Centers text for some browsers */
	box-sizing: border-box !important;  /* Forces border/padding INSIDE the 24px */
	padding: 0 4px !important;          /* Keeps text from hitting the edge */
	vertical-align: middle !important;  /* Aligns it to the same baseline as inputs */
}

.attr_select:focus {
	border: #ccc 1px solid;
	background: #fcfcfc;
}

/* Right-aligned dropdown (e.g. currency selectors) */
.attr_select_right {
	color: #5B6662;
	font-family: Arial, Helvetica, sans-serif;
	background: #fafafa;
	border: #d6d6d6 1px solid;
	text-align: right;
	text-align-last: right;
}

/* RTL option text direction */
.option_right {
	direction: rtl;
}

/* Fieldset-scoped select */
.attr_select_fieldset {
	color: #5B6662;
	font-family: Arial, Helvetica, sans-serif;
	background: #fafafa;
	border: #d6d6d6 1px solid;
	text-align: left;
}

/* Inline-cell select (inside table cells, slightly smaller text) */
.attr_select_incell {
	color: #5B6662;
	background: #fafafa;
	border: #eee 1px solid;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 95%;
}

/* Specific override for multi-select boxes */
.attr_select_multi {
	/* Resetting the box constraints */
	height: auto !important; 
	line-height: normal !important;
	min-height: 100px; /* prevents it from being tiny if empty */

	/* Re-stating Font & Color for consistency */
	color: #5B6662 !important;
	font-size: 110%;

	/* Layout tweaks for lists */
	padding: 5px !important; 
	overflow-y: auto;
	background: #fafafa;
	border: #d6d6d6 1px solid;
}

/* Optional: Improve the look of the individual items inside the list */
.attr_select_multi option {
	padding: 4px;
	border-bottom: 1px solid #f0f0f0;
}

.attr_select_multi option:last-child {
	border-bottom: none;
}

/* --- Autocomplete / suggestion dropdown --- */
/* Container: hidden by default, positioned absolutely below the field */
.attr_suggestions {
	display: none;
	position: absolute;
	z-index: 1000;
	background: #fafafa;
	border: 1px solid #d6d6d6;
	border-radius: 4px;
	color: #595E61;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	padding: 0;
	margin-top: 2px;
	max-height: 250px;
	overflow-y: auto;
	min-width: 200px;
	white-space: nowrap;
	box-sizing: border-box;
}

/* Individual suggestion items */
.attr_suggestions .list-group-item {
	display: block;
	width: 100%;
	text-align: left;
	padding: 6px 10px;
	border: none;
	background-color: #fafafa;
	cursor: pointer;
	white-space: nowrap;
	color: #595E61;
}

.attr_suggestions .list-group-item:hover {
	background-color: #e8f0fe;
	color: #333;
}

.attr_suggestions .list-group-item + .list-group-item {
	border-top: 1px solid #e0e0e0;
}

/* --- Mandatory field asterisk marker --- */
.attr_mandatory {
	color: #d93025;
	font-weight: normal;
	margin-left: 3px;
	position: relative;
	top: 3px;
	display: inline-block;
	line-height: 1;
	vertical-align: baseline;
}

/* Align the dynamic Price Rule Offer Price Item marker with its help trigger. */
#divChangePriceItem .price_rule_offer_price_item_mandatory {
	top: 4px;
}

/* --- Form labels --- */

/* Standard right-aligned label */
.attr_label {
	color: #585858;
	font-family: Arial, Helvetica, sans-serif;
	height: 2em;
	padding-right: 10px;
	text-align: right;
}

/* Large right-aligned label (e.g. financial totals) */
.attr_label_big {
	color: #585858;
	font-family: Arial, Helvetica, sans-serif;
	height: 2em;
	font-size: 150%;
	padding-right: 30px;
	text-align: right;
}

/* Left-aligned label variant */
.attr_label_left {
	color: #585858;
	font-family: Arial, Helvetica, sans-serif;
	height: 2em;
	font-size: 110%;
	padding-right: 10px;
	text-align: left;
}

/* Compact small label */
.attr_label_small {
	color: #1E1C15;
	height: 2em;
	font-size: 100%;
}

/* Horizontal/inline bold label */
.attr_label_horizontal {
	color: #1E1C15;
	font-size: 115%;
	font-weight: bold;
}

/* Fieldset label (left-aligned, used inside fieldset layouts) */
.attr_label_fieldset {
	color: #585858;
	font-family: Arial, Helvetica, sans-serif;
	height: 2em;
	text-align: left;
	font-size: 110%;
}

/* Help-text label (centred, slightly larger) */
.attr_label_help {
	font-size: 14px;
	text-align: center;
}

/* --- Custom inputs (non-standard sizing/layout) --- */

/* Percentage-width inline input used in pricing/financial forms */
.attr_custom_input {
	color: #585858;
	font-family: Arial, Helvetica, sans-serif;
	height: 2em;
	font-size: 110%;
	text-align: right;
}

/* Narrow inline PM input (15% width, inline-block) */
.attr_custom_input_pm {
	display: inline-block;
	width: 15%;
	color: #585858;
	font-family: Arial, Helvetica, sans-serif;
	height: 2em;
	font-size: 110%;
}

/* Compact donation amount input */
.attr_custom_input_donation {
	color: #585858;
	font-family: Arial, Helvetica, sans-serif;
	padding-right: 2px;
}

/* --- Notification textarea (socket message area) --- */
#noti textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	background-color: transparent;
	border: none;
}

/* Expandable notess */
.note-expand {
	height: 22px;				/* Adjust this to match your other row fields exactly */
	padding: 2px 5px;
	line-height: 1.2;
	resize: none;
	overflow: hidden;
	transition: height 0.2s ease-in-out;
	vertical-align: middle;
	display: block;
	box-sizing: border-box;
}

/* Expanded state when clicked/focused */
.note-expand:focus {
	height: 150px;
	overflow-y: auto;
	outline: none;
	border-color: #66afe9;		/* Optional: adds a blue glow like standard inputs */
	box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
}

.input-row {
	display: flex;
	gap: 10px;				/* Adds spacing between the two input fields */
	align-items: start;		/* Keeps them aligned at the top */
	width: 100%;
}

/* Ensures each group takes up equal space */
.input-group {
	flex: 1;
	display: flex;
	flex-direction: column; 
}

#scorebarBorder {
	background: #333;
	border: 1px #000 solid;
	height: 14px;
	margin-bottom: 2px;
	width: 100px;
	position: relative; 			/* Create a boundary for the absolute elements inside */
	overflow: hidden;
}

#score {
	font-family: font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000;
	font-size: 10px; 				/* Specific size often works better for these tiny bars */
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	width: 100px;
	z-index: 10;
	line-height: 14px;				 /* Match the parent height to center text vertically */
}

#scorebar {
	background-image: url(../images/bg_strength_gradient.jpg);
	background-repeat: no-repeat;
	position: absolute;				/* Ensure the bar starts at the left */
	top: 0;
	left: 0;
	height: 100%;		 			/* Ensures the background image actually shows up */
	width: 100px;
	z-index: 5;						/* Sit behind the text but above the #333 background */
	background-position: 0 center;
	transition: width 0.3s ease;	/* Optional: Makes the bar grow smoothly */
}

/* Document layout control editabvle div */
.modern-editor-wrapper { background: #f9f9f9; border: 1px solid #ccc; font-family: sans-serif; padding: 15px; }
.merge-field-bar { background: #fff; border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; border-radius: 4px; }
.merge-btn { background: #eee; border: 1px solid #bbb; padding: 5px 10px; cursor: pointer; margin-right: 5px; font-size: 12px; border-radius: 3px; }
.merge-btn:hover { background: #e0e0e0; }
.toolbar-modern { background: #eee; border-bottom: 1px solid #ddd; padding: 5px; display: flex; gap: 5px; align-items: center; }
.toolbar-modern button { height: 30px; padding: 0 10px; background: #fff; border: 1px solid #ccc; cursor: pointer; }
#modernContentBody { min-height: 400px; padding: 20px; background: #fff; border: 1px solid #ddd; overflow-y: auto; }

/* The visual break in the editor */
.page-break-delimiter {
	border-top: 2px dotted #007bff; /* Use a distinct color like blue to show it's a system marker */
	height: 1px;
	margin: 30px 0;
	position: relative;
	cursor: default;
	user-select: none; /* Prevents users from typing 'inside' the line */
}

/* Label it so the user knows exactly what it is */
.page-break-delimiter::after {
	content: "PAGE BREAK (PRINT BOUNDARY)";
	position: absolute;
	top: -10px;
	right: 10px;
	background: #fff;
	padding: 0 5px;
	font-size: 10px;
	color: #007bff;
	font-weight: bold;
}

.bgt {
	border: 0.5px solid #d0d0d0;
	background-color: #f7f7f7;
}

/* Hide the label and dots, then force a break when printing to PDF */
@media print {
	.page-break-delimiter {
		border: none;
		page-break-after: always;
		break-after: page;
		margin: 0;
	}
	.page-break-delimiter::after { display: none; }

	/* Prevents a table row from being split across two pages */
	tr {
		page-break-inside: avoid !important;
		break-inside: avoid !important;
	}

	/* Keeps the table header at the top of the new page if a table spans multiple pages */
	thead {
		display: table-header-group;
	}
}

.enablejs-list
{
	width: 450px;
	margin: 0 auto 20px auto;
	padding-left: 20px;
	text-align: left;
	list-style-type: disc;
}

.enablejs-list li
{
	margin: 4px 0;
	text-align: left;
}

.attr_readonly
{
	background:#f5f5f5 !important;
	color:#555 !important;
	border:1px solid #d0d0d0 !important;

	-webkit-appearance:none !important;
	-moz-appearance:none !important;
	appearance:none !important;

	box-shadow:none !important;
	outline:none !important;
}

.attr_preformatted
{
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-family: Consolas, "Courier New", monospace;
	font-size: 12px;
	line-height: 1.45;
	height: 200px;
	max-height: 600px;
	overflow-y: auto;
	resize: vertical;
}

.attr_preformatted_large
{
	margin: 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-family: Consolas, "Courier New", monospace;
	font-size: 12px;
	line-height: 1.45;
	height: 600px;
	width: 800px;
	max-height: 600px;
	overflow-y: auto;
	resize: vertical;
}

.translation_result
{
	display: block;
	margin-bottom: 4px;
	white-space: pre-wrap;
}

.translation_result_success
{
	color: #38761d;
	font-weight: bold;
}

.translation_result_warning
{
	color: #b45f06;
	font-weight: bold;
}

.translation_result_error
{
	color: #cc0000;
	font-weight: bold;
}


/* =============================================================================
   5. BUTTONS & ACTION CONTROLS
   All clickable button styles: search, lookup, save, seat, input buttons,
   and the Metro-style "what's on" tiles are in section 10/11.
   ============================================================================= */

/* --- Search button (blue, compact, uppercase) --- */
a.button_search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 20px;
	padding: 0 12px;
	box-sizing: border-box;
	background-color: #007bb5;
	border: 1px solid #006696;
	border-radius: 3px;
	color: #FFFFFF;
	font-family: font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	vertical-align: middle;
	line-height: 1.8; /* Add this to prevent inherited line spacing from pushing text down */
}

.button_search:hover {
	background-color: #005a84;
	color: #FFFFFF;
	text-decoration: none;
}

/* --- Lookup button (neutral grey, same height as inputs) --- */
/* Native file-input text (for example, "No file selected.") follows form typography. */
input.button_lookup[type="file"] {
	margin-top: 4px !important;
	color: #495057;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 20px;
}

a.button_lookup,
input.button_lookup::file-selector-button,
input.button_lookup::-webkit-file-upload-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	/* Force alignment to the top edge of the inputs */
	vertical-align: top !important; 

	/* Ensure height is identical to your select/input height */
	height: 20px !important; 
	line-height: 1 !important; 

	box-sizing: border-box !important;

	/* Keep your existing colors and styles  */
	background-color: #f8f9fa;
	border: 1px solid #ced4da;
	color: #495057;
	font-family: font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: 500;
	text-decoration: none;
	padding: 0 10px;
	min-width: 55px;
	border-radius: 3px;
	transition: all 0.1s ease;
	cursor: pointer;
}

a.button_lookup:hover,
input.button_lookup:hover::file-selector-button,
input.button_lookup:hover::-webkit-file-upload-button {
	background-color: #e9ecef;
	border-color: #adb5bd;
	color: #212529;
}

/* --- Provider template check indicator --- */
.template_check_spinner {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-left: 4px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	vertical-align: -1px;
	animation: templateCheckSpin .75s linear infinite;
}

@keyframes templateCheckSpin {
	to { transform: rotate(360deg); }
}

/* --- Product content LLM provider selector --- */
select.attr_select.product_content_provider {
	height: 20px !important;
	line-height: 18px !important;
	box-sizing: border-box !important;
	padding: 0 4px !important;
	vertical-align: top !important;
}

/* --- Colour-variant lookup buttons (shared base) --- */
a.button_lookup_green,
a.button_lookup_blue,
a.button_lookup_red,
a.button_lookup_orange {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 20px;
	padding: 0 10px;
	box-sizing: border-box;
	font-family: font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	text-decoration: none;
	border-radius: 3px;
	min-width: 55px;
	cursor: pointer;
	vertical-align: middle;
	transition: all 0.1s ease-in-out;
}

a.button_lookup_green  { background-color: #ebfbee; border: 1px solid #b2f2bb; color: #2b8a3e; }
a.button_lookup_green:hover { background-color: #2b8a3e; border-color: #2b8a3e; color: #ffffff; }

a.button_lookup_blue   { background-color: #e7f5ff; border: 1px solid #a5d8ff; color: #1864ab; }
a.button_lookup_blue:hover  { background-color: #1864ab; border-color: #1864ab; color: #ffffff; }

a.button_lookup_red	{ background-color: #fff5f5; border: 1px solid #ffc9c9; color: #c92a2a; }
a.button_lookup_red:hover   { background-color: #c92a2a; border-color: #c92a2a; color: #ffffff; }

a.button_lookup_orange { background-color: #fff9db; border: 1px solid #ffec99; color: #e67700; }
a.button_lookup_orange:hover { background-color: #e67700; border-color: #e67700; color: #ffffff; }

/* Shared hover lift effect for colour variant buttons */
a.button_lookup_green:hover,
a.button_lookup_blue:hover,
a.button_lookup_red:hover,
a.button_lookup_orange:hover {
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* --- Calculate button (utility/logic action) --- */
a.button_lookup_calculate {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #f8f9fa;
	border: 1px solid #ced4da;
	color: #495057;
	font-family: font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
	height: 20px;
	padding: 0 10px;
	box-sizing: border-box;
	min-width: 55px;
	border-radius: 3px;
	margin-left: 7px;
	margin-top: 2px;
	transition: all 0.1s ease;
	cursor: pointer;
	vertical-align: middle;
}
a.button_lookup_calculate:hover {
	background-color: #e7f5ff;
	border-color: #3E78B3;
	color: #3E78B3;
	text-decoration: none;
}

/* --- Table cell buttons (basket.asp, compact inline) --- */
td.itembutton {
	border: none;
	padding: 4px 3px;
}

a.button_lookup_table {
	padding: 3px;
	text-decoration: none;
	font-size: 80%;
	font-weight: bold;
	color: #555555;
	background-color: #DDDDDD;
	border: 0.5px solid #AADBE9;
	font-family: Arial, Helvetica, sans-serif;
	min-width: 50px;
}

a.button_lookup_table:not(.disabled):hover {
	text-decoration: none;
	font-size: 80%;
	font-weight: bold;
	color: #3E78B3;
	background-color: #d8e3ee;
	font-family: Arial, Helvetica, sans-serif;
	min-width: 50px;
}

a.button_lookup_table.disabled {
	opacity: 0.7;
	background-color: #DDDDDD;
	border: 0.5px solid #DDDDDD;
	cursor: default;
	min-width: 50px;
}

/* --- Seat plan cell button (product.asp) --- */
a.button_seat {
	padding: 3px 11px;
	text-decoration: none;
	font-size: 80%;
	font-weight: bold;
	color: #555555;
	background-color: #DDDDDD;
	font-family: Arial, Helvetica, sans-serif;
}
a.button_seat:hover {
	color: #585858;
	background-color: #d8e3ee;
}

/* --- Command button wrappers (page footer action bars) --- */
.buttonwrapper {
	overflow: hidden;
	float: right;
	padding-bottom: 10px;
	padding-right: 15px;
	padding-top: 5px;
}

.buttonwrappernew {
	overflow: hidden;
	float: right;
	padding-bottom: 10px;
	padding-top: 5px;
}

.leftbuttonwrapper {
	overflow: hidden;
	float: left;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-top: 5px;
}

/* --- Standard action buttons (used in forms) --- */
.action_button {
	padding: 3px 10px;
	margin: 2px 0px 2px 4px;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #555;
	display: block;
	font-size: 13px;
	border: 1px solid #ccc;
	background-color: #FFFFFF;
	cursor: pointer;
	text-align: center;
	float: left;
}

/* Lease preview footer actions share the standard right-aligned action bar. */
.buttonwrapper.lease-preview-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.buttonwrapper.lease-preview-actions .action_button {
	float: none;
}

/* Lease preview form action: match the adjacent anchor-button size and flow. */
form.lease-docusign-preparation {
	float: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.lease-preview-attachments-section {
	clear: both;
}

.lease-preview-attachments-table {
	border-collapse: collapse;
	text-align: left;
}

.lease-preview-attachments-table td {
	text-align: left;
}

.lease-preview-attachments-table tr:nth-child(odd) td:not(.title) {
	background-color: #f6faff;
}

.lease-preview-attachments-table tr:nth-child(even) td:not(.title) {
	background-color: #ffffff;
}

.lease-preview-attachment-actions {
	margin-top: 14px;
}

form.lease-docusign-bcc {
	float: none;
	margin: 0;
	padding: 0;
}

.lease-docusign-section {
	box-sizing: border-box;
	margin: 14px 0;
	padding: 10px;
}

.lease-docusign-section .attr_tablehead {
	margin: 0 0 6px;
}

.lease-docusign-section p {
	margin: 0 0 10px;
}

.lease-docusign-recipients-section {
	background-color: #edf7fc;
	border: 1px solid #8bbbd8;
}

.lease-docusign-recipients-table {
	border-collapse: collapse;
}

.lease-docusign-recipients-table tr:nth-child(even) td {
	background-color: #ffffff;
}

.lease-docusign-bcc-section {
	margin-top: 18px;
	background-color: #fff8dd;
	border: 2px solid #d7a000;
}

.lease-docusign-documents-section {
	background-color: #eff8ed;
	border: 1px solid #9fc894;
}

.lease-docusign-bcc-option {
	color: #555555;
	display: block;
	margin: 0 0 5px 0;
}

form.lease-docusign-preparation button.action_button,
form.lease-docusign-bcc button.action_button {
	appearance: none;
	-webkit-appearance: none;
	line-height: 15px;
}

form.lease-docusign-preparation button.action_button,
form.lease-docusign-bcc button.action_button {
	float: none;
}

/* Lease DocuSign page: retain the page action bar immediately above the site footer. */
.lease-docusign-page {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 105px);
}

.lease-docusign-page > .lease-page-content {
	flex: 1 0 auto;
}

.lease-docusign-page-footer {
	margin-top: auto;
}

a.action_button.group-btn {
	display: block !important;    /* Stack vertically */
	float: none !important;      /* Kill inherited floats */
	text-align: center;

	/* Center and constrain */
	width: 85% !important;        /* Narrower than the popup */
	max-width: 200px !important;  /* Prevents it stretching on wide screens */
	margin: 10px auto !important; /* 10px spacing top/bottom, centered left/right */

	/* HEIGHT & SPACING */
	height: 36px !important;      /* Slightly shorter for a cleaner look */
	line-height: 36px !important; /* Match height to center text vertically */

	/* STYLING */
	font-size: 100%;
	background-color: #ffffff;
	border: 1px solid #3ca2d7; 
	color: #3ca2d7;
	border-radius: 4px;           /* Subtle rounding for a modern feel */
	text-decoration: none;
	box-sizing: border-box;       /* Keeps padding from breaking width */
}

a:hover.action_button {
	background: #f1f1f1;
	text-decoration: none;
	color: #555;
}

/* Save action button - green tinted for emphasis */
.action_button_save {
	padding: 3px 10px;
	margin: 2px 0px 2px 4px;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #2f6627;
	display: block;
	font-size: 13px;
	border: 1px solid #4CAF50;
	background-color: #e8f5e9;
	cursor: pointer;
	text-align: center;
	float: left;
	transition: background-color 0.2s, border-color 0.2s;
}
.action_button_save:hover, a:hover.action_button_save {
	background-color: #c8e6c9;
	border-color: #388e3c;
	color: #1b5e20;
	text-decoration: none;
}

/* Save action button - green tinted for emphasis */
.action_button_add {
	padding: 3px 10px;
	margin: 2px 0px 2px 4px;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #0d47a1;
	display: block;
	font-size: 13px;
	border: 1px solid #2196F3;
	background-color: #e3f2fd;
	cursor: pointer;
	text-align: center;
	float: left;
	transition: background-color 0.2s, border-color 0.2s;
}

.action_button_add:hover, a:hover.action_button_add {
	background-color: #bbdefb;
	border-color: #1976d2;
	color: #0d47a1;
	text-decoration: none;
}

/* --- "More" button on documentedit.asp --- */
.inputbutton {
	border: none;
	padding-left: 3px;
	padding-bottom: 4px;
	padding-top: 4px;
	text-decoration: none;
	font-size: 80%;
	font-weight: bold;
	color: #555555;
	background-color: #DDDDDD;
	font-family: Arial, Helvetica, sans-serif;
}

/* Cancel button border (used to add a border to plain cancel links) */
.cancel_button_border {
	border: 1px solid;
}

/* Upselling header area */
.upsellingHeader {
	background-color: #EDEFF4;
	border: 1px solid #D8DFEA;
	font-weight: bold;
}

/********** Button for two column picklists ***********/
.button_picklist {
	text-decoration: none;
	font-size: 110%;
	background-color: #DDDDDD;
	color: #1e3a8a;					/* Dark Blue Chevron */
	font-weight: bold;				/* Makes the chevron stand out */
	cursor: pointer;
	user-select: none;				/* Prevents highlighting the > on double-click */
	transition: background-color 0.15s ease;
}

.button_picklist:hover {
	background-color: #BBBBBB;
	text-decoration: none;
	/* Optional: change chevron color on hover */
	color: #000000;
}

.help-trigger {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 14px;
	color: #6b7280;
	padding: 0 4px;
	line-height: 1;
}

.help-trigger:hover {
	color: #2563eb;
}


/* =============================================================================
   6. TABLES & DATA GRIDS
   All table, tr, td styles including alternating rows and specialised columns.
   ============================================================================= */

table {
	border-spacing: 0px;
	padding: 0px;
	width: 100%;
}

/* Empty hook for future tablelist styling */
table.tablelist {}

/* Scheduled task columns keep actions compact and give the task type the remaining width. */
table.task_list .task_type_column {
	width: auto;
}

table.task_list .task_action_column,
table.task_list .task_action_header {
	width: 1%;
	white-space: nowrap;
}

/* --- Column header cells --- */

/* Dark grey title cell (standard table headers) */
td.title, 
th.title {
	border-right: #f3f1b9 1px solid;
	padding: 4px;
	font-weight: bold;
	font-size: 110%;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	vertical-align: middle;
	text-align: left;
	background: #595e61;
}

/* Centred title cell variant */
td.titlecentre {
	border-right: #FCEAEA 1px solid;
	padding: 4px;
	font-weight: bold;
	font-size: 110%;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #595E61;
	vertical-align: middle;
	text-align: center;
}

/* Sortable/sorted column header (highlighted blue) */
td.titlesortcolumn {
	border: #FCEAEA 1px solid;
	padding: 4px;
	font-weight: bold;
	font-size: 110%;
	color: #DDDDDD;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #d8e3ee;
	text-decoration: underline;
}

/* Generic divtitle (used in div-based table headers) */
.divtitle {
	border-right: #f3f1b9 1px solid;
	padding: 4px;
	font-weight: bold;
	font-size: 110%;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	vertical-align: middle;
	text-align: left;
	background: #595e61;
}

/* --- Data rows --- */
tr.item, tr.itemstock, tr.custom { background-color: transparent; }

/* Standard data cell */
td.item {
	border-right: #dadada 1px solid;
	border-top: #dadada 1px solid;
	border-bottom: #dadada 1px solid;
	font-size: 12px;
	color: #555555;
	padding: 4px;
	font-family: Arial, Helvetica, sans-serif;
}

/* Custom black-bordered cell */
td.custom {
	border: #000000 1px solid;
	font-size: 12px;
	color: #555555;
	padding: 4px;
	font-family: Arial, Helvetica, sans-serif;
}

/* Red text cell (error/warning emphasis) */
td.itemRedText {
	border: #f3f1b9 1px solid;
	font-weight: bold;
	font-size: 12px;
	color: red;
	padding: 4px;
	font-family: Arial, Helvetica, sans-serif;
}

/* Left-border cell */
td.itemleft {
	border: #dadada 1px solid;
	font-size: 12px;
	color: #555555;
	padding: 4px;
	font-family: Arial, Helvetica, sans-serif;
}

/* Right-aligned cell */
td.itemright {
	border: #dadada 1px solid;
	font-size: 12px;
	color: #555555;
	padding: 4px;
	font-family: Arial, Helvetica, sans-serif;
	text-align: right;
}

/* Inside-commission highlighted cell */
td.item_insidecommission {
	border-right: #fceaea 1px solid;
	border-top: #fceaea 1px solid;
	border-bottom: #fceaea 1px solid;
	border-left: #fceaea 1px;
	font-size: 110%;
	color: #F1D042;
	padding: 4px;
	font-family: Arial, Helvetica, sans-serif;
}

/* Alternating (zebra) row and cell background */
tr.altitem, tr.ddpayrow { background-color: #ebf3ff; }

td.altitem {
	border-right: #dadada 1px solid;
	font-size: 12px;
	color: #555555;
	padding: 4px;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #ebf3ff;
}

td.altitemRedText {
	border-right: #dadada 1px solid;
	font-weight: bold;
	font-size: 12px;
	color: red;
	padding: 4px;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #ebf3ff;
}

td.altitemleft {
	border-right: #dadada 1px solid;
	border-left: #dadada 1px;
	font-size: 12px;
	color: #555555;
	padding: 4px;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #ebf3ff;
}

td.altitemright {
	border-right: #dadada 1px solid;
	border-left: #dadada 1px;
	font-size: 12px;
	color: #555555;
	padding: 4px;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #ebf3ff;
	text-align: right;
}

td.altitem_insidecommission {
	border-right: #FCEAEA 1px solid;
	border-top: #FCEAEA 1px;
	border-left: #FCEAEA 1px;
	font-size: 110%;
	color: #F1D042;
	padding: 4px;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #FCEAEA;
}

/* --- Row hover highlight (overrides inline colour-coded status colours) --- */
tr.item:hover td, tr.altitem:hover td, td.element,
tr.item:hover a,  tr.altitem:hover a,
tr.item:hover span, tr.altitem:hover span {
	background-color: #3d80df;
	color: #ffffff !important;
}

/* Base styling for the dropdowns */
.filter-dropdown {
	display: block;
	width: 100%;
	margin-top: 5px;
	font-weight: normal;
	font-size: 0.85rem;
	color: #333;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 2px;
	box-sizing: border-box; /* Critical for keeping widths exact */
	text-overflow: ellipsis;
}

/* Small version */
.fd-small {
	max-width: 170px;
}

/* Large version */
.fd-large {
	max-width: 350px;
}

/* Keeps the header text from wrapping while the dropdown sits below it */
th.title {
	white-space: nowrap;
	vertical-align: top;
	padding-bottom: 8px;
}

/* --- iTunes-style alternating cell backgrounds (used in div-based grids) --- */
.altitembgcolor {
	background-color: #ebf3ff;
	border-right: #f3f1b9 1px solid;
	padding: 4px;
}
.itembgcolor {
	background-color: transparent;
	border-right: #f3f1b9 1px solid;
	padding: 4px;
}

/* --- Column header class (dark background, gold border) --- */
.attr_columntitle {
	border: #d6b58c 1px solid;
	font-weight: bold;
	color: white;
	background-color: #444242;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 95%;
}

/* --- Result column (search results grid) --- */
.result-column {
	font-size: 12px;
	color: #555555;
	padding: 4px;
	font-family: Arial, Helvetica, sans-serif;
}

/* --- Price chart table --- */
table.pricechart {
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
.pricechart_col_hd			  { border: black 1px inset; background: #b6c8d4; }
.pricechart_row_hd			  { border: black 1px inset; background: #ebf3ff; width: 200px; height: 20px; vertical-align: middle; }
.pricechart_row_arrow_hd		{ border: black 1px inset; width: 20px; }
.pricechart_cell_deactivated	{ border: black 1px inset; background: #dcdcdc; }
.pricechart_cell_active		 { border: black 1px inset; background: #ffffff; vertical-align: middle; }
.pricechart_cell_active_centre  { border: black 1px inset; background: #ffffff; vertical-align: middle; text-align: center; }
.pricechart_cell_active_centre img { vertical-align: middle; margin-top: -1px; }

#divPriceChart { overflow-x: auto; }

/* --- Context-menu for right-click actions on rows --- */
#contextMenu {
	background: #F9F9F9;
	box-shadow: 0 0 12px rgba(0,0,0,.3);
	border: 1px solid #ccc;
	display: none;
	position: absolute;
	top: 0; left: 0;
	list-style: none;
	margin: 0; padding: 0;
}
#contextMenu li		   { position: relative; }
#contextMenu li:hover	 { background: #444; }
#contextMenu a			{ color: #444; display: inline-block; padding: 8px; text-decoration: none; width: 85%; }
#contextMenu li:hover a   { color: #f9f9f9; }

/* --- Quick contact / customer ID font tweak --- */
#Customer { font-size: 11.5px; }

.compliance-table {
	width: 90%;
	border-collapse: collapse;
}

.compliance-table td,
.compliance-table th {
	padding: 5px 8px;
	vertical-align: top;
}


/* =============================================================================
   7. NAVIGATION - TOP MENU
   The horizontal flyout navigation bar and all its dropdown items.
   ============================================================================= */

/* The Main Container */
.change-usergroup-content {
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.2);
	padding: 25px;
	width: 350px;
	position: fixed; /* Or absolute depending on your parent */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid #c8d1d9;
	z-index: 2000;
}

/* Header Text */
.popup-header {
	color: #3ca2d7;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 110%;
	text-align: center;
	margin-bottom: 20px;
	line-height: 1.4;
}

/* Close 'X' Button */
.popup-close {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 24px;
	color: #999;
	cursor: pointer;
	line-height: 1;
}

.popup-close:hover { color: #333; }

/* The main container pinned to the right 50% */
.header-utility-wrapper {
	float: right !important;
	width: 50% !important;
	text-align: right !important;
	padding-top: 10px;
}

/* Forces the search items to stay in a single horizontal line */
.utility-row {
	margin-bottom: 8px;
	white-space: nowrap; /* Prevents items from wrapping to a new line */
}

.help-icon-wrap, 
.search-select, 
.search-group {
	display: inline-block !important;
	vertical-align: middle;
	float: none !important; /* Kills the stacking */
}

/* The Search Input & Go Button */
.search-group {
	border: 1px solid #ccc;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}

.button_search {
	display: inline-block !important;
	background: #444;
	color: #fff !important;
	padding: 0 12px;
	height: 24px;
	line-height: 24px;
	text-decoration: none;
	font-size: 11px;
	vertical-align: top;
}

/* User Info Styling */
.user-info-row {
	line-height: 2;
}

.user-group-subtext {
	font-size: 1.0em;
	color: #666;
}

/* Small label shown next to user groups in the header bar */
.user-group-text {
	color: #666;
	margin-right: 8px;
	font-size: 1em;
	display: inline-block;
	width: 100%;
	text-align: right !important;
}

/* Prominent reminder of the database and user currently in use. */
.database-context {
	display: inline-block;
	padding: 3px 8px;
	border: 1px solid #c47b00;
	border-radius: 3px;
	background: #fff3cd;
	color: #6b4300;
	font-size: 1.15em;
	font-weight: 600;
	line-height: 1.35;
}

.database-context strong {
	color: #402800;
}

/* --------------------------------- */
/* --- Top menu container sizing --- */
/* --------------------------------- */
.menu {
	width: 100%;
	margin: 0 0 5px 0; /* Top: 0, Right: 0, Bottom: 5px, Left: 0 */
	background-color: #595e61;
	height: 35px;
	display: block;
	float: left;
	border-top: 1px solid #c8d1d9; 
	position: relative;
	z-index: 1000;
	box-sizing: border-box; /* Ensures the border doesn't push it wider than 99% */
}

.menu_button_size { width: 11.1%; }

/* Top-level menu item links */
.menu ul li a,
.menu ul li a:visited {
	display: block;
	text-decoration: none;
	height: 30px;
	text-align: center;
	line-height: 30px;
	font-size: 115%;
	overflow: hidden;
	color: #ebf0f5;
	border: #c8ced0 solid 1px;
	background: linear-gradient(to bottom, #69a4de 0%, #4491d7 100%);
	width: 100%; /* Forces the list to span the full 99% container */
}

/* Top-level items with a submenu */
.menu ul li a.containsSubMenu,
.menu ul li a:visited.containsSubMenu { color: #ebf0f5; }

.menu ul  { padding: 0; margin: 0; list-style: none; }
.menu ul li { float: left; position: relative; }
.menu ul li ul { display: none; }

/* Top-level hover state */
.menu ul li:hover a {
	color: #ebf0f5;
	background: #356aa0;
}

/* Show submenu on hover */
.menu ul li:hover ul {
	display: block;
	position: absolute;
	top: 31px;
	left: 0;
	margin: 0;
	background: #316291;	/* Solid blue - prevents see-through behind icon items */
	width: 180px;
}

/* Submenu indent */
.menu ul li:hover ul li {  float: none; padding-left: 1px; }
.menu ul li:hover ul li:hover { background: #ccc; }

/* --- Dropdown submenu item links (generic) --- */
.menu ul li:hover ul li a {
	background: #DDDDDD;
	color: #d8e3ee;
	font-weight: normal;
	font-size: 115%;
	text-align: left;
	padding: 2px 2px 0px 25px;
	border: none;
}

.menu ul li:hover ul li a.containsData { color: #00008B; font-weight: bold; }
.menu ul li:hover ul li a:hover {
	background: #ccc;
	color: #d8e3ee;
	font-weight: normal;
	font-size: 115%;
	text-align: left;
	padding: 2px 2px 0px 25px;
}

/* --- Left-side flyout sub-submenu --- */
.menu ul :hover ul ul.leftsubmenu {
	visibility: hidden;
	display: none;
	position: absolute;
	top: 0; left: -180px;
	width: 150px !important;
}

.menu ul :hover ul :hover ul.leftsubmenu {
	visibility: visible;
	display: block;
	position: absolute;
	top: 0; left: -180px;
	width: 150px !important;
	margin: 0;
}

/* --- Common menu item width classes --- */
.commonMenuItem {
	text-indent: 8px;
	color: #d8e3ee;
	font-weight: normal;
	font-size: 112%;
	padding-top: 2px;
	width: 170px;
}

.commonMenuSubItem1 {
	text-indent: 8px;
	color: #d8e3ee;
	font-weight: normal;
	font-size: 112%;
	padding-top: 2px;
	width: 150px;
}

/* --- Individual dropdown menu items with icon backgrounds ---
   Background colour and positioning is handled by the generic submenu rules
   above. These rules assign ONLY the icon image per item ID.
   Normal state: #316291, hover: #3972a6, sub-items: #4684A1 / #628DB4.
   All icons sit at background-position: 3px center left, no-repeat. */

/* Shared properties for all icon-bearing menu links */
.menu ul li:hover ul li a[id^="menuItem"] {
	background-color: #316291;
	background-repeat: no-repeat;
	background-position: 3px center;
	border-top: 1px solid #51769e;
	padding-left: 28px; /* indent text clear of the icon */
}

.menu ul li:hover ul li a[id^="menuItem"]:hover {
	background-color: #3972a6;
}

/* Sub-items (deeper level) get a slightly lighter blue */
.menu ul li:hover ul li a[id*="_subitem"] {
	background-color: #4684A1;
	border-top-color: #7398BF;
}
.menu ul li:hover ul li a[id*="_subitem"]:hover {
	background-color: #628DB4;
}

/* --- Individual icon assignments (background-image only) --- */
#menuItemBanking  { background-image: url('../icons/Banks.png') !important; }
	#menuItemBankingBranches { background-image: url('../icons/branches.png') !important; }
	#menuItemBankingConsents { background-image: url('../icons/consents.png') !important; }
	#menuItemBankingTransactions { background-image: url('../icons/transactions.png') !important; }
	#menuItemBankingInstructionLog { background-image: url('../icons/instruction_log.png') !important; }
#menuItemBlacklists  { background-image: url('../icons/Blacklist.png') !important; }
#menuItemCountries  { background-image: url('../icons/Countries.png') !important; }
#menuItemDemographics  { background-image: url('../icons/demographic.png') !important; }
#menuItemDespatchMethods  { background-image: url('../icons/Dispatch Method.png') !important; }
#menuItemExchangeRates  { background-image: url('../icons/Exchange Rates.png') !important; }
#menuItemFeeManagement  { background-image: url('../icons/Fees.png') !important; }
	#menuItemFees { background-image: url('../icons/Fees.png') !important; }
	#menuItemFeeGroups { background-image: url('../icons/feegroup.png') !important; }
#menuItemMarketing  { background-image: url('../icons/marketing.png') !important; }
    #menuItemMarketingCampaigns  { background-image: url('../icons/marketing_campaign.png') !important; }
    #menuItemMarketingCreatives  { background-image: url('../icons/marketing_creative.png') !important; }
    #menuItemMarketingPlacements  { background-image: url('../icons/marketing_placement.png') !important; }
    #menuItemMarketingChannels  { background-image: url('../icons/marketing_channel.png') !important; }
    #menuItemMarketingPerformance  { background-image: url('../icons/marketing_performance.png') !important; }
    #menuItemMarketingExecution  { background-image: url('../icons/marketing_execution.png') !important; }
#menuItemPayments  { background-image: url('../icons/Payment Codes.png') !important; }
	#menuItemMandateCodes { background-image: url('../icons/Payment Codes.png') !important; }
	#menuItemServiceProviders { background-image: url('../icons/Payment Gateway.png') !important; }
	#menuItemPaymentMethods { background-image: url('../icons/Payment Methods.png') !important; }
	#menuItemMandateOptions { background-image: url('../icons/clock.png') !important; }
	#menuItemPaymentProcessRules { background-image: url('../icons/paymentprocessrule.png') !important; }
#menuItemPricing { background-image: url('../icons/Price.png') !important; }
	#menuItemPriceBands { background-image: url('../icons/Price Bands.png') !important; }
	#menuItemPriceCharts { background-image: url('../icons/treasure.png') !important; }
	#menuItemPriceGroups { background-image: url('../icons/Price Groups.png') !important; }
	#menuItemPriceRules { background-image: url('../icons/pricerules.png') !important; }
	#menuItemPriceRuleOffers { background-image: url('../icons/offer3.png') !important; }
	#menuItemPrices { background-image: url('../icons/Price.png') !important; }
	#menuItemPriceCapLimits { background-image: url('../icons/100mph.png') !important; }
	#menuItemPromoCodes { background-image: url('../icons/offer2.png') !important; }
#menuItemProductLocations { background-image: url('../icons/Product Locations.png') !important; }
#menuItemRegions { background-image: url('../icons/Regions.png') !important; }
#menuItemTaxRates { background-image: url('../icons/Tax Rates.png') !important; }
#menuItemCacheControl { background-image: url('../icons/Cache Control.png') !important; }
#menuItemConnections { background-image: url('../icons/Connection.png') !important; }
#menuItemConfiguration { background-image: url('../icons/Configuration.png') !important; }
#menuItemLookups { background-image: url('../icons/Lookups.png') !important; }
#menuItemStatuses { background-image: url('../icons/Statuses.png') !important; }
#menuItemStatusAudit { background-image: url('../icons/Status Audit.png') !important; }
#menuItemUserManagement { background-image: url('../icons/User Contact.png') !important; }
	#menuItemUsers { background-image: url('../icons/User Contact.png') !important; }
	#menuItemUserGroups { background-image: url('../icons/User Group.png') !important; }
	#menuItemGroupCollections { background-image: url('../icons/usergroup-collection.png') !important; }
#menuItemUtilities { background-image: url('../icons/Utilities.png') !important; }
#menuItemAssets { background-image: url('../icons/Devices.png') !important; }
#menuItemCreateEvent { background-image: url('../icons/Event2.png') !important; }
#menuItemCreateDonation { background-image: url('../icons/Donation.png') !important; }
#menuItemCreateMembership { background-image: url('../icons/Membership.png') !important; }
#menuItemCreateMerchandise { background-image: url('../icons/Merchandise.png') !important; }
#menuItemInventoryBuilder { background-image: url('../icons/Event Builder.png') !important; }
#menuItemGiftAidCharities { background-image: url('../icons/Gift Aid Charities.png') !important; }
#menuItemDocuments { background-image: url('../icons/document-layout.png') !important; }
	#menuItemDocumentLayouts { background-image: url('../icons/document-layout.png') !important; }
	#menuItemDocumentSequences { background-image: url('../icons/document-sequence.png') !important; }
	#menuItemDocumentRules { background-image: url('../icons/documentrule.png') !important; }
	#menuItemWebContent { background-image: url('../icons/webcopy.png') !important; }
#menuItemReservedSeating { background-image: url('../icons/reserved-seating.png') !important; }
	#menuItemReservedSeatingLayout { background-image: url('../icons/reserved-seating.png') !important; }
	#menuItemLayoutPlanRules { background-image: url('../icons/seat.png') !important; }
#menuItemBatches { background-image: url('../icons/batch.png') !important; }
#menuItemBatchTicketing { background-image: url('../icons/printer.png') !important; }
#menuItemBatchRefunds { background-image: url('../icons/Payment Methods.png') !important; }
#menuItemCreateInvoices { background-image: url('../icons/invoice2.png') !important; }
#menuItemProcessCompliance { background-image: url('../icons/process-compliance.png') !important; }
	#menuItemProcessComplianceReminders { background-image: url('../icons/process-generate-compliance-reminders.png') !important; }
#menuItemProcessFinancial { background-image: url('../icons/process-financial.png') !important; }
	#menuItemProcessBankPayments { background-image: url('../icons/process-open-banking-payment-instructions.png') !important; }
	#menuItemProcessRentRemittances { background-image: url('../icons/process-rent-remittances.png') !important; }
#menuItemProcessInvoicing { background-image: url('../icons/process-invoicing.png') !important; }
	#menuItemProcessAgentInvoices { background-image: url('../icons/process-agent-invoices.png') !important; }
	#menuItemProcessOwnerInvoices { background-image: url('../icons/process-owner-invoices.png') !important; }
#menuItemProcessMarketing { background-image: url('../icons/process-marketing.png') !important; }
	#menuItemProcessAutomatedAdvertising { background-image: url('../icons/process-automated-advertising.png') !important; }
	#menuItemProcessMarketingReminders { background-image: url('../icons/process-marketing-reminders.png') !important; }
#menuItemProcessOpenBanking { background-image: url('../icons/process-open-banking.png') !important; }
	#menuItemProcessExpiringConsents { background-image: url('../icons/process-notify-expiring-consents.png') !important; }
	#menuItemProcessBankTransactions { background-image: url('../icons/process-poll-bank-transactions.png') !important; }
	#menuItemProcessInstitutionBranchData { background-image: url('../icons/process-refresh-institution-branch-data.png') !important; }
#menuItemProcessPeriodEnd { background-image: url('../icons/process-period-end.png') !important; }
	#menuItemProcessFinancialYearEnd { background-image: url('../icons/process-financial-year-end.png') !important; }
	#menuItemProcessMonthlyOwnerStatements { background-image: url('../icons/process-monthly-owner-statements.png') !important; }
#menuItemCustomReports { background-image: url('../icons/custom-reports.png') !important; }
#menuItemScheduledReports { background-image: url('../icons/schedule-reports.png') !important; }
#menuItemCreateVoucher { background-image: url('../icons/Payment Methods.png') !important; }
#menuItemProcessDefinitions { background-image: url('../icons/process-definitions.png') !important; }
#menuItemSavedProcesses { background-image: url('../icons/saved-processes.png') !important; }
#menuItemScheduledTasks { background-image: url('../icons/scheduled-tasks.png') !important; }
#menuItemPriceAudit { background-image: url('../icons/priceaudit.png') !important; }
#menuItemAccessControl { background-image: url('../icons/Access.png') !important; }
#menuItemInventoryEditor { background-image: url('../icons/inventorybuildereditor.png') !important; }
#menuItemWaitingRoom { background-image: url('../icons/waitroom.png') !important; }
#menuItemProductDashboard { background-image: url('../icons/batch.png') !important; }
#menuItemQuickContactCreation { background-image: url('../icons/quickcontact.png') !important; }
#menuItemMessages { background-image: url('../icons/message.png') !important; }
#menuItemCreateHotel { background-image: url('../icons/hotel.png') !important; }
#menuItemCreateRestaurantBar { background-image: url('../icons/coffee.png') !important; }
#menuItemTracking { background-image: url('../icons/magnify.png') !important; }
#menuItemExternalSystems { background-image: url('../icons/external_system.png') !important; }
#menuItemPostcodeGroups { background-image: url('../icons/postbox.png') !important; }
#menuItemMyDetailsSummary { background-image: url('../icons/quickcontact.png') !important; }
#menuItemMyOrders { background-image: url('../icons/Statuses.png') !important; }
#menuItemReportGraphs { background-image: url('../icons/chart.png') !important; }
#menuItemDirectDebitExtract { background-image: url('../icons/direct-debit.png') !important; }
#menuItemGiftAidExtract { background-image: url('../icons/Gift Aid Charities.png') !important; }
#menuItemSeasonTicketRenewal { background-image: url('../icons/season-ticket.png') !important; }
#menuItemCreateNewContact { background-image: url('../icons/contact_new.png') !important; }
#menuItemFastSales { background-image: url('../icons/lightning.png') !important; }
#menuItemCreateInsurance { background-image: url('../icons/umbrella.png') !important; }
#menuItemFastBasket { background-image: url('../icons/basket.png') !important; }
#menuItemExternalData { background-image: url('../icons/import.png') !important; }
#menuItemTimeZones { background-image: url('../icons/clock.png') !important; }
#menuItemAPIMethods { background-image: url('../icons/rest.png') !important; }
#menuItemAPIRequestLog { background-image: url('../icons/request_log.png') !important; }
#menuItemViewAsJSON { background-image: url('../icons/json.png') !important; }
#menuItemViewAsSOAP { background-image: url('../icons/soap.png') !important; }
#menuItemCreateRealEstate { background-image: url('../icons/real-estate.png') !important; }
#menuItemCreateProductGroup { background-image: url('../icons/product_group.png') !important; }
#menuItemAIIntegration { background-image: url('../icons/ai.png') !important; }
	#menuItemAIProviders { background-image: url('../icons/providers.png') !important; }
	#menuItemAIUseCases { background-image: url('../icons/use_cases.png') !important; }
	#menuItemAIPromptTemplates { background-image: url('../icons/prompt_template.png') !important; }
	#menuItemAIBudgetAlerts { background-image: url('../icons/budget_alerts.png') !important; }
	#menuItemAIContentApproval { background-image: url('../icons/content_approval.png') !important; }
	#menuItemAIRequestLog { background-image: url('../icons/request_log.png') !important; }
#menuItemLanguageTranslation { background-image: url('../icons/translation.png') !important; }
#menuItemCompliance { background-image: url('../icons/compliance.png') !important; }
#menuItemHealthAndSafetyRules { background-image: url('../icons/health_safety.png') !important; }
#menuItemSystemDashboard { background-image: url('../icons/system-dashboard.svg') !important; }
#menuItemOperationalAttention { background-image: url('../icons/operational-attention.svg') !important; }
#menuItemActivitySummary { background-image: url('../icons/activity-summary.svg') !important; }

/* --- Modern primary menu icon family ---
   Reuses the 24px SVG outlines in icons/menu so the established menu IDs,
   permissions, navigation and hover treatment remain unchanged. */
#menuItemMyDetailsSummary, #menuItemMyOrders, #menuItemUserManagement, #menuItemUsers { background-image: url('../icons/menu/user.svg') !important; }
#menuItemQuickContactCreation, #menuItemCreateNewContact { background-image: url('../icons/menu/user-plus.svg') !important; }
#menuItemProductDashboard, #menuItemInventoryBuilder, #menuItemInventoryEditor, #menuItemCreateMerchandise, #menuItemCreateVoucher, #menuItemCreateProductGroup { background-image: url('../icons/menu/box.svg') !important; }
#menuItemCreateEvent, #menuItemCreateHotel, #menuItemCreateRestaurantBar, #menuItemCreateRealEstate, #menuItemCreateMembership { background-image: url('../icons/menu/calendar.svg') !important; }
#menuItemCreateDonation, #menuItemGiftAidCharities { background-image: url('../icons/menu/tag.svg') !important; }
#menuItemCreateInsurance, #menuItemCompliance, #menuItemHealthAndSafetyRules, #menuItemAccessControl { background-image: url('../icons/menu/shield.svg') !important; }
#menuItemFastSales { background-image: url('../icons/menu/bolt.svg') !important; }
#menuItemFastBasket { background-image: url('../icons/menu/cart.svg') !important; }
#menuItemBatches, #menuItemSavedProcesses, #menuItemScheduledTasks, #menuItemProcessDefinitions, #menuItemProcessCompliance, #menuItemProcessFinancial, #menuItemProcessInvoicing, #menuItemProcessMarketing, #menuItemProcessOpenBanking, #menuItemProcessPeriodEnd { background-image: url('../icons/menu/workflow.svg') !important; }
#menuItemCustomReports, #menuItemScheduledReports, #menuItemReportGraphs, #menuItemPriceAudit { background-image: url('../icons/menu/file-chart.svg') !important; }
#menuItemBanking, #menuItemBankingBranches, #menuItemBankingConsents, #menuItemBankingTransactions, #menuItemBankingInstructionLog, #menuItemPayments, #menuItemMandateCodes, #menuItemServiceProviders, #menuItemPaymentMethods, #menuItemMandateOptions, #menuItemPaymentProcessRules { background-image: url('../icons/menu/landmark.svg') !important; }
#menuItemPricing, #menuItemPriceBands, #menuItemPriceCharts, #menuItemPriceGroups, #menuItemPriceRules, #menuItemPriceRuleOffers, #menuItemPrices, #menuItemPriceCapLimits, #menuItemPromoCodes, #menuItemFeeManagement, #menuItemFees, #menuItemFeeGroups, #menuItemTaxRates { background-image: url('../icons/menu/tag.svg') !important; }
#menuItemCountries, #menuItemRegions, #menuItemProductLocations, #menuItemPostcodeGroups, #menuItemTimeZones { background-image: url('../icons/menu/map-pin.svg') !important; }
#menuItemConfiguration, #menuItemLookups, #menuItemCacheControl, #menuItemUtilities { background-image: url('../icons/menu/settings.svg') !important; }
#menuItemConnections, #menuItemExternalSystems, #menuItemAPIMethods, #menuItemAPIRequestLog, #menuItemViewAsJSON, #menuItemViewAsSOAP { background-image: url('../icons/menu/server.svg') !important; }
#menuItemLanguageTranslation, #menuItemWebContent { background-image: url('../icons/menu/globe.svg') !important; }
#menuItemMessages, #menuItemWaitingRoom { background-image: url('../icons/menu/message.svg') !important; }
#menuItemBlacklists, #menuItemStatuses, #menuItemStatusAudit { background-image: url('../icons/menu/lock.svg') !important; }
#menuItemAssets { background-image: url('../icons/menu/dashboard.svg') !important; }
#menuItemDemographics, #menuItemGroupCollections, #menuItemUserGroups { background-image: url('../icons/menu/user.svg') !important; }
#menuItemDespatchMethods { background-image: url('../icons/menu/box.svg') !important; }
#menuItemDocuments, #menuItemDocumentLayouts, #menuItemDocumentSequences, #menuItemDocumentRules { background-image: url('../icons/menu/file-chart.svg') !important; }
#menuItemExchangeRates { background-image: url('../icons/menu/tag.svg') !important; }
#menuItemLayoutPlanRules, #menuItemReservedSeating, #menuItemReservedSeatingLayout { background-image: url('../icons/menu/dashboard.svg') !important; }
#menuItemMarketing, #menuItemMarketingCampaigns, #menuItemMarketingChannels, #menuItemMarketingCreatives, #menuItemMarketingExecution, #menuItemMarketingPerformance, #menuItemMarketingPlacements, #menuItemMyMarketing, #menuItemMyMarketingChannels { background-image: url('../icons/menu/message.svg') !important; }
#menuItemTracking { background-image: url('../icons/menu/map-pin.svg') !important; }
#menuItemAIIntegration, #menuItemAIProviders, #menuItemAIUseCases, #menuItemAIPromptTemplates, #menuItemAIBudgetAlerts, #menuItemAIContentApproval, #menuItemAIRequestLog { background-image: url('../icons/menu/server.svg') !important; }

/* =============================================================================
   8. NAVIGATION - TAB MENUS
   Horizontal tab strips used within pages (tabmenu) and the nested price-
   layer tab strip (tabmenupricelayer - pill shaped, green active state).
   ============================================================================= */

/* --- Main tab menu (inc_tabmenu.asp) --- */
#tabmenu {
	float: left;
	background: #ffffff;
	border-bottom: 1px solid #ced4da;
	line-height: normal;
	margin: 0px 0px 15px 0px;
	width: 100%;
	height: auto;
	display: flex;
	padding-top: 6px;
}

#tabmenu ul {
	margin: 0;
	padding: 0 5px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}

#tabmenu li {
	background: #f8f9fa;
	border: 1px solid #dee2e6;
	border-bottom: none;
	border-radius: 3px 3px 0 0;
	transition: all 0.1s ease;
}

#tabmenu a, #tabmenu strong, #tabmenu span {
	display: block;
	padding: 6px 10px;
	text-decoration: none;
	font-size: 11px;
	font-weight: 500;
	font-family: font-family: Arial, Helvetica, sans-serif;
}

/* Tab state: has data = strong blue */
#tabmenu .containsData,
#tabmenu .containsData a  { color: #007bb5 !important; font-weight: 600; }

/* Tab state: no data = muted grey */
#tabmenu .containsNoData,
#tabmenu .containsNoData a { color: #6C757D !important; }

/* Hover */
#tabmenu li:hover { background: #e9ecef; border-color: #adb5bd; cursor: pointer; }

/* Active/selected tab */
#tabmenu #currentTab,
#tabmenu .currentTabContainsData,
#tabmenu .currentTabContainsNoData {
	background: #ffffff;
	border: 1px solid #ced4da;
	border-bottom: 3px solid #0056b3;
	margin-top: -2px;
	z-index: 10;
}
#tabmenu .currentTabContainsData   { border-bottom: 3px solid #0056b3; }
#tabmenu .currentTabContainsData a { color: #0056b3 !important; font-weight: 600; padding-bottom: 4px; }
#tabmenu .currentTabContainsNoData { border-bottom: 3px solid #3CA2D7; }
#tabmenu .currentTabContainsNoData a { color: #3CA2D7 !important; padding-bottom: 4px; }

/* Contacts area: a restrained teal cue, scoped to the Contact tab menu only. */
#tabmenu.tabmenu-contacts {
	border-bottom-color: #b9d7d3;
}
#tabmenu.tabmenu-contacts #currentTab {
	border-bottom-color: #177e75;
}
#tabmenu.tabmenu-contacts #currentTab a {
	color: #177e75 !important;
}
#tabmenu.tabmenu-contacts .currentTabContainsData {
	border-bottom-color: #177e75;
}
#tabmenu.tabmenu-contacts .currentTabContainsData a {
	color: #177e75 !important;
}
#tabmenu.tabmenu-contacts .currentTabContainsNoData {
	border-bottom-color: #5da89f;
}
#tabmenu.tabmenu-contacts .currentTabContainsNoData a {
	color: #5da89f !important;
}

/* Products area: restrained indigo cue, scoped to the Product tab menu only. */
#tabmenu.tabmenu-products { border-bottom-color: #c7c8e4; }
#tabmenu.tabmenu-products #currentTab,
#tabmenu.tabmenu-products .currentTabContainsData { border-bottom-color: #4f5fa8; }
#tabmenu.tabmenu-products #currentTab a,
#tabmenu.tabmenu-products .currentTabContainsData a { color: #4f5fa8 !important; }
#tabmenu.tabmenu-products .currentTabContainsNoData { border-bottom-color: #8996ce; }
#tabmenu.tabmenu-products .currentTabContainsNoData a { color: #8996ce !important; }

/* Product Locations area: restrained olive cue, scoped to its tab menu only. */
#tabmenu.tabmenu-product-locations { border-bottom-color: #d1d9bf; }
#tabmenu.tabmenu-product-locations #currentTab,
#tabmenu.tabmenu-product-locations .currentTabContainsData { border-bottom-color: #687c3c; }
#tabmenu.tabmenu-product-locations #currentTab a,
#tabmenu.tabmenu-product-locations .currentTabContainsData a { color: #687c3c !important; }
#tabmenu.tabmenu-product-locations .currentTabContainsNoData { border-bottom-color: #9eae76; }
#tabmenu.tabmenu-product-locations .currentTabContainsNoData a { color: #9eae76 !important; }

/* Orders area: restrained amber cue, scoped to the Order tab menu only. */
#tabmenu.tabmenu-orders { border-bottom-color: #e6d1a8; }
#tabmenu.tabmenu-orders #currentTab,
#tabmenu.tabmenu-orders .currentTabContainsData { border-bottom-color: #a66a16; }
#tabmenu.tabmenu-orders #currentTab a,
#tabmenu.tabmenu-orders .currentTabContainsData a { color: #a66a16 !important; }
#tabmenu.tabmenu-orders .currentTabContainsNoData { border-bottom-color: #c99a52; }
#tabmenu.tabmenu-orders .currentTabContainsNoData a { color: #c99a52 !important; }

/* --- Price layer tab menu (pill-shaped, green active) --- */
#tabmenupricelayer {
	float: left;
	background: #f1f3f5;
	border-bottom: 1px solid #dee2e6;
	line-height: normal;
	margin: 0px 0px 15px 0px;
	width: 100%;
	height: auto;
	display: flex;
	padding: 4px 0;
}
#tabmenupricelayer ul {
	margin: 0;
	padding: 0 10px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
#tabmenupricelayer li {
	background: #ffffff;
	border: 1px solid #ced4da;
	border-radius: 20px; /* pill shape */
	transition: all 0.1s ease;
}
#tabmenupricelayer a, #tabmenupricelayer strong, #tabmenupricelayer span {
	display: block;
	padding: 4px 12px;
	text-decoration: none;
	font-size: 11px;
	font-weight: 500;
	font-family: font-family: Arial, Helvetica, sans-serif;
}

/* Has data = emerald green (different from main tab blue) */
#tabmenupricelayer .containsData,
#tabmenupricelayer .containsData a	{ color: #2b8a3e !important; font-weight: 600; }
#tabmenupricelayer .containsNoData,
#tabmenupricelayer .containsNoData a  { color: #868e96 !important; }

#tabmenupricelayer li:hover { background: #e9ecef; border-color: #adb5bd; cursor: pointer; }

/* Active pricing tab - solid green fill */
#tabmenupricelayer #currentTab,
#tabmenupricelayer #currentSubTab,
#tabmenupricelayer .currentTabContainsData,
#tabmenupricelayer .currentSubTabContainsData,
#tabmenupricelayer .currentTabContainsNoData,
#tabmenupricelayer .currentSubTabContainsNoData {
	background: #2b8a3e;
	border-color: #2b8a3e;
}

#tabmenupricelayer #currentTab a,
#tabmenupricelayer #currentSubTab a,
#tabmenupricelayer .currentTabContainsData a,
#tabmenupricelayer .currentSubTabContainsData a,
#tabmenupricelayer .currentTabContainsNoData a,
#tabmenupricelayer .currentSubTabContainsNoData a {
	color: #ffffff !important;
	font-weight: 600;
}

/* Empty tab active: lighter green to indicate no data */
#tabmenupricelayer .currentTabContainsNoData,
#tabmenupricelayer .currentSubTabContainsNoData { background: #51cf66; border-color: #51cf66; }


/* =============================================================================
   9. NAVIGATION - PAGINATION
   The pagination bar at the bottom of list pages.
   ============================================================================= */

.pagination_div,
.pagination_div a {
	background-color: #595E61;
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
}

.m10lper { margin-left: 10%; }
.m41per { margin-left: 41%; color: #585858; }


/* =============================================================================
   10. PRODUCT SEARCH - METRO-STYLE TILE BOXES  (productsearch.asp)
   Large clickable tiles used on the product search landing page.
   Each class carries ONLY its own geometry (these are standalone elements,
   not inside a grid container) and its background colour/gradient.
   ============================================================================= */

/* Shared base for all search-page tiles */
.box_Whats_on_today,
.box_this_week,
.box_search_by_date,
.box_search_by_show,
.box_search_by_venue,
.box_search_by_price,
.box_search_by_type,
.box_search_by_group,
.box_search_by_topshow {
	text-decoration: none;
	text-align: center;
	/* Removed padding-top: 50px; Flexbox handles this now */
	font-size: 24px;
	font-weight: bold;
	color: #FFFFFF;
	border: 1px solid rgb(200, 206, 208);
	margin-top: 1%;
	cursor: pointer;
	transition: background 0.2s ease;

	/* Use Flexbox for alignment */
	display: inline-flex; 
	align-items: center;     /* Vertically centers children */
	justify-content: center; /* Horizontally centers children */

	min-height: 100px;
	width: auto;             /* Adjust as needed */
	padding: 0 20px;         /* Horizontal padding for breathing room */
}

/* Hover: fade to the solid end-stop colour; geometry unchanged */
.box_Whats_on_today:hover,
.box_this_week:hover,
.box_search_by_date:hover,
.box_search_by_show:hover,
.box_search_by_venue:hover,
.box_search_by_price:hover,
.box_search_by_type:hover,
.box_search_by_group:hover,
.box_search_by_topshow:hover { opacity: 0.88; }

/* Individual left margins (keep existing page layout) */
.box_Whats_on_today	{ margin-left: 5%; background: linear-gradient(to bottom, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); }
.box_this_week		 { margin-left: 2%; background: linear-gradient(to bottom, rgba(43,118,202,1) 0%, rgba(10,62,125,1) 72%, rgba(0,45,102,1) 100%); }
.box_search_by_date	{ margin-left: 2%; background: linear-gradient(to bottom, rgba(207,231,250,1) 0%, rgba(99,147,193,1) 100%); }
.box_search_by_show	{ margin-left: 2%; background: linear-gradient(to bottom, rgba(201,222,150,1) 0%, rgba(138,182,107,1) 44%, rgba(57,130,53,1) 100%); }
.box_search_by_venue   { margin-left: 2%; background: linear-gradient(to bottom, rgba(255,157,157,1) 0%, rgba(255,71,71,1) 78%, rgba(255,83,83,1) 100%); }
.box_search_by_price   { margin-left: 5%; background: linear-gradient(to bottom, rgba(246,230,180,1) 0%, rgba(237,144,23,1) 100%); }
.box_search_by_type	{ margin-left: 5%; background: linear-gradient(to bottom, #cb60b3 0%, #c146a1 24%, #a80077 93%, #db36a4 100%); }
.box_search_by_group   { margin-left: 2%; background: linear-gradient(to bottom, #BA6E80 0%, #1D4016 100%); }
.box_search_by_topshow { margin-left: 2%; background: linear-gradient(to bottom, #627d4d 0%, #1f3b08 100%); }

/* Shared legacy Metro palette.  Product Setup overrides these values below. */
.product		{ background: linear-gradient(to bottom, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); }
.type			{ background: linear-gradient(to bottom, #c0c4f9 0%, #4d528c 100%); }
.seats			{ background: linear-gradient(to bottom, #c9de96 0%, #8ab66b 44%, #398235 100%); }
.ticketprices	{ background: linear-gradient(to bottom, #ff9d9d 0%, #ff4747 78%, #ff5353 100%); }
.performances	{ background: linear-gradient(to bottom, #f6e6b4 0%, #ed9017 100%); }
.fees			{ background: linear-gradient(to bottom, #a7cfdf 3%, #23538a 100%); }
.paymentmethod	{ background: linear-gradient(to bottom, #cb60b3 0%, #c146a1 24%, #a80077 93%, #db36a4 100%); }
.despatchmethod	{ background: linear-gradient(to bottom, #627d4d 0%, #1f3b08 100%); }
.demographics	{ background: linear-gradient(to bottom, #6b584a 0%, #5b5340 19%, #484c33 45%, #334626 76%, #224118 100%); }
.onsaleproduct	{ background: linear-gradient(to bottom, #41254e 0%, #5a3758 33%, #6b4463 58%, #865c70 100%); }
.markbacks		{ background: linear-gradient(to bottom, #485657 0%, #3d4d4d 35%, #293e41 93%, #263e42 100%); }
.location		{ background: linear-gradient(to bottom, #d3d9e0 0%, #a4b3c4 40%, #768da6 100%); }
.genre			{ background: linear-gradient(to bottom, #ba6e80 0%, #1d4016 100%); }
.demographic	{ background: linear-gradient(to bottom, #6b584a 0%, #224118 100%); }
.fee			{ background: linear-gradient(to bottom, #a7cfdf 3%, #23538a 100%); }
.despatch		{ background: linear-gradient(to bottom, #627d4d 0%, #1f3b08 100%); }
.gray			{ background: #E8E8E8; color: #444444; }


/* =============================================================================
   11. PRODUCT SETUP DASHBOARD
   ============================================================================= */
#page_content .productInfo {
	background: #ffffff;
	border: 1px solid #d9e2ea;
	border-radius: 10px;
	box-shadow: 0 2px 7px rgba(37, 53, 66, 0.08);
	box-sizing: border-box;
	margin: 14px auto 20px;
	padding: 18px 22px;
	width: 94%;
}

/* =============================================================================
   11a. PRICE RULE WIZARD
   Clear visual grouping for the rule definition, selections and final summary.
   ============================================================================= */

.price_rule_wizard {
	margin-left: auto;
	margin-right: auto;
	max-width: 1440px;
	text-align: left;
}

.price_rule_heading_primary,
.price_rule_heading_secondary {
	display: inline-block;
}

.price_rule_heading_primary {
	color: #245b85;
}

.price_rule_heading_separator {
	color: #91aabd;
	display: inline-block;
	font-size: 130%;
	font-weight: normal;
	margin: 0 10px;
	vertical-align: -1px;
}

.price_rule_heading_secondary {
	color: #4b6274;
}

.price_rule_wizard #Price_Rule_Page_1 > .columnl,
.price_rule_wizard #Price_Rule_Page_2 > .p15l,
.price_rule_wizard #divProductSelector,
.price_rule_wizard #divOfferSelector,
.price_rule_wizard #divEligibilitySelector,
.price_rule_wizard #divPriceRuleSummary {
	background: #ffffff;
	border: 1px solid #d9e2ea;
	border-radius: 8px;
	box-shadow: 0 2px 7px rgba(37, 53, 66, 0.08);
	box-sizing: border-box;
	margin-bottom: 18px;
	padding: 18px 22px;
}

.price_rule_wizard #Price_Rule_Page_1 > .columnl {
	float: none;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
}

.price_rule_wizard fieldset {
	border: 1px solid #cbdbe7;
	border-radius: 6px;
	box-sizing: border-box;
	padding: 14px 16px;
}

.price_rule_wizard fieldset legend {
	color: #245b85;
	font-size: 110%;
	font-weight: bold;
	padding: 0 8px;
}

.price_rule_wizard #tblProductSelected,
.price_rule_wizard #tblOfferSelected,
.price_rule_wizard #tblEligibilitySelected {
	border-collapse: separate;
	border-radius: 5px;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}

.price_rule_wizard #divPriceRuleSummary {
	border-left: 5px solid #3ca2d7;
	color: #364d63;
	float: none;
	line-height: 1.55;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
}

.price_rule_wizard #divPriceRuleSummary > ul {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.price_rule_wizard #divPriceRuleSummary > ul > li {
	background: #f7fbfe;
	border: 1px solid #d9e8f2;
	border-left: 4px solid #79b9dd;
	border-radius: 5px;
	margin: 12px 0;
	padding: 12px 14px;
}

.price_rule_wizard #divPriceRuleSummary ul ul {
	background: #ffffff;
	border-left: 2px solid #c8dfed;
	margin: 10px 0 0 8px;
	padding: 8px 0 8px 22px;
}

.price_rule_wizard #divPriceRuleSummary .info {
	background: #fff8e7;
	border: 1px solid #ecd49a;
	border-left: 4px solid #c88916;
	border-radius: 5px;
	color: #6d561d;
	margin-top: 18px;
	padding: 12px 14px;
}

.price_rule_eligibility_picklist {
	box-sizing: border-box;
	width: auto;
}

.price_rule_eligibility_picklist .price_rule_eligibility_picklist_column {
	box-sizing: border-box;
	padding-left: 4px;
	padding-right: 4px;
	width: calc(50% - 28px);
}

.price_rule_eligibility_picklist .price_rule_eligibility_picklist_actions {
	box-sizing: border-box;
	padding-left: 4px;
	width: 56px;
}

#divPriceRuleEligibility.modaldiv {
	box-sizing: border-box;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	position: fixed;
}

@media screen and (max-width: 650px) {
	.price_rule_wizard #Price_Rule_Page_1 > .columnl,
	.price_rule_wizard #divPriceRuleSummary {
		width: 100%;
	}

	.price_rule_wizard #Price_Rule_Page_1 > .columnl,
	.price_rule_wizard #Price_Rule_Page_2 > .p15l,
	.price_rule_wizard #divProductSelector,
	.price_rule_wizard #divOfferSelector,
	.price_rule_wizard #divEligibilitySelector,
	.price_rule_wizard #divPriceRuleSummary {
		padding: 14px;
	}
}

#page_content .productInfo:before {
	color: #152d4f;
	content: "What are you setting up?";
	display: block;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 12px;
}

.productSetup_tile { background: #ffffff; }

#page_content .productInfo input[type="radio"] { margin: 0 3px 0 0; position: relative; top: -8px; vertical-align: middle; }
#page_content .productInfo .attr_custom_input { display: inline-block; line-height: 18px; margin: 0 13px 10px 0; vertical-align: middle; }
#page_content .productInfo .attr_select { border-radius: 5px; box-sizing: border-box; height: 31px; }
#page_content #productInfoDropDown .attr_select { width: 390px !important; }

.productSetup_grid {
	clear: both;
	margin: 0 auto 20px;
	width: 94%;
}

.productSetup_summary {
	background: #f7fbff;
	border: 1px solid #d7e7f4;
	border-radius: 8px;
	box-sizing: border-box;
	color: #294b6d;
	margin: 0 0 16px;
	padding: 12px 16px;
}

.productSetup_summary strong { color: #152d4f; }

.productSetup_section {
	background: #f8fafc;
	border: 1px solid #dce5ed;
	border-radius: 10px;
	box-sizing: border-box;
	margin: 0 0 16px;
	padding: 16px;
}

.productSetup_section_title { color: #152d4f; font-size: 18px; font-weight: bold; margin: 0; }
.productSetup_section_description { color: #5e7185; margin: 4px 0 14px; }

.productSetup_cards {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.productSetup_tile {
	background: #ffffff;
	border: 1px solid #d7e0e8;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(37, 53, 66, 0.06);
	box-sizing: border-box;
	color: #24384f;
	cursor: pointer;
	min-height: 126px;
	padding: 16px 46px 16px 16px;
	position: relative;
	text-decoration: none;
	transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.productSetup_tile:hover {
	border-color: #7eaed4;
	box-shadow: 0 5px 12px rgba(37, 53, 66, 0.12);
	transform: translateY(-1px);
}

.productSetup_tile:focus { outline: 3px solid #a7d3f0; outline-offset: 2px; }
.productSetup_tile--ready { border-top: 4px solid #2e9b62; }
.productSetup_tile--needs-setup { border-top: 4px solid #d89212; }
.productSetup_tile--optional { border-top: 4px solid #95a4b4; }
.productSetup_tile--available { border-top: 4px solid #438bd1; }
.productSetup_tile--not-applicable { background: #f3f5f7; border-top: 4px solid #b2bdc8; color: #6c7b89; cursor: default; }

.productSetup_title { color: inherit; font-size: 16px; font-weight: bold; line-height: 1.25; margin: 0 0 6px; pointer-events: none; }
.productSetup_description { color: #5e7185; font-size: 12px; line-height: 1.35; min-height: 32px; pointer-events: none; }

.productSetup_status {
	border-radius: 12px;
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	margin-top: 11px;
	padding: 4px 9px;
}

.productSetup_status--ready { background: #e2f4e9; color: #1e7546; }
.productSetup_status--needs-setup { background: #fff0cf; color: #8a5800; }
.productSetup_status--optional { background: #e9eef3; color: #5d6e7e; }
.productSetup_status--available { background: #e1f0ff; color: #1f6fab; }
.productSetup_status--not-applicable { background: #e9edf1; color: #647483; }

.productSetup_icons { position: absolute; right: 13px; top: 13px; }
.productSetup_icons > div { display: none; }
.productSetup_icons .help { background: #ffffff; border: 1px solid #9bacbd; border-radius: 50%; color: #5b718a; display: block; font-size: 11px; font-weight: bold; height: 17px; line-height: 17px; text-align: center; width: 17px; }

#page_content .customPopUpMessage {
	background-color: #ffffff;
	border-color: #d2dfe9;
	border-left: 5px solid #c88916;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(37, 53, 66, 0.18);
	color: #364d63;
	max-width: 430px;
	padding: 18px 22px;
	z-index: 100;
}

#page_content .customPopUpMessage p { color: #364d63; font-size: 13px; line-height: 1.5; }

.product-header-info {
	border-top: 1px solid #dce5ed;
	box-sizing: border-box;
	margin: 12px 0 0;
	padding: 12px 0 0;
	width: 100%;
}

.clear-layout { clear: both; display: block; height: 0; overflow: hidden; }

@media screen and (max-width: 1000px) {
	.productSetup_cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 650px) {
	#page_content .productInfo, .productSetup_grid { width: 100%; }
	#page_content #productInfoDropDown .attr_select { width: 100% !important; }
	.productSetup_cards { grid-template-columns: 1fr; }
}


/* =============================================================================
   12. PANELS, POPUPS & MODAL OVERLAYS
   Fixed/absolute-positioned panels, modals, floating notifications.
   ============================================================================= */

/* --- Main LHS/RHS panel layout (e.g. search results page) --- */
#mainpanels {
	clear: both;
	color: #fff;
	padding-top: 31px;
	margin-left: 2px;
}

#mainpanels #lhs_panel {
	clear: both;
	width: 690px;
	float: left;
	font-size: 95%;
}

#mainpanels #lhs_panel #searchresults a			{ background-color: #000; color: #EF3327; text-decoration: none; }
#mainpanels #lhs_panel #searchresults a:hover	{ color: #EF3327; text-decoration: underline; }
#mainpanels #rhs_panel							{ width: 208px; float: left; }
#mainpanels #rhs_panel .panel				 	{ display: block; clear: both; border-top: 1px solid #2F2F2F; margin-top: 10px; padding-top: 15px; }
#mainpanels #rhs_panel .panel h3.title			{ margin-top: 0; padding-top: 0; font-weight: bold; margin-bottom: 5px; padding-bottom: 5px; font-size: 100%; }
#mainpanels #rhs_panel .panel p.blurb		 	{ height: 80px; }
#mainpanels #rhs_panel .panel img			 	{ float: right; margin-bottom: 16px; }
#mainpanels #rhs_panel .tabs				  	{ width: 100%; height: 32px; }
#mainpanels #rhs_panel .tabs .tab			 	{ width: 208px; height: 32px; text-align: center; background-repeat: no-repeat; padding-top: 10px; float: left; }
#mainpanels #rhs_panel .tabs .tab a				{ background-color: transparent; color: #ffffff; text-decoration: none; font-size: 110%; font-weight: bold; }
#mainpanels #rhs_panel .tabs .tab a:hover		{ background-color: transparent; color: #ffffff; text-decoration: underline; }
#mainpanels #rhs_panel .panel a					{ color: #EF3327; text-decoration: none; }
#mainpanels #rhs_panel .panel a:hover			{ background-color: #EF3327; color: #fff; text-decoration: none; }
#mainpanels #rhs_panel .calendar				{ clear: both; margin-top: 18px; background-color: #000000; text-align: center; }

/* --- Info/side panels --- */
.centre_panel   { margin-left: 352px; width: 400px; font-size: 95%; }
#info_lhs_panel { clear: both; width: 120px; float: left; font-size: 95%; padding-bottom: 20px; }
#info_rhs_panel { width: 320px; float: left; font-size: 95%; padding-bottom: 20px; }

/* --- Help and permission popup panels --- */
#help_popup {
	visibility: hidden;
	position: absolute;
	top: 50px; left: 400px;
	width: 600px;
	padding: 10px;
	color: #CC0000;
	background-color: #ffffff;
	border: #d8e3ee solid 2px;
	font-size: 110%;
}

#permission_popup {
	visibility: hidden;
	position: absolute;
	top: 155px; left: 320px;
	padding: 10px;
	color: #CC0000;
	background-color: #ffffff;
	border: #d8e3ee solid 2px;
	font-size: 110%;
}

/* --- Reprint reason / despatch status popups (identical dimensions) --- */
.reprint-reason-popup,
.despatch-status-popup {
	background: #FFFFFF;
	border: 1px solid #AAAAAA;
	color: #222222;
	position: fixed;
	top: 200px; left: 200px;
	z-index: 3001;
}

/* --- Socket message notification (centred floating card) --- */
#div_socket_message {
	position: fixed;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 25%;
	max-height: 400px;
	box-shadow: 4px 4px 15px rgba(223,225,216,0.8);
	border-radius: 10px;
	overflow: hidden;
	font-family: font-family: Arial, Helvetica, sans-serif;
	z-index: 1000;
	color: #555555;
	font-size: 110%;
	text-shadow: 0 1px 0 white;
	border: 1px solid #0e7fad;
	background: #fff url('../images/info.png') no-repeat;
	background-position: 30px 10px;
	padding: 18px 35px 18px 85px;
}
#message_hidden { visibility: hidden; position: absolute; z-index: 105; }

.modaldiv {
	color: #000000;
	background-color: #fff;
	padding: 15px 15px 15px 15px;
	text-align: left;
	border: 2px solid #333;
	z-index: 3001;
	opacity: 1.0;
	border-radius: 6px;
	position: absolute;
}

#divProviderTemplateHelp.modaldiv {
	box-sizing: border-box;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	position: fixed;
}

/* Keep the Fast Sales product actions available when a product has many performances. */
#divProduct.modaldiv {
	box-sizing: border-box;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	position: fixed;
}

#divProduct .fast_sales_product_results {
	height: 300px;
	overflow: auto;
}

.modaldiv_donation {
	color: #000000;
	background-color: #fff;
	padding: 15px 15px 15px 15px;
	text-align: left;
	border: 2px solid #333;
	z-index: 3001;
	opacity: 1.0;
	border-radius: 6px;
	left: 250px;
	top: 130px;
	position: fixed !important;
}

.modaldiv_donation_advanced {
	color: #000000;
	background-color: #fff;
	padding: 15px 15px 15px 15px;
	text-align: left;
	border: 2px solid #333;
	z-index:5001;
	opacity: 1.0;
	border-radius: 6px;
	left: 600px;
	top: 200px;
	position: fixed !important;
}

/* Custom alert box styles */
#modaldiv-overlay
{
	filter: alpha(opacity = 50);
	-khtml-opacity: 0.5;
	opacity: 0.5;
	background: #000;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}

#modal_page_content {
	border: #999999 thin solid;
	height: 320px;
	color: #555555;
	padding: 5px 5px 5px 5px;
	margin-top: 15px;
	overflow: auto;
}

/* --- Product explorer offer dialog --- */
#tblModalPriceRuleData {
	width: 100%;
}

#tblModalPriceRuleData .offer-modal-card-row > td {
	padding: 0;
}

#tblModalPriceRuleData .offer-modal-card {
	padding: 10px 0;
}

#tblModalPriceRuleData .offer-modal-card-row + .offer-modal-card-row .offer-modal-card {
	border-top: #d7d7d7 1px solid;
}

#tblModalPriceRuleData .offer-modal-intro {
	margin: 8px 0;
}

#tblModalPriceRuleData .offer-modal-summary {
	margin: 8px 0;
}

#tblModalPriceRuleData .offer-modal-summary ul {
	margin: 4px 0 8px 20px;
}

#tblModalPriceRuleData .offer-modal-description {
	font-weight: bold;
}

#tblModalPriceRuleData .offer-modal-product-list {
	width: 100%;
	border-collapse: collapse;
}

#tblModalPriceRuleData .offer-modal-product-row:hover td {
	background-color: #3d80df;
	color: #ffffff;
}

#tblModalPriceRuleData .offer-modal-product-name,
#tblModalPriceRuleData .offer-modal-product-action {
	padding: 7px;
	border-bottom: #d7d7d7 1px solid;
}

#tblModalPriceRuleData .offer-modal-product-name {
	width: 80%;
}

#tblModalPriceRuleData .offer-modal-product-action {
	width: 20%;
	text-align: right;
}

#tblModalPriceRuleData .offer-modal-product-action a {
	font-weight: normal;
}

/* --- Modal layout builder / editor divs --- */
.modaldiv_layoutbuilder {
	position: absolute;
	color: #A09999; background-color: #F0EEEE;
	padding: 15px; text-align: left;
	border: 2px solid #A09999;
	z-index: 3001; opacity: 1.0; border-radius: 6px;
}

.modaldiv_layouteditor,
.modaldiv_despatch {
	color: #000000; background-color: #fff;
	padding: 15px; text-align: left;
	border: 2px solid #333;
	z-index: 3001; opacity: 1.0; border-radius: 6px;
	position: fixed;
}

/* --- Grey overlay used when showing modals / blocking UI --- */
.graybg {
	position: absolute;
	background-color: #E8E8E8;
	z-index: 2;
	opacity: 0.4;
}

/* Background overlay (semi-opaque light) */
.background_hide {
	z-index: 300;
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	opacity: 0.8;
	background: linear-gradient(to bottom, #f7f7f7 0%, #eff0f2 24%, #d7dbdc 65%, #c6ced0 100%);
}

/* Printer / donation / bar overlay backgrounds */
.printers_background,
.donation_background {
	position: fixed;
	top: 0; left: 0;
	width: 1360px;
	background: #666666 repeat scroll;
	opacity: 0.4;
	z-index: 3000;
	visibility: visible;
	display: block;
}
.donation_background { z-index: 4000; }

.bar_background {
	position: fixed;
	top: 0; left: 0;
	width: 1360px;
	background: #FFFFFF repeat scroll;
	opacity: 0.8;
	z-index: 3000;
	visibility: visible;
	display: block;
}

/* Seat plan display divs (currently unstyled, reserved) */
#div_display_seat_plan {}
#div_display_disc_plan {}

/* Small tooltip window */
.small_window {
	background-color: #F4F4F4;
	border: 1px solid #f0f9ff;
	color: #555555;
	height: 30px; width: 350px;
	padding: 5px;
	display: none;
	position: absolute;
}

#divSearchError {
	visibility: hidden; /* Remains hidden until triggered */
	position: absolute !important;

	/* Centering Logic */
	left: 50% !important;
	top: 50% !important; /* Or set a specific px value like 40px to put it under the logo */
	transform: translate(-50%, -50%) !important; /* Offsets its own width/height to hit the true center */

	/* Appearance */
	z-index: 2500 !important;
	white-space: nowrap !important; /* Keeps the error on one line so centering is easier */
	padding: 10px 20px;
	background-color: #fff2f2;
	border: 1px solid #d83b01;
	color: #d83b01;
	border-radius: 5px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	cursor: pointer; /* Shows the 'hand' icon on hover */
}

/* Error notification text */
.attr_errormessage {
	color: #585858;
	font-weight: bold;
	float: left;
	margin-left: 15px;
}

/* User Contact MDaemon mailbox validation result */
.mdaemon_mailbox_result {
	float: left;
	font-weight: bold;
	margin: 4px 0;
	white-space: pre-wrap;
	width: 650px;
	word-break: break-word;
}
.mdaemon_mailbox_result_pending { color: #585858; }
.mdaemon_mailbox_result_success { color: #237a38; }
.mdaemon_mailbox_result_development_warning { color: #216e9c; }
.mdaemon_mailbox_result_error { color: #b42318; }

/* Available printers list heading */
.available_printers_title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 135%;
	font-weight: bold;
	color: white;
	background-color: #595E61;
	text-align: center;
	margin-bottom: 2px;
}

/* Server image section heading */
.server_image_title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 135%;
	font-weight: bold;
	color: white;
	background-color: #3B84B1;
	text-align: center;
	margin-bottom: 2px;
	padding: 5px;
}

/* File upload progress indicator */
.divFileUploadProgress {
	visibility: hidden;
	display: none;
	padding: 10px 16px;
	border: 2px solid #a0aab4;
	border-radius: 4px;
	background-color: #f5f7f9;
	width: 580px;
	min-height: 60px;
	margin-left: 200px;
	margin-top: 6px;
}

/* Drag-and-drop holder area */
.divDragAndDropHolder {
	padding: 10px;
	margin-top: 10px; margin-bottom: 10px;
	border: 3px dashed #CCCCCC;
	width: 350px; height: 300px;
	margin-left: 300px;
	overflow: auto;
}

.divCancelDragAndDrop { width: 10px; float: right; margin-bottom: 10px; }

.export-help-panel {
	background-color: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: 4px;
	padding: 8px 12px;
	font-size: 12px;
	color: #1e40af;
	margin: 4px 0 8px 0;
}


/* =============================================================================
   13. PROGRESS INDICATORS
   Progress bars, spinners, and their positioning wrappers.
   ============================================================================= */

.hideProgressGif { position: absolute; visibility: hidden; }
.showProgressGif { position: absolute; visibility: visible; }

.progressbar_img {
	position: fixed;
	background-color: #0000CC;
	left: 500px;
	opacity: 0.6;
	top: 151px;
	height: 20px;
	width: 0px;
}
.progressbar_background {
	color: #000000;
	background-color: #FFFFFF;
	border: black thin solid;
	position: fixed;
	left: 499px; top: 150px;
	height: 20px; width: 350px;
}
.progress_popup {
	position: fixed;
	top: 0; left: 0;
	width: 1360px;
	background: #FFFFFF repeat scroll;
	opacity: 0.8;
	z-index: 3000;
	visibility: hidden;
	display: none;
}
.progress_circle {
	position: fixed;
	left: 600px; top: 102px;
	background-image: url(../images/progress.gif);
	height: 66px; width: 66px;
}
.notification {
	visibility: hidden;
	display: none;
	position: fixed;
	margin-top: -375px; margin-left: 395px;
	z-index: 3001;
}


/* =============================================================================
   14. SEARCH & QUICK SEARCH BAR
   The header quick-search widget and related selectors.
   ============================================================================= */

#divQSearchBar {
	width: 380px !important;
	display: flex !important;
	align-items: center !important;
	height: 30px;
}

#txtQuickSearchValue {
	width: 280px !important;
	box-sizing: border-box;
}

/* Absolute-positioned quick search select overlay */
.QuickSearch_Select {
	position: absolute;
	left: 0; top: 0;
	z-index: 150;
	background-color: #FFFFFF;
	opacity: 1;
}

#divQuickSearchSelectList .QuickSearch_Select {
	z-index: 1101;
}

/* Keep the result-list scrollbar available when a quick search returns more rows than are visible. */
#divQuickSearchSelectList #lstQuickSearchList.QuickSearch_Select {
	position: fixed;
	width: 420px !important;
	height: 64px !important;
	min-height: 64px !important;
	box-sizing: border-box;
	overflow-y: scroll;
	scrollbar-gutter: stable;
}

/* Contact address option checkboxes and labels share a single aligned row. */
.address_option_row {
	display: flex;
	align-items: center;
	min-height: 24px;
}

.address_option_row input[type="checkbox"] {
	margin: 0 10px 0 0;
}

.address_option_row .attr_label_left {
	height: auto;
	padding-right: 0;
}

/* LPC list (hidden by default) */
.LpcList { display: none; }


/* =============================================================================
   15. LOGIN PAGE  (login.asp specific styles)
   ============================================================================= */

#login_top {
	background: url(../images/login_top.png) no-repeat;
	width: 545px;
	height: 8px;
	margin: 0 auto;
	margin-top: 150px;
}

#login_body {
	background: url(../images/login_bg.png) repeat-y;
	width: 545px;
	height:auto;
	margin: 0 auto;
}

#login_bottom {
	background: url(../images/login_bottom.png) no-repeat;
	width: 545px;
	height: 15px;
	margin: 0 auto;
}

.login_footer {
	width: 546px;
	margin: auto;
	margin-top: 10px;
	padding: 2px;
	color: #fff;
}

.togglePassword {
	/* Absolute position doesn't work in mobile */
	position: relative;
	left: 150px;
	bottom: -34px;
	cursor: pointer;
	height: 28px;
	width: 28px;
}

.attr_labellogin {
	font-size: 105%;
	color: #555;
	float: left;
	margin-left: 5px;
	margin-top: 20px;
	margin-bottom: 3px;
}

/* 1. The Container - Ensure it is a solid 420px block */
.password-input-container {
	position: relative;
	display: inline-block;
	width: 430px !important;		/* Forces the anchor point to be at 420px */
	vertical-align: middle;
}

/* 2. The Input - Make it fill the container exactly */
.password-input-container .attr_input {
	width: 100% !important;
	height: 100% !important;
	padding-right: 40px !important;	/* Room for the icon */
	margin: 0 !important;			/* Remove any gaps */
	box-sizing: border-box;
	display: block;
}

/* 3. The Eye Icon - Force it to the far right of the 420px */
.password-input-container .togglePassword {
	position: absolute;
	right: 10px !important;			/* Pins it 10px from the far right of the 420px */
	left: auto !important;			/* Breaks any left-alignment inheritance */
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 20px !important;
	height: auto;
	z-index: 99;					/* Sits on top of the input */
	cursor: pointer;
}

/* Verify bank details link indent */
.verifyBankDetails		  { margin-left: 80px; }
.verifyBankDetails:hover	{ cursor: pointer; }


/* =============================================================================
   16. FIELDSETS & LEGEND GROUPS
   Form sectioning via <fieldset> / <legend> wrappers.
   ============================================================================= */

#attr_fieldset  { color: #555555; font-size: 100%; }
.attr_fieldset  { color: #555555; font-size: 110%; }

.attr_fieldset_label {
	color: #555555;
	font-size: 100%;
	text-align: right;
	padding-right: 10px;
	font-family: Arial, Helvetica, sans-serif;
	height: 2em;
}

/* Fieldset group border box (used for product/contact groupings) */
.attr_fieldset_group {
	border: 2px #8e8d8d solid;
	font-size: 110%;
	width: 70%;
	height: auto;
	margin-left: 9%; margin-right: 9%; margin-top: 1%;
	padding: 0.5% 1% 1%;
	text-align: left;
}

.attr_legend_productgroup {
	color: #8e8d8d;
	font-weight: bold;
}

/* Product group box (alternative to fieldset_group, used on product pages) */
.productgroupbox {
	width: 70%;
	height: auto;
	padding: 0.5% 1% 1%;
	border: 2px solid gray;
	margin-left: 9%; margin-top: 3%;
	font-size: 110%;
	text-align: left;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
}
.productgrouphotel { padding-left: inherit; padding-top: 1%; }

/* Border div (simple bordered container) */
.borderDiv  { border: #d6d6d6 2px solid; }
.lpDivWidth { width: 350px; }


/* =============================================================================
   17. DISPLAY-ONLY & COLOUR UTILITY CLASSES
   Read-only display fields, semantic colour classes, and font-colour helpers.
   ============================================================================= */

/* Standard display-only text */
.attr_disponly		 { color: #585858; font-family: Arial, Helvetica, sans-serif; }
.attr_disponly_green { color: green;   font-family: Arial, Helvetica, sans-serif; }
.attr_disponly_red	 { color: red;	 font-family: Arial, Helvetica, sans-serif; }
.attr_disponly_blue  { color: blue;	font-family: Arial, Helvetica, sans-serif; }
.attr_disponly_lp	 { font-family: Arial, Helvetica, sans-serif; }
.attr_disponly_small { color: #585858; }
.attr_color			 { color: #585858; }

/* Contact, product, order, basket summary containers */
.attr_contactsummary  { color: #585858; width: 780px; font-size: 14px !important; }
.attr_contactsummary img { position: relative; top: 3px; vertical-align: text-bottom; }
.contact_method_icon { vertical-align: text-bottom; }
.contact_method_icon_table { height: 18px; width: 18px; }
.attr_productsummary  { color: #555555; width: 1200px; font-size: 14px !important; }
.attr_productpricegroup { color: #d8e3ee; width: 250px; }
.attr_ordersummary	  { color: #555555; font-size: 14px !important; }
.attr_basket		  { color: #585858; font-family: Arial, Helvetica, sans-serif; }
.attr_basketsummary   { color: #5B6662; }
.attr_layoutsummary   { color: #5B6662; width: 780px; }
.attr_layoutblocksummary { color: #5B6662; width: 780px; }

/* Basket shortcut is aligned directly beneath the Back Office system menu. */
.basket-summary-shortcut {
	position: absolute;
	top: 150px;
	right: 10px;
	display: flex;
	align-items: center;
	gap: 5px;
	z-index: 1;
}

.basket-summary-shortcut img { display: block; }

/* Named font colours */
.font_colour_red    { color: #CC0000; }
.font_colour_green  { color: #009900; }

.external_system_test_box {
	background-color: #fff;
	border: 1px solid #a0aab4;
	color: #333;
	line-height: 1.5;
	margin: 5px 0;
	padding: 8px 10px;
}

.external_system_configuration_group {
	box-sizing: border-box;
	margin: 10px 0;
	padding: 10px;
}

.external_system_configuration_group::after {
	clear: both;
	content: "";
	display: block;
}

.external_system_configuration_group:empty {
	display: none;
}

.external_system_configuration_group_heading {
	color: #152d4f;
	font-size: 115%;
	font-weight: bold;
	margin: 0 0 4px;
}

.external_system_configuration_group_description {
	color: #425c73;
	margin: 0 0 8px;
}

.external_system_credentials_group {
	background-color: #fff8dd;
	border: 2px solid #d7a000;
}

.external_system_urls_group {
	background-color: #edf7fc;
	border: 1px solid #8bbbd8;
}

.external_system_costs_group {
	background-color: #eff8ed;
	border: 1px solid #9fc894;
}

.external_system_capabilities_group {
	background-color: #f4effb;
	border: 1px solid #bda8dc;
}

.external_system_capability_fields {
	float: none;
	margin-left: 220px;
	width: 600px;
}

/* Process task labels need a wider third-level flyout. */
.menu ul :hover ul ul.leftsubmenu.processsubmenu,
.menu ul :hover ul :hover ul.leftsubmenu.processsubmenu {
	left: -300px;
	width: 270px !important;
}

.menu ul li:hover ul li ul.processsubmenu a.commonMenuSubItem1 {
	width: 270px;
}
.font_colour_black  { color: #000000; }
.font_colour_blue   { color: #007BFF; }
.font_colour_orange { color:orange; }
.font_colour_yellow { color:#FEBE10; }
.font_colour_grey   { color:#888888; }

/* Hard red highlight (used by JS to mark invalid fields) */
.red_highlight { color: red; }
.red_highlight_bold { color: red; font-weight: bold; }
.blue_highlight_bold { color: #6466D9; font-weight: bold; }

/* LLM provider errors displayed in the request detail audit view. */
.llm_request_error {
	box-sizing: border-box;
	padding: 8px;
	border: 1px solid #b42318;
	border-radius: 4px;
	background: #fff1f0;
	color: #8a1c16;
	line-height: 1.45;
	word-break: break-word;
}

.llm_request_error a {
	color: #8a1c16;
	font-weight: bold;
	text-decoration: underline;
}

/* Clean red error box (e.g. inline validation messages) */
.clean-red {
	border: solid 1px #f80202;
	background: #d28888;
	color: #222222;
	padding: 4px;
	text-align: center;
}

/* Document layout editor classes */
.bg-gray-200 {
	--tw-bg-opacity: 1 !important;
	background-color: rgb(233 238 240 / var(--tw-bg-opacity, 1)) !important;
}

.bg-blue-600 {
	--tw-bg-opacity: 1 !important;
	background-color: rgb(0 126 166 / var(--tw-bg-opacity, 1)) !important;
}

text-blue-700 {
	--tw-text-opacity: 1 !important;
	color: rgb(0 84 110 / var(--tw-text-opacity, 1)) !important;
}

.text-black {
	--tw-text-opacity: 1 !important;
	color: rgb(0 0 0 / var(--tw-text-opacity, 1)) !important;
}

.text-white {
	--tw-text-opacity: 1 !important;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.font-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.bg-slate-50 {
	background-color: #f8fafc;
}

/* Optional field marker (lighter weight) */
.attr_optional { color: #555555; font-size: 100%; font-weight: 300; }

/* Border / rule colour helpers */
.brd_color  { border-top-color: #E4E4E4; border-top-width: medium; }
hr.hr_color { color: #EBF0F5; }

/* Product state colours */
.product_hold_item_color { color: #3CA2D7; font-weight: bold; }
.product_default		 { color: #5B6662; }

/* Text transforms */
.uppercase { text-transform: uppercase; }
.textRight { text-align: right; }

/* Price timer float helpers */
.pricetimediv  { float: left; }
.pricerightdiv { float: right; }

/* White-space wrap override */
.wrap { white-space: normal; }

/* Product info / button container widths */
.productInfo	  { width: 90%; margin: 0 auto; }
.button-container { width: 90%; margin: 0 auto; }

/* Process initiation criteria are centred consistently at all supported desktop widths. */
.process_initiate_criteria { width: 1100px; margin: 0 auto; }
.process_field_row { align-items: center; display: flex; }
.process_field_row .attr_label, .process_field_row .attr_input, .process_field_row .process_field_help { float: none; margin-top: 0; }
.process_attr_input { box-sizing: border-box; height: 24px; line-height: 18px; }
.process_field_help { background: #e5f2fd; border: #7aaed5 1px solid; border-radius: 9px; color: #176da5; cursor: help; font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; height: 16px; line-height: 16px; margin-left: 6px; text-align: center; width: 16px; }
.process_information { background: #fff8ed; border: #f0cf8a 1px solid; box-sizing: border-box; margin: 12px 0 12px 275px; padding: 10px 12px; width: 470px; }
.process_information_title { color: #7a5700; font-weight: bold; margin-bottom: 4px; }
.process_information_text { color: #4d432c; line-height: 1.4; }
.process_result_container { width: 840px; margin: 26px auto; }
.process_result_panel { background: #fff; border: #d5e0ea 1px solid; border-radius: 5px; box-shadow: 0 2px 7px rgba(40, 65, 90, 0.12); padding: 24px 28px; }
.process_result_labels { margin: 0 0 12px; }
.process_result_mode, .process_result_status { border-radius: 12px; display: inline-block; font-size: 11px; font-weight: bold; letter-spacing: 0.2px; line-height: 1; margin-right: 7px; padding: 6px 10px; text-transform: uppercase; }
.process_result_mode { background: #e5f2fd; color: #176da5; }
.process_result_status_complete { background: #e6f4e9; color: #227238; }
.process_result_status_attention { background: #ffe8e4; color: #ad2c1e; }
.process_result_panel h2 { color: #245b85; font-size: 21px; margin: 0 0 8px; }
.process_result_panel p { margin: 12px 0; }
.process_result_process { color: #526c84; font-size: 13px; }
.process_result_message { font-size: 15px; line-height: 1.55; }
.process_result_impact { background: #edf6fd; border-left: #7aaed5 4px solid; margin-top: 18px !important; padding: 11px 13px; }
.process_result_metrics { border-collapse: collapse; margin-top: 18px; width: 100%; }
.process_result_metrics th, .process_result_metrics td { border: #d5e0ea 1px solid; padding: 9px 11px; text-align: left; vertical-align: top; }
.process_result_metrics thead th { background: #dcecf8; color: #245b85; }
.process_result_metrics tbody tr:nth-child(odd) { background: #f6faff; }
.process_result_metrics tbody tr:nth-child(even) { background: #ffffff; }
.process_result_metrics tbody th { font-weight: bold; width: 22%; }
.process_result_summary_link { margin-top: 18px !important; }
.process_result_summary { border-top: #d5e0ea 1px solid; margin-top: 24px; padding-top: 18px; }
.process_result_summary h3 { color: #245b85; font-size: 18px; margin: 0; }
.process_summary_section { margin-top: 18px; }
.process_summary_section h4 { color: #245b85; font-size: 16px; margin: 0; }
.process_summary_section p { color: #526c84; font-size: 13px; margin: 7px 0 10px; }
.process_summary_table { margin: 0; width: 100%; }
.process_summary_table thead th { background: #dcecf8; color: #245b85; }
.process_summary_table tbody tr:nth-child(odd) { background: #f6faff; }
.process_summary_table tbody tr:nth-child(even) { background: #ffffff; }
.process_summary_preview_due { border-left: #7aaed5 4px solid; padding-left: 12px; }
.process_summary_action_required { border-left: #d88e00 4px solid; padding-left: 12px; }
.process_result_next { margin-top: 20px; }
.process_result_checklist { background: #fff8ed; border: #f0cf8a 1px solid; margin: 9px 0 12px; padding: 8px 12px 8px 32px; }
.process_result_checklist li { margin: 6px 0; }
.process_result_action { margin-top: 20px; overflow: hidden; }
.process_result_attention { border-top: #d88e00 4px solid; }
.process_result_attention h2 { color: #7a4d00; }
.process_result_attention .process_result_impact { background: #fff4d8; border-left-color: #d88e00; }
.process_result_complete { border-top: #5f9b69 4px solid; }
.process_mode_manual fieldset { background-color: #eef7ff; border-color: #7daed3; }
.process_mode_manual legend { color: #245b85; }
.process_mode_schedule fieldset { background-color: #fff7df; border-color: #d4a83f; }
.process_mode_schedule legend { color: #7a5700; }
.process_mode_heading { border-radius: 3px; color: #fff; display: inline-block; font-size: 70%; margin-left: 12px; padding: 4px 9px; vertical-align: 2px; }
.process_mode_heading_manual { background-color: #27834a; }
.process_mode_heading_schedule { background-color: #c66a00; }
.process_catalogue td:not(.title) { border-bottom: #dadada 1px solid; border-right: #dadada 1px solid; color: #555; font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding: 9px 4px; vertical-align: middle; }
.process_catalogue td:nth-child(1) { vertical-align: middle !important; }
.process_catalogue td:nth-child(3), .process_catalogue td:nth-child(4) { vertical-align: middle !important; }
.process_catalogue tr:nth-child(even) td:not(.title) { background-color: #fff; }
.process_catalogue tr:nth-child(odd) td:not(.title) { background-color: #ebf3ff; }
.process_catalogue tr.item:hover td:not(.title),
.process_catalogue tr.altitem:hover td:not(.title) { background-color: #d9eaf7; color: #333 !important; }
.process_catalogue_name_content { align-items: center; display: flex; gap: 8px; min-height: 30px; }
.process_catalogue_name_icon { align-items: center; background: #e8f2fb; border-radius: 15px; color: #245b85; display: inline-flex; flex: 0 0 30px; font-size: 18px; font-weight: bold; height: 30px; justify-content: center; line-height: 30px; text-align: center; }
.process_catalogue_name_text { display: block; }
.process_catalogue_name_content .process_catalogue_icon { flex: 0 0 24px; margin-right: 0; }
.process_catalogue_icon { height: 24px; margin-right: 7px; vertical-align: middle; width: 24px; }
.process_help_icon { float: right; height: 42px; margin: 0 0 8px 16px; width: 42px; }
.productMarginPerl { margin-left: 1.5%; }
.typeMarginPerl	{ margin-left: 1.5%; }

/* Bottom-right floating image */
img.bottom-right { border: 0; padding: 0; float: right; }

/* Date Proximity Styling */
.due-overdue {
	color: #d32f2f !important;		/* Strong Red */
	font-weight: bold;
}

.due-imminent {
	color: #e65100 !important;		/* Deep Orange */
	font-weight: normal;
}

.due-soon {
	color: #f9a825 !important;		/* Darker Yellow/Gold */
	font-weight: normal;
}

.due-safe {
	color: #388e3c !important;		/* Forest Green */
	font-weight: normal;
}

/* RFM display colours */
.rfm_notspecified {
	color: #FFFFFF;
	background-color: #595E61;
}

.rfm_invalidscore {
	color: #060606;
	background-color: #595E61;
}

.rfm_champion {
	background-color: #006836;
	color: #FFFFFF;
}

.rfm_loyalcustomer {
	background-color: #1a9850;
	color: #FFFFFF;
}

.rfm_potentialloyalist {
	background-color: #65bc62;
	color: #FFFFFF;
}

.rfm_newcustomer {
	background-color: #a6d96a;
}

.rfm_promising {
	background-color: #d9ef8b;
}

.rfm_needattention {
	background-color: #ffffbf;
}

.rfm_cannotlosethem {
	background-color: #fde08b;
}

.rfm_abouttosleep {
	background-color: #fcad60;
}

.rfm_atrisk {
	background-color: #f36d42;
	color: #FFFFFF;
}

.rfm_hibernating {
	background-color: #ff3d00;
	color: #FFFFFF;
}

.rfm_lost {
	background-color: #d73027;
	color: #FFFFFF;
}

#CountryFlag {
	/* Dimensions */
	width: auto;
	height: 24px;

	/* Layout */
	margin-top: -1px;
	display: inline-block;
	vertical-align: middle;

	/* Softens the sharp corners */
	border-radius: 3px;

	/* Smooth hover effect in case it's clickable */
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#CountryFlag:hover {
	/* Slight pop on hover */
	transform: scale(1.1); 
}

#filterRow label {
	display: inline-block;
	vertical-align: middle;
}

/* Compliance UI */
.compfail td { background: #f8d7da; color: #5f151b; }
.compwarning td { background: #fff3cd; color: #5c4700; }
.comppass td { background: #d4edda; color: #155724; }
.compliance-table td, .compliance-table th { padding: 5px 8px; vertical-align: top; }

.compliance-summary {
	margin-bottom: 15px;
}

.compliance-summary-box {
	float: left;
	width: 180px;
	margin-right: 10px;
	padding: 12px;
	border: 1px solid #d6d6d6;
	text-align: center;
	box-sizing: border-box;
}

.compliance-summary-count {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 4px;
}

.compliance-summary-label {
	font-size: 12px;
}

.compfail {
	background: #f8d7da;
	color: #721c24;
	border-color: #f5c6cb;
}

.compwarning {
	background: #fff3cd;
	color: #856404;
	border-color: #ffeeba;
}

.comppass {
	background: #d4edda;
	color: #155724;
	border-color: #c3e6cb;
}

.compliance-score {
	background: #e9ecef;
	color: #495057;
	border-color: #ced4da;
}

.icon-preview {
	max-height: 22px;
	width: auto;
	height: auto;
}


/* =============================================================================
   18. LAYOUT UTILITIES & MISC HELPERS
   Float helpers, visibility, column layout, and other single-purpose classes.
   ============================================================================= */

/* Float utilities */
.clear  { clear: both; }
.left   { float: left; }
.right  { float: right; }
.column { float: left; }

/* --- Unified Visibility Controls --- */
.hidden {
	display: none;
	visibility: hidden;
}

.visible {
	display: block;
	visibility: visible;
}

/* Visibility / display helpers */
.hide   { display: none; }
.show   { display: block; }
.block  { display: block; }
.none   { display: none; }

/* Clearer div (explicit clear) */
div.clearer { clear: both; }

/* Quick Search results dropdown position */
.lowermenu { position: absolute; margin: 0.5% 0.1% 0.1% 2.5%; display: inline-block; }

.statusMessage {
	background:url("../images/gradient_fade_32px.gif") repeat-x scroll left top #EFEFEF !important;
	border: 1px solid #FFFFFF;
	margin-left: 20px;
	margin-right: 20px;
	opacity: 0.9;
	padding: 5px;
	font-family: font-family: Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	color: #000000;
	font-weight: bold;
}


/* =============================================================================
   19. FOOTER
   The page footer strip.
   ============================================================================= */

.footer_class {
	width: 99%;
	margin: 0 0.5%;
	height: 95px;
	background: linear-gradient(to bottom, #bcc2c7 0%, #d1d5d8 19%, #e0e1e3 39%, #f2f3f5 83%, #fbfbfb 100%);
	padding: 5px 0;
}

/* Inner footer link bar - centred */
#footer {
	text-align: center;
	padding: 4px 0 2px;
}

/* Footer copyright line */
#copyright {
	text-align: center;
}

/* Generic centred text utility (used by footer copyright and elsewhere) */
.textc {
	text-align: center;
}


/* =============================================================================
   20. HEADER & UTILITY SHORTHAND CLASSES
   Single-purpose width, height, padding, margin and text-align helpers used
   throughout the header and various inline layouts.
   ============================================================================= */

/* --- Width utilities --- */
.w10px { width: 10px; }
.w14px { width: 14px; }
.w15px { width: 15px; }
.w20px { width: 20px; }
.w22px { width: 22px; }
.w24px { width: 24px; }
.w25px { width: 25px; }
.w30px { width: 30px; }
.w32px { width: 32px; }
.w35px { width: 35px; }
.w40px { width: 40px; }
.w43px { width: 43px; }
.w45px { width: 45px; }
.w50px { width: 50px; }
.w55px { width: 55px; }
.w60px { width: 60px; }
.w65px { width: 65px; }
.w70px { width: 70px; }
.w72px { width: 72px; }
.w73px { width: 73px; }
.w75px { width: 75px; }
.w79px { width: 79px; }
.w80px { width: 80px; }
.w82px { width: 82px; }
.w85px { width: 85px; }
.w87px { width: 87px; }
.w90px { width: 90px; }
.w95px { width: 95px; }
.w100px { width: 100px; }
.w105px { width: 105px; }
.w106px { width: 106px; }
.w110px { width: 110px; }
.w115px { width: 115px; }
.w116px { width: 116px; }
.w120px { width: 120px; }
.w125px { width: 125px; }
.w128px { width: 128px; }
.w130px { width: 130px; }
.w135px { width: 135px; }
.w140px { width: 140px; }
.w150px { width: 150px; }
.w154px { width: 154px; }
.w157px { width: 157px; }
.w160px { width: 160px; }
.w165px { width: 165px; }
.w170px { width: 170px; }
.w175px { width: 175px; }
.w180px { width: 180px; }
.w185px { width: 185px; }
.w189px { width: 189px; }
.w190px { width: 190px; }
.w195px { width: 195px; }
.w200px { width: 200px; }
.w205px { width: 205px; }
.w210px { width: 210px; }
.w213px { width: 213px; }
.w220px { width: 220px; }
.w225px { width: 225px; }
.w230px { width: 230px; }
.w235px { width: 235px; }
.w240px { width: 240px; }
.w242px { width: 242px; }
.w244px { width: 244px; }
.w245px { width: 245px; }
.w250px { width: 250px; }
.w254px { width: 254px; }
.w255px { width: 255px; }
.w260px { width: 260px; }
.w265px { width: 265px; }
.w270px { width: 270px; }
.w275px { width: 275px; }
.w278px { width: 278px; }
.w280px { width: 280px; }
.w285px { width: 285px; }
.w290px { width: 290px; }
.w295px { width: 295px; }
.w300px { width: 300px; }
.w305px { width: 305px; }
.w310px { width: 310px; }
.w320px { width: 320px; }
.w330px { width: 330px; }
.w335px { width: 335px; }
.w340px { width: 340px; }
.w350px { width: 350px; }
.w355px { width: 355px; }
.w360px { width: 360px; }
.w370px { width: 370px; }
.w375px { width: 375px; }
.w380px { width: 380px; }
.w390px { width: 390px; }
.w395px { width: 395px; }
.w400px { width: 400px; }
.w405px { width: 405px; }
.w410px { width: 410px; }
.w420px { width: 420px; }
.w425px { width: 425px; }
.w430px { width: 430px; }
.w435px { width: 435px; }
.w440px { width: 440px; }
.w445px { width: 445px; }
.w450px { width: 450px; }
.w456px { width: 456px; }
.w460px { width: 460px; }
.w480px { width: 480px; }
.w500px { width: 500px; }
.w505px { width: 505px; }
.w515px { width: 515px; }
.w520px { width: 520px; }
.w530px { width: 530px; }
.w540px { width: 540px; }
.w554px { width: 554px; }
.w590px { width: 590px; }
.w597px { width: 597px; }
.w600px { width: 600px; }
.w650px { width: 650px; }
.w700px { width: 700px; }
.w730px { width: 730px; }
.w740px { width: 740px; }
.w745px { width: 745px; }
.w748px { width: 748px; }
.w750px { width: 750px; }
.w760px { width: 760px; }
.w782px { width: 782px; }
.w800px { width: 800px; }
.w840px { width: 840px; }
.w845px { width: 845px; }
.w850px { width: 850px; }
.w900px { width: 900px; }
.w930px { width: 930px; }
.w950px { width: 950px; }
.w1000px { width: 1000px; }
.w1100px { width: 1100px; }
.w1200px { width: 1200px; }

.w2 { width: 2%; }
.w3 { width: 3%; }
.w4 { width: 4%; }
.w5 { width: 5%; }
.w6 { width: 6%; }
.w7 { width: 7%; }
.w8 { width: 8%; }
.w9 { width: 9%; }
.w10 { width: 10%; }
.w12 { width: 12%; }
.w13 { width: 13%; }
.w14 { width: 14%; }
.w15 { width: 15%; }
.w16 { width: 16%; }
.w17 { width: 17%; }
.w18 { width: 18%; }
.w19 { width: 19%; }
.w20 { width: 20%; }
.w22 { width: 22%; }
.w23 { width: 23%; }
.w24 { width: 24%; }
.w25 { width: 25%; }
.w26 { width: 26%; }
.w27 { width: 27%; }
.w28 { width: 28%; }
.w29 { width: 29%; }
.w30 { width: 30%; }
.w31 { width: 31%; }
.w32 { width: 32%; }
.w33 { width: 33%; }
.w34 { width: 34%; }
.w35 { width: 35%; }
.w36 { width: 36%; }
.w37 { width: 37%; }
.w40 { width: 40%; }
.w42 { width: 42%; }
.w44 { width: 44%; }
.w45 { width: 45%; }
.w46 { width: 46%; }
.w47 { width: 47%; }
.w48 { width: 48%; }
.w49 { width: 49%; }
.w50 { width: 50%; }
.w51 { width: 51%; }
.w55 { width: 55%; }
.w60 { width: 60%; }
.w65 { width: 65%; }
.w70 { width: 70%; }
.w72 { width: 72%; }
.w73 { width: 73%; }
.w75 { width: 75%; }
.w80 { width: 80%; }
.w85 { width: 85%; }
.w87 { width: 87%; }
.w90 { width: 90%; }
.w91 { width: 91%; }
.w94 { width: 94%; }
.w95 { width: 95%; }
.w96 { width: 96%; }
.w98 { width: 98%; }
.w99 { width: 99%;}
.w100 { width: 100%; }
.w110 { width: 110%; }
.w130 { width: 130%; }
.w150 { width: 150%; }

/* --- Position utilities --- */
.t-18 { top: -18px; }
.t-15 { top: -15px; }
.t-13 { top: -13px; }
.t-10 { top: -10px; }
.t6 { top: 6px; }
.t30 { top: 30px; }
.t118 { top: 118px; }
.t150 { top: 150px; }
.t220 { top: 220px; }
.t250 { top: 250px; }
.t450 { top: 450px; }
.t50p { top: 50%; }

.l70 { left: 70px; }
.l150 { left: 150px; }
.l250 { left: 250px; }
.l400 { left: 400px; }
.l500 { left: 500px; }
.l300 { left: 300px; }
.l600 { left: 600px; }
.l10 { left: 10%; }

/* --- Height utilities --- */
.h18px  { height: 18px; }

/* --- Padding utilities (p = padding, number = px, t/b/l/r = side) --- */
.p2t { padding-top: 2px; }
.p2l { padding-left: 2px; }
.p2r { padding-right: 2px; }
.p2b { padding-bottom: 2px; }
.p3t { padding-top: 3px; }
.p3l { padding-left: 3px; }
.p3r { padding-right: 3px; }
.p3b { padding-bottom: 3px; }
.p4l { padding-left: 4px; }
.p4r { padding-right: 4px; }
.p4t { padding-top: 4px; }
.p5t { padding-top: 5px; }
.p5r { padding-right: 5px; }
.p5l { padding-left: 5px; }
.p5b { padding-bottom: 5px; }
.p6r { padding-right: 6px; }
.p6l { padding-left: 6px; }
.p7t { padding-top: 7px; }
.p8l { padding-left: 8px; }
.p10t { padding-top: 10px; }
.p10r{ padding-right: 10px; }
.p10l { padding-left: 10px; }
.p10b { padding-bottom: 10px; }
.p15l { padding-left: 15px; }
.p15r { padding-right: 15px; }
.p12r { padding-right: 12px; }
.p15b { padding-bottom: 15px; }
.p15t { padding-top: 15px; }
.p18l { padding-left: 18px; }
.p18b { padding-bottom: 18px; }
.p20b { padding-bottom: 20px; }
.p20t { padding-top: 20px; }
.p20l { padding-left: 20px; }
.p25l { padding-left: 25px; }
.p30l { padding-left: 30px; }
.p67l { padding-left: 67px; }
.p30r { padding-right: 30px; }
.p30b { padding-bottom: 30px; }
.p40l { padding-left: 40px; }
.p50l { padding-left: 50px; }
.p70l { padding-left: 70px; }
.p50b { padding-bottom: 50px; }
.p55b { padding-bottom: 55px; }
.p90r { padding-right: 90px; }
.p100l { padding-left: 100px; }
.p125t { padding-top: 125px; }
.p125l { padding-left: 125px; }
.p125b { padding-bottom: 125px; }
.p125r { padding-right: 125px; }
.p130l { padding-left: 130px; }
.p132l { padding-left: 132px; }
.p140l { padding-left: 140px; }
.p153l { padding-left: 153px; }
.p173l { padding-left: 173px; }
.p300l { padding-left: 300px; }
.p400l { padding-left: 400px; }
.p200t { padding-top: 200px; }
.p200l { padding-left: 200px; }
.p200b { padding-bottom: 200px; }
.p200r { padding-right: 200px; }

/* --- Margin utilities (m = margin, number = px, t/b/l/r = side) --- */
.m5t	{ margin-top: 5px; }
.m5b	{ margin-bottom: 5px; }
.m5l	{ margin-left: 5px; }
.m5r	{ margin-right: 5px; }
.m6t	{ margin-top: 6px; }
.m10r   { margin-right: 10px; }
.m20r   { margin-right: 20px; }
.m20t   { margin-top: 20px; }
.m20b   { margin-bottom: 20px; }

/* --- Text alignment utilities --- */
.textr  { text-align: right; }
.textl  { text-align: left; }

/* --- Logo sizing --- */
.logotex {
	max-height: 75px;
	width: auto;
}

/* =============================================================================
   21. FORM LAYOUT UTILITY CLASSES
   Single-purpose width, margin, padding and layout helpers used extensively
   in two-column form layouts (contact, product, order edit pages etc.)
   ============================================================================= */

/* --- Column layout --- */
/* Two-column form layout: each column is ~45% wide, floated left */
.columnl { float: left; box-sizing: border-box; }
.columnr { float:right; box-sizing: border-box; }
.w45	 { width: 45%; }

/* --- Width utilities (pixel-specific) --- */
.w55px  { width: 55px; }
.w80px  { width: 80px; }
.w100px { width: 100px; }
.w110px { width: 110px; }
.w120px { width: 120px; }
.w140px { width: 140px; }
.w150px { width: 150px; }
.w160px { width: 160px; }
.w170px { width: 170px; }
.w200px { width: 200px; }
.w240px { width: 240px; }
.w250px { width: 250px; }
.w275px { width: 275px; }

/* --- Padding utilities --- */
.p3l  { padding-left: 3px; }
.p3r  { padding-right: 3px; }
.p4t  { padding-top: 4px; }
.p4b  { padding-bottom: 4px; }
.p5t  { padding-top: 5px; }
.p5b  { padding-bottom: 5px; }
.p5l  { padding-left: 5px; }
.p5r  { padding-right: 5px; }
.p10l { padding-left: 10px; }
.p10r { padding-right: 10px; }
.p10t { padding-top: 10px; }
.p10b { padding-bottom: 10px; }
.p15l { padding-left: 15px; }
.p15r { padding-right: 15px; }
.p15t { padding-top: 15px; }
.p15b { padding-bottom: 15px; }

/* --- Margin utilities --- */
.m-3l { margin-left: -3px; }
.m-5l { margin-left: -5px; }
.m-15l { margin-left: -15px; }
.m-2t { margin-top: -2px; }
.m-4t { margin-top: -4px; }
.m0 { margin: 0px auto; }
.m1t { margin-top: 1px; }
.m2b { margin-bottom: 2px; }
.m2t { margin-top: 2px; }
.m2l { margin-left: 2px; }
.m2r { margin-right: 2px; }
.m3t { margin-top: 3px; }
.m3b { margin-bottom: 3px; }
.m3r { margin-right: 3px; }
.m4t { margin-top: 4px; }
.m4b { margin-bottom: 4px; }
.m4r { margin-right: 4px; }
.m4l { margin-left: 4px; }
.m5t { margin-top: 5px; }
.m5b { margin-bottom: 5px; }
.m5l { margin-left: 5px; }
.m5r { margin-right: 5px; }
.m6l { margin-left: 6px; }
.m6t { margin-top: 6px; }
.m6r { margin-right: 6px; }
.m6b { margin-bottom: 6px; }
.m7t { margin-top: 7px; }
.m7b { margin-bottom: 7px; }
.m7l { margin-left: 7px; }
.m7r { margin-right: 7px; }
.m8b { margin-bottom: 8px; }
.m8l { margin-left: 8px; }
.m8t { margin-top: 8px; }
.m10b { margin-bottom: 10px; }
.m10t { margin-top: 10px; }
.m10r { margin-right: 10px; }
.m10l { margin-left: 10px; }
.m12t { margin-top: 12px; }
.m12b { margin-bottom: 12px; }
.m12l { margin-left: 12px; }
.m12r { margin-right: 12px; }
.m14t { margin-top: 14px; }
.m15t { margin-top: 15px; }
.m15l { margin-left: 15px; }
.m15r { margin-right: 15px; }
.m15b { margin-bottom: 15px; }
.m16l { margin-left: 16px; }
.m17l { margin-left: 17px; }
.m18l { margin-left: 18px; }
.m20t { margin-top: 20px; }
.m20l { margin-left: 20px; }
.m23l { margin-left: 23px; }
.m20b { margin-bottom: 20px; }
.m20r { margin-right: 20px; }
.m25l { margin-left: 25px; }
.m30l { margin-left: 30px; }
.m17t { margin-top: 17px; }
.m30r { margin-right: 30px; }
.m30t { margin-top: 30px; }
.m32t { margin-top: 32px; }
.m40b { margin-bottom: 40px; }
.m35l { margin-left: 35px; }
.m38r { margin-right: 38px; }
.m40l { margin-left: 40px; }
.m40t { margin-top: 40px; }
.m40r { margin-right: 40px; }
.m45r { margin-right: 45px; }
.m50r { margin-right: 50px; }
.m50l { margin-left: 50px; }
.m52r { margin-right: 52px; }
.m55r { margin-right: 55px; }
.m55l { margin-left: 55px; }
.m60r { margin-right: 60px; }
.m60t { margin-top: 60px; }
.m70l { margin-left: 70px; }
.m70r { margin-right: 70px; }
.m80r { margin-right: 80px; }
.m80l { margin-left: 80px; }
.m85l { margin-left: 85px; }
.m100l { margin-left: 100px; }
.m100b { margin-bottom: 100px; }
.m104l { margin-left: 104px; }
.m110l { margin-left: 110px; }
.m120l { margin-left: 120px; }
.m120t { margin-top: 120px; }
.m130l { margin-left: 130px; }
.m134l { margin-left: 134px; }
.m135l { margin-left: 135px; }
.m140l { margin-left: 140px; }
.m144l { margin-left: 144px; }
.m145l { margin-left: 145px; }
.m148l { margin-left: 148px; }
.m150l { margin-left: 150px; }
.m150t { margin-top: 150px; }
.m150r { margin-right: 150px; }
.m153l { margin-left: 153px; }
.m155l { margin-left: 155px; }
.m164l { margin-left: 164px; }
.m175l { margin-left: 175px; }
.m180l { margin-left: 180px; }
.m182l { margin-left: 182px; }
.m200r { margin-right: 200px; }
.m200t { margin-top: 200px; }
.m200l { margin-left: 200px; }
.m215l { margin-left: 215px; }
.m220r { margin-right: 220px; }
.m220l { margin-left: 220px; }
.m235l { margin-left: 235px; }
.m243l { margin-left: 243px; }
.m250r { margin-right: 250px; }
.m250l { margin-left: 250px; }
.m270l { margin-left: 270px; }
.m285r { margin-right: 285px; }
.m300l { margin-left: 300px; }
.m310l { margin-left: 310px; }
.m313t { margin-top:313px; }
.m320l { margin-left: 320px; }
.m350l { margin-left: 350px; }
.m365l { margin-left: 365px; }
.m380r { margin-right: 380px; }
.m395l { margin-left: 395px; }
.m400l { margin-left: 400px; }
.m418l { margin-left: 418px; }
.m500l { margin-left: 500px; }
.m520l { margin-left: 520px; }
.m635l { margin-left: 635px; }
.m965l { margin-left: 965px; }
.m840l { margin-left: 840px; }

/* --- Background utilities --- */
/* bgr: subtle light grey background used on left form column */
.bgr { background-color: #f8f9fa; }

/* --- Help / tooltip trigger button --- */
/* Small circular '?' button used inline next to fields */
.help {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	line-height: normal;
	text-align: center;
	background-color: #edf7fc;
	color: #216e9c;
	border: 1px solid #b9d8ec;
	border-radius: 50%;
	font-size: 12px;
	font-weight: bold;
	cursor: help;
	vertical-align: middle;
	flex-shrink: 0;
	transform: translateY(1px);
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.help:hover {
	background-color: #2176a8;
	color: #ffffff;
	border-color: #2176a8;
	box-shadow: 0 2px 5px rgba(33, 118, 168, 0.24);
}

/* --- Long-running process modal --- */
.dynamic_update_progress,
.compliance_progress {
	position: fixed;
	inset: 0;
	z-index: 4000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 23, 42, .62);
	backdrop-filter: blur(3px);
}
.dynamic_update_progress.hidden,
.compliance_progress.hidden { display: none; }
.dynamic_update_progress_card,
.compliance_progress_card {
	width: 420px;
	padding: 28px;
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 24px 60px rgba(15, 23, 42, .32);
	font-family: Arial, sans-serif;
}
.dynamic_update_progress_header,
.compliance_progress_header { color: #102a43; font-size: 20px; font-weight: bold; }
.dynamic_update_progress_header { display: flex; align-items: center; gap: 10px; }
.dynamic_update_progress_spinner { width: 18px; height: 18px; border: 3px solid #d9e2ec; border-top-color: #147d9a; border-radius: 50%; animation: dynamicUpdateSpin .9s linear infinite; }
.dynamic_update_progress_task,
.compliance_progress_task { margin: 24px 0 12px; color: #334e68; font-size: 15px; }
.dynamic_update_progress_track,
.compliance_progress_track { height: 10px; overflow: hidden; border-radius: 999px; background: #e8f1f5; }
.dynamic_update_progress_meter,
.compliance_progress_meter { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #147d9a, #2cb1bc); transition: width .35s ease; }
.dynamic_update_progress_footer,
.compliance_progress_footer { display: flex; justify-content: space-between; margin-top: 9px; color: #627d98; font-size: 13px; }
.dynamic_update_progress_note,
.compliance_progress_note { margin: 22px 0; color: #627d98; font-size: 13px; line-height: 1.45; }
@keyframes dynamicUpdateSpin { to { transform: rotate(360deg); } }

/* --- Lease generator and preview --- */
.lease-unresolved,
.lease-missing {
	background: #ffe5e5 !important;
	border: 1px solid #c62828 !important;
	color: #8a1f11 !important;
	font-weight: bold;
}

.lease-preview {
	margin-top: 20px;
}

.lease-preview .page {
	box-shadow: 0 0 3px #777777;
}

.lease-page-carousel {
	position: relative;
	width: 210mm;
	max-width: 100%;
	margin: 20px auto;
}

.lease-page-carousel__heading {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 8px;
	text-align: center;
}

.lease-page-carousel__navigation {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lease-page-carousel__indicator {
	display: inline-block;
	min-width: 100px;
	color: #243746;
	font-size: 14px;
}

.lease-page-carousel__label {
	font-weight: bold;
	margin-left: 12px;
}

.lease-page-carousel__go-label {
	display: inline-block;
	color: #243746;
	font-weight: bold;
}

.lease-page-carousel__label span {
	display: inline-block;
	margin-right: 4px;
}

.lease-merge-summary {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 0;
}

.lease-merge-summary button {
	border: 0;
	border-radius: 3px;
	cursor: pointer;
	font: inherit;
	padding: 5px 8px;
}

.lease-merge-summary__total {
	background: #e8edf2;
	color: #243746;
}

.lease-merge-summary__ready {
	background: #dff1df;
	color: #176b24;
}

.lease-merge-summary__empty {
	background: #fff3cd;
	color: #765b00;
}

.lease-merge-summary__missing,
.lease-merge-summary__invalid {
	background: #ffe5e5;
	color: #9f1f1f;
}

.lease-copy-source {
	position: fixed;
	left: -9999px;
	top: 0;
}

.lease-merge-results {
	box-sizing: border-box;
	width: 100%;
	min-height: 180px;
	margin: 0 0 12px;
	padding: 8px;
	border: 1px solid #b7c3cf;
	font: 12px Consolas, "Courier New", monospace;
	line-height: 1.4;
}

.lease-current-error {
	outline: 3px solid #d00000 !important;
	box-shadow: 0 0 10px #d00000;
}

.lease-page-carousel .lease-preview {
	margin-top: 0;
}

.lease-page-carousel .page {
	display: none;
	position: relative;
	width: 210mm;
	max-width: 100%;
	height: 297mm;
	margin: 0 auto;
	overflow: hidden;
	background: #ffffff;
}

.lease-page-carousel .page.is-active {
	display: block;
}

.lease-page-carousel .page img {
	display: block;
	width: 100%;
	height: 100%;
}

.lease-page-carousel .field,
.lease-page-carousel .mask {
	position: absolute;
	overflow: hidden;
}

.lease-page-carousel .field {
	background: transparent;
	padding: 0;
	color: #1f1f1f;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	line-height: 1.15;
	white-space: nowrap;
}

.lease-page-carousel .field.lease-checkbox {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	text-align: center;
}

.lease-page-carousel .mask {
	background: #ffffff;
	color: transparent;
}

.lease-page-carousel__button {
	width: 38px;
	height: 52px;
	border: 0;
	border-radius: 4px;
	background: rgba(0, 0, 0, .65);
	color: #ffffff;
	font-size: 30px;
	cursor: pointer;
}

@media print {
	body * {
		visibility: hidden;
	}

	#leasePagePreview,
	#leasePagePreview * {
		visibility: visible;
	}

	#leasePagePreview {
		position: absolute;
		left: 0;
		top: 0;
		margin: 0;
	}

	.lease-page-carousel .page {
		display: block !important;
		width: 210mm;
		height: 297mm;
		margin: 0;
		box-shadow: none;
		break-after: page;
		page-break-after: always;
	}

	.lease-page-carousel .page:last-child {
		break-after: auto;
		page-break-after: auto;
	}
}


.lease-validation td {
	vertical-align: top;
	padding: 5px;
	border-bottom: 1px solid #dddddd;
}

.lease-page-content {
	padding: 12px 18px;
}

.lease-validation-message {
	margin: 10px 0;
	padding: 8px 10px;
	border: 1px solid #d9b5b5;
	background: #fff7f7;
	color: #641f1a;
}

.lease-validation-message ul {
	margin: 6px 0 0 20px;
}

.lease-prompt-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 4000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, .45);
}

.lease-prompt-modal.hidden {
	display: none;
}

.lease-prompt-modal-card {
	width: 760px;
	max-width: 100%;
	padding: 20px;
	background: #ffffff;
	border: 1px solid #777777;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.lease-prompt-text {
	width: 100%;
	height: 340px;
	margin: 10px 0;
	padding: 8px;
	font-family: Consolas, "Courier New", monospace;
	font-size: 12px;
	line-height: 1.4;
	resize: vertical;
}

.lease-prompt-actions {
	text-align: right;
}

.lease-generator-actions {
	margin: 16px 0 0;
}

/* --- Unique colourful menu icons ---
/* Each live menu ID owns a distinct 24px SVG and a role-specific accent colour. */
#menuItemSystemDashboard { background-image: url('../icons/menu/unique/menuItemSystemDashboard.svg') !important; }
#menuItemOperationalAttention { background-image: url('../icons/menu/unique/menuItemOperationalAttention.svg') !important; }
#menuItemActivitySummary { background-image: url('../icons/menu/unique/menuItemActivitySummary.svg') !important; }
#menuItemFinanceOperations { background-image: url('../icons/menu/unique/menuItemFinanceOperations.svg') !important; }
#menuItemApplicationsRequests { background-image: url('../icons/menu/unique/menuItemApplicationsRequests.svg') !important; }
#menuItemMyDetailsSummary { background-image: url('../icons/menu/unique/menuItemMyDetailsSummary.svg') !important; }
#menuItemMyOrders { background-image: url('../icons/menu/unique/menuItemMyOrders.svg') !important; }
#menuItemMyMarketing { background-image: url('../icons/menu/unique/menuItemMyMarketing.svg') !important; }
#menuItemMyMarketingChannels { background-image: url('../icons/menu/unique/menuItemMyMarketingChannels.svg') !important; }
#menuItemQuickContactCreation { background-image: url('../icons/menu/unique/menuItemQuickContactCreation.svg') !important; }
#menuItemCreateNewContact { background-image: url('../icons/menu/unique/menuItemCreateNewContact.svg') !important; }
#menuItemRecentContacts { background-image: url('../icons/menu/unique/menuItemRecentContacts.svg') !important; }
#menuItemProductDashboard { background-image: url('../icons/menu/unique/menuItemProductDashboard.svg') !important; }
#menuItemInventoryBuilder { background-image: url('../icons/menu/unique/menuItemInventoryBuilder.svg') !important; }
#menuItemInventoryEditor { background-image: url('../icons/menu/unique/menuItemInventoryEditor.svg') !important; }
#menuItemCreateDonation { background-image: url('../icons/menu/unique/menuItemCreateDonation.svg') !important; }
#menuItemCreateEvent { background-image: url('../icons/menu/unique/menuItemCreateEvent.svg') !important; }
#menuItemCreateHotel { background-image: url('../icons/menu/unique/menuItemCreateHotel.svg') !important; }
#menuItemCreateInsurance { background-image: url('../icons/menu/unique/menuItemCreateInsurance.svg') !important; }
#menuItemCreateMembership { background-image: url('../icons/menu/unique/menuItemCreateMembership.svg') !important; }
#menuItemCreateMerchandise { background-image: url('../icons/menu/unique/menuItemCreateMerchandise.svg') !important; }
#menuItemCreateRealEstate { background-image: url('../icons/menu/unique/menuItemCreateRealEstate.svg') !important; }
#menuItemCreateRestaurantBar { background-image: url('../icons/menu/unique/menuItemCreateRestaurantBar.svg') !important; }
#menuItemCreateVoucher { background-image: url('../icons/menu/unique/menuItemCreateVoucher.svg') !important; }
#menuItemCreateProductGroup { background-image: url('../icons/menu/unique/menuItemCreateProductGroup.svg') !important; }
#menuItemFastSales { background-image: url('../icons/menu/unique/menuItemFastSales.svg') !important; }
#menuItemFastBasket { background-image: url('../icons/menu/unique/menuItemFastBasket.svg') !important; }
#menuItemRecentOrders { background-image: url('../icons/menu/unique/menuItemRecentOrders.svg') !important; }
#menuItemBatches { background-image: url('../icons/menu/unique/menuItemBatches.svg') !important; }
#menuItemSavedProcesses { background-image: url('../icons/menu/unique/menuItemSavedProcesses.svg') !important; }
#menuItemScheduledTasks { background-image: url('../icons/menu/unique/menuItemScheduledTasks.svg') !important; }
#menuItemCustomReports { background-image: url('../icons/menu/unique/menuItemCustomReports.svg') !important; }
#menuItemScheduledReports { background-image: url('../icons/menu/unique/menuItemScheduledReports.svg') !important; }
#menuItemReportGraphs { background-image: url('../icons/menu/unique/menuItemReportGraphs.svg') !important; }
#menuItemAccessControl { background-image: url('../icons/menu/unique/menuItemAccessControl.svg') !important; }
#menuItemBanking { background-image: url('../icons/menu/unique/menuItemBanking.svg') !important; }
#menuItemBankingBranches { background-image: url('../icons/menu/unique/menuItemBankingBranches.svg') !important; }
#menuItemBankingConsents { background-image: url('../icons/menu/unique/menuItemBankingConsents.svg') !important; }
#menuItemBankingTransactions { background-image: url('../icons/menu/unique/menuItemBankingTransactions.svg') !important; }
#menuItemBankingInstructionLog { background-image: url('../icons/menu/unique/menuItemBankingInstructionLog.svg') !important; }
#menuItemCountries { background-image: url('../icons/menu/unique/menuItemCountries.svg') !important; }
#menuItemDemographics { background-image: url('../icons/menu/unique/menuItemDemographics.svg') !important; }
#menuItemDespatchMethods { background-image: url('../icons/menu/unique/menuItemDespatchMethods.svg') !important; }
#menuItemDocuments { background-image: url('../icons/menu/unique/menuItemDocuments.svg') !important; }
#menuItemDocumentLayouts { background-image: url('../icons/menu/unique/menuItemDocumentLayouts.svg') !important; }
#menuItemDocumentSequences { background-image: url('../icons/menu/unique/menuItemDocumentSequences.svg') !important; }
#menuItemDocumentRules { background-image: url('../icons/menu/unique/menuItemDocumentRules.svg') !important; }
#menuItemWebContent { background-image: url('../icons/menu/unique/menuItemWebContent.svg') !important; }
#menuItemExchangeRates { background-image: url('../icons/menu/unique/menuItemExchangeRates.svg') !important; }
#menuItemFeeManagement { background-image: url('../icons/menu/unique/menuItemFeeManagement.svg') !important; }
#menuItemFees { background-image: url('../icons/menu/unique/menuItemFees.svg') !important; }
#menuItemFeeGroups { background-image: url('../icons/menu/unique/menuItemFeeGroups.svg') !important; }
#menuItemMarketing { background-image: url('../icons/menu/unique/menuItemMarketing.svg') !important; }
#menuItemMarketingCampaigns { background-image: url('../icons/menu/unique/menuItemMarketingCampaigns.svg') !important; }
#menuItemMarketingCreatives { background-image: url('../icons/menu/unique/menuItemMarketingCreatives.svg') !important; }
#menuItemMarketingPlacements { background-image: url('../icons/menu/unique/menuItemMarketingPlacements.svg') !important; }
#menuItemMarketingChannels { background-image: url('../icons/menu/unique/menuItemMarketingChannels.svg') !important; }
#menuItemMarketingExecution { background-image: url('../icons/menu/unique/menuItemMarketingExecution.svg') !important; }
#menuItemMarketingPerformance { background-image: url('../icons/menu/unique/menuItemMarketingPerformance.svg') !important; }
#menuItemGiftAidCharities { background-image: url('../icons/menu/unique/menuItemGiftAidCharities.svg') !important; }
#menuItemPayments { background-image: url('../icons/menu/unique/menuItemPayments.svg') !important; }
#menuItemMandateOptions { background-image: url('../icons/menu/unique/menuItemMandateOptions.svg') !important; }
#menuItemMandateCodes { background-image: url('../icons/menu/unique/menuItemMandateCodes.svg') !important; }
#menuItemServiceProviders { background-image: url('../icons/menu/unique/menuItemServiceProviders.svg') !important; }
#menuItemPaymentMethods { background-image: url('../icons/menu/unique/menuItemPaymentMethods.svg') !important; }
#menuItemPaymentProcessRules { background-image: url('../icons/menu/unique/menuItemPaymentProcessRules.svg') !important; }
#menuItemPostcodeGroups { background-image: url('../icons/menu/unique/menuItemPostcodeGroups.svg') !important; }
#menuItemPricing { background-image: url('../icons/menu/unique/menuItemPricing.svg') !important; }
#menuItemPromoCodes { background-image: url('../icons/menu/unique/menuItemPromoCodes.svg') !important; }
#menuItemPriceBands { background-image: url('../icons/menu/unique/menuItemPriceBands.svg') !important; }
#menuItemPriceCapLimits { background-image: url('../icons/menu/unique/menuItemPriceCapLimits.svg') !important; }
#menuItemPriceCharts { background-image: url('../icons/menu/unique/menuItemPriceCharts.svg') !important; }
#menuItemPriceGroups { background-image: url('../icons/menu/unique/menuItemPriceGroups.svg') !important; }
#menuItemPriceRules { background-image: url('../icons/menu/unique/menuItemPriceRules.svg') !important; }
#menuItemPriceRuleOffers { background-image: url('../icons/menu/unique/menuItemPriceRuleOffers.svg') !important; }
#menuItemPrices { background-image: url('../icons/menu/unique/menuItemPrices.svg') !important; }
#menuItemProductLocations { background-image: url('../icons/menu/unique/menuItemProductLocations.svg') !important; }
#menuItemRegions { background-image: url('../icons/menu/unique/menuItemRegions.svg') !important; }
#menuItemReservedSeating { background-image: url('../icons/menu/unique/menuItemReservedSeating.svg') !important; }
#menuItemReservedSeatingLayout { background-image: url('../icons/menu/unique/menuItemReservedSeatingLayout.svg') !important; }
#menuItemLayoutPlanRules { background-image: url('../icons/menu/unique/menuItemLayoutPlanRules.svg') !important; }
#menuItemTaxRates { background-image: url('../icons/menu/unique/menuItemTaxRates.svg') !important; }
#menuItemTracking { background-image: url('../icons/menu/unique/menuItemTracking.svg') !important; }
#menuItemAIIntegration { background-image: url('../icons/menu/unique/menuItemAIIntegration.svg') !important; }
#menuItemAIProviders { background-image: url('../icons/menu/unique/menuItemAIProviders.svg') !important; }
#menuItemAIUseCases { background-image: url('../icons/menu/unique/menuItemAIUseCases.svg') !important; }
#menuItemAIPromptTemplates { background-image: url('../icons/menu/unique/menuItemAIPromptTemplates.svg') !important; }
#menuItemAIBudgetAlerts { background-image: url('../icons/menu/unique/menuItemAIBudgetAlerts.svg') !important; }
#menuItemAIContentApproval { background-image: url('../icons/menu/unique/menuItemAIContentApproval.svg') !important; }
#menuItemAIRequestLog { background-image: url('../icons/menu/unique/menuItemAIRequestLog.svg') !important; }
#menuItemAPIMethods { background-image: url('../icons/menu/unique/menuItemAPIMethods.svg') !important; }
#menuItemViewAsJSON { background-image: url('../icons/menu/unique/menuItemViewAsJSON.svg') !important; }
#menuItemViewAsSOAP { background-image: url('../icons/menu/unique/menuItemViewAsSOAP.svg') !important; }
#menuItemAPIRequestLog { background-image: url('../icons/menu/unique/menuItemAPIRequestLog.svg') !important; }
#menuItemAssets { background-image: url('../icons/menu/unique/menuItemAssets.svg') !important; }
#menuItemBlacklists { background-image: url('../icons/menu/unique/menuItemBlacklists.svg') !important; }
#menuItemCacheControl { background-image: url('../icons/menu/unique/menuItemCacheControl.svg') !important; }
#menuItemCompliance { background-image: url('../icons/menu/unique/menuItemCompliance.svg') !important; }
#menuItemConnections { background-image: url('../icons/menu/unique/menuItemConnections.svg') !important; }
#menuItemConfiguration { background-image: url('../icons/menu/unique/menuItemConfiguration.svg') !important; }
#menuItemExternalSystems { background-image: url('../icons/menu/unique/menuItemExternalSystems.svg') !important; }
#menuItemHealthAndSafetyRules { background-image: url('../icons/menu/unique/menuItemHealthAndSafetyRules.svg') !important; }
#menuItemLanguageTranslation { background-image: url('../icons/menu/unique/menuItemLanguageTranslation.svg') !important; }
#menuItemLookups { background-image: url('../icons/menu/unique/menuItemLookups.svg') !important; }
#menuItemMessages { background-image: url('../icons/menu/unique/menuItemMessages.svg') !important; }
#menuItemPriceAudit { background-image: url('../icons/menu/unique/menuItemPriceAudit.svg') !important; }
#menuItemStatuses { background-image: url('../icons/menu/unique/menuItemStatuses.svg') !important; }
#menuItemStatusAudit { background-image: url('../icons/menu/unique/menuItemStatusAudit.svg') !important; }
#menuItemTimeZones { background-image: url('../icons/menu/unique/menuItemTimeZones.svg') !important; }
#menuItemUserManagement { background-image: url('../icons/menu/unique/menuItemUserManagement.svg') !important; }
#menuItemUsers { background-image: url('../icons/menu/unique/menuItemUsers.svg') !important; }
#menuItemUserGroups { background-image: url('../icons/menu/unique/menuItemUserGroups.svg') !important; }
#menuItemGroupCollections { background-image: url('../icons/menu/unique/menuItemGroupCollections.svg') !important; }
#menuItemUtilities { background-image: url('../icons/menu/unique/menuItemUtilities.svg') !important; }
#menuItemWaitingRoom { background-image: url('../icons/menu/unique/menuItemWaitingRoom.svg') !important; }