/**
 * Default stylesheet for BMF
 * 
 *  Date        Author		    Change
 *  2025-01-12  David Hood      Created new theme-based scripts
 *  2025-01-19					Completed reponsive header and gutter calculations
 *  2025-01-21					Completed metric panels, number panels, and image panels
 *  2025-01-26					Integrated rolodex effects and streamlined colour combinations
 *  2025-01-27					Created events panel style
 *	2025-02-09					Tidied and improved reusability
 *	2025-02-22					Adapted rolodex and generic styles to work with QueryTemplate
 *	2025-02-23					Added section styles to match the membership secondary page
 * 	2025-02-24					Cleaned up bmf-content, made numerous iMIS corrections, and removed deprecated classes
 *	2025-02-25					Adjusted colours and Events header per Akiko updates
 *	2025-03-01					Fixed styling of main nav menu
 *	2025-03-20					Updated numerous styles to closely align with Zeplin
 *	2025-03-22					Added styling for the Event Details page
 *	2025-04-05					Added universal styling for anchors and primary buttons
 *	2025-04-23					Added IoBM colour palette
 *  2025-05-18					Added section-header-3 and corrected IoBM objects
 *	2025-06-18					Added animated banners
 *	2025-08-04					Added content width limits (1600px) and fixed the internal and top banners to respond
 * 
 * Copyright © 2025 by Builders Merchants Federation
**/

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');

:root {
	--col-red: #d81e05;
	--col-darkblue: #002a59;
	--col-black: #1a1a1e;
	--col-white: #ffffff;
	--col-lightblue: #25f8fd;
	--col-darkgrey: #363a4b;
	--col-blue: #003f87;
	--col-blackblue: #03203f;
	--col-lightgrey: #ececec;
	--col-iobm-grey: #799aae;
	--col-iobm-darkblue: #20536e;
	--col-iobm-lightblue: #0cacc9;
	--col-iobm-green: #0c9999;
	--col-iobm-lightgreen: #5abfc2;

	--vw-max: 1600px;
	--vw-contentmax: calc(var(--vw-max) - (2 * var(--gap-hor)));
	--vw-contentmax-gapmax: calc(var(--vw-max) - 244px);		/* max(--gap-hor)=122px */
	--vw-act: min(100vw, var(--vw-max));

	--gap-hor: max(22px, calc(calc(0.120192 * var(--vw-act)) + -70.307692px));
	--gap-ver: max(50px, calc(calc(0.048077 * var(--vw-act)) + 13.076923px));
	--gap-inner-wide: max(40px, calc(calc(0.024038 * var(--vw-act)) + 21.538462px));
	--gap-ver-banner: 76px;
	--gap-inner: 25px;
	--gap-section: var(--gap-ver) var(--gap-hor);
	--content-area-width: calc(var(--vw-max) - (var(--gap-hor) * 2));
	--fontsize: max(16px, calc(calc(0.004808 * var(--vw-act)) + 12.307692px));
	--fontsize-h1: max(46px, calc(calc(0.028846 * var(--vw-act)) + 23.846154px));
	--fontsize-h2: max(40px, calc(calc(0.024038 * var(--vw-act)) + 21.538462px));
	--fontsize-panel: max(16px, calc(calc(0.002404 * var(--vw-act)) + 14.153846px));
	--fontsize-h1-tertiary: max(34px, calc(calc(0.026442 * var(--vw-act)) + 13.692308px));

	--banner-textbox-width: 550px;
	--banner-textbox-padding: max(30px, calc(calc(0.036058 * var(--vw-act)) + 2.307692px));
	--banner-secondary-height: 567px;
	--banner-tertiary-height: 488px;

	--icon-size: 126px;
	--image-button-min: 190px;
	--nav-color: var(--col-black);
	--nav-hamburger-change: 992px;		/* Deprecated (DO NOT USE): The point before which the menu flips to hamburger */

	/* Default colour combo (equivalent to bmf-body-darkblue-white) */
	--body-bg: var(--col-white);
	--body-text: var(--col-darkblue);
	--body-anchor: var(--col-red);
	--field-border: 1px solid var(--col-lightgrey);
	--button-text: var(--col-white);
	--button-text-primary: var(--col-white);
	--button-bg: var(--col-red);
	--button-bg-primary: var(--col-blue);
	--header-text: var(--col-darkblue);
	--header-bar: var(--col-red);
	--button-hover: 60%;
}

/* Base elements */
html {
	scroll-behavior: smooth;

	@media (min-width: 992px) {
		scroll-snap-type: x proximity;
		scroll-padding-top: 130px;
	}
}

body {
	font-family: Sora, Helvetica, sans-serif;
	font-weight: 200;
	font-size: var(--fontsize);
	line-height: 1.4em;
	letter-spacing: normal;
	font-stretch: normal;
	font-style: normal;
	margin: unset;
}

h1, 
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	color: var(--header-text);
	font-family: unset;
	line-height: 1.2em;
	margin-block-start: 0.7em;
	margin-block-end: 0.7em !important;
	letter-spacing: 1px;
	text-transform: uppercase;

	&:first-child {
		margin-block-start: 0em;
	}
}

h1,
.h1 {
	font-size: var(--fontsize-h1);
	font-weight: bold;
}

h2,
.h2 {
	font-size: var(--fontsize-h2);
	font-weight: 600;
}

h3,
.h3 {
	font-size: 1.4em;
	font-weight: 600;
}

h4,
.h4 {
	font-size: 1.1em;
	font-weight: 600;
}

h5,
.h5 {
	font-size: 1.1em;
	font-weight: 500;
}

h6,
.h6 {
	font-size: 1em;
	font-weight: 500;
}

p {
	&:first-child {
		margin-block-start: 0em;
	}
	&:last-child {
		margin-block-end: 0em;
	}

	/* Experimental - improvement for text buttons */
	&:has(> .TextButton:not(.float-right, .float-left)) {
		display: flex;
		flex-wrap: wrap;
		gap: 1em;

		.TextButton {
			flex-grow: 0;
			flex-shrink: 1;
			flex-basis: unset;
		}
	}
}


/**
 * Universal Classes (can be used on multiple elements )
** -------------------------------------------------------------------------------------------------------------------- */

.float-right {
	float: right;
	position: relative;
	margin-left: 1em;
	margin-right: 0px !important;
	z-index: 1;

	/* Enusre the header's top margin isn't set if a floater precedes it */
	&:first-child ~ :is(h1, h2, h3, h4, h5, h6) {
		margin-block-start: 0em;
	}
}

.float-left {
	float: left;
	position: relative;
	margin-right: 1em;
	margin-left: 0px !important;
	z-index: 1;
}

.no-caps {
	text-transform: unset;

	& h1, h2, h3, h4, h5, h6 {
		text-transform: unset;
	}
}

/* Expansion class to ensure panels and banners are all the same height */
.mid {
	display: block;
	height: 100%;
	margin: 0px;

	&:first-child {
		margin-top: 0px;
	}
	&:last-child {
		margin-bottom: 0px;
	}

	&.align-top {
		align-content: start;
	}

	&.align-bottom {
		align-content: end;
	}

	&.align-center {
		align-content: center;
	}
}

.gap-inner {
	display: block;
	height: var(--gap-inner);
}

/* Draws a dashed border around an element; used for development only */
.placeholder {
	position: relative;
	border: 1px dashed orange;
	padding: 5px;

	&:has(> img) {
		padding: 0px;
	}

	&.space {
		margin-top: 25px;
	}

	& pre {
		position: absolute;
        top: -1px;
        left: -1px;
        margin: 0px;
        font-size: 0.7em;
		color: black;
        background-color: orange;
        font-style: italic;
        padding: 0px 10px;
		z-index: 10;
		border-bottom-right-radius: 8px;
    }
}

.centered {
	* {
		text-align: center;
	}
}


/**
 * Style overrides 
** -------------------------------------------------------------------------------------------------------------------- */

a,
.Link, 
.RadGrid.RadGrid .rgRow a, 
.RadGrid.RadGrid .rgAltRow a, 
.RadGrid.RadGrid .rgEditForm a, 
.k-grid.k-grid a, 
.RadToolTip.RadToolTip a
{
	&:not(#masterHeaderImage, .btn, .TextButton, .account-toggle, .sign-in-link, .NavigationLink, .UtilityAuthenticationLink, .rmRootLink, .page-link, .select-tab, .rcCalPopup) {
		text-decoration: none;
		color: var(--button-bg);
		transition: all 0.2s ease-in-out;
		font-weight: 400;

		&:visited, 
		&:link {
			text-decoration: none;
			color: var(--body-anchor);
		}
		&:focus,
		&:focus-visible {
			text-decoration: none !important;
			/* outline-offset: 1px; */
			/* outline: 1px solid var(--body-anchor); */
			outline: none;
		}
		&:hover {
			text-decoration: underline;
			filter: opacity(var(--button-hover));
		}
		&:active {
			text-decoration: underline;
			filter: opacity(1);
			outline: none;
		}
	}
}

input,
button,
select,
textarea {
	font-family: unset;
}

/* Button: general overrides */
.btn,
.TextButton,
.RadUpload.RadUpload .ruButton,
.RadUploadProgressArea.RadUploadProgressArea .ruButton,
.SecondaryButton
{
	display: inline-block;
	font-size: unset;
	padding: 12px 36px;
	border: none;
	border-radius: unset;
	text-decoration: none;
	font-weight: bold;
	transition: filter 0.2s ease-in-out;
	/* margin-block: 10px; */
	/* margin-right: var(--gap-inner); */
	background-color: var(--button-bg);
	color: var(--button-text);
	outline: none;

	&:is(:link, :visited) {
		color: var(--button-text);
		background-color: var(--button-bg);
		text-decoration: none;
		border-color: unset;
	}

	&:is(:hover, :focus, :active) {
		filter: opacity(var(--button-hover));
		color: var(--button-text);
		background-color: var(--button-bg);
		text-decoration: none;
		border-color: unset;
	}

	&:is(:disabled, .disabled, .aspNetDisabled) {
		/* TODO: change colour here (if needed) */
		--todo-add-color: #fff;
	}
}

/* Button: PrimaryButton overrides */
.PrimaryButton,
.UsePrimaryButton .TextButton,
.RadGrid input.PrimaryButton,
.RadGrid.RadGrid input.TextButton.PrimaryButton,
.RadGrid.RadGrid a.TextButton.PrimaryButton {
	background-color: var(--button-bg-primary) !important;
	color: var(--button-text-primary) !important;
}

select, 
textarea, 
input[type="text"], 
input[type="password"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="date"], 
input[type="month"], 
input[type="time"], 
input[type="week"], 
input[type="number"], 
input[type="email"], 
input[type="url"], 
input[type="search"], 
input[type="tel"], 
input[type="color"], 
.uneditable-input, 
.input-fake {
	border-radius: unset;
	border: var(--field-border);
	outline: none;
	box-shadow: none;
	width: 100%;

	&:focus {
		outline: none !important;
		box-shadow: 0px 0px 20px -2px rgba(0, 0, 0, 0.3);
	}
}

.RadInput .riTextBox {
	background-color: var(--col-white) !important;
}

/* Forces all entry fields to 100% width; remove if causing field issues */
@media (min-width: 768px) {
	.PanelField .PanelFieldValue:not(:has(input[type="checkbox"])) {
		width: 100%;
		float: unset;
	}
	.InputXXLarge {
		width: 100%;
	}
}

.FormBuilder .container {
	max-width: unset;
	padding-left: unset;
	padding-right: unset;
}

@media (max-width: 991px) {
	.FormBuilder .Top.PanelField {
		padding-right: unset !important;
	}
}

label, 
.Label, 
.PanelFieldLabelFont {
	color: var(--body-text);
	font-weight: unset;
}

