/*
 * Buzz Gym global stylesheet — the house style for the member portal and staff UI.
 *
 * Also loaded by the join funnel, where join.css layers over it — so a change
 * here reaches the join screens too. Colours and fonts come from brand.css,
 * which GlobalAsset registers first. Served from every gym's own hostname, so do not reintroduce
 * absolute members.buzzgym.co.uk URLs — images live in ../images and are published
 * alongside this file.
 */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {font-family: var(--buzz-font-heading); font-weight:700; text-transform: uppercase;}
h1, .h1 {font-size: 1.6rem;}
h2, .h2 {font-size: 1.2rem;}
h3, .h3 {font-size: 1rem;}
h4, .h4 {font-size: 0.8rem;}
body {font-family: var(--buzz-font-body); font-size:0.8rem;background-color:black;}
.top-margin {padding-top: var(--buzz-top-margin);}
.fleft {float: left;}
.fright {float: right;}
.hidden {display:none;}
.inline {display: inline;}
.small {font-size: small;}
.smaller {font-size: smaller;}
.large {font-size: large;}
.larger {font-size: larger;}
.nowrap {white-space:nowrap;}
.italic {font-style: italic;}
.white {color: var(--buzz-off-white);}
.white:hover {color: var(--buzz-off-white);}
.errorMessage {color: red;}
.img-center {margin: 0 auto;}
a {color:inherit;text-underline-offset: 0.2em;text-decoration-line: underline;text-decoration-style: dotted;}
a.btn, a img, .breadcrumb a {text-decoration: none;}
.card-body a, p a, a:hover {color:var(--buzz-green);}
.animate {-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.footer-info {font-size:small;text-align: center;}
.green {color:var(--buzz-green);}
.bg-info {background-color: var(--buzz-panel) !important;}
.bg-green {background-color:var(--buzz-green);}
.modal-content {background-color: #000000;border: 2px solid #FFF;border-radius: 0px;}
.modal-dialog {max-width: 550px;margin: 20% auto;}
.kv-table-header {background:none!important;}
.btn-buzz {
	background:var(--buzz-green);
	color:#fff!important;
	font: 12px/14px var(--buzz-font-body);
	font-weight: bold;
	text-transform: uppercase;
	padding: 10px 22px 10px;
	border-radius: 3px !important;
	-moz-border-radius: 3px !important;
	-webkit-border-radius: 3px !important;
	text-decoration:none;
	cursor:pointer;
	margin:5px 0;
	border:0;
}
.btn-buzz:hover {
	background-color:var(--buzz-grey-hover);
	color:var(--buzz-green)!important;
}
.btn-buzz-inverse {
	background:black!important;
	color:var(--buzz-green)!important;
}
.join-button {background-color:var(--buzz-green);border-radius: 42px;padding: 0.3rem;border: 2px solid white;font-family: var(--buzz-font-heading);font-weight:700;text-transform: uppercase;font-size: 0.9rem;}
.btn-green {background-color:var(--buzz-green);}
.btn-green:hover {background-color:var(--buzz-green-dark);}
.timetable-legend { list-style: none; margin-top:10px; }
.timetable-legend li { float: left; list-style: none; width:220px;}
.timetable-legend span { border: none; float: left; width: 20px; height: 20px; margin: 2px; }

.timetable-vertical-label {
	text-align: center;
	vertical-align: top;
	background-color: black;
	font-weight: bolder;
	color: var(--buzz-green);
  width: 30px!important;
  max-width: 30px!important;
	padding:0!important;
}

.date-label {
	background-color: black;
	font-weight: bolder;
	color: var(--buzz-green);
	text-align: center;
	width: 20%;
	float:left;
	padding:0!important;
}

.class-event-v2 {
	margin: 0 10px 10px 0;
	float: left;
	padding: 5px;
	color: white;
	width:100%;
}

.cancelled-event-v2 {
	opacity:0.25;
}

tr.timetable-chunk>td {
  padding-bottom: 50px!important;
}

.table.table-borderless td, .table.table-borderless th {
	border: 0 !important;
}

.table.table-borderless {
	margin-bottom: 0px;
}

.timetable-divide {
	margin:5px 0;
}

.class-column {
	width:20%;
	float:left;
}

a.timefilter, a.typefilter {
	text-decoration: none;
	cursor: pointer;
}

a.typefilter {
	color:white!important;
}

a.typefilter:hover {
	color:black!important;
}

div.required label:after {
	content: " *";
	color: red;
}
div.required div.custom-radio label:after, div.required div.custom-checkbox label:after {
	content: "*";
	color: red;
  padding-left: 5px;
}

/*
 * Field spacing for yii\widgets\ActiveForm.
 *
 * Bootstrap 3 and 4 both shipped .form-group with a bottom margin; Bootstrap 5
 * dropped the class outright and expects an mb-3 on each wrapper instead. The
 * plain widget still emits .form-group, so every field in those forms sat flush
 * against the one above it and each label read as if it belonged to the input
 * over it rather than the one under it.
 *
 * yii\bootstrap5\ActiveForm already puts mb-3 on its own containers, so the
 * join funnel and the other bootstrap5 forms are untouched by this.
 */
.form-group {
	margin-bottom: 1rem;
}

/*
 * Validation states for yii\widgets\ActiveForm.
 *
 * Nearly every form in the app is still the plain widget rather than the
 * yii\bootstrap5 one, so a field that fails validation gets Bootstrap 3's
 * .has-error on its .form-group and the message goes in a .help-block.
 * Bootstrap 5 styles neither, which left server-side errors rendering as
 * ordinary body text — indistinguishable from a hint. These rules give them
 * the .is-invalid / .invalid-feedback treatment so both kinds of form read
 * the same. Delete a rule only when the last plain ActiveForm is gone.
 *
 * The message is marked by a warning glyph and bold weight as well as by
 * the red, and the control itself gains a border, so nothing here depends on
 * colour alone.
 */
.has-error > label, .has-error .control-label {
	color: var(--buzz-red);
	font-weight: bold;
}
.has-error .form-control, .has-error .form-select, .has-error .form-check-input {
	border-color: var(--buzz-red);
}
.has-error .form-control:focus, .has-error .form-select:focus, .has-error .form-check-input:focus {
	border-color: var(--buzz-red);
	box-shadow: 0 0 0 0.25rem rgba(235, 54, 54, 0.35);
}
.has-error .help-block {
	color: var(--buzz-red);
	font-weight: bold;
}
/* U+FE0E keeps this the text warning sign rather than the emoji one. */
.has-error .help-block:before {
	content: "\26A0\FE0E";
	padding-right: 0.35em;
}
.chosen-type {
	background-color: var(--buzz-green);
}

.join-card {
	border: 3px solid var(--buzz-green);
	cursor: pointer;
	margin-bottom:15px;
}
.card {
	background-color: #000000;
}
.card-buzz {
	border-color: var(--buzz-green);
	border-radius:0!important;
}
.card-buzz>.card-header {
	color: #fff;
	background-color: var(--buzz-green);
	border-color: var(--buzz-green);
	border-radius:0!important;
	text-align: center;
	text-transform: uppercase;
	font-size: 0.9rem;
	font-family: var(--buzz-font-heading);
	font-weight: 600;
	padding: 0.5rem 0.5rem;
}
.card-header {
    font-family: var(--buzz-font-heading);
    font-weight: 700;
    text-transform: uppercase;
}
.card-offer {
	border-color: var(--buzz-green);
	border-radius:0!important;
	margin-bottom:2rem!important;
}
#voucherframe {
	width:100%;
	border:2px white dashed;
	padding:15px;
	margin-bottom:20px;
}

#voucherframe h1 {
	font-size: 69px;
	font-weight:bold;
	margin-top:0;
}

