/**
 * Default stylesheet for BESA
 * 
 *  Date        Author		    Change
 *  2025-08-04  David Hood      Created new theme-based scripts
 * 
 * Copyright © 2025 by Building Engineering Services Association (BESA)
**/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
	/* Colour variables */
	--col-purple: #260859;
	--col-lightpurple: #592EAB;
	--col-shadepurple: #F6F4FB;
	--col-blue: #0D59C2;
	--col-bluegrey: #2975A0;
	--col-red: #F2331C;
	--col-green: #0BA35F; 
	--col-green-l: #00B95D;
	--col-teal: #04A39B;
	--col-lightgrey: #f0f0f0;
	--col-white: #ffffff;
        --col-grey: #cfdddd;
	--col-yellow: #ffc531;
	--col-faded-yellow: #f6e3a1;

	/* Screen controls */
	--vw-max: 1600px;
	--vw-act: min(100vw, var(--vw-max));
	--header-height: 100px;
	--header-logo-height: 70px;
	--menu-width: 300px;
	--menu-icon-height: 25px;
	--menu-icon-width: 40px;
	--gap-outer: max(10px, calc(calc(0.012019 * var(--vw-act)) + 0.769231px));
	--gap-inner: max(5px, calc(calc(0.00601 * var(--vw-act)) + 0.384615px));
	--border-radius: 10px;

	/* Font controls */
	--fontsize: max(16px, calc(calc(0.004808 * var(--vw-act)) + 12.307692px));
	--fontsize-menu: max(12px, calc(calc(0.007212 * var(--vw-act)) + 6.461538px));
	--header-text: var(--col-darkblue);

	/* Header controls */
	--h1-size: 1.8em;
    --h2-size: 1.5em;
    --h3-size: 1.3em;
    --h4-size: 1.1em;
    --h5-size: 1.0em;
    --h6-size: 0.8em;
}

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

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

body {
	font-family: Poppins, 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;
	color: var(--col-purple);
}

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;

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

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

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

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

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

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

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

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


/**
 * Overrides
** -------------------------------------------------------------------------------------------------------------------- */

a, .Link, .RadGrid.RadGrid .rgRow a, .RadGrid.RadGrid .rgAltRow a, .RadGrid.RadGrid .rgEditForm a, .k-grid.k-grid a, .RadToolTip.RadToolTip a,
a:visited, .Link:visited, .RadGrid.RadGrid .rgRow a:visited, .RadGrid.RadGrid .rgAltRow a:visited, .RadGrid.RadGrid .rgEditForm a:visited, .k-grid.k-grid a:visited, .RadToolTip.RadToolTip a:visited,
.RecentCommunityPost .CommunityName span {
	color: var(--col-blue);
}

.readMore:after {
	background-color: var(--col-purple);
}

a:hover, a:focus, a:active, .Link:hover, .Link:focus, .Link:active, .RadGrid.RadGrid .rgRow a:hover, .RadGrid.RadGrid .rgRow a:focus, .RadGrid.RadGrid .rgRow a:active, .RadGrid.RadGrid .rgAltRow a:hover, .RadGrid.RadGrid .rgAltRow a:focus, .RadGrid.RadGrid .rgAltRow a:active, .RadGrid.RadGrid .rgEditForm a:hover, .RadGrid.RadGrid .rgEditForm a:focus, .RadGrid.RadGrid .rgEditForm a:active, .k-grid.k-grid a:hover, .k-grid.k-grid a:focus, .k-grid.k-grid a:active, .RadToolTip.RadToolTip a:hover, .RadToolTip.RadToolTip a:focus, .RadToolTip.RadToolTip a:active,
.readMore:hover, .readMore:focus, .readMore:active {
	color: var(--col-purple);
	text-decoration: none;
}

a:focus,
a:focus-visible {
        outline: none !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -webkit-appearance: none !important;
}

.readMore:hover:after, .readMore:focus:after, .readMore:active:after {
	background-color: var(--col-blue);
}

.account-menu .dropdown-menu > li > a:hover, .account-menu .dropdown-menu > li > a:focus {
	color: var(--col-blue);
	background-color: unset;
}

.container {
	max-width: unset;
}

.wrapper {
	background: unset;
}

.header-background-container,
.Wrapper-HomePage .header-background-container {
	background-color: unset;
}

.header-background-container .ContentItemContainer > .ContentItemContainer,
.Wrapper-HomePage .header-background-container .ContentItemContainer > .ContentItemContainer {
	background-image: unset;
	background-color: unset;
}

.iMIS-WebPart>.ContentItemContainer, .WebPartZone>.ContentItemContainer {
	margin-bottom: var(--gap-outer);
	
	&:has(>.engagement-link) {
		margin-bottom: unset;
	}
}

header.header .header-background-container:before,
.Wrapper-HomePage header.header .header-background-container:before {
	background-image: unset;
	background-repeat: unset;
	height: unset;
	width: unset;
	position: unset;
}