.AsiInformation, 
.AsiSuccess, 
.AsiWarning, 
.AsiError, 
.AsiValidation, 
.AsiValidationSummary, 
.AsiNeutral, 
.AsiImportant {
	border-radius: unset;
}

.wrapper {
	background: unset;
}

.h4,
.SectionLabel,
.RadMenu.RadMenu_Coffee .rmRootLink {
	font-family: unset;
}

.home-member-tracker .ProgressTracker2 .ProgressTrackerPanel {
	& :is(.label, .count) {
		font-family: unset;
	}
}

.nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text {
	@media (min-width: 0px) {
		font-family: unset;
	}
}

.carousel .carousel-caption {
	font-family: unset;
}

.FullWidthArea-StyleBg3 blockquote {
	font-family: unset;
}

.panel {
	border: unset;

	.panel-body {
		padding: unset;

		h2.panel-title {
			font-size: 1.4em;
			padding-left: unset;
		
			&::before {
				display: none;
			}
		}

		h2.PanelTitle {
			color: unset;
		}

		.panel-title {
			margin-bottom: revert;
		}

		table.Form {
			width: 100%;
		}
	}

	.panel-heading {
		padding: unset;
	}

	.pl-4 {
		padding-left: unset !important;
	}
}

.iMIS-WebPart > .ContentItemContainer {
	margin-bottom: unset;
}

.container.main-container {
	max-width: unset;
	margin-right: unset;
	margin-left: unset;
	margin-bottom: unset;

	.body-container {
		.WTZone {
			padding: unset;
		}
	}
}

.row {
	--bs-gutter-x: 0px;
}

.ContentRecordPageButtonPanel {
	margin: unset;
}

.ProgressTracker2 .ProgressTrackerPanel {
	background-color: unset;

	.inset {
		padding: unset;
		text-align: unset;
	}
	.count {
		font-family: unset;
		font-size: var(--fontsize-h2);
		font-weight: 600;
	}
	.label {
		font-size: var(--fontsize);
		font-weight: 200;
	}
}

.page-item {
	&.active .page-link {
		background-color: var(--header-bar) !important;
		background-image: none;
	}

	.page-link {
		border: none;
		border-radius: unset !important;
		padding: 14px;
	
		&:is(:link, :visited) {
			color: var(--button-text);
			background-color: var(--button-bg);
			text-decoration: none;
			border-color: unset;
		}
	
		&:is(:hover, :focus, :active) {
			filter: opacity(var(--button-hover));
			color: var(--button-text);
			background-color: var(--button-bg);
			text-decoration: none;
			border-color: unset;
		}
	}
}

.simplePaginateNav {
	gap: var(--gap-inner);
	margin-top: var(--gap-ver-banner);
	font-size: 32px;
	font-weight: 600;
	flex-wrap: wrap;

	&.justify-content-center {
		justify-content: right !important;
	}
}

.backToTop {
	background-color: var(--col-red);

	&:is(:hover,:active) {
		background-color: var(--col-red);
	}
}

.text-warning {
	color: var(--col-red) !important;
}

.RadWindow.RadWindow_MetroTouch {
	border: none;

	.rwTitleRow {
		background-color: var(--col-darkblue);

		.rwTitlebar,
		.rwTopLeft,
		.rwTopRight {
			background-color: unset;
		}

		.rwTitlebarControls em {
			font-weight: 500;
		}
	}

	td.rwBodyLeft, 
	td.rwBodyRight,
	td.rwWindowContent,
	.rwFooterCenter, 
	.rwFooterLeft, 
	.rwFooterRight {
		background-color: var(--col-lightgrey);
	}

	td.rwWindowContent {
		padding: var(--gap-inner);
	}
}

.RegistrantInfoAddressEntry {
	background-color: inherit;
}

.RegistrantInfoBadge {
	background-color: inherit;
	margin: unset;
	padding: var(--gap-inner);
}

.CommandBar {
	padding-top: var(--gap-inner);
}

.ButtonPanel.NotPrinted:has(> #masterMainButtonBar) {
	padding: 0px var(--gap-hor) var(--gap-ver) var(--gap-hor);

	> #masterMainButtonBar {
		padding-top: 0px !important;
	}
}

/*
.account-menu {
	.account-toggle:hover .nav-text, 
	.account-toggle:focus .nav-text {
		color: var(--col-lightblue);
	}

	.account-toggle-wrapper .dropdown-menu li a {
		color: var(--col-white) !important;

		&:hover {
			color: var(--col-darkblue) !important;
			text-decoration: none !important;
		}
	}
}
*/

/* Event Detail Page */
/*
.iMIS-WebPart:has(div[id*="ste_container_ciEvent"] > .panel > .panel-body-container > .panel-body > div) > div {
	padding: var(--gap-ver) var(--gap-hor);

	&#ste_container_ciEventDisplay {
		--body-bg: var(--col-darkgrey);
		--body-text: var(--col-white);
		--button-text: var(--col-darkgrey);
		--button-bg: var(--col-lightblue);
		--header-text: var(--col-white);
		--header-bar: var(--col-red);
	}

	&#ste_container_ciEventProgramDisplay {
		--body-bg: var(--col-white);
		--body-text: var(--col-darkblue);
		--button-text: var(--col-white);
		--button-bg: var(--col-red);
		--header-text: var(--col-darkgrey);
		--header-bar: var(--col-red);
	}

	background-color: var(--body-bg);
	color: var(--body-text);

	.ProgramGroup .PanelHead, .ProgramGroup .panel-heading {
		background-color: var(--col-darkblue);
	}

	.panel .panel-body-container .panel-body {
		.Section {
			margin-bottom: unset;

			.panel-title {
				margin-bottom: var(--gap-inner);

			}
		}

		.PanelHead .PanelTitle h2 {
			position: relative;
			padding-left: 30px;
			font-family: unset;
			font-size: var(--fontsize-h2);
			font-weight: 600;
		
			&::before {
				position: absolute;
				left: 0px;
				top: 4px;
				width: 8px;
				height: max(39px, calc(calc(0.024038 * var(--vw-act)) + 20.538462px));
				background-repeat: repeat-y;
				background-color: var(--header-bar);
				content: '';
			}
		}

		.EventDisplay {
			.EventSummary .PhotoArea {
				@media (min-width: 768px) {
					padding-right: var(--gap-inner);
				}
			}

			.EventDetails {
				.ContactLocationArea {
					.btn-group .btn.btn-default {
						background-color: var(--button-bg);
						color: var(--button-text);
					}

					.PanelBlock .PanelField {
						padding: 0px 0px var(--gap-inner) 0px;

						.PanelFieldLabel {
							padding: 0px var(--gap-inner) var(--gap-inner) 0px;

							& span.Label {
								text-transform: uppercase;
								font-size: 1.4em;
								font-weight: 600;
								color: var(--header-text);
							}
						}

						.PanelFieldValue {
							padding: 0px var(--gap-inner) var(--gap-inner) 0px;
						}
					}
				}

				.RegistrationArea {
					--body-bg: var(--col-red);
					--body-text: var(--col-white);
					--body-anchor: var(--col-lightblue);
					--button-text: var(--col-white);
					--button-text-primary: var(--col-white);
					--button-bg: var(--col-darkblue);
					--button-bg-primary: var(--col-blue);
					--header-text: var(--col-white);
					--header-bar: var(--col-black);
					--system-icon-color: var(--col-lightblue);
					--system-icon-color-hover: var(--col-blue);
			
					border-radius: unset;
					background-color: var(--body-bg);
					padding: var(--gap-inner);

					> .border {
						border: unset !important;
						border-radius: unset;

						> .card-body {
							background-color: var(--button-bg);
							padding: var(--gap-inner);

							> .RegistrationArea-currentUser {
								display: block;

								> .RegistrationArea-status {
									max-width: unset;

									& input {
										&.mb-3 {
											margin-top: var(--gap-inner) !important;
											margin-bottom: 0px !important;
										}
										&.TextButton {
											margin-block: unset;
										}
										&.SmallButton {
											max-width: unset;
											padding: 12px 36px;
											width: 100%;
										}
										&.LargeButton {
											max-width: unset;
											font-size: unset !important;
										}
										&.DangerButton {
											background-color: var(--col-red);
										}
									}
								}

								> div > .RegistrationArea-info > .h5 {
									color: var(--header-text);
								}
							}
						}
					}

					> .p-2 {
						padding: unset !important;
					}

					> div:has(> span[id$="_RegistrationLabel"]) {
						flex-direction: column;
						color: var(--header-text);
						margin-block-end: unset;

						&:before {
							content: "Interested in attending?";
							text-transform: uppercase;
							font-size: 1.4em;
						}
						&:after {
							content: "To register, please click on the button below to be taken to the members' area";
							font-weight: 200;
							padding: var(--gap-inner) 0px;
							text-transform: none;
						}

						> span {
							display: none;
						}
					}

					> div[id$="_DivRegisterMyselfButton"] > .PrimaryButton.LargeButton {
						max-width: unset;
						font-size: 100% !important;
						font-weight: 600;
						color: var(--button-text);
						margin-right: unset;
					}

					> div[id$="_DivRegisterSomeoneElseButton"] > .SecondaryButton {
						width: 100%;
						font-weight: 600;
						background-color: var(--button-bg);
						color: var(--button-text);
						margin-right: unset;
					}

					> div > span[id$="_LabelRegisterButtonError"] {
						color: var(--body-text) !important;
					}

					> div[id$="_DivCartCheckoutButtonDisplay"] > .ContentItemContainer {
						width: 100%;

						.PrimaryButton {
							max-width: unset;
							font-size: unset !important;
						}
					}
				}
			}
		}
	}
}
*/

/** 
 * Website template classes
** -------------------------------------------------------------------------------------------------------------------- */

.Wrapper-HomePage #masterHeaderImage,
#masterHeaderImage {
	background-image: url("images/bmf-logo-rgb.svg");

	/* Prevents the full menu from wrapping */
	@media (width <= 467px) or (992px <= width <= 1350px) {
		background-image: url("images/bmf-icon-rgb.svg");
	}
	width: 100%;
	height: 70px;
	background-size: contain;
	background-position: center;
}

