/* -----------------------------------------------------------------------------
   KVActive Hub - site audit fixes (Oct 2026)
   Loaded LAST on every hub page (all master pages + Direct Debit) so these rules
   win over the older page-specific stylesheets and the xenon/bootstrap theme.
----------------------------------------------------------------------------- */

/* ---------- One font and one background across member pages ---------- */

/* My Info pulled in bootstrap/xenon, which switches everything to Arimo */
body, body h1, body h2, body h3, body h4, body h5, body h6,
body p, body label, body input, body select, body textarea, body button,
body table, body th, body td, body .btn, body .form-control, body .panel,
body .panel-heading, body #navigation a, body #loginnav a {
	font-family: 'Montserrat', Helvetica, Arial, Verdana, sans-serif;
}

/* three backgrounds were in use (#f4f7fa, #eeeeee, white) - use the light blue-grey everywhere */
html body,
body .page-container,
body #wrapper,
body #body {
	background-color: #f4f7fa !important;
}

/* ---------- Greeting ("Good Afternoon Surge,") ---------- */

#goodmessage {
	font-family: 'Montserrat', Helvetica, Arial, Verdana, sans-serif !important;
	font-weight: 700 !important;
	color: #29aae2 !important;
	font-size: 40px;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	padding-top: 30px;
	margin: 0;
}

#goodmessage .damionfont {
	font-family: Northwell !important;
	font-weight: 400 !important;
	font-size: 2em;
	text-transform: capitalize;
}

#calendarheader::after {
	content: "";
	display: table;
	clear: both;
}

@media screen and (max-width:800px) {
	#goodmessage {
		font-size: 28px;
	}
}

@media screen and (max-width:599px) {
	#goodmessage {
		font-size: 22px;
		padding: 15px 16px 0 16px;
	}

	#goodmessage .damionfont {
		font-size: 1.6em;
	}

	/* green "current page" underline sat under the full screen width */
	#loginnav ul li {
		text-align: center;
	}

	#loginnav ul li a {
		display: inline-block;
		width: auto;
		float: none;
		margin: 4px auto;
	}
}

/* ---------- Header ---------- */

/* Book Now is hidden on mobile on every page (it overlapped the menu icon on some) */
@media screen and (max-width:1060px) {
	#headerbookbtt {
		display: none !important;
	}
}

/* ---------- Page titles: one size everywhere ---------- */

#body > .panel > .panel-heading,
#body .datapanels > .panel-heading,
.textboxwrapper > h1 {
	font-size: 26px;
	line-height: 1.3;
	font-weight: 600;
	color: #29aae2;
	text-transform: uppercase;
	text-align: center;
	background: none;
}

/* the 60px top margin left a tall empty band under the member menu */
#body > .panel > .panel-heading {
	margin-top: 20px;
	padding-top: 10px;
}

#body .datapanels > .panel-heading:empty {
	display: none;
}

/* ---------- Footer ---------- */

#copyrsiteby {
	padding-left: 16px;
	padding-right: 16px;
}

/* ---------- My Session Stats / My Sessions table ---------- */

.mysessionsstats .datalist th,
.mysessions .datalist th,
.myhistoricalsessions .datalist th {
	font-size: 1em;
	font-weight: 700;
	text-transform: uppercase;
}

#searchaddnewbox #crmsearch {
	font-size: 14px;
}

/* ---------- My Info ---------- */

.nolistdata {
	padding: 15px 5%;
	color: #777b7d;
	font-size: 14px;
}

@media screen and (max-width:767px) {
	/* page was ~3px wider than the screen on mobile */
	html, body {
		max-width: 100%;
		overflow-x: hidden;
	}
}

/* ---------- Calendar (Book Session / Book Physio) ---------- */

/* time labels (06:00, 06:30 ...) touched the left edge */
.calendar .calendar-timeline li span {
	padding-left: 8px;
}

/* ---------- Shop / Prices ---------- */

#products > ul li.price .pricefreq {
	margin-left: 6px;
}

.pkgmobileheading {
	display: none;
}

@media screen and (max-width:900px) {
	/* left-hand headings are hidden on mobile, so show them above each group instead */
	.pkgmobileheading {
		display: block;
		float: left;
		width: 100%;
		clear: both;
		margin: 10px 0 15px 0;
		padding: 0 16px;
		color: #29aae2;
		font-size: 22px;
		text-transform: uppercase;
		text-align: left;
	}

	/* large blank gap above the first card */
	#content {
		margin-top: 20px !important;
	}
}