header.header .header-background-container,
.Wrapper-HomePage header.header .header-background-container {
	display: unset;
	height: unset;
	overflow: unset;
	position: unset;
}

.header-aux-container .UtilityNavigation {
	align-items: flex-end;
	flex: 0 0 auto;
	gap: unset;
	justify-content: right;

	.UtilitySection.UtilityAccountArea {
		white-space: nowrap;
	}
}

.header-aux-container > div {
	padding-right: var(--gap-outer);
	padding-left: var(--gap-outer);
}

header.header .header-logo-container {
	padding-left: var(--gap-outer);
}

.RadMenu.RadMenu_Coffee {
	margin-top: unset;
	margin-bottom: unset;
}

.RadMenu.RadMenu_Coffee .rmRootLink {
	color: var(--col-purple);
}

.RadMenu.RadMenu_Coffee .rmHorizontal .rmText, .RadMenu.RadMenu_Coffee .rmText {
	padding: unset;

	@media (max-width: 991px) {
		width: unset;
	}
}

.RadMenu.RadMenu_Coffee .rmText, .RadMenu.RadMenu_Coffee .rmHorizontal .rmText, .RadMenu.RadMenu_Coffee .rmSlide .rmText {
	padding: unset;
}

.RadMenu.RadMenu_Coffee .rmToggle .rmIcon, .RadMenu.RadMenu_Coffee .rmRootGroup .rmRootLink .rmToggle .rmIcon {
	background-color: var(--col-purple);
	margin-top: 8px;
	margin-bottom: unset;
}

.RadMenu.RadMenu_Coffee .rmRootLink.rmExpanded, .RadMenu.RadMenu_Coffee .rmRootLink:hover, .RadMenu.RadMenu_Coffee .rmRootLink.rmFocused {
	color: var(--col-blue);
}

/*
.account-menu .dropdown-menu > li:hover,
.account-menu .dropdown-menu > li:has(a:hover) {
	background-color: var(--col-shadepurple);
}
*/

.account-menu .dropdown-menu li {
	transition: all 0.2s ease-in-out 0s;

	&:hover,
	&:has(a:hover) {
		background-color: var(--col-shadepurple);
	}

}


body:not(.Wrapper-HomePage) .body-container > div {
	padding: unset;
}

.SecondaryColumn h2, .SecondaryColumn .PanelTitle, .SecondaryColumn .panel-title,
h2.panel-title {
	color: var(--col-purple);
	font-size: var(--h2-size);
	text-transform: unset;
}

.mhp .engagement-link, .account-page .engagement-link {
	margin-top: unset;
	margin-bottom: unset;
	padding: unset;
}

.mhp .engage .panel-body-container, .account-page .engage .panel-body-container {
	padding: unset;
}

.mhp .profile .profile-link {
	margin: unset;
}

.template-list .panel-body, .template-list .PanelBody {
	padding: 0px var(--gap-outer);
}

a.ste-toggle {
	background-color: var(--col-white);
}


/* Repairs a rogue engagement link */
@media (max-width: 767px) {
    .mhp .engagement-link, .account-page .engagement-link {
        margin-top: unset;
    }
}

@media (max-width: 991px) {
	header.header .header-logo-container {
		flex: 1 1 auto;
	}

	header.header .header-background-container {
		display: none;
	}

	.header-aux-container .UtilityNavigation {
		flex-direction: row;
	}
}