header {
	&.header {
		@media (min-width: 992px) {
			position: sticky;
			top: 0px;
		}
	}

	&.header-top {
		display: flex;
		padding: 0px var(--gap-hor);
		background-color: var(--col-white);
		gap: 15px;

		.header-logo-container {
			flex: 0 1 271px;

			/* Prevents the full menu from wrapping */
			@media (992px <= width <= 1350px) {
				flex: 0 1 100px;
			}
			padding-left: unset;
		}

		.header-utility-container {
			flex: 3 3;

			@media (max-width: 991px) {
				.header-search-container {
					padding-top: 35px;
					white-space: nowrap;
				}
				.header-menu-container .nav-primary {
					position: absolute;
					right: 15px;
					background-color: var(--col-darkblue);
					left: 15px;
					top: 100px;

					.rmRootLink {
						--nav-color: var(--col-white) !important;
					}
				}
			}

			.UtilityNavigation {
				text-align: right;
				/* display: flex; */
                /* justify-content: flex-end; */

				.UtilitySection {
					vertical-align: top;
				}

				.dropdown-menu {
					left: unset;
					right: 0px;
					margin-top: unset;
					background-color: var(--col-blackblue);
					border-radius: unset !important;
				}

				.UtilityNavigationList {
					.NavigationLink {
						font-size: 14px;
						font-weight: bold;
						text-transform: uppercase;
						text-decoration: none;
						padding: 5px 15px;
						color: var(--col-white);
						background-color: var(--col-blackblue);
						line-height: normal;
						margin-left: 15px;

						&:hover .nav-text,
						&:active .nav-text,
						&:focus .nav-text {
							color: var(--col-lightblue) !important;
						}
						
						@media (max-width: 767px) {
							padding: 5px;
							background-color: var(--col-white);
							margin-left: 0px;

							.nav-text {
								display: none;
							}
						}
					}
				}

				.UtilityAccountArea {
					.account-menu {
						line-height: 0px;

						.account-toggle-wrapper .dropdown-menu li a {
							color: var(--col-white) !important;

							&:hover {
								color: var(--col-darkblue) !important;
								text-decoration: none !important;
							}
						}
					}
					.account-toggle,
					.sign-in-link {
						display: inline-block;
						font-size: 14px;
						font-weight: bold;
						text-transform: uppercase;
						padding: 5px 15px;
						color: var(--col-white);
						background-color: var(--col-blackblue);
						line-height: normal;
						margin-left: 15px;

						&::before {
							content: "";
							display: inline-block;
							background: white;
							mask-size: 18px 18px;
							mask-repeat: no-repeat;
							mask-position: center;
							height: 30px;
							width: 30px;
							vertical-align: middle;
							mask-image: url("images/auxIcons2.svg#person");
						}

						&:hover .nav-text,
						&:focus .nav-text {
							color: var(--col-lightblue);
						}

						.profile-picture-wrapper {
							display: none;
						}

						.caret {
							display: inline-block;
						}
					}

					@media (max-width: 767px) {
						padding: 5px;

						.account-toggle,
						.sign-in-link {
							background-color: var(--col-white);
							color: var(--col-blue);
							margin-left: 0px;
							padding: 0px;

							.sign-in-text {
								display: none;
							}

							&::before {
								background: var(--col-blue);
								mask-size: 30px 30px;
								height: 35px;
								width: 35px;
							}
						}
					}
				}

				.UtilityAuthenticationLink {
					font-size: 14px;
					font-weight: bold;
					text-transform: uppercase;
					padding: 5px 15px;
					color: var(--col-white);
					background-color: var(--col-blackblue);
					line-height: normal;

					@media (max-width: 767px) {
						display: none;
					}
				}

				.UtilityNavigationToggle {
					--aux-link-color: var(--col-white);

					&:has(:is(.searchbar-toggle, .menu-toggle)) {
						background-color: var(--col-red);
						padding: 5px;
						margin-left: 15px;

						@media (max-width: 991px) {
							background-color: unset;
							margin-left: unset;
						}
					}

					&:has(.menu-toggle) {
						@media (min-width: 992px) {
							display: none;
						}
					}

					@media (max-width: 991px) {
						--aux-link-color: var(--col-blue);

						.navbar-toggle {
							mask-size: 30px 30px;
							width: 35px;
							height: 35px;
						}
					}

					.searchbar-toggle {
						display: inline-block;
					}
				}

				.UtilitySearch {
					display: none;
				}

				.search-container {
					display: inline-block;
					padding: 15px 0px 0px 0px;

					.search-field {
						margin: unset;
						border-radius: unset;
						border: 1px solid var(--col-darkgrey);
						height: 38px;
						max-width: 220px;
						color: var(--col-black);
						padding: 10px 10px 10px 35px;
						background-position-y: 8px;
						background-position-x: 10px;
					}
				}
			}

			.RadMenu.RadMenu_Coffee {
				margin-top: 15px;
				margin-bottom: 15px;

				.rmRootGroup {
					justify-content: space-between;
					margin-right: 0px;
					column-gap: 25px;
					margin-bottom: 15px;

					@media (max-width: 991px) {
						margin-left: var(--gap-hor);
						margin-right: var(--gap-hor);
					}

					&::after {
						content: unset;
					}

					.rmItem {
						margin: auto 0px;

						.rmSlide {
							.rmGroup {
								border-radius: unset;

								.rmText {
									font-size: 16px;
									color: var(--col-black);

									&:hover {
										color: var(--col-red);
									}
								}
							}
						}
					}
				}

				.rmRootLink {
					--nav-color: var(--col-black);
					text-transform: uppercase;
					font-size: 16px;
					font-weight: bold;
					color: var(--nav-color) !important;

					.rmText, .rmHorizontal .rmText {
						padding: 5px 0px;
					}

					@media (min-width: 992px) {
						.rmToggle .rmIcon {
							display: none;
						}
					}

					&.bmf-nav-image {
						.rmLeftImage {
							margin: unset;
							float: unset;
							padding: 5px 0px;
							height: 20px !important;
							box-sizing: content-box;
							filter: drop-shadow(0px 0px 5px var(--col-white));

							&:hover {
								filter: drop-shadow(0px 0px 5px var(--col-lightblue));
							}
						}

						.rmText {
							display: none !important;
						}
					}

					&:hover,
					&.rmExpanded,
					&.rmFocused {
						color: var(--col-red) !important;
					}

					&:hover .rmToggle > .rmIcon,
					&.rmFocused .rmToggle > .rmIcon,
					&.rmExpanded .rmToggle > .rmIcon,
					&.rmSelected .rmToggle > .rmIcon {
						background: var(--col-red);
					}

					&.rmSelected {
						color: var(--col-blue);
					}

					@media (max-width: 991px) {
						&.rmSelected {
							color: var(--col-lightblue);
						}
					}
				}

				.rmLink {
					width: auto !important;

					/* displays a right-facing carat for submenus */
					@media (min-width: 992px) {
						&.rmExpandRight::after {
							display: block;
							position: absolute;
							content: ">";
							width: 10px;
							height: 10px;
							right: 10px;
							top: 8px;
						}
					}
				}

				.rmLevel1 .rmItem .rmLink:hover {
					background-color: var(--col-lightgrey);
					filter: unset !important;
				}

				.rmToggle .rmIcon,
				.rmRootGroup .rmRootLink .rmToggle .rmIcon {
					margin-top: 10px;
					margin-bottom: 0px;
				}

				/* Draws the menu separator */
				.rmSlide .rmItem .rmImageOnly {
					line-height: 1px;

					.rmText {
						border-bottom: 1px solid var(--col-darkblue);
						padding: 0px !important;
					}
				}

				.rmLink:hover,
				.rmFocused,
				.rmExpanded {
					color: var(--col-red);
				}
			}

			@media (min-width: 992px) {
				.Wrapper-HomePage {
					--nav-color: var(--col-black);
				}

				.RadMenu.RadMenu_Coffee {
					padding-right: unset;
				}
			}
		}
	}
}

footer {
	--gap-ver: 55px;

	&.footer {
		background-color: var(--col-blackblue);
		padding: var(--gap-ver) var(--gap-hor);
	}
	.footer-row1 {
		display: flex;
		flex-wrap: wrap;
		text-transform: uppercase;
		font-weight: bold;
		margin-bottom: var(--gap-ver);

		.footer-logo {
			flex: 1 1 130px;
			max-width: 250px;

			#masterFooterImage {
				display: block;
				background-image: url(images/bmf-logo-white.svg);
				text-indent: -999px;
				overflow: hidden;
				background-repeat: no-repeat;
				background-size: contain;
				height: 123px;
				width: 115px;
			}
		}

		.footer-contact {
			flex: 4 4 150px;
			font-size: 16px;

			.SocialSprite {
				border-radius: unset;
				margin: 10px 12px 0px 0px;

				&.LargeButtons {
					width: 38px;
					height: 38px;
				}
			}
		}

		.footer-advert {
			flex: 2 2 300px;
			font-size: 15px;
			max-width: 320px;

			& img {
				margin-top: 10px;
			}

			& a {
				color: var(--col-white) !important;
				text-decoration: none !important;

				&:visited {
					color: var(--col-white);
				}

				&:hover, &:focus {
					color: var(--col-lightblue) !important;
					text-decoration: none !important;
				}
			}
		}

		@media (max-width: 768px) {
			gap: var(--gap-inner);

			.footer-contact {
				text-align: right;

				.SocialSprite {
					margin: 10px 0px 0px 12px;

					&:first-child {
						margin: 10px 0px 0px 0px;
					}
				}
			}
		}
	}
	.footer-row2 {
		font-size: 14px;

		& ul {
			display: flex;
			flex-wrap: wrap;
			text-transform: uppercase;
			margin: unset;
			padding: unset;
			list-style-type: none;
			justify-content: space-between;
			column-gap: var(--gap-inner);

			& li {
				/* flex: auto; */
				margin: unset;

				> a {
					color: var(--col-white) !important;
					text-decoration: none !important;

					&:visited {
						color: var(--col-white);
					}

					&:hover, &:focus {
						color: var(--col-lightblue) !important;
						text-decoration: none !important;
					}
				}
			}
		}
		& hr {
			border-width: 6px 0px 0px 0px;
			border-color: var(--col-white);
			margin: 20px 0px;
		}
	}
}


/** 
 * BMF stock image classes (remove)
** -------------------------------------------------------------------------------------------------------------------- */

/* Deprecated; iMIS crashes when it doesn't validate SRC
.bmf-image-home {
	@media (max-width: 1800px) {
		content: image-set(
			"images/headers/home.webp" 1x,
			"images/headers/home@2x.webp" 2x,
			"images/headers/home@3x.webp" 3x
		);
	}
	@media (min-width: 1801px) {
		content: image-set(
			"images/headers/homew1x.webp" 1x,
			"images/headers/homew2x.webp" 2x,
			"images/headers/homew3x.webp" 3x
		);
	}
	object-position: right;
}

.bmf-image-about {
	content: image-set(
		"images/headers/about1x.webp" 1x,
		"images/headers/about2x.webp" 2x,
		"images/headers/about3x.webp" 3x
	);
	object-position: left;
}

.bmf-image-membership {
	content: image-set(
		"images/headers/membership.webp" 1x,
		"images/headers/membership@2x.webp" 2x,
		"images/headers/membership@3x.webp" 3x
	);
	object-position: left;
}

.bmf-image-targeted-training {
	content: image-set(
		"images/headers/targeted-training.webp" 1x,
		"images/headers/targeted-training@2x.webp" 2x,
		"images/headers/targeted-training@3x.webp" 3x
	);
	object-position: center;
}

.bmf-image-excellence-ba {
	content: image-set(
		"images/excellence/ba-img.webp" 1x,
		"images/excellence/ba-img@2x.webp" 2x,
		"images/excellence/ba-img@3x.webp" 3x
	);
	object-position: center;
}

.bmf-image-excellence-byv {
	content: image-set(
		"images/excellence/byv-img.webp" 1x,
		"images/excellence/byv-img@2x.webp" 2x,
		"images/excellence/byv-img@3x.webp" 3x
	);
	object-position: center;
}

.bmf-image-excellence-be {
	content: image-set(
		"images/excellence/bf-img.webp" 1x,
		"images/excellence/bf-img@2x.webp" 2x,
		"images/excellence/bf-img@3x.webp" 3x
	);
	object-position: center;
}

.bmf-image-excellence-bhs {
	content: image-set(
		"images/excellence/bhs-img.webp" 1x,
		"images/excellence/bhs-img@2x.webp" 2x,
		"images/excellence/bhs-img@3x.webp" 3x
	);
	object-position: center;
}

.bmf-image-1 {
	content: url("images/membership/1.svg");
}

.bmf-image-2 {
	content: url("images/membership/2.svg");
}

.bmf-image-3 {
	content: url("images/membership/3.svg");
}

.bmf-image-4 {
	content: url("images/membership/4.svg");
}

.bmf-image-5 {
	content: url("images/membership/5.svg");
}

.bmf-icon-vision {
	content: url("images/icon-vision.svg");
}

.bmf-icon-mission {
	content: url("images/icon-mission.svg");
}
*/

/**
 * BMF banner animation properties
** -------------------------------------------------------------------------------------------------------------------- */

@property --mask-opacity {
	syntax: "<percentage>";
	initial-value: 0%;
	inherits: false;
}

@keyframes header-appear {
	from { 
		mask-position: 0px 100%;
		opacity: 100%;
		--mask-opacity: 100%;
	}
	to {
		mask-position: 0px 0%; 
		opacity: 100%;
		--mask-opacity: 0%;
	}
}