#voucherframe h2 {
	font-size: 18px;
	font-weight:bold;
	line-height: 21px;
}

#voucherframe h3 {
	font-size:15px;
	font-weight:bold;
	line-height:20px;
}

#voucherframe p {
	font-size:12px;
	font-weight:bold;
	line-height:18px;
}

#voucherlogo {
	float:left;
	margin-top:10px;
	margin-left:10px;
	margin-right:20px;
}

.offerssidebar {
	padding: 0;
	list-style-type: none;
}
.offerssidebar > li {
	padding-bottom:10px;
	margin:0;
}
.offerssidebar > li > a:hover,
.offerssidebar > li.hover > a,
.offerssidebar > .active > a {color:var(--buzz-green);}

.offer-heading {
	margin: 0px 0 20px;
}

.notification-header {text-align: center;font-weight:bolder;text-transform: uppercase;font-size:1.5rem;padding:15px;}
.notification {font-size:1rem;text-align:center;}
.announcement {
	text-align:center;
	margin-bottom:15px;
}
.announcement .card-header {
	font-size: 1rem;
	font-weight:bolder;
	padding: 0.5rem 0.5rem;
}
.announcement .card-body {
	background-color: white;
	color: black;
}

.template-header-pic {background-repeat: no-repeat;background-size: cover;background-position: center center;position: relative;padding: 20px;display: flex;flex-direction: column;align-items: center;justify-content: center;}
h1.template-title-large {font-family: var(--buzz-font-display);font-style: italic;font-size: clamp(53px, 7vw, 80px);text-shadow: 0px 0px 10px #0000004d;line-height: 1em;margin-bottom: 0px;}
h1.template-title-small {font-family: var(--buzz-font-display);font-style: italic;font-size: clamp(26px, 5vw, 40px);;text-shadow: 0px 0px 10px #0000004d;margin-bottom: 0;}
.header-template-spacer {margin: 24vh 0;display: inline-block;}

/* Desktop */
@media (min-width: 768px) {
	.change-gym-btn {float: right !important;}
}

/* Mobile */
@media (max-width: 767px) {
	.class-column, .date-label {
		width:50%!important;
	}
    .notification-header {text-align: center;font-size: 1.1rem;padding: 8px;line-height: 1.3rem;}
    .announcement .card-header {line-height: 1.1rem;}
  h1.referal-title-1 {font-size: 10vw;}
  h1.referal-title-2 {font-size: 6vw;margin-bottom: 32vh;}
  .want-more-title {margin-top: -15px;margin-bottom: 30px;width: 80% !important;}
  .want-more-col-1 p {font-size: 1.5em;}
  .want-more-col-2 h3 {font-size: 2em;}
  .appgopro-button {max-width: 90%;}
  .hide-on-desktop {display:block;}
  .appgopro-logo {margin-top: 15px;text-align:center;margin-bottom: 15px;display: block;margin-left: auto;margin-right: auto;}
  .header-template-spacer {margin: 0;}
  .template-header-pic {padding: 80px 20px;}
}


/* ---------------------------------------------------
    OLD SIDEBAR TEMPLATE LEFTOVERS
----------------------------------------------------- */

/* The portal's header, slide-out menu and footer moved to shell.css
   (ShellAsset) with the 2026 look. What is left below is not the menu's. */

a[aria-expanded="true"] {
	color: #fff;
	background: var(--buzz-green);
}

a[data-toggle="collapse"] {
	position: relative;
}

ul ul a {
	font-size: 0.9em !important;
	padding-left: 30px !important;
	background: var(--buzz-green);
}

ul.CTAs {
	padding: 20px;
}

ul.CTAs a {
	text-align: center;
	font-size: 0.9em !important;
	display: block;
	border-radius: 5px;
	margin-bottom: 5px;
}

a.download {
	background: #fff;
	color: var(--buzz-green);
}

a.article,
a.article:hover {
	background: var(--buzz-green) !important;
	color: #fff !important;
}

#ddModal .modal-content {
	background-color: white;
	color:black;
}

/* ---------------------------------------------------
    PREMIUM PAGE
----------------------------------------------------- */
.premium-header-cont {margin-top: -15px;}
.want-more-title {margin-top: -60px;margin-bottom: 40px;}
.gold {color: var(--buzz-gold);}
.premium-upgrade-btn {text-align: center;width: 100%;border: 2px solid white;border-radius: 0px;font-weight: bold;text-transform: uppercase;padding: 0.8rem 0.75rem;font-size: 1.4em;}
.want-more-col-1 p {font-weight: bold;font-size: 1.8em;}
.want-more-col-2 h3 {font-size: 3em;line-height: 1em;}
.want-more-col-2 ul {list-style: none;padding-inline-start: 0px;}
.want-more-col-2 ul li {font-weight: bold;line-height: 2em;font-size: 1.2em;}
.want-more-col-2 ul li:before {content: "\2713\0020";font-family: 'Lucida Sans Unicode', 'Arial Unicode MS', Arial;color: var(--buzz-gold);}
.premium-benfits-outer {overflow: hidden;height: 21vh;min-height: 250px;position: relative;}
.premium-benfits-inner {transition: all 0.6s ease;position: absolute;height: 101%;width: 101%;}
.premium-benfits-inner:hover {transform: scale(1.1);}
.premium-benfits-title {position: absolute;bottom: 10%;text-align: center;width: 70%;transition: all 0.5s ease;z-index: 1;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
.premium-benfits-title h3 {display: inline-block;color: white;text-transform: uppercase;font-size: 18px;padding: 0;}

.yt-container {position: relative;width: 100%;height: 0;padding-bottom: 56.25%;}
.yt-video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/* ---------------------------------------------------
    TRAFFIC LIGHT USAGE PAGE
----------------------------------------------------- */
/* HEADER BLOCK */
.traffic-light-header {padding: 10% 20px 160px 20px;position: relative;background-color: #000;}
.traffic-light-header::before {background: url(../images/buzzgym-capacity.jpg);background-size: cover;background-position: center center;content: ' ';display: block;position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 0;opacity:0.5;}
.traffic-light-header-content {position: relative;width: 100%;}
.traffic-light-header-content h2 {color:white;font-size: 3em;line-height: 0.9em;}
.traffic-box {background-color: black;border: 3px solid white;padding: 5%;margin-top: -10%;text-align: center;position: relative;}
.traffic-box h4 {font-size: 1.4em;}
.traffic-box h3 {font-size: 3.4em;}
.traffic-light {width: 120px;height: 120px;border: none;border-radius: 50%;background-size:cover;background-repeat: no-repeat;-webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);-moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);-ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);margin-left: auto;margin-right: auto;margin-top: -85px;margin-bottom: 25px;}
@-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}}
.red-light {background-color: var(--buzz-red);box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);}
.amber-light {background-color: var(--buzz-amber);box-shadow: 0 0 0 0 rgba(243,156,18,0.5);}
.green-light {background-color: var(--buzz-light-green);box-shadow: 0 0 0 0 rgba(0, 188, 49, 0.5);}
.red-light-colour {color: var(--buzz-red);}
.amber-light-colour {color: var(--buzz-amber);}
.green-light-colour {color: var(--buzz-light-green);}
.capacity-block {position: absolute;bottom: 0;left: 0;width: 100%;padding: 12px 0;}
.capacity-block h4 {margin-bottom:0px;}
.traffic-light-key {width:100px;height: 100px;display: flex;justify-content: center;flex-direction: column;text-align: center;border-radius: 50%;font-family: var(--buzz-font-heading);font-weight: 700;text-transform: uppercase;font-size: 1.1em;margin-left: auto;margin-right: auto;}
h2.tls-title {font-size: 2em;}