@media (min-width: 992px) {
	.header.header .header-logo-container {
		flex: 0 0 auto;
	}

	header.header .header-background-container {
		display: block;
	}

	.header-aux-container .UtilityNavigation {
		flex-direction: row;
	}

	body:not(.Wrapper-HomePage) .body-container > div {
		padding: unset;
	}

	.RadMenu.RadMenu_Coffee {
		padding-right: unset;
	}
	
	.RadMenu.RadMenu_Coffee ul.rmRootGroup {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		float: unset;
	}

	.RadMenu.RadMenu_Coffee ul.rmRootGroup > .rmItem {
		padding-top: 5px;
		padding-bottom: 5px;
		transition: all 0.2s ease-in-out 0s;

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

	/* Change the colour of the down arrow on the utility menu */
	.account-menu .account-toggle:hover .caret, .account-menu .account-toggle:focus .caret {
		background-color: var(--col-white);
	}
}

footer.footer {
  background-color: unset;
}


/**
 * Colour swatches
** -------------------------------------------------------------------------------------------------------------------- */

.org-besa, .org-besca, .org-besca-cps {
	--besa-fg: var(--col-blue);
	--besa-bg: var(--col-white);

	&.besa-button {
		--besa-fg: var(--col-white);
		--besa-bg: var(--col-blue);
	}
}
.org-refcom, .org-refcom-elite, .org-refcom-es, .org-refcom-fgc {
	--besa-fg: var(--col-bluegrey);
	--besa-bg: var(--col-white);

	&.besa-button {
		--besa-fg: var(--col-white);
		--besa-bg: var(--col-bluegrey);
	}
}
.org-skillcard {
	--besa-fg: var(--col-green);
	--besa-bg: var(--col-white);

	&.besa-button {
		--besa-fg: var(--col-white);
		--besa-bg: var(--col-green);
	}
}
.org-welplan {
	--besa-fg: var(--col-green);
	--besa-bg: var(--col-white);

	&.besa-button {
		--besa-fg: var(--col-white);
		--besa-bg: var(--col-green);
	}
}


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

header.header {
	background-color: var(--col-purple);
	color: var(--col-white);
	display: flex;
	height: var(--header-height);
	position: sticky;
	top: 0px;

	.header-logo-container {
		height: 100%;
		padding-top: 15px;

		.besa-logos {
			.QueryTemplateSet {
				display: flex;
				flex-direction: row;
				gap: var(--gap-outer);
			}
			& img {
				height: var(--header-logo-height) !important;
				width: auto;
				object-fit: contain;
			}
			.panel-body-container {
				margin: unset;

				.panel-body {
					padding: unset;
					margin: unset;
				}
			}
		}

		/* Override default behaviour for flat-white */
		@media (min-width: 1380px) {
			max-width: unset;
		}
	}

	.header-background-container {
		flex: 1 1 auto;
	}

	.header-aux-container {
		background-color: unset;
		flex: 1 1 auto;
		padding-top: 15px;
		min-width: 300px;

		.collapse {
			display: block;
			visibility: hidden;
		}

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

		.account-menu {
			li {
				white-space: nowrap;
			}

			.profile-picture-wrapper img {
				width: 30px;
				border-radius: 15px;
			}
		}

		.search-container .search-field,
		.UtilitySearch #SimpleSearchBlock .search-field {
			background-image: url("images/auxIcons.svg#search");
			background-color: var(--col-white);
			border-radius: unset;
			color: var(--col-purple);
			width: 150px;
			margin: 0px 0px 0px auto;
			
			&:hover {
				width: 200px;
			}
		}

		.UtilityNavigation .account-menu > li > a.sign-in-link,
		.account-toggle .nav-text {
			color: var(--col-white);
		}

		.obo-toggle,
		.navbar-toggle.collapsed {
			background-color: var(--col-white);
		}
	}
}

.EventHeader .RadGrid_MetroTouch .rgHeader {

 background-color: var(--col-blue) !important;

}

.EventHeader .RadGrid_MetroTouch .rgHeaderOver {

 background-color: var(--col-blue) !important;

}

/**
 * Menu Styles
** -------------------------------------------------------------------------------------------------------------------- */

.header-primary-nav-container {
	background-color: var(--col-white);
	font-size: var(--fontsize-menu);
	font-weight: 600;
	min-width: var(--menu-width);
	/* padding: var(--gap-outer) !important; */
	z-index: 10;

	.RadMenu .rmLeftImage {
		height: var(--menu-icon-height) !important;
		width: var(--menu-icon-width);
		object-fit: contain;
		display: inline;
		margin: unset;
	}

	.navbar-collapse.nav-primary {
		padding: var(--gap-outer);
	}

	@media (max-width: 991px) {
		position: relative;
	}

	@media (min-width: 992px) {
		position: fixed;
	}
}

/**
 * Table
** -------------------------------------------------------------------------------------------------------------------- */
 .responsive-table {
 display: flex;
 flex-direction: column;
 width: 100%;
 justify-content: center;
 height: 350px;
 border: 4px solid #7030a0;
 padding: 15px;
 border-radius: 15px; 
 text-align: center; 
 box-sizing:border-box;
}


/**
 * Table Styles for smaller screens
** -------------------------------------------------------------------------------------------------------------------- */

       @media (max-width: 768px) {
           table, thead, tbody, th, td, tr {
               display: block;
           }

           table {
               width: 100% !important; 
               border-collapse: collapse;
           }

           tr  {
           display: block;
           width: 100% !important;
           }

           th {
               display: none;
           }
           

           td {
               display: block;
               width: 100% !important;
               box-sizing: border-box;
               padding: 10px !important;
               border-bottom: 1px solid #ddd;
           }

       }


/**
 * Body Styles
** -------------------------------------------------------------------------------------------------------------------- */

.wrapper .main-container .body-container .col-primary {
	background-color: var(--col-lightgrey);
	padding: var(--gap-outer);

	/* On really wide screens, limit max to vw-max and center content; only target the first .row parent... */
	.row {
		max-width: var(--vw-max);
		margin: 0 auto;

		/* ...not any .row descendents */
		.row {
			max-width: unset;
			margin: unset;
		}

		.besa-col-left,
		.besa-col-right {
			padding: 0px var(--gap-inner) !important;
		}

		@media (min-width: 768px) {
			& div[class^="col-"] .row {
				div[class^="col-"] {
					&:first-child {
						padding-left: unset !important;
					}
					&:last-child {
						padding-right: unset !important;
					}
				}
			}
		}

		>* {
			padding-left: var(--gap-inner);
			padding-right: var(--gap-inner);
		}
	}

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

	@media (min-width: 992px) {
		margin-left: var(--menu-width);
	}
}