@keyframes header-appear-text {
	from {
		opacity: 0%;
	}
	to {
		opacity: 100%;
	}
}


/**
 * BMF banner classes
** -------------------------------------------------------------------------------------------------------------------- */

.bmf-banner {
	position: relative;
	background-color: var(--body-bg);
	overflow: hidden;

	&:has(.bmf-image-home) {
		display: flex;
		justify-content: right;
		min-height: 568px;
	}

	.bmf-image-home {
		display: block;
		object-fit: cover;
		width: 100%;
		mask-type: luminance;
		mask-repeat: no-repeat;
		mask-size: cover;
		max-width: var(--vw-max);

		@media (max-width: 1259px) {
			position: absolute;
			bottom: 0px;
			right: 0px;
			min-width: 550px;
		}

		@media (min-width: 1260px) {
			position: relative;
		}

		~ .bmf-banner-text {
			top: var(--gap-ver);
			width: 100%;
			text-shadow: 0px 0px 15px black;

			@media (min-width: 768px) {
				width: 35%;
			}

			& h1 {
				margin-block-end: 0.4em;
				line-height: 1.1em;
			}
		}
	}

	.bmf-image-bg {
		display: block;
		position: absolute;
		object-fit: cover;
		width: 100%;
		bottom: 0px;
	}

	.bmf-image-landing {
		display: block;
		position: absolute;
		object-fit: cover;
		width: 100%;
		bottom: 0px;
		mask-type: luminance;
		mask-repeat: no-repeat;
		mask-size: cover;
	}

	&:not(.bmf-animate) {
		.bmf-image-home {
			mask-image: url("/images/bmf2/home/mask-house1.svg");
			mask-position: 0px 0%;
		}
		.bmf-image-landing {
			mask-image: url("/images/bmf2/home/mask-angle1.svg");
			mask-position: 0px 0%;
		}
	}

	&.bmf-animate {
		.bmf-image-home {
			mask-image: url("/images/bmf2/home/mask-house1.svg"), linear-gradient(rgba(0,0,0,var(--mask-opacity)));
			mask-position: 0px 100%;
			animation: header-appear 1.5s ease-in-out 0.5s;
			animation-fill-mode: forwards;

			&.bounce {
				animation: header-appear 1.5s linear(0, 0.002 0.4%, 0.01 0.9%, 0.02 1.3%, 0.037 1.8%, 0.059 2.3%, 0.085 2.8%, 0.148 3.8%, 0.215 4.7%, 0.297 5.7%, 0.627 9.4%, 0.762 11%, 0.882 12.6%, 0.936 13.4%, 0.985 14.2%, 1.028 15%, 1.062 15.7%, 1.096 16.5%, 1.125 17.3%, 1.149 18.1%, 1.167 18.9%, 1.182 19.7%, 1.191 20.5%, 1.198 21.5%, 1.199 22.5%, 1.195 23.6%, 1.185 24.8%, 1.172 25.9%, 1.154 27.1%, 1.055 32.8%, 1.031 34.3%, 1.012 35.7%, 0.993 37.4%, 0.979 39%, 0.968 40.7%, 0.963 42.4%, 0.96 44.6%, 0.963 47%, 0.97 49.4%, 0.997 57.7%, 1.004 60.8%, 1.007 64%, 1.007 69.1%, 0.999 84.8%, 1) 0.5s;
				animation-fill-mode: forwards;
			}
		}
		.bmf-image-landing {
			mask-image: url("/images/bmf2/home/mask-angle1.svg"), linear-gradient(rgba(0,0,0,var(--mask-opacity)));
			mask-position: 0px 100%;
			animation: header-appear 1.5s ease-in-out 0.5s;
			animation-fill-mode: forwards;

			&.bounce {
				animation: header-appear 1.5s linear(0, 0.002 0.4%, 0.01 0.9%, 0.02 1.3%, 0.037 1.8%, 0.059 2.3%, 0.085 2.8%, 0.148 3.8%, 0.215 4.7%, 0.297 5.7%, 0.627 9.4%, 0.762 11%, 0.882 12.6%, 0.936 13.4%, 0.985 14.2%, 1.028 15%, 1.062 15.7%, 1.096 16.5%, 1.125 17.3%, 1.149 18.1%, 1.167 18.9%, 1.182 19.7%, 1.191 20.5%, 1.198 21.5%, 1.199 22.5%, 1.195 23.6%, 1.185 24.8%, 1.172 25.9%, 1.154 27.1%, 1.055 32.8%, 1.031 34.3%, 1.012 35.7%, 0.993 37.4%, 0.979 39%, 0.968 40.7%, 0.963 42.4%, 0.96 44.6%, 0.963 47%, 0.97 49.4%, 0.997 57.7%, 1.004 60.8%, 1.007 64%, 1.007 69.1%, 0.999 84.8%, 1) 0.5s;
				animation-fill-mode: forwards;
			}
		}
		.bmf-banner-text {
			opacity: 0%;
			animation: header-appear-text 1s ease-in-out 1s;
			animation-fill-mode: forwards;
		}
	}

	&.bmf-banner-secondary {
		height: var(--banner-secondary-height);

		.bmf-image-bg {
			bottom: 0px;
			/* left: var(--gap-hor); */
			min-height: var(--banner-secondary-height);
		}

		.bmf-banner-text {
			max-width: var(--banner-textbox-width);
		}
	}

	&.bmf-banner-tertiary {
		height: var(--banner-tertiary-height);
		padding-left: 0px;

		& h1 {
			font-size: var(--fontsize-h1-tertiary);
			font-weight: 600;
			/* margin-block-start: 20px; */
		}

		.bmf-image-bg {
			bottom: 0px;
			min-height: var(--banner-tertiary-height);
		}
	}

	&.bmf-banner-secondary-iobm > div {
		display: flex;
		/* height: var(--banner-secondary-height); */
		height: auto;

		> div {
			flex: 1 0 310px;
		}

		.bmf-image-bg {
			flex: 0 2 800px;
			position: relative;
			width: 100%;
			height: 100%;
			min-height: 300px;
			min-width: 450px;
			object-fit: contain;
			overflow: inherit;
		}
	}

	.bmf-banner-text {
		display: block;
		position: absolute;
		color: var(--body-text);
		top: var(--gap-ver);
		width: 100%;
		box-sizing: border-box;

		@media (max-width: 767px) {
			padding: 0px var(--gap-hor);
		}

		@media (min-width: 768px) {
			left: var(--gap-hor);
		}

		& p {
			font-size: 1.3em;
			line-height: 1.3em;
		}

		& :is(h1, h2, h3, h4, h5, h6) {
			color: unset;
		}
	}

	.bmf-banner-textbox {
		display: block;
		position: absolute;
		top: var(--gap-ver-banner);
		bottom: var(--gap-ver-banner);
		left: var(--gap-hor);
		min-width: var(--banner-textbox-width);
		background-color: var(--body-bg);
		margin-right: 100%;

		> .bmf-banner-text {
			position: relative;
			left: unset;
			top: 50%;
			width: 100%;
			max-width: unset;
			transform: translateY(-50%);
			padding-left: var(--banner-textbox-padding);
			padding-right: var(--banner-textbox-padding);
		}

		@media (max-width: 640px) {
			min-width: unset;
			right: var(--gap-hor);
			margin-right: unset;

			> .bmf-banner-text {
				padding-left: var(--gap-hor);
				padding-right: var(--gap-hor);
			}
		}
	}
}


/**
 * BMF section classes
** -------------------------------------------------------------------------------------------------------------------- */