#appgopro {max-width: 1170px;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;padding-bottom: 80px;}
#appgopro h1 {font-size: 28px;font-family: var(--buzz-font-heading);color: white;font-weight: 700;line-height: 28px;margin-top: 0px;margin-bottom: 10px !important;}
#appgopro h3 {font-size:20px;font-family: var(--buzz-font-heading);color: white;margin-bottom: 0px;margin-top: 0px;text-transform: uppercase;}
#appgopro p {color: white;font-size: 14px;line-height: 21px;}
#appgopro hr {border: solid 0.5px white;margin-block-start: 1em;margin-block-end: 1em;}
#appgopro .appgopro-logo {margin-top: 20px; margin-bottom:10px;}
.appgopro-footer {position: fixed;left: 0;bottom: 0;width: 100%;color: white;text-align: center;background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgb(0, 0, 0)); /* Standard syntax (must be last) */padding: 70px 0 25px 0;}
.appgopro-button {background-color:var(--buzz-cta);font-family: var(--buzz-font-heading);color: white;font-weight: 600;padding: 13px 0px;border-radius: 4px;display: block;max-width: 1170px;margin-left: auto;margin-right: auto;text-decoration: none;font-size: 20px;}
.appgopro-button:hover {background-color:var(--buzz-cta-hover);color: white;text-decoration: none;}
p.appgopro-list-text {margin-top: 8px;}
.appgopro-icon {display: inline-block;width: 25px;height: 25px;float: left;margin-right: 6px;}
.hide-on-desktop {display:none;}