/* Reactivate the border around the alert content */
.Alerts {
	& ul.AlertSet {
		margin-bottom: unset;
	}
	.panel-heading {
		padding: unset;

		& h2::before {
			content: '';
			display: inline-block;
			vertical-align: middle;
			background: var(--col-red);
			mask-repeat: no-repeat;
			mask-position: center;
			margin-right: 10px;
			mask-image: url(images/icon-information.svg);
			mask-size: 30px;
			width: 30px;
			height: 30px;
			margin-bottom: 5px;
		}
	}
	.panel-border {
		border: 2px solid var(--col-red);
		border-radius: var(--border-radius);
		background-color: var(--col-white);
		padding: var(--gap-outer);
	}
	.AlertItem {
		border: unset;
		padding: unset;
		background-color: unset;
		border-radius: unset;
		box-shadow: unset;
		margin-top: 5px !important;

		.media > img {
			width: 20px;
			align-self: flex-start;
			margin-top: 2px;

			&:first-child {
				margin-left: var(--gap-outer);
			}
		}
	}	
}

.panel-heading {
	margin: unset;
	padding: unset !important;
}

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

.panel-body, .PanelBody {
	padding: unset;
}


/* Changes the flat-white profile panel to include all elements within */
.besa-profile,
.besa-engagement {
	background: #ffffff;
    border-radius: unset;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--gap-outer);
    border: 1px solid #dbdbdb;
	padding: var(--gap-outer);

	/* Remove stock flat-white (includes iMIS targeted code causing issues) */
	.profile, .heading-icon > .panel {
		background: unset;
		border-radius: unset;
		box-shadow: unset;
		margin-bottom: unset;
		border: unset;
		padding-top: unset;
	}

	:is(.besa-title, .besa-email, .besa-phone)::before {
		content: '';
		display: inline-block;
		vertical-align: middle;
		width: 20px;
		height: 20px;
		background-color: var(--col-purple);
		mask-size: 20px 20px;
		mask-repeat: no-repeat;
		mask-position: center;
		margin-right: 10px;
		margin-bottom: 2px;
	}
	.besa-title::before {
		mask-image: url(images/icon-briefcase.svg);
	}
	.besa-email::before {
		mask-image: url(images/icon-letter.svg);
	}
	.besa-phone::before {
		mask-image: url(images/icon-phone.svg)
	}
	.my-profile .image {
		aspect-ratio: 1/1;
		border-radius: 100%;
		height: unset;
		width: 80%;
	}
	.iMIS-WebPart:last-of-type > div {
		margin-bottom: unset;
	}
}

/* Disable the original flat-white border structure */
.shadow-box > .panel > .panel-body-container {
	background: unset;
	border-radius: unset;
	box-shadow: unset;
	margin-bottom: unset;
	border: unset;
}

/* Changes the flat-white panels to include the header */
.besa-panel,
.heading-icon > .panel.panel-border,
.iMIS-WebPart > .ContentItemContainer > .panel.panel-border {
    background: #ffffff;
    border-radius: unset;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--gap-outer);
    border: 1px solid #dbdbdb;
}

.besa-white-container {
	background-color: #ffffff !important;
        padding: 0px !important;
        margin: 20px !important;
}

.besa-white-container-radius {
	background-color: #ffffff !important;
        padding: 0px !important;
        margin: 20px !important;
		border-radius: var(--border-radius);
}

.besa-white-container-title {
	background-color: #ffffff !important;
	padding-top: 20px !important;
}
.besa-white-container-title-radius {
	background-color: #ffffff !important;
	padding-top: 20px !important;
	border-radius: var(--border-radius);
}