/* This controls the paddings / sizing behaviours */
.bmf-section {
	padding: var(--gap-section);
	color: var(--body-text);
	background-color: var(--body-bg);
	overflow: hidden;

	/* This limits the content width and centers on really wide monitors */
	&:not(.section-banner-1,.section-banner-2) > * {
		max-width: var(--vw-max);
		margin-left: auto !important;
		margin-right: auto !important;
	}

	& :is(h2,h3,h4) {
		color: unset;
	}

	& img {
		width: 100%;
		height: auto;
	}
	
	& p ~ .bmf-panel {
		margin-top: var(--gap-inner);
	}

	/* This prevents alert icons from expanding to 100% of the display */
	.Alerts img {
		width: unset;
	}

	.bmf-panel:has(~ p) {
		margin-bottom: var(--gap-inner);
	}

	.bmf-section-gap, .section-gap {
		margin-top: var(--gap-ver);
	}

	.bmf-section-bar-right {
		border-right: 8px solid var(--header-bar);
		margin-right: 30px;

		~ .col-sm-3 {
			margin-right: -10px;
		}
	}

	/* Override style to add spacing between panels */
	.col-sm-6:has(+ .col-sm-6) {
		padding-right: var(--gap-hor);
	}

	&:is(.section-banner-1,.section-banner-2,.section-banner-3) {
		padding: unset;
	}

	&.section-banner-1 {
		position: relative;
		overflow: hidden;

		img {
			width: 100%;
			object-fit: cover;
			vertical-align: bottom;

			@media (min-width: 640px) {
				height: 450px !important;
			}
			@media (max-width: 639px) {
				height: auto !important;
			}
		}

		& .section-textbox {
			display: flex;
			flex-direction: column;
			position: absolute;
			left: 40%;
			top: var(--gap-ver-banner);
			bottom: var(--gap-ver-banner);
			right: var(--gap-hor);
			padding: var(--banner-textbox-padding);
			color: var(--body-text);
			background-color: var(--body-bg);
			overflow: hidden;

			@media (max-width: 991px) {
				top: 30%;
				left: var(--gap-hor);
				bottom: var(--gap-ver);
			}
			@media (max-width: 639px) {
				position: unset;
			}
		}
	}

	&.section-banner-2 {
		display: flex;
		flex-direction: row;
		overflow: hidden;

		/* Needed due to iMIS DIVs; this will select the parent */
		& :has(.section-textbox) {
			display: flex;
			flex-direction: row;
			overflow: hidden;
		}

		@media(max-width: 991px) {
			flex-direction: column;

			& :has(.section-textbox) {
				flex-direction: column;
			}
		}

		* {
			flex: 1 1;
		}

		& img {
			width: 100%;
			height: auto !important;
			object-fit: cover;
		}

		& .section-textbox {
			color: var(--body-text);
			background-color: var(--body-bg);
			padding: var(--gap-section);
		}
	}

	&.section-banner-3 {
		display: flex;
		flex-direction: row;
		overflow: hidden;
		--gap-inner: 40px;

		/* Needed due to iMIS DIVs; this will select the parent */
		& :has(.section-textbox) {
			display: flex;
			flex-direction: row;
			overflow: hidden;
		}

		& .section-textbox {
			color: var(--body-text);
			background-color: var(--body-bg);
			padding: var(--gap-section);

			&:has(+ .section-textbox) {
				flex: 1 1;
				text-align: center;
				& img {
					max-width: 200px;
				}
				& p:has(.TextButton) {
					justify-content: center;
				}
			}

			+ .section-textbox {
				flex: 2 2;
			}
		}

		@media(max-width: 991px) {
			flex-direction: column;

			& :has(.section-textbox) {
				flex-direction: column;
			}
		}
	}


	&.section-qa {
		& h4 ~ p {
			padding-left: var(--gap-inner);
			color: var(--header-bar);
		}
	}

	&.no-gap,
	&.no-gap-top,
	&.no-gap + .bmf-section,
	&.no-gap-top + .bmf-section {
		padding-top: 0px;
		/* margin-top: var(--gap-inner-wide); */
	}

	&.no-gap,
	&.no-gap-bottom,
	&:has(+ .no-gap),
	&:has(+ .no-gap-top) {
		padding-bottom: 0px;
		/* margin-bottom: var(--gap-inner-wide); */
	}

	&.bmf-carousel-minimal .carousel {
		.carousel-control {
			display: none;
		}
	
		.carousel-inner.bg-img > .item {
			background-color: unset;
			background-size: contain;
		}
	
		.carousel-indicators {
			display: none;
		}
	}

	.ProgressTracker2 .ProgressTrackerPanel {
		.count {
			color: var(--header-bar);
		}
	}

	/* By default, all H2 will get a bar unless "no-bar" is present on the header tag */
	& h2 {
		/* overflow: hidden; */

		&:not(.no-bar) {
			position: relative;
			padding-left: 30px;
		
			&::before {
				position: absolute;
				left: 0px;
				top: 4px;
				width: 8px;
				height: max(39px, calc(calc(0.024038 * var(--vw-act)) + 20.538462px));
				background-repeat: repeat-y;
				background-color: var(--header-bar);
				content: '';
			}
		}

		/* Used for contact profiles */
		&:has(+ h3.no-bold) {
			margin-bottom: 0px;
		}

		~ h3.no-bold {
			text-transform: none;
			font-weight: 300;
		}
	}

	& blockquote {
		position: relative;
		font-size: max(24px, calc(calc(0.014423 * var(--vw-act)) + 12.923077px));
		font-weight: 600;
		line-height: 1.3em;
		margin: 0px max(0px, calc(calc(0.277644 * var(--vw-act)) + -213.230769px)) 0px 0px;
		padding-bottom: 35px;

		&::before, &::after {
			display: block;
			background-repeat: no-repeat;
			width: 54px;
			content: '';
		}

		&::before {
			height: 70px;
			background-image: url("images/quotation-start.svg");
		}
		&::after {
			position: absolute;
			height: 40px;
			background-image: url("images/quotation-end.svg");
			right: 0px;
			bottom: 0px;
		}

		~p {
			padding-top: 20px;
			text-align: right;
		}
	}

	.SocialSprite {
		border-radius: unset;
		margin: 10px 12px 0px 0px;

		&.LargeButtons {
			width: 38px;
			height: 38px;
		}
	}

	.SignIn {
		max-width: 22em;
	}

	.bmf-coming-soon {
		background-color: var(--col-lightgrey);
		padding: var(--gap-hor) var(--gap-ver);
		font-size: 54px;
		text-align: center;
	}

	/* Member Pages Overrides */
	&.bmf-member {

		.RadMultiPage {
			padding: unset;
			margin-bottom: unset !important;
		}

		.stacked-tabs .select-tab {
			background-color: var(--col-darkblue);
			border-radius: unset;
			margin-top: var(--gap-inner);
			margin-bottom: var(--gap-inner);
		}

		div:has(> .profile, > .settings) {
			display: flex;
			flex-direction: column;
			gap: var(--gap-inner);
		}

		.profile {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			height: 100%;
			gap: var(--gap-inner);
			background-color: var(--col-blue);
			padding: var(--gap-inner);

			.WebPartZone>.ContentItemContainer {
				margin-bottom: unset;
			}

			.profile-picture-container > img {
				width: 100% !important;
				aspect-ratio: 1/1;
				object-fit: contain;
			}

			.bmf-profile-details .panel {
				display: flex;
				flex-direction: column-reverse;
				gap: unset;
				color: var(--body-text);

				.panel-heading {
					position: relative;
					gap: unset;

					.panel-heading-options {
						margin-left: unset;
					}

					.sysicon {
						display: block;
						width: 100%;
						height: auto;
						background-image: none !important;
						background-color: var(--button-bg);
						color: var(--button-text);
						font-weight: 600;
						padding: unset;
						margin: unset;
						border: none !important;
						transition: all 0.2s ease-in-out;

						&::after {
							content: "Edit profile";
							width: unset;
							height: unset;
							mask-image: unset;
							padding: 12px 36px;
							background-color: unset;

							&:hover {
								background-color: unset;
							}
						}

						&:hover {
							filter: opacity(var(--button-hover));
						}
					}
				}

				.mini-profile-name-section {
					margin-bottom: var(--gap-inner);
					line-height: normal; 

					.mini-profile-name-section-inner {

						div > span[id$="_fullName"],
						div > span[id$="_contactName_institute"] {
							display: block;
							text-transform: uppercase;
							color: inherit;
							font-size: 1.4em;
							margin-bottom: var(--gap-inner);
						}
						/*
						div > span[id$="contactTitle"] {
						}
						div > span[id$="_InstituteNameLink"] {
						}
						*/
					}
				}
			}

			.bmf-profile-picture {

				.panel-heading {
					position: absolute;
					z-index: 10;
					background-color: unset;

					& div {
						background-color: unset;
					}

					.sysicon::after {
						background-color: var(--col-white);
					}
				}

				.mini-profile-picture-section {
					margin-bottom: unset;
				}
			}

			/*
			> img:has(+ div) {
				flex: 1 1 100px !important;
				aspect-ratio: 4/5;
				object-fit: cover;
			}
			> img + div {
				flex: 1 1 150px !important;
			}
			> img + div + a {
				flex: 1 1 100% !important;
			}
			*/
		}

		.settings {
			.WebPartZone {
				display: flex;
				gap: var(--gap-inner);
				flex-direction: column;

				> .ContentItemContainer:not(:has(.no-setting)) {
					margin-bottom: unset;
					padding: var(--gap-inner);
					background-color: var(--col-lightgrey);

					.panel {
						.panel-heading {
							align-items: center;

							.panel-title {
								margin-block-end: unset !important;
								position: relative;
								padding-left: 20px;

								&::before {
									position: absolute;
									left: 0px;
									top: 0px;
									width: 6px;
									height: 100%;
									background-repeat: repeat-y;
									background-color: var(--col-red);
									content: '';
								}

								& a, 
								& a:link,
								& a:visited {
									font-weight: 600 !important;
									color: var(--col-darkblue) !important;
									transition: unset !important;
								}
							}

							.panel-heading-options {
								gap: 10px;

								.sysicon {
									transition: all 0.2s ease-in-out;
									background-color: var(--col-red);

									&:after {
										background-color: var(--col-white);
									}
									&:hover:after {
										background-color: var(--col-white);
									}
									&:hover {
										filter: opacity(var(--button-hover));
									}
									&:focus {
										border-radius: unset !important;
										border-color: unset !important;
									}
								}
							}
						}

						.panel-body-container {
							margin-top: var(--gap-inner);
						}
					}
				}
			}
		}

		.RadTabStrip .rtsLevel1 {
			.rtsFirst {
				.rtsLink {
					border-radius: unset;
					margin: 0px 5px 0px var(--gap-inner);
				}
			}
			.rtsLink {
				background-color: var(--col-lightgrey);
				border-radius: unset;

				&.rtsSelected {
					background-color: var(--col-white);
					border-radius: unset;
				}
			}
			&.stacked-list {
				color: var(--col-black);

				.rtsLink:hover {
					background-color: var(--col-lightgrey) !important;
					color: var(--col-red) !important;
				}
			}
		}

		.tabs-wrapper .RadMultiPage {
			padding: var(--gap-inner);
			border-radius: unset;
		}

		.stacked-tabs .tabs-wrapper .RadMultiPage {
			padding: unset;

			.tabs-wrapper .RadMultiPage {
				padding: var(--gap-inner);
			}
		}

		.row.pr-3 {
			padding-right: 0px !important;
		}
		.pr-0 {
			padding-right: 10px !important;

			&:last-child {
				padding-right: 0px !important;
			}
		}

		/* Used for user-generated member pages from the template */
		&.standard {
			.WebPartZone {
				display: flex;
				flex-direction: column;
				gap: var(--gap-ver);

				.tabs-wrapper .WebPartZone {
					display: block;
				}
			}
		}
	}

	/* Contact tables */
	.bmf-contact-table {
		.bmf-status-control {
			white-space: nowrap;
		}
	}
}

/* no-gap adjustments for iMIS WebParts */
.iMIS-WebPart:has(+ .iMIS-WebPart > div > :is(.no-gap, .no-gap-top)) {
	margin-bottom: var(--gap-inner-wide);

 	> div > .bmf-section {
		padding-bottom: 0px;
	}
}

.iMIS-WebPart:has(> div > :is(.no-gap, .no-gap-bottom)) + .iMIS-WebPart {
	margin-top: var(--gap-inner-wide);

	> div > .bmf-section {
		padding-top: 0px;
	}
}

.iMIS-WebPart:has(> div > :is(.no-gap, .no-gap-top)) {
	margin-top: var(--gap-inner-wide);
}

.iMIS-WebPart:has(> div > :is(.no-gap, .no-gap-bottom)) {
	margin-bottom: var(--gap-inner-wide);
}


/**
 * BMF panel classes
** -------------------------------------------------------------------------------------------------------------------- */