.referal-header {background-image: linear-gradient(to bottom, rgba(0, 0, 0, 100%), rgba(245, 246, 252, 0%), rgb(0 0 0 / 100%)), url(../images/refer-friends-buzz-gym.jpg);background-repeat: no-repeat;background-size: cover;background-position: center center;position: relative;}
h1.referal-title-1 {font-family: var(--buzz-font-display);font-style: italic;font-size: 6vw;text-shadow: 0px 0px 10px #0000004d;line-height: 1em;margin-bottom: 0px;}
h1.referal-title-2 {font-family: var(--buzz-font-display);font-style: italic;font-size: 3.6vw;text-shadow: 0px 0px 10px #0000004d;color: var(--buzz-green);margin-bottom: 40vh;}
.referal-sub-header h2 {font-size: 1.8em;line-height: 1em;margin-bottom: 20px;}

/* ---------------------------------------------------
    MESSAGING SYSTEM
----------------------------------------------------- */
.message-grid .unread {font-weight: bold; background-color: var(--buzz-msg-unread);}
.message-grid .truncate {overflow: hidden;text-overflow: ellipsis;}
.message-list .message-nav .activeLabel {font-weight: bold!important;}
.message-list .message-nav a {text-decoration: none;}

.message-card {color:white;}
.message-buzz .card-header,.message-buzz .card-body,.message-buzz .card-footer {background-color: var(--buzz-msg-us)!important;text-align: left;}
.message-member .card-header,.message-member .card-body,.message-member .card-footer {background-color: var(--buzz-msg-member)!important;text-align: right;}