.besa-white-container-title-shadow {
	background-color: #ffffff !important;
	padding-top: 20px !important;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.besa-content-header {
       text-align: center;
       font-size: 48px !important;
       font-weight: 700 !important;
       
}

.besa-content-box {
        padding: 16px;  
}

.besa-content-box-title-height {
        height: 100px;
        padding-top: 30px;
        text-align: center;
}

.besa-content-box-height {
        text-align: center;
}

.besa-content-box-bottom {
        padding-bottom: 16px;
        padding-top: 0px !important;  
}

.besa-org-header {

              text-align: center;

              :is(h2,h3), .panel-title {
		text-transform: unset;
		color: var(--col-purple);
                display: flex;
                align-items: center;      
                justify-content: center; 
                gap: 10px;  

	}
	h2, h2.panel-title {
		font-size: var(--h2-size);
	}
	h3, h3.panel-title {
		font-size: var(--h3-size);
	}
	&:is(.orgs) :is(h2,h3,h2.panel-title,h3.panel-title)::before {
		content: '';
		display: inline-block;
		vertical-align: middle;
		width: 25px;
		height: 25px;
		background-color: var(--col-purple);
		mask-size: 25px 25px;
		mask-repeat: no-repeat;
		mask-position: center;
		margin-right: 10px;
		margin-bottom: 5px;
	}
	&.orgs :is(h2,h3)::before {
		mask-image: url(images/mh-icons.svg#orgs);
	}

}

/* Add icons to the left of headings */
.heading-icon {
	:is(h2,h3), .panel-title {
		text-transform: unset;
		color: var(--col-purple);
	}
	h2, h2.panel-title {
		font-size: var(--h2-size);
	}
	h3, h3.panel-title {
		font-size: var(--h3-size);
	}
	&:is(.news,.invite,.orgs,.engage,.membership,.sections,.committees,.community) :is(h2,h3,h2.panel-title,h3.panel-title)::before {
		content: '';
		display: inline-block;
		vertical-align: middle;
		width: 25px;
		height: 25px;
		background-color: var(--col-purple);
		mask-size: 25px 25px;
		mask-repeat: no-repeat;
		mask-position: center;
		margin-right: 10px;
		margin-bottom: 5px;
	}
	&.news :is(h2,h3)::before {
		mask-image: url(images/icon-news.svg);
	}
	&.invite :is(h2,h3)::before {
		mask-image: url(images/icon-invite.svg);
	}
	&.orgs :is(h2,h3)::before {
		mask-image: url(images/mh-icons.svg#orgs);
	}
	&.engage :is(h2,h3)::before {
		mask-image: url(images/mh-icons.svg#engage);
	}
	&.membership :is(h2,h3)::before {
		mask-image: url(images/icon-membership.svg);
	}
}

/* Set the internal frame for my orgs, or custom besa-panels (either standalone or view QueryTemplate) */
.my-orgs .panel,
.QueryTemplateItem .besa-panel,
.besa-panel > div {
	padding: var(--gap-outer);
}

/* Do not pad Your Companies if within a Content Collection */
.ContentWizardDisplay .my-orgs > .panel {
	padding: unset;
}

/* Set the CTA buttons to blue background */
.cta-icon {
    background-color: var(--col-blue);
	border-radius: var(--border-radius);

	& a, & a:visited {
		color: var(--col-white);
		filter: opacity(0.75);

		&:hover {
			filter: opacity(1);
		}
	}
}

/* Buttons from QueryTemplate */
.QueryTemplateSet:has(.besa-button) {
	display: flex;
	gap: var(--gap-outer);
	flex-direction: row;
	flex-wrap: wrap;

	section {
		flex: 1 1 250px;

		.QueryTemplateItem {
			height: 100%;

			a.besa-button {
				background-color: var(--besa-bg);
				color: var(--besa-fg);
				border-radius: var(--border-radius);
				display: block;
				height: 100%;
				width: 100%;
				padding: var(--gap-outer);
				text-align: center;

				&::after {
					content: '';
					display: inline;
					filter: opacity(0);
					padding-left: var(--gap-inner);
					transition: all 0.2s ease-in-out 0s;
				}

				&:hover {
					filter: opacity(0.75);
					transition: all 0.2s ease-in-out 0s;
		
					&::after {
						content: '>';
						filter: opacity(1);
						padding-left: var(--gap-outer);
					}
				}
			}
		}
	}
} 

/* Membership quicklinks from QueryTemplate */
.QueryTemplateSet:has(.besa-quicklink) {
	.besa-quicklink ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		list-style-type: none;
		padding: 0px var(--gap-outer);
		gap: var(--gap-outer);

		li {
			flex: 1 1 350px;

			a {
				color: var(--besa-fg);
				transition: all 0.2s ease-in-out 0s;

				&::after {
					content: '>';
					display: inline;
					padding-left: var(--gap-inner);
					transition: all 0.2s ease-in-out 0s;
				}
				&:hover {
					filter: opacity(0.8);
					&::after {
						padding-left: var(--gap-outer);
					}
				}
			}
		}
	}
}

/* Generic Buttons using site themes */
.besa-btn {
	background-color: var(--besa-fg);
	color: var(--besa-bg);
	border-radius: var(--border-radius);
	height: 100%;
	text-align: center;
	padding: 5px;
	font-weight: 600;
	border-width: 0px;

	&::after {
		content: '';
		display: inline;
		filter: opacity(0);
		transition: all 0.2s ease-in-out 0s;
	}

	&:hover {
		filter: opacity(0.75);
		transition: all 0.2s ease-in-out 0s;
	}
}

.besa-btn-large {
	background-color: var(--besa-fg);
	color: var(--besa-bg);
	border-radius: var(--border-radius);
	height: 100%;
	text-align: center;
	padding: 30px;
        padding-left: 100px;
        padding-right: 100px;
	font-weight: 600;
	border-width: 0px;

	&::after {
		content: '';
		display: inline;
		filter: opacity(0);
		transition: all 0.2s ease-in-out 0s;
	}

	&:hover {
		filter: opacity(0.75);
		transition: all 0.2s ease-in-out 0s;
	}

}

.QueryTemplateSet:has(.besa-button) {
	display: flex;
	gap: var(--gap-outer);
	flex-direction: row;
	flex-wrap: wrap;

	section {
		flex: 1 1 250px;

		.QueryTemplateItem {
			height: 100%;

			a.besa-button {
				background-color: var(--besa-bg);
				color: var(--besa-fg);
				border-radius: var(--border-radius);
				display: block;
				height: 100%;
				width: 100%;
				padding: var(--gap-outer);
				text-align: center;

				&::after {
					content: '';
					display: inline;
					filter: opacity(0);
					padding-left: var(--gap-inner);
					transition: all 0.2s ease-in-out 0s;
				}

				&:hover {
					filter: opacity(0.75);
					transition: all 0.2s ease-in-out 0s;
		
					&::after {
						content: '>';
						filter: opacity(1);
						padding-left: var(--gap-outer);
					}
				}
			}
		}
	}
} 


/* classes for refcom Member portal */

.refcom-banner {
	background-color: var(--col-faded-yellow);
	border-radius: var(--border-radius) var(--border-radius) 0px 0px;
}
.besa-btn-white {
	color: var(--col-white) !important;
	a:visited {
		color: var(--col-white) !important;
		filter: opacity(0.75);

		&:hover {
			color: var(--col-white) !important;
			filter: opacity(1);
		}
	}
}

.refcomProgressTracker .ProgressTrackerPanel {
  background-color: #fcfcfc;
}

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

.refcomProgressTracker .ProgressTrackerPanel .count {
  color: var(--col-purple);
  font-family: "Poppins", Helvetica, sans-serif;
  font-weight: 500;
}

.refcomProgressTracker div p {
  background-color: #fcfcff;
  color: var(--col-purple);
  margin-bottom: 0;
}

.refcomProgressTracker .SuccessfulMessage {
  background-color: #a0c1b5;
  color: #fcfcfc;
}

.refcomProgressTracker ul {
  margin: 0;
  padding: 0;
}

.refcomProgressTracker ul, .refcomProgressTracker li {
  list-style-type: none;
}

.refcomProgressTracker .count {
  font-weight: 600;
  display: block;
  line-height: 1;
  letter-spacing: -1px;
  font-size: 350%;
}

.refcomProgressTracker .label {
  line-height: 1.25;
}

.refcomProgressTracker .ProgressBar {
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 0;
  height: 18px;
  margin: 10px;
}

.refcomProgressTracker .ProgressBar > span {
  display: block;
  height: 100%;
  background-color: var(--col-yellow);
  position: relative;
  overflow: hidden;
}

.refcomProgressTracker p {
  margin-bottom: 0;
}



.RadMultiPage {
	padding: var(--gap-outer);
	border-radius: unset;
	box-shadow: unset;

	.ContentWizardDisplay > div > .row {
		padding-top: var(--gap-inner);
		padding-bottom: var(--gap-inner);

		&:first-child {
			padding-top: unset;
		}
		&:last-child {
			padding-bottom: unset;
		}
	}
}

/* Create purple tabs */
html .RadTabStrip_MetroTouch.RadTabStripTop_MetroTouch {
	font: 100 var(--fontsize) !important;

	.rtsLevel1 {
		background-color: var(--col-lightpurple);

		.rtsFirst a.rtsLink {
			margin: unset;
			border-radius: unset;
			padding: var(--gap-inner) var(--gap-outer);
			font-weight: 100;
		}

		a.rtsLink {
			color: var(--col-shadepurple);
			background-color: unset;
			border: unset;
			border-radius: unset;
			box-shadow: unset;
			font-weight: 100;
			margin: unset;
			padding: var(--gap-inner) var(--gap-outer);
			text-transform: uppercase !important;
			transition: all 0.2s ease-in-out 0s;

			&:focus,
			&.rtsSelected,
			&.rtsSelected:focus {
				color: var(--col-white);
				font-weight: 600;
				background-color: unset;
				text-decoration: none !important;
				padding: var(--gap-inner) var(--gap-outer);
			}

			&:hover,
			&.rtsSelected:hover {
				border-color: unset;
				background-color: var(--col-purple);
				padding: var(--gap-inner) var(--gap-outer);
				text-decoration: none !important;
				color: var(--col-white);
				box-shadow: unset;
			}
		}
	}
}

/* Table headers in teal */
.RadGrid_MetroTouch .rgHeader, 
.RadGrid_MetroTouch th.rgResizeCol, 
.RadGrid_MetroTouch .rgHeaderWrapper {
	background-color: var(--col-teal) !important;
}

.RadGrid_MetroTouch .rgHeader, 
.RadGrid_MetroTouch .rgHeader a {
    color: var(--col-white) !important;
}

.RadGrid .rgHeader a {
	text-decoration: none !important;
}

/* Rad Popup Window header bar colour */
.RadWindow.RadWindow_MetroTouch .rwTitleRow .rwTitlebar, 
.RadWindow.RadWindow_MetroTouch .rwTitleRow .rwTopLeft, 
.RadWindow.RadWindow_MetroTouch .rwTitleRow .rwTopRight
{
    background-color: var(--col-purple);
}

/* Button styles */
.PrimaryButton:disabled, 
.PrimaryButton:disabled:hover, 
.PrimaryButton:disabled:focus, 
.PrimaryButton:disabled:active, 
.PrimaryButton.disabled, 
.PrimaryButton.disabled:hover, 
.PrimaryButton.disabled:focus, 
.PrimaryButton.disabled:active, 
.PrimaryButton.aspNetDisabled, 
.PrimaryButton.aspNetDisabled:hover, 
.PrimaryButton.aspNetDisabled:focus, 
.PrimaryButton.aspNetDisabled:active, 
.UsePrimaryButton .TextButton:disabled, 
.UsePrimaryButton .TextButton:disabled:hover, 
.UsePrimaryButton .TextButton:disabled:focus, 
.UsePrimaryButton .TextButton:disabled:active, 
.UsePrimaryButton .TextButton.disabled, 
.UsePrimaryButton .TextButton.disabled:hover, 
.UsePrimaryButton .TextButton.disabled:focus, 
.UsePrimaryButton .TextButton.disabled:active, 
.UsePrimaryButton .TextButton.aspNetDisabled, 
.UsePrimaryButton .TextButton.aspNetDisabled:hover, 
.UsePrimaryButton .TextButton.aspNetDisabled:focus, 
.UsePrimaryButton .TextButton.aspNetDisabled:active, 
.RadGrid input.PrimaryButton:disabled, 
.RadGrid input.PrimaryButton:disabled:hover, 
.RadGrid input.PrimaryButton:disabled:focus, 
.RadGrid input.PrimaryButton:disabled:active, 
.RadGrid input.PrimaryButton.disabled, 
.RadGrid input.PrimaryButton.disabled:hover, 
.RadGrid input.PrimaryButton.disabled:focus, 
.RadGrid input.PrimaryButton.disabled:active, 
.RadGrid input.PrimaryButton.aspNetDisabled, 
.RadGrid input.PrimaryButton.aspNetDisabled:hover, 
.RadGrid input.PrimaryButton.aspNetDisabled:focus, 
.RadGrid input.PrimaryButton.aspNetDisabled:active, 
.RadGrid.RadGrid input.TextButton.PrimaryButton:disabled, 
.RadGrid.RadGrid input.TextButton.PrimaryButton:disabled:hover, 
.RadGrid.RadGrid input.TextButton.PrimaryButton:disabled:focus, 
.RadGrid.RadGrid input.TextButton.PrimaryButton:disabled:active, 
.RadGrid.RadGrid input.TextButton.PrimaryButton.disabled, 
.RadGrid.RadGrid input.TextButton.PrimaryButton.disabled:hover, 
.RadGrid.RadGrid input.TextButton.PrimaryButton.disabled:focus, 
.RadGrid.RadGrid input.TextButton.PrimaryButton.disabled:active, 
.RadGrid.RadGrid input.TextButton.PrimaryButton.aspNetDisabled, 
.RadGrid.RadGrid input.TextButton.PrimaryButton.aspNetDisabled:hover, 
.RadGrid.RadGrid input.TextButton.PrimaryButton.aspNetDisabled:focus, 
.RadGrid.RadGrid input.TextButton.PrimaryButton.aspNetDisabled:active, 
.RadGrid.RadGrid a.TextButton.PrimaryButton:disabled, 
.RadGrid.RadGrid a.TextButton.PrimaryButton:disabled:hover, 
.RadGrid.RadGrid a.TextButton.PrimaryButton:disabled:focus, 
.RadGrid.RadGrid a.TextButton.PrimaryButton:disabled:active, 
.RadGrid.RadGrid a.TextButton.PrimaryButton.disabled, 
.RadGrid.RadGrid a.TextButton.PrimaryButton.disabled:hover, 
.RadGrid.RadGrid a.TextButton.PrimaryButton.disabled:focus, 
.RadGrid.RadGrid a.TextButton.PrimaryButton.disabled:active, 
.RadGrid.RadGrid a.TextButton.PrimaryButton.aspNetDisabled, 
.RadGrid.RadGrid a.TextButton.PrimaryButton.aspNetDisabled:hover, 
.RadGrid.RadGrid a.TextButton.PrimaryButton.aspNetDisabled:focus, 
.RadGrid.RadGrid a.TextButton.PrimaryButton.aspNetDisabled:active {
	background-color: var(--col-grey);
}

.btn, 
.TextButton, 
.RadUpload.RadUpload .ruButton, 
.RadUploadProgressArea.RadUploadProgressArea .ruButton {
	background-color: var(--col-blue);
	transition: all 0.2s ease-in-out 0s;
}

.btn:hover, 
.btn:focus, 
.btn:active, 
.TextButton:hover, 
.TextButton:focus, 
.TextButton:active, 
.RadUpload.RadUpload .ruButton:hover, 
.RadUpload.RadUpload .ruButton:focus, 
.RadUpload.RadUpload .ruButton:active, 
.RadUploadProgressArea.RadUploadProgressArea .ruButton:hover, 
.RadUploadProgressArea.RadUploadProgressArea .ruButton:focus, 
.RadUploadProgressArea.RadUploadProgressArea .ruButton:active {
	background-color: var(--col-blue);
	border-color: unset;
	color: var(--col-white);
	filter: opacity(0.75);
}

.btn, 
.btn:visited, 
.TextButton, 
.TextButton:visited, 
.RadUpload.RadUpload .ruButton, 
.RadUpload.RadUpload .ruButton:visited, 
.RadUploadProgressArea.RadUploadProgressArea .ruButton, 
.RadUploadProgressArea.RadUploadProgressArea .ruButton:visited {
	color: var(--col-white);
}

.RadGrid.RadGrid_MetroTouch, 
.RadGrid.RadGrid_Metro {
	color: var(--col-purple);
}

/* Shade the background of communication preferences */
.shadow-box .CommunicationPreferencesSection {
    background-color: var(--col-shadepurple);
	padding: var(--gap-outer);
}

/* Repair field spacing on the mini-profile */
.mini-profile {
	text-align: center;
	.SectionLabel {
		color: var(--col-purple);
	}
	.PanelField .PanelFieldValue {
		float: unset;
	}
	.PanelField .Label {
		float: unset;
	}
}
.mini-profile-standard .mini-profile .mini-profile-name-section, 
.mini-profile-standard .mini-profile .mini-profile-picture-section, 
.mini-profile-standard .mini-profile .mini-profile-address-section {
	margin-bottom: unset;

	.PanelField {
		padding-top: unset;
		padding-bottom: unset;
	}
	.mb-2 {
		margin-bottom: unset !important;
	}
}

/* Expand the profile image */
.profile-picture-container > img
 {
    width: 80% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 100%;
}

/**
 * Event list
** -------------------------------------------------------------------------------------------------------------------- */
 .GridCardStyle .SearchField, .SearchResultSummary .ListItemTitle a {
  
  background-color: var(--col-purple);
  
 } 

.GridCardStyle .SearchField, .SearchResultSummary .ListItemTitle a:hover {
  
  background-color: var(--col-purple);
  
 }

/**
 * Event calendar
** -------------------------------------------------------------------------------------------------------------------- */

 .RadScheduler.RadScheduler_Metro .rsHeader {
  
  background-color: var(--col-purple);
 
 }

/**
 * Form / Input Styles
** -------------------------------------------------------------------------------------------------------------------- */

label, 
.Label, 
.PanelFieldLabelFont {
	color: var(--col-purple);
}

.PanelField.Left {
	display: flex;

	.PanelFieldValue {
		width: 100%;
		& input {
			width: 100%;
		}
	}
	&:has(.PanelField.Left) {
		display: block;
		.PanelFieldValue {
			width: auto;
			& input {
				width: auto;
			}
		}
	}
}

.PanelField.Top {
	.PanelFieldValue {
		& input {
			width: 100%;
		}
	}
}

table.Form,
textarea {
	width: 100%;
}

/**
 * Login Screen
** -------------------------------------------------------------------------------------------------------------------- */

.besa-login {
	.besa-panel {
		h2.panel-title {
			text-align: center;
		}
		.logos {
			display: flex;
			flex-wrap: wrap;
			gap: 30px;
			justify-content: space-around;

			> div {
				flex: 0 1 150px;
			}
		}
	}

	.besa-message {
		margin-bottom: var(--gap-outer);
		padding: 0px var(--gap-inner);

		p {
			text-align: center;
		}
	}

	.SignIn { 
		.contact-signin-label {
			display: none;
		}

		div:has(>input[type="submit"]) {
			text-align: center;
			padding-top: unset !important;

			> div[id$="_forgotPasswordUserLinkDiv"] {
				margin-bottom: 20px;
			}
		}

		input[type="submit"] {
			width: unset;
		}
		:is(input[type="text"], input[type="password"])::placeholder {
			color: var(--col-lightgrey);
		}
	}
}

/**
 * Accordion Styles
** -------------------------------------------------------------------------------------------------------------------- */
      .accordion {
        background-color: var(--col-shadepurple);
        cursor:pointer;
        padding:18px;
        width:100%;
        border:none;
        text-align:left;
        outline:none;
        transition:0.4s;
        color: var(--col-purple);
        font-weight: 700;
        position: relative;
        padding-right: 40px;
  }

        .accordion::after {
        content: "+";
        position: absolute;
        right: 15px;

  } 

        .accordion.active::after {
        content:"-";
  }

        .accordion-panel {
          padding:0 18px;
          display:none;
          background-color: var(--col-white);
          overflow:hidden;
  }



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

footer.footer {
	background-color: var(--col-purple);

	.footer-content > .container {
		display: flex;
		flex-wrap: wrap;

		.footer-column {
			flex: 1 1 400px;
			align-items: center;
			flex-direction: column;
			display: flex;

			&:nth-child(2) {
				margin-top: unset;
			}
		}
	}
}