/* Generic class */
.bmf-panel {
	--panel-nav: max(25px, calc(calc(0.024038 * var(--vw-act)) + 6.538462px));
	--panel-link-size: 27px;

	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-inner);
	font-size: var(--fontsize-panel);

	/* removes the left & right margin for image-text combinations */
	&.no-text-margin:is(.image-row, .image-col) .panel-item > div:has(p) {
		padding: var(--gap-inner) 0px;
	}

	& .panel-item {
		display: flex;
		position: relative;
		background-color: var(--body-bg);
		color: var(--body-text);
		width: 100%;

		&:has(a) {
			cursor: pointer;
		}

		& :is(h3,h4,h5,h6) {
			color: var(--body-text);
		}

		& div:has(img) {
			position: relative;
			line-height: 0px;
		}

		&:not(.no-linkicon) a:not(.TextButton, .not-visible, .not-icon) {
			display: block;
			position: absolute;
			background-color: var(--button-bg);
			right: 0px;
			bottom: 0px;
			width: var(--panel-link-size);
			height: var(--panel-link-size);
			padding: calc((50px - var(--panel-link-size)) / 2);
			box-sizing: content-box;
			z-index: 1;
		 
			&:after {
				display: block;
				mask-image: url("images/icon-arrow.svg#right");
				mask-repeat: no-repeat;
				mask-size: contain;
				mask-position: center;
				width: var(--panel-link-size);
				height: var(--panel-link-size);
				background-color: var(--button-text);
				content: "";
				position: absolute;
                top: 0px;
                left: 0px;
                transform: translate(50%, 50%);
			}
		}
	}

	& .TaggedListPanel {
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap-inner);
		font-size: var(--fontsize-panel);
		justify-content: space-around;

		/* Places the page control firmly at the bottom */
		& div[translate="yes"] {
			flex: 1 1 100%;
			text-align: right;

			& a {
				float: none;

				&:last-child {
					margin-right: unset;
				}
			}
		}
	}

	& .QueryTemplateSet {
		display: flex;
		flex-wrap: wrap;
		gap: var(--gap-inner);
		font-size: var(--fontsize-panel);
		justify-content: space-around;

		> section:has(.QueryTemplateItem) {
			flex-basis: var(--panel-flex-basis);
			flex-grow: var(--panel-flex-grow);
			flex-shrink: var(--panel-flex-grow);
			flex-direction: column;

			> .QueryTemplateItem {
				height: 100%;

				> .panel-item {
					height: 100%;
				}
			}
		}
	}

	&:is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6) {
		width: unset;
	}

	&.panel-width-400 {
		--panel-flex-basis: 400px;

		.panel-item {
			@media(min-width: 768px) {
				min-width: 400px;
			}
		}
	}
	&.panel-width-500 {
		--panel-flex-basis: 500px;

		.panel-item {
			@media(min-width: 768px) {
				min-width: 500px;
			}
		}
	}
	&.panel-width-600 {
		--panel-flex-basis: 600px;

		.panel-item {
			@media(min-width: 768px) {
				min-width: 600px;
			}
		}
	}
	&.panel-width-700 {
		--panel-flex-basis: 700px;

		.panel-item {
			@media(min-width: 768px) {
				min-width: 700px;
			}
		}
	}
	&.panel-height-150 {
		.panel-item {
			min-height: 150px;
		}
	}

	&.col-1 {		/* Default */
		.rolodex-item {
			--panel-flex-basis: var(--vw-contentmax-gapmax);
		}
		--panel-flex-basis: 100%;
	}

	&.col-2 {
		.rolodex-item {
			--panel-flex-basis: calc((var(--vw-contentmax-gapmax) - var(--gap-inner)) / 2);
		}
		--panel-flex-basis: calc((var(--vw-contentmax) - (var(--gap-inner) * 2)) / 2);
	}

	&.col-3 {
		.rolodex-item {
			/* --panel-flex-basis: calc((var(--vw-contentmax-gapmax) - (var(--gap-inner) * 2)) / 3); */
			--panel-flex-basis: max(276px, calc(calc(0.191106 * var(--vw-act)) + 129.230769px));
		}
		--panel-flex-basis: calc((var(--vw-contentmax) - (var(--gap-inner) * 3)) / 3);
	}

	&.col-4 {
		.rolodex-item {
			--panel-flex-basis: calc((var(--vw-contentmax-gapmax) - (var(--gap-inner) * 3)) / 4);
		}
		--panel-flex-basis: calc((var(--vw-contentmax) - (var(--gap-inner) * 4)) / 4);
	}

	&.col-5 {
		.rolodex-item {
			--panel-flex-basis: calc((var(--vw-contentmax-gapmax) - (var(--gap-inner) * 4)) / 5);
		}
		--panel-flex-basis: calc((var(--vw-contentmax) - (var(--gap-inner) * 5)) / 5);
	}

	&.col-6 {
		.rolodex-item {
			--panel-flex-basis: calc((var(--vw-contentmax-gapmax) - (var(--gap-inner) * 5)) / 6);
		}
		--panel-flex-basis: calc((var(--vw-contentmax) - (var(--gap-inner) * 6)) / 6);
	}

	&.col-7 {
		.rolodex-item {
			--panel-flex-basis: calc((var(--vw-contentmax-gapmax) - (var(--gap-inner) * 6)) / 7);
		}
		--panel-flex-basis: calc((var(--vw-contentmax) - (var(--gap-inner) * 7)) / 7);
	}

	&.col-8 {
		width: unset;

		.rolodex-item {
			--panel-flex-basis: calc((var(--vw-contentmax-gapmax) - (var(--gap-inner) * 7)) / 8);
		}
		--panel-flex-basis: calc((var(--vw-contentmax) - (var(--gap-inner) * 8)) / 8);
	}

	--panel-flex-basis: unset;
	--panel-flex-grow: 1;

	&.big-number {
		& .panel-item {
			flex: 1 1 var(--panel-flex-basis);
			> div {
				&:has(img) {
					padding: var(--gap-inner) 0px var(--gap-inner) var(--gap-inner);
				}
				&:has(p) {
					padding: var(--gap-inner);
				}
				& img {
					aspect-ratio: unset;
					object-fit: contain;
					height: 150px !important;
					width: 130px;
					max-width: unset;

					@media (max-width: 991px) {
						height: 100px !important;
						width: 80px;
					}
				}
			}
		}
	}

	&.event {
		.panel-item {
			line-height: 1em;
	
			.QueryTemplateItem {
				display: flex;
				flex-direction: column;
				height: 100%;
			}
	
			& h3 {
				line-height: 1.3em;
				max-height: calc(3.9em + 30px);
				text-overflow: ellipsis;
				overflow: hidden;
				position: relative;
				padding: 15px;
				margin: unset;
				height: 100%;
			}
		}
	}

	&.image-row {
		& .panel-item {
			flex: 1 1 var(--panel-flex-basis);

			> div:has(p) {
				padding: var(--gap-inner);
				height: 100%;
				width: 100%;
				box-sizing: border-box;
			}
			& img {
				aspect-ratio: 4 / 3;
				object-fit: cover;
				height: 100% !important;
				width: unset;
			}
			@media (max-width: 767px) {
				flex-direction: column;

				& img {
					aspect-ratio: 16 / 9;
				}
			}
		}
	}

	&.image-col, &.video-col {
		& .panel-item {
			flex-basis: var(--panel-flex-basis);
			flex-grow: var(--panel-flex-grow);
			flex-shrink: var(--panel-flex-grow);
			flex-direction: column;

			> div:has(p) {
				padding: var(--gap-inner);
				height: 100%;
				width: 100%;
				box-sizing: border-box;
			}
			& img {
				aspect-ratio: 16 / 9;
				object-fit: cover;
				height: unset !important;
				/* vertical-align: bottom; */
				width: 100%;
			}
			& :is(iframe.bmf-video, video) {
				object-fit: contain;
				width: 100%;
				aspect-ratio: 16 / 9;
			}
		}

		& .QueryTemplateSet {
			> section {
				flex-basis: var(--panel-flex-basis);
				flex-grow: var(--panel-flex-grow);
				flex-shrink: var(--panel-flex-grow);
				flex-direction: column;
	
				> .QueryTemplateItem {
					> img {
						aspect-ratio: 16 / 9;
						object-fit: cover;
						height: unset !important;
						width: 100%;
					}
					> :is(iframe.bmf-video, video) {
						object-fit: contain;
						width: 100%;
						aspect-ratio: 16 / 9;
					}
				}
			}
		}
	}

	&.image-orig {
		justify-content: space-between;
		gap: 50px;

		& .panel-item {
			flex-grow: 0;
			flex-shrink: 0;
			width: unset;

			& img {
				aspect-ratio: unset;
				object-fit: none;
			}
		}
	}

	&.image-tn {
		justify-content: flex-start;

		& .panel-heading {
			/* margin-top: 40px; */
			padding: unset;
		}

		& .QueryTemplateSet {
			> section {
				flex-grow: 0;
				flex-shrink: 0;

				> .QueryTemplateItem {
					> span {
						display: block;
						width: 100%;
						text-align: center;
						box-sizing: border-box;
						font-size: 16px;
					}
		
					> h4 {
						font-size: 20px;
						text-align: center;
					}
		
					> img {
						aspect-ratio: 4 / 5;
						object-fit: cover;
						height: unset !important;
						width: 100%;
					}

					&:has(a.panel-link) {
						position: relative;
					}

					> a.panel-link {
						position: absolute;
						top: 0px;
						left: 0px;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}

	&.image-button {
		gap: var(--gap-inner);
		height: 100%;
		justify-content: space-evenly;

		/* Fix the # of button columns for screen widths greater than 1920px in responsive */
		/* No longer required with max content width setting
		@media (min-width: 1920px) {
			&.bf-col-3 {
				--image-button-min: calc((100vw - 419px) / 6);
			}
			&.bf-col-4 {
				--image-button-min: calc((100vw - 469px) / 8);
			}
		}
		*/

		& .panel-item {
			transition: all 0.2s ease-in-out;
			flex-direction: column;
			/* padding: 0px; */
			overflow: hidden;
			flex: 1 1 var(--image-button-min);
			gap: var(--gap-inner);


			&:hover {
				transform: scale(1.05);
				box-shadow: 0px 0px 30px -10px rgba(0, 0, 0, 1);
			}
			&:active {
				transform: scale(1);
				box-shadow: none;
				filter: opacity(0.8);
			}

			& img {
				width: 100%;
				height: 100%;
				max-width: 64px;
				max-height: 64px;
				object-fit: contain;
				align-self: center;
			}

			& h4 {
				font-size: 0.8em;
				margin: unset;
				margin-block-end: unset !important;
				text-align: center;
			}

			& a {
				text-align: center;

				&.TextButton {
					margin: 0px var(--gap-inner);
				}

				&.not-visible {
					position: absolute;
					top: 0px;
					left: 0px;
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	&.image-icon {
	
		& .panel-item {
			flex-basis: var(--panel-flex-basis);
			flex-grow: var(--panel-flex-grow);
			flex-shrink: var(--panel-flex-grow);
			flex-direction: row;
			gap: var(--gap-inner);

			> img {
				aspect-ratio: 1 / 1;
				max-width: 125px;
				max-height: 125px;
			}
		}
	}

	&.image-icon-90 {
	
		& .panel-item {
			flex-basis: var(--panel-flex-basis);
			flex-grow: var(--panel-flex-grow);
			flex-shrink: var(--panel-flex-grow);
			flex-direction: row;
			gap: var(--gap-inner);

			> img {
				aspect-ratio: 1 / 1;
				max-width: 90px;
				max-height: 90px;
			}
		}
	}

	&.image-350w .panel-item img {
		@media (max-width: 767px) {
			width: 100%
		}
		@media (min-width: 768px) {
			width: 350px;
		}
	}

	&.image-16x9 .panel-item img {
		aspect-ratio: 16 / 9;
	}

	&.image-any .panel-item img {
		aspect-ratio: unset;
	}

	&.text-col {
		justify-content: space-evenly;

		& .panel-item {
			flex-basis: var(--panel-flex-basis);
			flex-grow: var(--panel-flex-grow);
			flex-shrink: var(--panel-flex-grow);
			flex-direction: column;
			padding: var(--gap-inner);
			gap: 1em;
			/* height: 100%; */
			width: 100%;
			box-sizing: border-box;
			max-width: calc(var(--panel-flex-basis) * 1.5);

			&:not(.no-linkicon):has(a:not(.TextButton, .not-visible, .not-icon)) {
				padding-bottom: calc(var(--gap-inner) + 50px);
			}

			/* Set margins for standard container elements */
			/*
			> p, > div, > span {

				&:has(> .TextButton) {
					display: flex;
					flex-wrap: wrap;
					gap: 1em;
	
					.TextButton {
						width: 100%;
						box-sizing: border-box;

						&:has(+ .TextButton) {
							width: auto !important;
						}
						+ .TextButton {
							width: auto !important;
						}
					}
				}
			}
				*/

			/* Multiple text buttons in a text panel should be natural width */
			& .TextButton:has(+ .TextButton) {
				width: auto !important;
			}

			& .TextButton + .TextButton {
				width: auto !important;
			}

			/* Singleton text buttons in a text panel should be 100% width */
			& .TextButton {
				width: 100%;
				box-sizing: border-box;
			}

			h3 ~ h3 {
				margin-top: var(--gap-inner);
			}

			&.profile {
				flex-direction: row;
				flex-wrap: wrap;
				height: 100%;

				.profile-picture-container > img {
					width: 100% !important;
					aspect-ratio: 4/5;
					object-fit: cover;
				}

				.bmf-profile-details .panel {
					display: flex;
					flex-direction: column-reverse;
					gap: unset;

					.panel-heading {
						position: relative;
						gap: unset;

						.sysicon {
							display: block;
							width: 100%;
							height: auto;
							background-image: none !important;
							background-color: var(--button-bg);
							color: var(--button-text);
							font-weight: 600;
							padding: unset;
							margin: unset;
							border: none !important;
							transition: all 0.2s ease-in-out;

							&::after {
								content: "Edit profile";
								width: unset;
								height: unset;
								mask-image: unset;
								padding: 12px 36px;
								background-color: unset;

								&:hover {
									background-color: unset;
								}
							}

							&:hover {
								filter: opacity(var(--button-hover));
							}
						}
					}

					.mini-profile-name-section {
						/* margin-top: var(--gap-inner); */
						margin-bottom: var(--gap-inner);
						line-height: normal; 
	
						.mini-profile-name-section-inner {
	
							div > span[id$="_fullName"] {
								text-transform: uppercase;
								color: var(--body-text);
								font-size: 1.4em;
								line-height: 2.0em;
							}
							/*
							div > span[id$="contactTitle"] {
							}
							div > span[id$="_InstituteNameLink"] {
							}
							*/
						}
					}
				}

				.bmf-profile-picture {

					.panel-heading {
						position: absolute;
						z-index: 10;
						background-color: unset;

						& div {
							background-color: unset;
						}

						.sysicon::after {
							background-color: var(--col-white);
						}
					}
				}

				/*
				> img:has(+ div) {
					flex: 1 1 100px !important;
					aspect-ratio: 4/5;
					object-fit: cover;
				}
				> img + div {
					flex: 1 1 150px !important;
				}
				> img + div + a {
					flex: 1 1 100% !important;
				}
				*/
			}

			.image-icon-row {
				/*
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
				gap: unset;
				*/
				
				> img {
					display: inline-block;
					/* flex: 1 1 50px; */
					width: 100%;
					height: 100%;
					max-width: 45px;
					max-height: 45px;
				}
			}
		}
	}

	&.centered {
		* {
			text-align: center;
		}
	}

	&.ipart-col {
		padding: var(--gap-inner);

		& div:has(> .iMIS-WebPart) {
			display: flex;
			flex-direction: column;
		}

		.image-icon-row {
			> img {
				display: inline-block;
				width: 100%;
				height: 100%;
				max-width: 45px;
				max-height: 45px;
			}
		}

		.panel-heading {
			display: inline;
		}
	}
}


/** 
 * BMF content classes
** -------------------------------------------------------------------------------------------------------------------- */

.bmf-content {
	display: flex;
	flex-direction: row;

	&.no-margin {
		gap: var(--gap-inner);
		margin: unset;
	}

	gap: var(--gap-inner-wide);
	margin: var(--gap-inner-wide) 0px;

	
	&:first-child, &:first-of-type {
		margin-top: 0px;
	}

	&:last-child, &:last-of-type {
		margin-bottom: 0px;
	}

	&:has(~ .bmf-section.no-gap) {
		padding-bottom: 0px;
	}

	& img {
		object-fit: cover;
		width: 100%;
		height: 100% !important;

		&.image-contain {
			object-fit: contain;
		}
	}

	& :is(iframe.bmf-video, video) {
		object-fit: contain;
		width: 100%;
		height: 100%;
	}

	&.row2row {
		flex-direction: row;

		& div {
			flex-direction: row;
		}

		@media (max-width: 991px) {
			flex-direction: column;

			& div:not(.image-button .panel-item) {
				flex-basis: unset !important;
			}
		}
	}

	&.col2col {
		flex-direction: column;

		& div {
			flex-direction: column;
		}
	}

	&.row2col {		/* Default */
		flex-direction: row;
		
		& div {
			flex-direction: column;
		}

		@media (max-width: 991px) {
			flex-direction: column;

			&.wrap-reverse {
				flex-direction: column-reverse;
			}

			& div {
				flex-basis: unset !important;
			}
		}
	}

	&.col2row {
		flex-direction: column;

		& div {
			flex-direction: row;
		}
	}

	& .full-height {

		/* Apply to all child divs up-to (but not including) .panel-item */
		& div:not(.panel-item, .panel-item *, .ipart-col .iMIS-WebPart, .ipart-col .iMIS-WebPart *) {
			height: 100%;
		}
	}

	/* evenly spaces all panel-items within a content block */
	& .distributed {
		.panel-item, div:has(> .iMIS-WebPart) {
			justify-content: space-between;

			> div {
				flex-grow: 0;
				flex-shrink: 0;
				flex-basis: unset;
			}
		}
	}

	/* Forces a faster responsiveness for content with complex panels */
	&.respond-1200 {
		@media(max-width: 1199px) {
			flex-direction: column;
		}
	}
		
	&.image-16x9 {
		& :is(img, iframe.bmf-video, video) {
			aspect-ratio: 16 / 9;
		}
	}
	&.image-9x16 {
		& :is(img, iframe.bmf-video, video) {
			aspect-ratio: 9 / 16;
		}
	}
	&.image-2x3 {
		& :is(img, iframe.bmf-video, video) {
			aspect-ratio: 2 / 3;
		}
	}
	&.image-3x2 {
		& :is(img, iframe.bmf-video, video) {
			aspect-ratio: 3 / 2;
		}
	}
	&.image-sq {
		& :is(img, iframe.bmf-video, video) {
			aspect-ratio: 1 / 1;
		}
	}

	& div {
		/* if a panel-item is shown, only apply the background to the panels, not the entire div */
		&:not(&:has(.panel-item)) {
			background-color: var(--body-bg);
		}
		color: var(--body-text);
		flex-direction: column;
		gap: var(--gap-inner);
		flex: 1 1 100%;

		&.content-width-1x {
			flex: 1 1;
		}
		&.content-width-2x {
			flex: 2 2;
		}
		&.content-width-3x {
			flex: 3 3;
		}
		&.content-width-4x {
			flex: 4 4;
		}
		&.content-width-20 {
			flex: 0 0 20%;
		}
		&.content-width-25 {
			flex: 0 0 25%;
		}
		&.content-width-33 {
			flex: 0 0 33%;
		}
		&.content-width-40 {
			flex: 0 0 40%;
		}
		&.content-width-50 {
			flex: 0 0 50%;
		}
		&.content-width-60 {
			flex: 0 0 60%;
		}
		&.content-width-66 {
			flex: 0 0 66%;
		}
		&.content-width-75 {
			flex: 0 0 75%;
		}
		&.content-width-80 {
			flex: 0 0 80%;
		}
		&.content-width-100 {
			flex: 0 0 100%;
		}

		/* Use as a blanking panel; when the orientation changes from row to column, hide it to avoid uneven spacing */
		&.empty {
			@media(max-width: 991px) {
				display: none;
			}
		}

		/* Aligns all content to the top when shown in rows; when show as columns, don't align (not needed) */
		&.justify-top {
			@media(min-width: 992px) {
				align-self: flex-start;
			}
		}

		/* Aligns all content to the top when shown in rows; when show as columns, don't align (not needed) */
		&.justify-bottom {
			@media(min-width: 992px) {
				align-self: flex-end;
			}
		}
	}

	@media (max-width: 991px) {
		flex-direction: column;

		&.wrap-reverse {
			flex-direction: column-reverse;
		}

		& div:not(.image-button .panel-item) {
			flex-basis: unset !important;
		}
	}
}

/** 
 * BMF Icons
** -------------------------------------------------------------------------------------------------------------------- */

.bmf-icon {
	a::before {
		content: "";
		display: inline-block;
		background: white;
		mask-size: 18px 18px;
		mask-repeat: no-repeat;
		mask-position: center;
		height: 30px;
		width: 30px;
		vertical-align: middle;

		@media (max-width: 767px) {
			mask-size: 30px 30px;
			height: 35px;
			width: 35px;
			background: var(--col-blue);
		}
	}

	&.directory a::before {
		mask-image: url("images/auxIcons2.svg#directory");
	}
	&.person a::before {
		mask-image: url("images/auxIcons2.svg#person");
	}
}

/** 
 * BMF Specific Screens
** -------------------------------------------------------------------------------------------------------------------- */

/* Login Page */
.bmf-page-signin {
	div:has(> .bmf-section.signin) {
		padding: var(--gap-section);
	}

	.bmf-section.signin {
		margin: 0px auto;
		max-width: 800px;
		background-color: var(--col-lightgrey);
	}
}

/* Events and Training Pages */
.bmf-page-event {
	.iMIS-WebPart:has(div[id*="ste_container_ci"] > .panel > .panel-body-container > .panel-body > div) > div {
		padding: var(--gap-ver) var(--gap-hor);
	
		&#ste_container_ciEventDisplay {
			--body-bg: var(--col-darkgrey);
			--body-text: var(--col-white);
			--button-text: var(--col-darkgrey);
			--button-bg: var(--col-lightblue);
			--header-text: var(--col-white);
			--header-bar: var(--col-red);
		}
	
		&#ste_container_ciEventProgramDisplay {
			--body-bg: var(--col-white);
			--body-text: var(--col-darkblue);
			--button-text: var(--col-white);
			--button-bg: var(--col-red);
			--header-text: var(--col-darkgrey);
			--header-bar: var(--col-red);
		}

		&#ste_container_ciTrainingDisplay {
			--body-bg: var(--col-darkblue);
			--body-text: var(--col-white);
			--button-text: var(--col-white);
			--button-bg: var(--col-red);
			--header-text: var(--col-white);
			--header-bar: var(--col-red);
		}

		&#ste_container_ciTrainingProgramDisplay {
			--body-bg: var(--col-darkblue);
			--body-text: var(--col-white);
			--button-text: var(--col-white);
			--button-bg: var(--col-red);
			--header-text: var(--col-white);
			--header-bar: var(--col-red);
		}
	
		background-color: var(--body-bg);
		color: var(--body-text);
	
		.ProgramGroup .PanelHead, .ProgramGroup .panel-heading {
			background-color: var(--col-darkblue);
		}
	
		.panel .panel-body-container .panel-body {
			.Section {
				margin-bottom: unset;
	
				.panel-title {
					margin-bottom: var(--gap-inner);
	
				}
			}
	
			.PanelHead .PanelTitle h2 {
				position: relative;
				padding-left: 30px;
				font-family: unset;
				font-size: var(--fontsize-h2);
				font-weight: 600;
			
				&::before {
					position: absolute;
					left: 0px;
					top: 4px;
					width: 8px;
					height: max(39px, calc(calc(0.024038 * var(--vw-act)) + 20.538462px));
					background-repeat: repeat-y;
					background-color: var(--header-bar);
					content: '';
				}
			}
	
			.EventDisplay {
				.EventSummary .PhotoArea {
					@media (min-width: 768px) {
						padding-right: var(--gap-inner);
					}
				}
	
				.EventDetails {
					.ContactLocationArea {
						.btn-group .btn.btn-default {
							background-color: var(--button-bg);
							color: var(--button-text);
						}
	
						.PanelBlock .PanelField {
							padding: 0px 0px var(--gap-inner) 0px;
	
							.PanelFieldLabel {
								padding: 0px var(--gap-inner) var(--gap-inner) 0px;
	
								& span.Label {
									text-transform: uppercase;
									font-size: 1.4em;
									font-weight: 600;
									color: var(--header-text);
								}
							}
	
							.PanelFieldValue {
								padding: 0px var(--gap-inner) var(--gap-inner) 0px;
							}
						}
					}
	
					.RegistrationArea {
						--body-bg: var(--col-red);
						--body-text: var(--col-white);
						--body-anchor: var(--col-lightblue);
						--button-text: var(--col-white);
						--button-text-primary: var(--col-white);
						--button-bg: var(--col-darkblue);
						--button-bg-primary: var(--col-blue);
						--header-text: var(--col-white);
						--header-bar: var(--col-black);
						--system-icon-color: var(--col-lightblue);
						--system-icon-color-hover: var(--col-blue);
				
						border-radius: unset;
						background-color: var(--body-bg);
						padding: var(--gap-inner);
	
						> .border {
							border: unset !important;
							border-radius: unset;
	
							> .card-body {
								background-color: var(--button-bg);
								padding: var(--gap-inner);
	
								> .RegistrationArea-currentUser {
									display: block;
	
									> .RegistrationArea-status {
										max-width: unset;
	
										& input {
											&.mb-3 {
												margin-top: var(--gap-inner) !important;
												margin-bottom: 0px !important;
											}
											&.TextButton {
												margin-block: unset;
											}
											&.SmallButton {
												max-width: unset;
												padding: 12px 36px;
												width: 100%;
											}
											&.LargeButton {
												max-width: unset;
												font-size: unset !important;
											}
											&.DangerButton {
												background-color: var(--col-red);
											}
										}
									}
	
									> div > .RegistrationArea-info > .h5 {
										color: var(--header-text);
									}
								}
							}
						}
	
						> .p-2 {
							padding: unset !important;
						}
	
						> div:has(> span[id$="_RegistrationLabel"]) {
							flex-direction: column;
							color: var(--header-text);
							margin-block-end: unset;
	
							&:before {
								content: "Interested in attending?";
								text-transform: uppercase;
								font-size: 1.4em;
							}
							&:after {
								content: "To register, please click on the button below to be taken to the members' area";
								font-weight: 200;
								padding: var(--gap-inner) 0px;
								text-transform: none;
							}
	
							> span {
								display: none;
							}
						}
	
						> div[id$="_DivRegisterMyselfButton"] > .PrimaryButton.LargeButton {
							max-width: unset;
							font-size: 100% !important;
							font-weight: 600;
							/* background-color: var(--button-bg); */
							color: var(--button-text);
							margin-right: unset;
						}
	
						> div[id$="_DivRegisterSomeoneElseButton"] > .SecondaryButton {
							width: 100%;
							font-weight: 600;
							background-color: var(--button-bg);
							color: var(--button-text);
							margin-right: unset;
						}
	
						> div > span[id$="_LabelRegisterButtonError"] {
							color: var(--body-text) !important;
						}
	
						> div[id$="_DivCartCheckoutButtonDisplay"] > .ContentItemContainer {
							width: 100%;
	
							.PrimaryButton {
								/* background-color: var(--button-bg); */
								max-width: unset;
								font-size: unset !important;
							}
						}
					}
				}
			}
		}
	}
}


/** 
 * BMF Colour combinations
** -------------------------------------------------------------------------------------------------------------------- */

/* Body colours: "text"-"background" */
.bmf-body-white-darkgrey {
	--body-bg: var(--col-darkgrey);
	--body-text: var(--col-white);
	--body-anchor: var(--col-lightblue);
	--field-border: none;
	--button-text: var(--col-white);
	--button-bg: var(--col-red);
	--header-text: var(--col-white);
	--header-bar: var(--col-red);
}

.bmf-body-blue-white {
	--body-bg: var(--col-white);
	--body-text: var(--col-blue);
	--body-anchor: var(--col-red);
	--field-border: 1px solid var(--col-lightgrey);
	--button-text: var(--col-white);
	--button-text-primary: var(--col-white);
	--button-bg: var(--col-blue);
	--button-bg-primary: var(--col-blackblue);
	--header-text: var(--col-blue);
	--header-bar: var(--col-lightblue);
}

.bmf-body-darkblue-white {
	--body-bg: var(--col-white);
	--body-text: var(--col-darkblue);
	--body-anchor: var(--col-red);
	--field-border: 1px solid var(--col-lightgrey);
	--button-text: var(--col-white);
	--button-bg: var(--col-red);
	--header-text: var(--col-darkblue);
	--header-bar: var(--col-red);
}

.bmf-body-black-white {
	--body-bg: var(--col-white);
	--body-text: var(--col-black);
	--body-anchor: var(--col-red);
	--field-border: 1px solid var(--col-lightgrey);
	--button-text: var(--col-white);
	--button-bg: var(--col-red);
	--header-text: var(--col-black);
	--header-bar: var(--col-red);
}

.bmf-body-white-black, .bmf-body-white-blackblue {
	--body-bg: var(--col-blackblue);
	--body-text: var(--col-white);
	--body-anchor: var(--col-lightblue);
	--field-border: none;
	--button-text: var(--col-white);
	--button-bg: var(--col-red);
	--header-text: var(--col-white);
	--header-bar: var(--col-red);
}

.bmf-body-white-darkblue {
	--body-bg: var(--col-darkblue);
	--body-text: var(--col-white);
	--body-anchor: var(--col-lightblue);
	--field-border: none;
	--button-text: var(--col-darkblue);
	--button-text-primary: var(--col-white);
	--button-bg: var(--col-lightblue);
	--header-text: var(--col-white);
	--header-bar: var(--col-lightblue);
}

.bmf-body-white-red {
	--body-bg: var(--col-red);
	--body-text: var(--col-white);
	--body-anchor: var(--col-lightblue);
	--field-border: none;
	--button-text: var(--col-darkblue);
	--button-text-primary: var(--col-white);
	--button-bg: var(--col-white);
	--header-text: var(--col-white);
	--header-bar: var(--col-lightblue);
}

.bmf-body-white-blue {
	--body-bg: var(--col-blue);
	--body-text: var(--col-white);
	--body-anchor: var(--col-lightblue);
	--field-border: none;
	--button-text: var(--col-darkblue);
	--button-text-primary: var(--col-white);
	--button-bg: var(--col-lightblue);
	--button-bg-primary: var(--col-blackblue);
	--header-text: var(--col-white);
	--header-bar: var(--col-lightblue);
}

.bmf-body-black-lightblue {
	--body-bg: var(--col-lightblue);
	--body-text: var(--col-black);
}

.bmf-body-lightblue-blue {
	--body-bg: var(--col-blue);
	--body-text: var(--col-lightblue);
}

.bmf-body-darkblue-lightblue {
	--body-bg: var(--col-lightblue);
	--body-text: var(--col-darkblue);
	--body-anchor: var(--col-red);
	--field-border: none;
	--button-text: var(--col-white);
	--button-text-primary: var(--col-white);
	--button-bg: var(--col-blue);
	--button-bg-primary: var(--col-blackblue);
	--header-text: var(--col-darkblue);
	--header-bar: var(--col-red);
}

.bmf-body-darkblue-lightgrey {
	--body-bg: var(--col-lightgrey);
	--body-text: var(--col-darkblue);
	--body-anchor: var(--col-blue);
	--field-border: none;
	--button-text: var(--col-white);
	--button-text-primary: var(--col-white);
	--button-bg: var(--col-red);
	--button-bg-primary: var(--col-blue);
	--header-text: var(--col-darkblue);
	--header-bar: var(--col-red);
}

/*
	--col-iobm-grey: #799aae;
	--col-iobm-darkblue: #20536e;
	--col-iobm-lightblue: #0cacc9;
	--col-iobm-green: #0c9999;
	--col-iobm-lightgreen: #5abfc2;
*/

.iobm-body-white-green {
	--body-bg: var(--col-iobm-green);
	--body-text: var(--col-white);
	--body-anchor: var(--col-iobm-darkblue);
	--field-border: none;
	--button-text: var(--col-white);
	--button-text-primary: var(--col-white);
	--button-bg: var(--col-iobm-darkblue);
	--button-bg-primary: var(--col-iobm-lightblue);
	--header-text: var(--col-white);
	--header-bar: var(--col-iobm-darkblue);
}

.iobm-body-darkblue-white {
	--body-bg: var(--col-white);
	--body-text: var(--col-darkblue);
	--body-anchor: var(--col-blue);
	--field-border: none;
	--button-text: var(--col-white);
	--button-text-primary: var(--col-white);
	--button-bg: var(--col-iobm-darkblue);
	--button-bg-primary: var(--col-iobm-green);
	--header-text: var(--col-darkblue);
	--header-bar: var(--col-iobm-lightblue);
}

.iobm-body-white-darkblue {
	--body-bg: var(--col-iobm-darkblue);
	--body-text: var(--col-white);
	--body-anchor: var(--col-iobm-lightblue);
	--field-border: none;
	--button-text: var(--col-white);
	--button-text-primary: var(--col-white);
	--button-bg: var(--col-iobm-lightblue);
	--button-bg-primary: var(--col-iobm-lightgreen);
	--header-text: var(--col-white);
	--header-bar: var(--col-iobm-lightblue);
}

.iobm-body-white-lightblue {
	--body-bg: var(--col-iobm-lightblue);
	--body-text: var(--col-white);
	--body-anchor: var(--col-iobm-darkblue);
	--field-border: none;
	--button-text: var(--col-white);
	--button-text-primary: var(--col-white);
	--button-bg: var(--col-iobm-darkblue);
	--button-bg-primary: var(--col-iobm-green);
	--header-text: var(--col-white);
	--header-bar: var(--col-iobm-darkblue);
}

.iobm-body-white-grey {
	--body-bg: var(--col-iobm-grey);
	--body-text: var(--col-white);
	--body-anchor: var(--col-iobm-darkblue);
	--field-border: none;
	--button-text: var(--col-white);
	--button-text-primary: var(--col-white);
	--button-bg: var(--col-iobm-darkblue);
	--button-bg-primary: var(--col-iobm-green);
	--header-text: var(--col-white);
	--header-bar: var(--col-iobm-darkblue);
}


/* Header colours: "text"-"bar" */
.bmf-header-white-lightblue {
	--header-text: var(--col-white);
	--header-bar: var(--col-lightblue);
	--button-text: var(--col-darkgrey);
	--button-bg: var(--col-lightblue);
}

.bmf-header-white-red {
	--header-text: var(--col-white);
	--header-bar: var(--col-red);
	--button-text: var(--col-white);
	--button-bg: var(--col-red);
}

.bmf-header-lightblue-lightblue {
	--header-text: var(--col-lightblue);
	--header-bar: var(--col-lightblue);
}

.bmf-header-black-lightblue {
	--header-text: var(--col-black);
	--header-bar: var(--col-lightblue);
}

.bmf-header-blue-lightblue {
	--header-text: var(--col-blue);
	--header-bar: var(--col-lightblue);
}

.bmf-header-darkblue-red {
	--header-text: var(--col-darkblue);
	--header-bar: var(--col-red);
}

.bmf-header-blue-red {
	--header-text: var(--col-blue);
	--header-bar: var(--col-red);
}

/* Button colours: "text"-"background" */
.bmf-button-red {
	--button-bg: var(--col-red);
	--button-text: var(--col-white);
	--button-hover: 60%;
}

.bmf-button-blue {
	--button-bg: var(--col-blue);
	--button-text: var(--col-white);
	--button-hover: 60%;
}

.bmf-button-lightblue {
	--button-bg: var(--col-lightblue);
	--button-text: var(--col-darkblue);
	--button-hover: 60%;
}


/** 
 * DBC Rolodex classes
** -------------------------------------------------------------------------------------------------------------------- */

.rolodex {
	--panel-flex-grow: 0;

	position: relative;
	overflow: hidden;
	flex-wrap: nowrap;
	flex-direction: row;

	.rolodex-container {
		display: flex;
		flex-direction: row;
		gap: var(--gap-inner);

		.rolodex-item {
			transition: margin 0.5s ease-in-out, opacity 0.5s ease-in-out;
		}
	}

	@media (max-width: 991px) {
		flex-direction: column;
	}

	.rolodex-move {
		margin-left: calc(0px - var(--gap-inner) - var(--panel-flex-basis));
		opacity: 0%;
	}

	.rolodex-control {
		--rolodex-nav: max(32px, calc(calc(0.012019 * var(--vw-act)) + 22.769231px));

		&.rolodex-hide {
			display: none;
		}
	 
		display: flex;
		flex-direction: column;
		z-index: 1;

		@media (max-width: 991px) {
			flex-direction: row;
		}

		.rolodex-control-nav {
			flex: 1;
			white-space: nowrap;
			text-align: right;
			align-self: center;
			align-content: center;
			width: 100%;
			cursor: pointer;
		}

		 .rolodex-control-nav-left, .rolodex-control-nav-right {
			display: inline-block;
			width: var(--rolodex-nav);
			height: var(--rolodex-nav);
		 
			&:after {
				display: block;
				mask-repeat: no-repeat;
				mask-size: contain;
				width: var(--rolodex-nav);
				height: var(--rolodex-nav);
				background-color: var(--body-text);
				content: "";
			}
		}
		.rolodex-control-nav-left:after {
			mask-image: url("images/icon-arrow.svg#left");
			mask-position: left;
		}
		.rolodex-control-nav-right:after {
			mask-image: url("images/icon-arrow.svg#right");
			mask-position: right;
		}
		.rolodex-control-link {
			white-space: nowrap;
		}
	}
}