:root {	
	--portal-dark-grey: #343434;
	--portal-light-grey: #e2f5f5;
	--portal-light-grey2: #eef1f6;
	--portal-bg-primary: #fff;
	
	--portal-text: #212529;			/* body text */
	--portal-text-muted: #6c757d;		/* inactive text */
	--portal-text-ghosted: #dcdddd;	/* ghosted text and elements */
	--portal-text-neutral: #4f5861;	/* neutral text - buttons */
	
	--portal-teal: #00a5b1;			/* teal blue */
	--portal-teal-light: #18b4b3;		/* light teal blue */
	--portal-teal-dark: #00818b;		/* darker hover */

	--portal-green: #8ec740;			/* lime green */
	--portal-green-light: #afd579;		/* light lime green */
	--portal-green-menu: #8fc840;		/* menu button green */	
	
	--portal-orange: #f15723;			/* alert icon, links */
	--portal-orange-link: #f15723;
	--portal-orange-link-hover: #f47c53;
	
	--portal-gradient-right: linear-gradient(to right, #18b4b3, #afd579);
	--portal-gradient-down: linear-gradient(to bottom, #5ac1c7b3, #afd579b3 0);

	--portal-teal-muted: #8dbec2;
	--portal-green-muted: #a1c176;

	--portal-text-base: 16;
	--portal-text-8: calc(8rem / var(--portal-text-base));
	--portal-text-10: calc(10rem / var(--portal-text-base));
	--portal-text-12: calc(12rem / var(--portal-text-base));
    --portal-text-14: calc(14rem / var(--portal-text-base));
    --portal-text-16: calc(16rem / var(--portal-text-base));
    --portal-text-18: calc(18rem / var(--portal-text-base));
    --portal-text-20: calc(20rem / var(--portal-text-base));
    --portal-text-24: calc(24rem / var(--portal-text-base));
    --portal-text-26: calc(26rem / var(--portal-text-base));
    --portal-text-28: calc(28rem / var(--portal-text-base));
    --portal-text-32: calc(32rem / var(--portal-text-base));
    --portal-text-36: calc(36rem / var(--portal-text-base));
    --portal-text-48: calc(48rem / var(--portal-text-base));
    --portal-text-54: calc(54rem / var(--portal-text-base));
    --portal-text-64: calc(64rem / var(--portal-text-base));
    --portal-text-72: calc(72rem / var(--portal-text-base));

	--portal-login-bg: url('/sfsites/c/resource/CustomerPortalLoginBackground');
	--portal-logo: url('/sfsites/c/resource/CustomerPortalWSCHeaderLogo');
	--portal-welcome-bg: url('/sfsites/c/resource/CustomerPortalWelcomeBackground');
}


/* ============================== */
/* ====== GENERIC ELEMENTS ====== */
/* ============================== */

/* buttons	 */
.nds-button,
.slds-button {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-14) !important;
	text-transform: uppercase !important;
	letter-spacing: .05rem !important;
	/* padding: 8px 18px !important; */
	/* width: auto !important; */
	border-radius: 0 !important;
}
.nds-button.nds-button_neutral,
.slds-button.slds-button_neutral {
	/* background-color: var(--portal-light-grey2) !important; */
	background-color: transparent !important;
	color: var(--portal-text-neutral) !important;
	border: 2px solid var(--portal-teal-light) !important;
	padding: 8px 18px !important;
}
.nds-button.nds-button_neutral:active,
.nds-button.nds-button_neutral:focus,
.nds-button.nds-button_neutral:hover,
.slds-button.slds-button_neutral:active,
.slds-button.slds-button_neutral:focus,
button.slds-button.slds-button_neutral:active, /* had to give some more specificity */
button.slds-button.slds-button_neutral:focus, /* had to give some more specificity */
button.slds-button.slds-button_neutral:hover, /* had to give some more specificity */
.slds-button.slds-button_neutral:hover
.slds-button.slds-button_neutral.btn-manage:active,
.slds-button.slds-button_neutral.btn-manage:focus,
.slds-button.slds-button_neutral.btn-manage:hover {
	background-color: var(--portal-teal) !important;
	color: #fff !important;
	border: 2px solid var(--portal-teal) !important;
	filter: none !important;
	text-decoration: none !important;
}
.nds-button.nds-button_brand,
.slds-button.slds-button_brand {
	background-color: var(--portal-teal) !important;
	color: #fff !important;
	border: 2px solid var(--portal-teal) !important;
	padding: 8px 18px !important;
}
/* .nds-button_brand.slds-button_brand i,
.slds-button_brand.slds-button_brand i {
	color: #fff;
} */


.nds-button.nds-button_brand:active,
.nds-button.nds-button_brand:focus,
.nds-button.nds-button_brand:hover,
.slds-button.slds-button_brand:active,
.slds-button.slds-button_brand:focus,
button.slds-button.slds-button_brand:active, /* had to give some more specificity */
button.slds-button.slds-button_brand:focus, /* had to give some more specificity */
button.slds-button.slds-button_brand:hover, /* had to give some more specificity */
a.slds-button.slds-button_brand:active, /* had to give some more specificity */
a.slds-button.slds-button_brand:focus, /* had to give some more specificity */
a.slds-button.slds-button_brand:hover, /* had to give some more specificity */
.slds-button.slds-button_brand:hover,
.slds-button.slds-button_brand.btn-add:active,
.slds-button.slds-button_brand.btn-add:focus,
.slds-button.slds-button_brand.btn-add:hover {
	background-color: var(--portal-teal-dark) !important;
	border-color: var(--portal-teal-dark) !important
}



/* ===================================== */
/* ========= THEME COMPONENTS ========== */
/* ===================================== */

.cCustomLayoutNoImage,
.cDashboardLayout,
.cCustomLayout1,
.cCustomLayoutFixedHeader,
.cCustomLayoutNoImageCart,
.cCouncillorDashboardLayout {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-weight: 400 !important;
	font-size: var(--portal-text-16) !important;
	color: var(--portal-text) !important;
}



/* ====================================== */
/* =============== HEADER =============== */
/* ====================================== */

/* these were originally scoped to themes but I removed them for one blanket target */
.header-row {
	/* background: var(--portal-gradient-right); */
	background: #000 !important;
}
.header-row a {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-weight: 400 !important;
	font-size: var(--portal-text-14);
	color: #fff !important;
}
.header-row i {
	font-size: var(--portal-text-14);
}

.header-top {
	background: var(--portal-dark-grey) !important;
}
.header-top .logoContainer .logoLine {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-16) !important;
	letter-spacing: 0.05rem !important;
	white-space: nowrap !important;
}
.header-top .logoContainer img {
	display: none !important;
}
.header-top .logoContainer a::after {
	content: '';
    display: block;
    background-image: var(--portal-logo);
    background-repeat: no-repeat;
    background-size: contain;
    height: 52px;
}

.header-top .cHeaderLinks .cLogin .btn-login {
	background-color: var(--portal-teal) !important;
	color: #fff !important;
	border: 2px solid var(--portal-teal) !important;
	padding: 8px 18px !important;
}
.header-top .cHeaderLinks .cLogin .btn-login:active,
.header-top .cHeaderLinks .cLogin .btn-login:focus,
.header-top .cHeaderLinks .cLogin .btn-login:hover {
	background-color: var(--portal-teal-dark) !important;
	color: #fff !important;
	border: 2px solid var(--portal-teal-dark) !important;
}
.header-top .cHeaderLinks .cLogin .slds-dropdown-trigger {
	background-color: var(--portal-teal) !important;
	border: 2px solid var(--portal-teal) !important;
	font-size: var(--portal-text-16) !important;
}
.header-top .cHeaderLinks .cLogin .slds-dropdown-trigger:active,
.header-top .cHeaderLinks .cLogin .slds-dropdown-trigger:focus,
.header-top .cHeaderLinks .cLogin .slds-dropdown-trigger:hover {
	background-color: var(--portal-teal-dark) !important;
	border: 2px solid var(--portal-teal-dark) !important;
}
.header-top .cHeaderLinks .cLogin .slds-dropdown-trigger button {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-weight: 500 !important;
	font-size: var(--portal-text-18) !important;
	text-transform: capitalize !important;
	color: #fff !important;
}
.header-top .cHeaderLinks .cLogin .slds-dropdown-trigger button:active,
.header-top .cHeaderLinks .cLogin .slds-dropdown-trigger button:focus {
	background-color: transparent !important;
    outline: transparent !important;
	border: 1px solid transparent !important;
	color: #fff !important;
}
.header-top .cHeaderLinks .cLogin .user-photo {
	font-size: var(--portal-text-14) !important;
	color: #fff !important;
}

.header-top .cHeaderLinks .cLogin .slds-dropdown {
	/* font-family: "brandon-grotesque", sans-serif !important; */
	/* font-weight: 700 !important; */
	/* font-size: var(--portal-text-14) !important; */
	/* text-transform: uppercase !important; */
	/* letter-spacing: .05rem !important; */
	padding: 8px 18px !important;
	width: auto !important;
	max-width: max-content !important;
	/* width: 200px !important; */
	border-radius: 0;
}
.header-top .cHeaderLinks .cLogin .slds-dropdown a {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-14) !important;
	text-transform: uppercase !important;
	letter-spacing: .05rem !important;
	text-decoration: none !important;
}

.header-top .cHeaderLinks .nav-links .nav-link {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-weight: 500 !important;
	font-size: var(--portal-text-18) !important;
	color: #fff !important;
}
.header-top .cHeaderLinks .nav-links .nav-link i {
	color: #fff !important;
}


@media (max-width: 767px) {
	.header-row a {
		font-size: var(--portal-text-14) !important;
	}
	.header-row i {
		font-size: var(--portal-text-14) !important;
	}
    .header-top .logoContainer a::after {
        height: 36px !important;
    }
	.header-top .logoContainer .logoLine {
		font-size: var(--portal-text-10) !important;
		font-weight: 400 !important;
		margin-left: 68px;
		margin-top: 0;
	}
	.header-top .cHeaderLinks .cLogin button {
		font-size: var(--portal-text-16) !important;
	}
	.header-top .cHeaderLinks .cLogin i {
		font-size: var(--portal-text-14) !important;
	}
	.header-top .cHeaderLinks .nav-links .nav-link {
		font-size: var(--portal-text-16) !important;
	}
	.header-top .cHeaderLinks .profile-container .name {
		display: none;
	}
}

/* these keep theme scope because each theme uses a different element structure of course */
@media (min-width: 768px) and (max-width: 1000px) {
	/* .cCustomLayoutNoImage .header-top .logoContainer .logoLine, */
	.cDashboardLayout .header-top .logoContainer .logoLine,
	/* .cCustomLayout1 .header-top .logoContainer .logoLine, */
	.cCouncillorDashboardLayout .header-top .logoContainer .logoLine {
		font-size: var(--portal-text-12) !important;
		font-weight: 400 !important;
		margin-left: 73px;
		margin-top: -12px;
	}
}



/* ====================================== */
/* =========== HEADER MOBILE ============ */
/* ====================================== */

.cHeaderMobile .container {
	background: var(--portal-dark-grey) !important;
	letter-spacing: .05rem !important;
}

.cHeaderMobile .btn-login {
	background-color: var(--portal-teal) !important;
	color: #fff !important;
	border: 2px solid var(--portal-teal) !important;
	padding: 8px 18px !important;
	border: 2px solid var(--portal-teal) !important;
}
.cHeaderMobile .btn-login:active,
.cHeaderMobile .btn-login:hover,
.cHeaderMobile .btn-login:focus {
	background-color: var(--portal-teal-dark) !important;
	color: #fff !important;
	border: 2px solid var(--portal-teal-dark) !important;
}



/* ====================================== */
/* =============== FOOTER =============== */
/* ====================================== */

.template-footer .footer .footer-content {
	background-color: var(--portal-dark) !important;
}

.template-footer .footer .footer-content h3 {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-32) !important;
	color: #fff !important;
}
.template-footer .footer .footer-content li,
.template-footer .footer .footer-content a,
.template-footer .footer .footer-content span {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-size: var(--portal-text-18) !important;
	color: #fff !important;
}
.template-footer .footer .footer-content i {
	color: #fff !important;
}
.template-footer .footer .footer-content a:hover {
	text-decoration: none !important;
}



/* ============================== */
/* ====== PAGE COMPONENTS ====== */
/* ============================== */

/* Guest Home Page - Welcome banner */
.cCustomLayoutNoImage .cWelcomeBanner {
	background-image: var(--portal-welcome-bg) !important;
	margin-top: -24px !important;
	text-transform: uppercase !important;
	padding-top: 104px !important;
}
.cCustomLayoutNoImage .cWelcomeBanner h1 {
	/* font-family: "Freeland Portal", sans-serif !important;
	font-weight: 400 !important;
	text-transform: capitalize !important;
	color: #fff; */
	display: none;
}
.cCustomLayoutNoImage .cWelcomeBanner hr {
	display: none;
}
.cCustomLayoutNoImage .cWelcomeBanner h2 {
	/* font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-28) !important;
	color: #fff; */
	display: none;
}
.cCustomLayoutNoImage .cWelcomeBanner .container.headdiv::before {
	content: "Welcome to Wollondilly";
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 500 !important;
	font-style: normal;
	font-size: var(--portal-text-36) !important;
	line-height: normal;
	color: #fff;
	display: block;
}
.cCustomLayoutNoImage .cWelcomeBanner .container.headdiv::after {
	content: "Customer Portal";
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-style: normal;
	font-size: var(--portal-text-36) !important;
	line-height: var(--portal-text-36);
	color: #fff;
	display: block;
}


/* Guest Home Page - Boxes */
.cCustomLayoutNoImage .cWelcomeNew b {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-36) !important;
}

.cCustomLayoutNoImage .cWelcomeNew .box {
	background-color: var(--portal-teal) !important;
	border: 1px solid var(--portal-teal) !important;
}
.cCustomLayoutNoImage .cWelcomeNew .box:active,
.cCustomLayoutNoImage .cWelcomeNew .box:focus,
.cCustomLayoutNoImage .cWelcomeNew .box:hover {
	background-color: var(--portal-teal-dark) !important;
}

.cCustomLayoutNoImage .cWelcomeNew .box-icon-container i {
	font-size: var(--portal-text-72) !important;
	color: #fff !important;
}

/* override fix icon weights - some use .far (400) regular and some use .fal(300) light */
.cCustomLayoutNoImage .cWelcomeNew .box-icon-container i.fal {
    font-weight: 400;
}

.cCustomLayoutNoImage .cWelcomeNew .box-title div.title-text {
	font-family: "brandon-grotesque", sans-serif !important;
	font-size: var(--portal-text-18) !important;
	font-weight: 700 !important;
	color: #fff;
	text-transform: uppercase !important;
}

@media (max-width: 576px) {
	.cCustomLayoutNoImage .cWelcomeBanner {
		padding-top: 98px !important;
	}
	.cCustomLayoutNoImage .cWelcomeBanner .container.headdiv::before {
		font-size: var(--portal-text-28) !important;
		line-height: var(--portal-text-28);
	}
	.cCustomLayoutNoImage .cWelcomeBanner .container.headdiv::after {
		font-size: var(--portal-text-28) !important;
		line-height: var(--portal-text-32);
	}
}
@media (min-width: 577px) and (max-width: 767px) {
	.cCustomLayoutNoImage .cWelcomeBanner {
		/* margin-top: -24px !important; */
		padding-top: 92px !important;
	}
}
@media (max-width: 767px) {
	.cCustomLayoutNoImage .cWelcomeNew .message {
		display: none;
	}
	.cCustomLayoutNoImage .cWelcomeNew .box-icon-container {
		margin-top: 0;
	}
}


/* Dashboard Page/s */
.cDashboardLayout p,
.cCouncillorDashboardLayout p {
	font-family: "franklin-gothic-urw", sans-serif;
	font-weight: 400;
	font-size: var(--portal-text-16);
	color: var(--portal-text);
}

.cDashboardLayout .cWelcome,
.cCouncillorDashboardLayout .cWelcome {
    background-color: var(--portal-light-grey) !important;
    /* background-color: #fff !important; */
    background-image: none !important;
}
.cDashboardLayout .cWelcome .message,
.cCouncillorDashboardLayout .cWelcome .message {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-36) !important;
}

.cDashboardLayout .cWelcome .box,
.cCouncillorDashboardLayout .cWelcome .box {
	background-color: var(--portal-teal) !important;
	border: 1px solid var(--portal-teal) !important;
}
.cDashboardLayout .cWelcome .box:hover,
.cCouncillorDashboardLayout .cWelcome .box:hover {
	background-color: var(--portal-teal-dark) !important;
}

.cDashboardLayout .cWelcome .box-icon-container i,
.cCouncillorDashboardLayout .cWelcome .box-icon-container i {
	font-size: var(--portal-text-54) !important;
	color: #fff !important;
}

/* override fix icon weights - some use .far (400) regular and some use .fal(300) light */
.cDashboardLayout .cWelcome .box-icon-container i.fal,
.cCouncillorDashboardLayout .cWelcome .box-icon-container i.fal {
    font-weight: 400;
}
/* override fix icon this one for My Applications is a brand icon (wordpress form) and has no weight control */
/* overriding with fa-file-signature */
.cDashboardLayout .cWelcome .box-icon-container i.fab,
.cCouncillorDashboardLayout .cWelcome .box-icon-container i.fab {
    font-family: 'Font Awesome 5 Pro';
	font-weight: 400;
	padding-left: 18px;
}
.cDashboardLayout .cWelcome .box-icon-container i.fab.fa-wpforms:before,
.cCouncillorDashboardLayout .cWelcome .box-icon-container i.fab.fa-wpforms:before {
    content: "\f573";
}

.cDashboardLayout .cWelcome .box-title div.title-text,
.cCouncillorDashboardLayout .cWelcome .box-title div.title-text {
	font-family: "brandon-grotesque", sans-serif !important;
	font-size: var(--portal-text-18) !important;
	font-weight: 700 !important;
	color: #fff;
	text-transform: uppercase !important;
}

.cDashboardLayout .cQuickLinks h2,
.cCouncillorDashboardLayout .cQuickLinks h2 {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-weight: 500 !important;
	font-size: var(--portal-text-18) !important;
    color: var(--portal-text) !important;
	text-transform: capitalize !important;
}

.cDashboardLayout .cDashboard h2,
.cCouncillorDashboardLayout .cDashboard h2 {
	font-family: "brandon-grotesque", sans-serif !important;
	font-size: var(--portal-text-26) !important;
	font-weight: 700 !important;
	color: var(--portal-text) !important;
	text-transform: uppercase !important;
}

.cDashboardLayout .cDashboard .cMyProperties h2,
.cCouncillorDashboardLayout .cDashboard .cMyProperties h2 {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-weight: 500 !important;
	font-size: var(--portal-text-24) !important;
    color: var(--portal-text) !important;
	text-transform: capitalize !important;
}
.cDashboardLayout .cDashboard .cMyProperties p.title,
.cCouncillorDashboardLayout .cDashboard .cMyProperties p.title {
	font-weight: 500 !important;
	font-size: var(--portal-text-18) !important;
}
.cDashboardLayout .cDashboard .cMyProperties p,
.cCouncillorDashboardLayout .cDashboard .cMyProperties p {
	font-size: var(--portal-text-16) !important;
}

.cDashboardLayout .cDashboard .cMyProperties .cLinkedPropertiesDetails h2,
.cCouncillorDashboardLayout .cDashboard .cMyProperties .cLinkedPropertiesDetails h2 {
	font-size: var(--portal-text-18) !important;
}
.cDashboardLayout .cDashboard .cMyProperties .cLinkedPropertiesDetails .paid-icon i,
.cCouncillorDashboardLayout .cDashboard .cMyProperties .cLinkedPropertiesDetails .paid-icon i {
	color: var(--portal-green) !important;
}

.cDashboardLayout .cDashboard .cMyProperties .cLinkedPropertiesDetails .btn-manage.slds-button.slds-button_neutral,
.cCouncillorDashboardLayout .cDashboard .cMyProperties .cLinkedPropertiesDetails .btn-manage.slds-button.slds-button_neutral {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-14) !important;
	text-transform: uppercase !important;
	letter-spacing: .05rem !important;
	padding: 8px 18px !important;
	/* width: auto !important; */
	border-radius: 0 !important;
	background-color: transparent !important;
	color: var(--portal-text-neutral) !important;
	border: 2px solid var(--portal-teal-light) !important;
}
.cDashboardLayout .cDashboard .cMyProperties .cLinkedPropertiesDetails .btn-manage.slds-button.slds-button_neutral:active,
.cDashboardLayout .cDashboard .cMyProperties .cLinkedPropertiesDetails .btn-manage.slds-button.slds-button_neutral:focus,
.cDashboardLayout .cDashboard .cMyProperties .cLinkedPropertiesDetails .btn-manage.slds-button.slds-button_neutral:hover 
.cCouncillorDashboardLayout .cDashboard .cMyProperties .cLinkedPropertiesDetails .btn-manage.slds-button.slds-button_neutral:active,
.cCouncillorDashboardLayout .cDashboard .cMyProperties .cLinkedPropertiesDetails .btn-manage.slds-button.slds-button_neutral:focus,
.cCouncillorDashboardLayout .cDashboard .cMyProperties .cLinkedPropertiesDetails .btn-manage.slds-button.slds-button_neutral:hover {
	background-color: var(--portal-teal) !important;
	color: #fff !important;
	border: 2px solid var(--portal-teal) !important;
	filter: none !important;
}
.cDashboardLayout .cDashboard .cMyProperties .cLinkedPropertiesDetails .btn-manage.slds-button.slds-button_neutral i,
.cCouncillorDashboardLayout .cDashboard .cMyProperties .cLinkedPropertiesDetails .btn-manage.slds-button.slds-button_neutral i {
	display: none;
}
.cCouncillorDashboardLayout .cDashboard .cMyProperties .cLinkedPropertiesDetails .link-green {
	color: var(--portal-orange-link) !important;
}
a.link-green {
	color: var(--portal-orange-link) !important;
}

.cDashboard a.slds-button:focus {
	background-color: var(--portal-teal-dark) !important;
}


.cDashboardLayout .cDashboard .cMyRecentRequests p,
.cCouncillorDashboardLayout .cDashboard .cMyRecentRequests p {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-size: var(--portal-text-16) !important;
    color: var(--portal-text) !important;
}
.cDashboardLayout .cDashboard .cMyRecentRequests p.title,
.cCouncillorDashboardLayout .cDashboard .cMyRecentRequests p.title {
	font-weight: 500 !important;
	font-size: var(--portal-text-18) !important;
}
.cDashboardLayout .cDashboard .cMyRecentRequests a:not(.slds-tabs_default__link, .slds-button),
.cCouncillorDashboardLayout .cDashboard .cMyRecentRequests a:not(.slds-tabs_default__link, .slds-button) {
	color: var(--portal-orange-link) !important;
}
.cDashboardLayout .cDashboard .cMyRecentRequests a:not(.slds-tabs_default__link, .slds-button):hover,
.cCouncillorDashboardLayout .cDashboard .cMyRecentRequests a:not(.slds-tabs_default__link, .slds-button):hover {
	color: var(--portal-orange-link-hover) !important;
}
.cDashboardLayout .cDashboard .cMyRecentRequests .status.pending,
.cCouncillorDashboardLayout .cDashboard .cMyRecentRequests .status.pending {
	background-color: var(--portal-orange) !important;
}
.cDashboardLayout .cDashboard .cMyRecentRequests .status.complete,
.cCouncillorDashboardLayout .cDashboard .cMyRecentRequests .status.complete {
	background-color: var(--portal-green) !important;
}
.cDashboardLayout .cDashboard .cMyRecentRequests .slds-tabs_default__item:hover:after,
.cCouncillorDashboardLayout .cDashboard .cMyRecentRequests .slds-tabs_default__item:hover:after {
	background-color: var(--portal-teal-dark) !important;
}
/* .cDashboardLayout .cDashboard .cMyRecentRequests a.slds-button.submit, */
.cCouncillorDashboardLayout .cDashboard .cMyRecentRequests a.slds-button.submit {
	background-color: var(--portal-teal) !important;
}
/* .cDashboardLayout .cDashboard .cMyRecentRequests a.slds-button.submit:active, */
.cDashboardLayout .cDashboard .cMyRecentRequests a.slds-button.submit:focus,
/* .cDashboardLayout .cDashboard .cMyRecentRequests a.slds-button.submit:hover, */
.cCouncillorDashboardLayout .cDashboard .cMyRecentRequests a.slds-button.submit:active,
.cCouncillorDashboardLayout .cDashboard .cMyRecentRequests a.slds-button.submit:focus,
.cCouncillorDashboardLayout .cDashboard .cMyRecentRequests a.slds-button.submit:hover {
	background-color: var(--portal-teal-dark) !important;
}
@media (min-width: 500px) and (max-width: 767px) {
	.cMyRecentRequests .actions a,
	.cDashboardLayout .btn-add {
		width: 100% !important;
	}
}
@media (min-width: 768px) {
	.cMyRecentRequests .actions a,
	.cDashboardLayout .btn-add {
		width: 206px !important;
	}
}

.cDashboardLayout .cMyRecentBookings h2 {
	font-family: "brandon-grotesque", sans-serif !important;
	font-size: var(--portal-text-26) !important;
	font-weight: 700 !important;
	color: var(--portal-text) !important;
	text-transform: uppercase !important;
}
.cDashboardLayout .cMyRecentBookings p {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-size: var(--portal-text-16) !important;
    color: var(--portal-text) !important;
}
.cDashboardLayout .cMyRecentBookings p.title {
	font-weight: 500 !important;
	font-size: var(--portal-text-18) !important;
}

.cDashboardLayout .cMyRecentApplications::before {
	content: 'My Applications';
	font-family: "brandon-grotesque", sans-serif !important;
	font-size: var(--portal-text-26) !important;
	font-weight: 700 !important;
	color: var(--portal-text) !important;
	text-transform: uppercase !important;
}
.cDashboardLayout .cMyRecentApplications h1 {
	display: none;
}
.cDashboardLayout .cMyRecentApplications p {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-size: var(--portal-text-16) !important;
    color: var(--portal-text) !important;
}
.cDashboardLayout .cMyRecentApplications p.title {
	font-weight: 500 !important;
	font-size: var(--portal-text-18) !important;
}
.cDashboardLayout .cMyRecentApplications p a.link-green {
	color: var(--portal-orange-link) !important;
}
.cDashboardLayout .cMyRecentApplications p a.link-green:hover {
	color: var(--portal-orange-link-hover) !important;
}

.cDashboardLayout .cSmartSearch h2,
.cDashboardLayout .cRecommendedActions h2 {
	font-family: "brandon-grotesque", sans-serif !important;
	font-size: var(--portal-text-18) !important;
	font-weight: 700 !important;
	color: #fff !important;
	text-transform: uppercase !important;
	letter-spacing: .05rem !important;
}
.cDashboardLayout .cSmartSearch i {
	color: #fff;
}


/* Requests Page */
/* /s/requests */
.cCustomLayout1 .cHeaderImage .headerContent {
	background-color: var(--portal-green-light);
}
.cCustomLayout1 .cCf_SmartSearch .transparent-background {
	background-color: var(--portal-green-light);
}

@media (max-width: 480px) {
    .cCustomLayout1 .cHeaderImage .headerContent {
        min-height: 300px !important;
    }
}
@media (min-width: 481px) and (max-width: 767px) {
    .cCustomLayout1 .cHeaderImage .headerContent {
        min-height: 285px !important;
    }
}
 
.cCustomLayout1 .cCf_SmartSearch h1,
.cCustomLayout1 .cShowMoreTopics h2,
.cCustomLayout1 .cCaseSearchBox h2,
.cCustomLayout1 .cRecentRequests h2 {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-36) !important;
	color: var(--portal-text) !important;
	text-transform: uppercase !important;
}
.cCustomLayout1 .cCaseSearchBox h2 {
	font-size: var(--portal-text-28) !important;
}
.cCustomLayout1 .cCaseSearchBox input,
.cCustomLayout1 .cRecentRequests select,
.cCustomLayout1 .cRecentRequests .requests-container input,
.cCustomLayout1 .cRecentRequests .requests-container input::placeholder {
	font-family: "franklin-gothic-urw", sans-serif !important;
	color: var(--portal-text) !important;
}
.cCustomLayout1 .cCaseSearchBox input::placeholder {
	color: var(--portal-text) !important;
	opacity: 0.6 !important;
}
.cCustomLayout1 .cCaseSearchBox button {
	height: 36px;
}

.cCustomLayout1 .cRecentRequests .recent-requests-list {
	font-family: "franklin-gothic-urw", sans-serif !important;
}
.cCustomLayout1 .cRecentRequests input,
.cCustomLayout1 .cRecentRequests select {
	font-size: var(--portal-text-14) !important;
}



/* ============================ */
/* ====== SUB COMPONENTS ====== */
/* ============================ */

/* style overrides of common components not scoped to parent theme page class */
.cBreadcrumbs {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-weight: 400 !important;
	font-size: var(--portal-text-14) !important;
	color: var(--portal-text) !important;
}
.cBreadcrumbs > ul > li:not(:last-child) a {
	font-weight: 700 !important;
}

.cQuickLinks {
	padding: 0 24px;
}

.cPhoneNumbers h2 {
	color: var(--portal-text) !important;
}

/* /s/request-submit */
.cRequestWizard div,
.cRequestWizard p {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-weight: 400 !important;
	font-size: var(--portal-text-16) !important;
	color: var(--portal-text) !important;
}

.cRequestWizard .cNavigationProcess .step-label {
	color: var(--portal-text) !important;
	font-size: var(--portal-text-16);
	font-weight: 700 !important;
}
.cRequestWizard .cNavigationProcess .step-label.inactive {
	color: var(--portal-text-muted) !important;
	font-weight: 500 !important;
}
.cRequestWizard .cNavigationProcess .line-wrapper .step-bullet .circled,
.cRequestWizard .cNavigationProcess .line-wrapper .step-bullet i
/* .cNavigationProcess .line-wrapper .step-bullet span.circled i, */
{
	color: var(--portal-green) !important;
}
.cRequestWizard .cNavigationProcess .line-wrapper .line-left,
.cRequestWizard .cNavigationProcess .line-wrapper .line-right {
	border-bottom-color: var(--portal-green) !important;
}
.cRequestWizard .cNavigationProcess .line-wrapper .step-bullet.inactive i {
    color: var(--portal-text-ghosted) !important;
}
.cRequestWizard .cNavigationProcess .line-wrapper .line-left.inactive,
.cRequestWizard .cNavigationProcess .line-wrapper .line-right.inactive {
	border-bottom-color: var(--portal-text-ghosted) !important;
}

.cRequestWizard .cStepsPath .StepsPathDiv1 {
	font-weight: 500 !important;
}

.cRequestWizard .mainBlock.cQAProcess .back.button,
.cRequestWizard .cCommunityMap .back.button,
.cRequestWizard .cDetailComponent .back.button {
	background-color: var(--portal-teal) !important;
	border-color: var(--portal-teal-dark) !important;
}
.cRequestWizard .mainBlock.cQAProcess .back.button:active,
.cRequestWizard .mainBlock.cQAProcess .back.button:focus,
.cRequestWizard .mainBlock.cQAProcess .back.button:hover,
.cRequestWizard .cCommunityMap .back.button:active,
.cRequestWizard .cCommunityMap .back.button:focus,
.cRequestWizard .cCommunityMap .back.button:hover,
.cRequestWizard .cDetailComponent .back.button:active,
.cRequestWizard .cDetailComponent .back.button:focus,
.cRequestWizard .cDetailComponent .back.button:hover {
	background-color: var(--portal-teal-light) !important;
}
/* .cRequestWizard .mainBlock.cQAProcess .back.button i {
	color: #fff;
} */
/* .cRequestWizard .mainBlock.cQAProcess .back.button svg {
	fill: #fff !important;
} */

.cRequestWizard .cQAProcess h2,
.cRequestWizard .cCommunityMap h1,
.cRequestWizard .cDetailComponent h1 {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-weight: 400 !important;
	font-size: var(--portal-text-26) !important;
	color: var(--portal-text) !important;
}

.cRequestWizard .buttonspan.cQAProcess .responseBlock {
	background-color: var(--portal-light-grey) !important;
}
.cRequestWizard .buttonspan.cQAProcess .responseBlock:focus,
.cRequestWizard .buttonspan.cQAProcess .responseBlock:hover {
	background-color: var(--portal-teal-dark) !important;
}

.cRequestWizard .cCommunityMap .btn-continue.slds-button_brand,
.cRequestWizard .cDetailComponent .btn-customstd.slds-button_brand {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-14) !important;
	color: #fff !important;
	text-transform: uppercase !important;
	letter-spacing: .05rem !important;
	background-color: var(--portal-teal) !important;
	border: 2px solid var(--portal-teal) !important;
	padding: 8px 18px !important;
}
.cRequestWizard .cCommunityMap .btn-continue.slds-button_brand:active,
.cRequestWizard .cCommunityMap .btn-continue.slds-button_brand:focus,
.cRequestWizard .cCommunityMap .btn-continue.slds-button_brand:hover,
.cRequestWizard .cDetailComponent .btn-customstd.slds-button_brand:active,
.cRequestWizard .cDetailComponent .btn-customstd.slds-button_brand:focus,
.cRequestWizard .cDetailComponent .btn-customstd.slds-button_brand:hover {
	background-color: var(--portal-teal-dark) !important;
}
.cRequestWizard .cCommunityMap .btn-continue.slds-button_brand lightning-icon {
	vertical-align: top;
}

.cRequestWizard .cDetailComponent c-file-uploader button{
	color: var(--portal-orange-link) !important;
}
.cRequestWizard .cDetailComponent .cCaseContactInfo label, 
.cRequestWizard .cDetailComponent .cCaseContactInfo label abbr,
.cRequestWizard .cDetailComponent .cCaseContactInfo label .slds-form-element__label,
.cRequestWizard .cDetailComponent .cCaseContactInfo legend, 
.cRequestWizard .cDetailComponent .cCaseContactInfo legend abbr {
	color: var(--portal-text) !important;
	font-size: var(--portal-text-16) !important;
}

.cRequestWizard .cThankYou .confirmation.box .successIcon {
	vertical-align: unset;
}
.cRequestWizard .cThankYou .confirmation.box .successIcon svg {
	fill: var(--portal-green) !important;
}
.cRequestWizard .cThankYou .information.section a,
.cRequestWizard .cThankYou .confirmation-content a {
	color: var(--portal-orange-link) !important;
}
.cRequestWizard .cThankYou .information.section a:hover,
.cRequestWizard .cThankYou .confirmation-content a:hover{
	color: var(--portal-orange-link-hover) !important;
}

/* this looks like this component was removed from prod builder because it had no contact numbers. */
.cRequestWizard .wizard-sidebar h2 {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-24) !important;
	color: var(--portal-text) !important;
	text-transform: uppercase !important;
}
.cRequestWizard .wizard-sidebar p {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-weight: 400 !important;
	font-size: var(--portal-text-18) !important;
	color: var(--portal-text) !important;
}


/* /s/my-requests */
.cMyRequestRecordListPage span {
	font-family: "franklin-gothic-urw", sans-serif !important;
	/* font-weight: 400 !important; */
	font-size: var(--portal-text-16) !important;
	/* color: var(--portal-text) !important; */
}

.cMyRequestRecordListPage .slds-page-header h1 > span {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-24) !important;
	color: var(--portal-text) !important;
	text-transform: uppercase !important;
}
.cMyRequestRecordListPage .slds-table thead th {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-weight: 500 !important;
	font-size: var(--portal-text-16) !important;
    color: var(--portal-teal-dark) !important;
}
.cMyRequestRecordListPage .slds-media .slds-media__figure > i {
	background-color: var(--portal-teal) !important;
}


/* /s/case-details */
/* .cRequestDetail div, */
/* .cRequestDetail p, */
.cRequestDetail b {
	font-family: "franklin-gothic-urw", sans-serif !important;
	/* font-weight: 400 !important; */
	/* font-size: var(--portal-text-16) !important; */
	/* color: var(--portal-text) !important; */
}
.cRequestDetail b {
	font-weight: 700 !important;
}
.cRequestDetail .page-title h1 {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	/* this throws out alignment? */
	/* font-size: var(--portal-text-24) !important; */
	color: var(--portal-text) !important;
	text-transform: uppercase !important;
}
.cRequestDetail .back.button {
	background-color: var(--portal-teal) !important;
	border-color: var(--portal-teal-dark) !important;
}
.cRequestDetail .back.button:active,
.cRequestDetail .back.button:focus,
.cRequestDetail .back.button:hover {
	background-color: var(--portal-teal-light) !important;
}
/* below i left the not inactive part. whereas for another i removed the not and also added the explicit declaration rule for the inactive state */
.cRequestDetail .cProgressIndicator .line-wrapper span.step-bullet:not(.inactive) i,
.cRequestDetail .cProgressIndicator .line-wrapper span.step-bullet:not(.inactive) span.circled,
.cRequestDetail .cProgressIndicator .line-wrapper span.step-bullet:not(.inactive) span.circled i,
.cRequestDetail .cProgressIndicator .line-wrapper .line-left:not(.inactive), 
.cRequestDetail .cProgressIndicator .line-wrapper .line-right:not(.inactive) {
    color: var(--portal-green) !important;
    border-bottom-color: var(--portal-green) !important;
	fill: var(--portal-green) !important;
}


/* /s/mylinkedproperties */
.cMyLinkedProperties div,
.cMyLinkedProperties p {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-weight: 400 !important;
	font-size: var(--portal-text-16) !important;
	color: var(--portal-text) !important;
}
.cMyLinkedProperties p.title {
	font-size: var(--portal-text-18) !important;
	font-weight: 700 !important;
}
.cMyLinkedProperties .title-cont h1,
.cMyLinkedProperties .slds-page-header h1 > span {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-24) !important;
	color: var(--portal-text) !important;
	text-transform: uppercase !important;
}
.cMyLinkedProperties .back.button {
	background-color: var(--portal-teal) !important;
	border-color: var(--portal-teal-dark) !important;
}
.cMyLinkedProperties .back.button:active,
.cMyLinkedProperties .back.button:focus,
.cMyLinkedProperties .back.button:hover {
	background-color: var(--portal-teal-light) !important;
}
.cMyLinkedProperties .cLinkedPropertiesDetails .fy-balance .amount {
	font-family: "franklin-gothic-urw", sans-serif !important;
	color: var(--portal-teal-dark) !important;
}

.cMyLinkedProperties .page-title .title-cont {
	position: relative;
}
.cMyLinkedProperties .page-title .title-cont a {
	background-color: var(--portal-teal) !important;
	border: 2px solid var(--portal-teal) !important;
	padding: 8px 18px !important;
	line-height: var(--lwc-lineHeightButton, 1.875rem);
}
.cMyLinkedProperties .page-title .title-cont a:active,
.cMyLinkedProperties .page-title .title-cont a:focus,
.cMyLinkedProperties .page-title .title-cont a:hover {
	background-color: var(--portal-teal-dark) !important;
}
.cMyLinkedProperties .page-title .title-cont a .slds-small-show {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-14) !important;
	color: #fff !important;
	text-transform: uppercase !important;
	letter-spacing: .05rem !important;
}
.cMyLinkedProperties .page-title .title-cont a .slds-small-show i {
	/* color: #fff !important; */
	display: none;
}

@media (max-width: 479px) {
	.cMyLinkedProperties .page-title .title-cont a .slds-x-small-show-only {
		display: none !important;
	}
}
/* @media (max-width: 499px) {
    .cMyLinkedProperties .page-title .title-cont a {
	}
} */
@media (max-width: 680px) {
	.cMyLinkedProperties .page-title .title-cont {
		margin-bottom: 128px;
	}
	.cMyLinkedProperties .page-title .title-cont a {
		width: 100% !important;
        position: absolute;
		top: 70px;
    }
}

.cMyLinkedProperties .cLinkedPropertiesDetails .btn-manage.slds-button.slds-button_neutral {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-14) !important;
	text-transform: uppercase !important;
	letter-spacing: .05rem !important;
	padding: 8px 18px !important;
	/* width: auto !important; */
	border-radius: 0 !important;
	background-color: transparent !important;
	color: var(--portal-text-neutral) !important;
	border: 2px solid var(--portal-teal-light) !important;
}
.cMyLinkedProperties .cLinkedPropertiesDetails .btn-manage.slds-button.slds-button_neutral:active,
.cMyLinkedProperties .cLinkedPropertiesDetails .btn-manage.slds-button.slds-button_neutral:focus,
.cMyLinkedProperties .cLinkedPropertiesDetails .btn-manage.slds-button.slds-button_neutral:hover {
	background-color: var(--portal-teal) !important;
	color: #fff !important;
	border: 2px solid var(--portal-teal) !important;
	filter: none !important;
}
.cMyLinkedProperties .cLinkedPropertiesDetails .btn-manage.slds-button.slds-button_neutral i {
	display: none;
}

/* /s/my-applications */
/* .cApplicationRecordListPage div,
.cApplicationRecordListPage p {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-weight: 400 !important;
	font-size: var(--portal-text-16) !important;
	color: var(--portal-text) !important;
} */
.cApplicationRecordListPage .slds-page-header h1 > span {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-24) !important;
	color: var(--portal-text) !important;
	text-transform: uppercase !important;
}
.cApplicationRecordListPage .slds-table thead th {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-weight: 500 !important;
	font-size: var(--portal-text-16) !important;
    color: var(--portal-teal-dark) !important;
}
.cApplicationRecordListPage .slds-media .slds-media__figure > i {
	background-color: var(--portal-teal) !important;
}


/* /s/property-payment */
.cMakePropertyPayment h1 {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-24) !important;
	color: var(--portal-text) !important;
	text-transform: uppercase !important;
}
.cMakePropertyPayment .back.button {
	background-color: var(--portal-teal) !important;
	border-color: var(--portal-teal-dark) !important;
}
.cMakePropertyPayment .select-circle.active:after {
	background-color: var(--portal-teal-dark) !important;
}
.cMakePropertyPayment .amount.active {
	color: var(--portal-teal-dark) !important;
}


/* /s/mylinkedproperty */
.cMyLinkedProperty .page-title h1 {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-24) !important;
	color: var(--portal-text) !important;
	text-transform: uppercase !important;
}
.cMyLinkedProperty .page-title .back.button {
	background-color: var(--portal-teal) !important;
	border-color: var(--portal-teal-dark) !important;
}
.cMyLinkedProperty .cLinkedPropertiesDetails .fy-balance .amount {
	font-family: "franklin-gothic-urw", sans-serif !important;
	color: var(--portal-teal-dark) !important;
}
.cMyLinkedProperty .totalfy {
	border-left-color: var(--portal-teal-dark) !important;
}
.cLinkedPropertiesDetails .action button.slds-button.slds-button_neutral.btn-manage:active,
.cLinkedPropertiesDetails .action button.slds-button.slds-button_neutral.btn-manage:focus {
	background-color: var(--portal-teal) !important;
	color: #fff !important;
}


/* /s/direct-debit */
.cSetupDirectDebit h1 {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-24) !important;
	color: var(--portal-text) !important;
	text-transform: uppercase !important;
}
.cSetupDirectDebit .back.button {
	background-color: var(--portal-teal) !important;
	border-color: var(--portal-teal-dark) !important;
}
.cSetupDirectDebit .debit-type .select-circle.active:after {
	background-color: var(--portal-teal-dark) !important;
}
.cSetupDirectDebit .slds-radio_button [type=radio]:checked+.slds-radio_button__label:hover {
    background-color: var(--portal-teal-dark) !important;
}
.cSetupDirectDebit .info {
    border-left-color: var(--portal-teal) !important;
}
.cSetupDirectDebit .info i {
    color: var(--portal-orange) !important;
}


/* /s/propertylink */
.cPropertyLink .container h1 {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-24) !important;
	color: var(--portal-text) !important;
	text-transform: uppercase !important;
}
.cPropertyLink .container .back.button {
	background-color: var(--portal-teal) !important;
	border-color: var(--portal-teal-dark) !important;
}
.cPropertyLink a.help,
.cPropertyLink a.tacurl {
	color: var(--portal-orange-link) !important;
}
.cPropertyLink a.help:hover,
.cPropertyLink a.tacurl:hover{
	color: var(--portal-orange-link-hover) !important;
}
.cPropertyLink .fancy-checkbox.active {
	background-color: var(--portal-orange-link) !important;
}
.cPropertyLink .fancy-checkbox div {
	background-color: var(--portal-orange-link) !important;
}
.cPropertyLink .fancy-checkbox.active div {
	background-color: #fff !important;
}
.cPropertyLink .fancy-checkbox div::after {
	font-size: var(--portal-text-14) !important;
}
.cPropertyLink .slds-modal__container .slds-button_icon svg {
	fill: var(--portal-text) !important;
}
.cPropertyLink button.slds-button.cancel {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-14) !important;
	text-transform: uppercase !important;
	letter-spacing: .05rem !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	color: var(--portal-text-neutral) !important;
	border: 2px solid var(--portal-teal-light) !important;
	padding: 8px 18px !important;
	text-decoration: none;
}
.cPropertyLink button.slds-button.cancel:active,
.cPropertyLink button.slds-button.cancel:focus,
.cPropertyLink button.slds-button.cancel:hover {
	background-color: var(--portal-teal) !important;
	color: #fff !important;
	border: 2px solid var(--portal-teal) !important;
	filter: none !important;
}
.cPropertyLink button.slds-button.cancel lightning-primitive-icon {
	display: none;
}


/* /s/profile/ */
.user-profile.slds-page-header h2 > span {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-24) !important;
	color: var(--portal-text) !important;
	text-transform: uppercase !important;
}
.user-profile.slds-page-header div.slds-media .slds-media__figure > i {
	background-color: var(--portal-teal) !important;
}
.cCustomLayoutNoImage .forceCommunityRichText .slds-page-header__title {
    padding-top: 0 !important;
}
.cMyPreferenceComp .slds-button.slds-button_neutral:active,
.cMyPreferenceComp .slds-button.slds-button_neutral:focus,
.cMyPreferenceComp .slds-button.slds-button_neutral:hover {
	background-color: var(--portal-teal) !important;
	color: #fff !important;
	border: 2px solid var(--portal-teal) !important;
	filter: none !important;
}


/* /s/request-submit /compliment */
/* /s/request-submit /complaint */
/* /s/request-submit /make-a-suggestion */
c-fa-cts_community_portal_create_case_ui_helper .slds-page-header__title button.back.button:active, 
c-fa-cts_community_portal_create_case_ui_helper .slds-page-header__title button.back.button:focus, 
c-fa-cts_community_portal_create_case_ui_helper .slds-page-header__title button.back.button:hover
c-fa-cts_community_portal_create_case_ui_helper button.responseBlock:active, 
c-fa-cts_community_portal_create_case_ui_helper button.responseBlock:focus, 
c-fa-cts_community_portal_create_case_ui_helper button.responseBlock:hover {
	background-color: var(--portal-teal-dark) !important;
}
c-fa-cts_community_portal_create_case_ui_helper .slds-page-header__title .question {
	padding: 0 !important;
}
c-fa-cts_community_portal_create_case_ui_helper .slds-page-header__title .question h2 {
	font-family: "franklin-gothic-urw", sans-serif !important;
    font-weight: 400 !important;
    font-size: var(--portal-text-26) !important;
    color: var(--portal-text) !important;
}


/* /s/pc-payment */
/* /s/c603-payment */
.cPCPaymentModule,
.cC603PaymentModule {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-weight: 400 !important;
	font-size: var(--portal-text-16) !important;
	color: var(--portal-text) !important;	
}
.cPCPaymentModule .refined-width .start-payment-box .note-text i,
.cC603PaymentModule .refined-width .start-payment-box .note-text i {
	color: #000 !important;
}
.cPCPaymentModule .refined-width .start-payment-box .note-text div,
.cC603PaymentModule .refined-width .start-payment-box .note-text div {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-weight: 400 !important;
	font-size: var(--portal-text-14) !important;
	color: var(--portal-text) !important;
}
.cPCPaymentModule .refined-width h1,
.cC603PaymentModule .refined-width h1 {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-24) !important;
	color: var(--portal-text) !important;
	text-transform: uppercase !important;
}
.cPCPaymentModule .refined-width b,
.cC603PaymentModule .refined-width b {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-18) !important;
	color: var(--portal-text) !important;
	text-transform: uppercase !important;
}
.cPCPaymentModule .cPCProcessDrivewayPayment .step-bullet:not(.inactive),
.cC603PaymentModule .cPCProcessDrivewayPayment .step-bullet:not(.inactive) {
	background-color: #000 !important;
}
.cPCPaymentModule .refined-width .start-payment-box .body button.btn-green,
.cC603PaymentModule .refined-width .start-payment-box .body button.btn-green {
	background-color: var(--portal-teal) !important;
}
.cPCPaymentModule .refined-width .start-payment-box .body button.btn-green:active,
.cPCPaymentModule .refined-width .start-payment-box .body button.btn-green:focus,
.cPCPaymentModule .refined-width .start-payment-box .body button.btn-green:hover,
.cC603PaymentModule .refined-width .start-payment-box .body button.btn-green:active,
.cC603PaymentModule .refined-width .start-payment-box .body button.btn-green:focus,
.cC603PaymentModule .refined-width .start-payment-box .body button.btn-green:hover {
	background-color: var(--portal-teal-dark) !important;
}
.cPCPaymentModule .details i,
.cC603PaymentModule .details i {
	color: #000 !important;
}
.cPCPaymentModule .actions i,
.cC603PaymentModule .actions i {
    color: #fff !important;
}


/* /s/my-questions */
.cAllQuestions .slds-page-header .slds-page-header__row h1 > span {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-24) !important;
	color: var(--portal-text) !important;
	text-transform: uppercase !important;
}
.cAllQuestions .slds-table thead th {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-weight: 500 !important;
	font-size: var(--portal-text-16) !important;
    color: var(--portal-teal-dark) !important;
}
.cAllQuestions .slds-media .slds-media__figure > i {
	background-color: var(--portal-teal) !important;
}

.cAllQuestions .slds-page-header__col-title {
    min-width: auto !important;
}

.cAllQuestions lightning-tab-bar li lightning-button-menu button.slds-button:focus {
    background-color: unset !important;
    color: unset !important;
}

.cAllQuestions .slds-page-header > .slds-page-header__row {
	flex-wrap: wrap;
}
.cAllQuestions .slds-page-header > .slds-page-header__row:nth-of-type(2) > div.slds-size_6-of-12:nth-child(1),
.cAllQuestions .slds-page-header > .slds-page-header__row:nth-of-type(2) > div.slds-size_6-of-12:nth-child(2) {
	width: 37% !important;
}
.cAllQuestions .slds-page-header > .slds-page-header__row:nth-of-type(2) > div.slds-size_6-of-12:nth-child(3) {
	width: 26% !important;
}
.cAllQuestions .slds-page-header > .slds-page-header__row:nth-of-type(2) > div.slds-size_6-of-12:nth-child(1) > div,
.cAllQuestions .slds-page-header > .slds-page-header__row:nth-of-type(2) > div.slds-size_6-of-12:nth-child(2) > div {
	width: 100% !important;
}

@media (max-width: 479px) {
	.cAllQuestions .slds-page-header .slds-page-header__row h1 > span {
        font-size: var(--portal-text-20) !important;
		line-height: 38px;
    }
	.cAllQuestions .slds-page-header > .slds-page-header__row:nth-of-type(2) > div.slds-size_6-of-12:nth-child(1),
	.cAllQuestions .slds-page-header > .slds-page-header__row:nth-of-type(2) > div.slds-size_6-of-12:nth-child(2) {
		width: 100% !important;
	}
}

@media (min-width: 480px) and (max-width: 767px) {
	.cAllQuestions .slds-page-header > .slds-page-header__row:nth-of-type(2) > div.slds-size_6-of-12:nth-child(1),
	.cAllQuestions .slds-page-header > .slds-page-header__row:nth-of-type(2) > div.slds-size_6-of-12:nth-child(2) {
		width: 50% !important;
	}
	.cAllQuestions .slds-page-header > .slds-page-header__row:nth-of-type(2) > div.slds-size_6-of-12:nth-child(3) {
		width: 100% !important;
	}
}

@media (max-width: 767px) {
	.cAllQuestions .slds-page-header > .slds-page-header__row:nth-of-type(2) > div.slds-size_6-of-12:nth-child(3) {
		width: 100% !important;
	}
	.cAllQuestions .slds-page-header {
		position: relative;
	}
	.cAllQuestions .slds-page-header > button {
		position: absolute;
		bottom: 40px;
	}
}


/* .cAllQuestions .slds-page-header div.slds-size_6-of-12 .slds-float_left {
	float: none;
}
.cAllQuestions .slds-page-header div.slds-size_6-of-12 .slds-float_right {
	float: none;
	width: 100% !important;
} */


/* ===================================== */
/* =============== FLOWS =============== */
/* ===================================== */

/* /s/wood-chipping-booking */
/* /s/planning-certificate */
/* /s/certificate-603 */
flowruntime-flow p {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-weight: 400 !important;
	font-size: var(--portal-text-16) !important;
	color: var(--portal-text) !important;
}
flowruntime-flow h2 strong,
flowruntime-flow h3 strong {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	color: var(--portal-text) !important;
	text-transform: uppercase !important;
}
flowruntime-flow h2 strong {
	font-size: var(--portal-text-24) !important;
}
flowruntime-flow h3 strong {
	font-size: var(--portal-text-18) !important;
}
flowruntime-flow table {
	font-family: "franklin-gothic-urw", sans-serif !important;
	font-weight: 400 !important;
	font-size: var(--portal-text-18) !important;
	color: var(--portal-text) !important;
}
flowruntime-flow table th {
	background-color: var(--portal-teal) !important;
}
flowruntime-flow table th h4 {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-18) !important;
	color: #fff !important;
	text-transform: uppercase !important;
}
flowruntime-flow .slds-form-element__legend span {
	color: var(--portal-text) !important;
}





/* ===================================== */
/* ============ OMNI STUDIO ============ */
/* ===================================== */
/* /s/driveway-application */
/* /s/premises-notification */

/* ###### I cant do much for these ones ###### */







/* ===================================== */
/* ====== VISUALFORCE LOGIN PAGES ====== */
/* ===================================== */

/* ====== login pages overrides ====== */

/* background and base font */
body.slds-scope.CustomCommunityLogin,
body.slds-scope.CustomCommunityForgotPassword, 
body.slds-scope.CustomCommunityForgotPasswordConfirm,
body.slds-scope.CreateAccount {
	background: var(--portal-login-bg) no-repeat center center fixed;
	background-size: cover;
	background-color: var(--portal-light-grey);
	color: var(--portal-text) !important;
	font-size: 1rem !important;
}


/* base container styles */
.CustomCommunityLogin #container,
.CustomCommunityForgotPassword #container,
.CustomCommunityForgotPasswordConfirm #container,
.CreateAccount #container,
.CreateAccount #verification {
	background: #fff;
	margin: 2em auto 0;
	max-width: 100%;
	position: relative;
	font-family: "franklin-gothic-urw", Arial, sans-serif;
	font-size: 1rem;
	color: var(--portal-text);
}


/* container widths and padding */
.CustomCommunityLogin #container,
.CreateAccount #container {
	width: 680px;
}

.CustomCommunityForgotPassword #container,
.CustomCommunityForgotPasswordConfirm #container,
.CreateAccount #verification {
	width: 420px;
}

.CustomCommunityForgotPassword .content,
.CustomCommunityForgotPasswordConfirm .content,
.CreateAccount #verification {
    padding: 0;
}


/* header and logo */
.CustomCommunityLogin .logoContainer,
.CustomCommunityForgotPassword .logoContainer,
.CustomCommunityForgotPasswordConfirm .logoContainer {  
    background-color: var(--portal-dark-grey);
	padding: 5px;
}

.CreateAccount #container .content .header {
    background-color: var(--portal-dark-grey);
	padding: 5px;
	display: block;
}

.CreateAccount #container .content .header .slds-col,
.CreateAccount #verification .login-form .input-container > .input-row:first-child {
    display: none;
}

/* fix this with actual logo ####################################################################### */
.CustomCommunityLogin img.logo,
.CustomCommunityForgotPassword img.logo,
.CustomCommunityForgotPasswordConfirm img.logo {
    display: none;
}

.CustomCommunityLogin .logoContainer a::after,
.CustomCommunityForgotPassword .logoContainer a::after, 
.CustomCommunityForgotPasswordConfirm .logoContainer::after, 
.CreateAccount #container .content .header::after {  
    content: '';
	background-image: var(--portal-logo);
	display: block;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	height: 52px;
	margin: 15px auto;
}

.CreateAccount #verification::before {
    content: '';
	display: block;
	background-color: var(--portal-dark-grey);
	height: 92px;
}

.CreateAccount #verification > div {
    display: block;
}

.CreateAccount #verification > div::before {
    content: '';
	background-image: var(--portal-logo);
	display: block;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	height: 52px;
	margin-top: -72px;
}


/* heading text and content padding */
.CreateAccount #container .content .title {
	padding: 30px 40px 0 40px;
}

.CustomCommunityLogin #container h2,
.CreateAccount #container .title h2,
.CreateAccount #verification h1,
.CustomCommunityForgotPasswordConfirm #container h1 {
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    font-size: var(--portal-text-16);
	color: var(--portal-text);
	margin-bottom: 20px;
	text-transform: uppercase;
}

.CreateAccount #container .title h2 {
	text-align: center;
}

.CreateAccount #verification p {
	font-family: "franklin-gothic-urw", Arial, sans-serif;
	font-size: 1rem;
}

.CustomCommunityForgotPassword .forgot-form {
	padding: 40px;
}

.CustomCommunityForgotPasswordConfirm .content > div:nth-child(2) {
	padding: 20px 40px 0 40px;
}

.CustomCommunityForgotPasswordConfirm .content > div:nth-child(3) {
	padding-bottom: 40px;
}

.CreateAccount #verification .login-form {
	padding: 32px 40px 40px 40px;
}

/* fix this with actual text ####################################################################### */
.CustomCommunityForgotPassword .forgot-form::before {
	content: 'Password Reset';
	display: block;
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 700;
    font-size: var(--portal-text-16);
	text-transform: uppercase;
	/* text-align: center; */
	margin-bottom: 20px;
}

.CreateAccount #container .content .tab-nav > div {
	font-family: "brandon-grotesque", sans-serif;
	font-weight: 700;
	font-size: var(--portal-text-20);
	color: var(--portal-text);
	padding: 16px 30px 12px;
}

.CreateAccount #container .content .tab-nav .active {
	border-top: solid 1px #e6e6e6;
}

.CreateAccount #container .content .tabs > div {
	/* to help fit panel on 1080 */
	padding: 20px 30px 0;
}

.CreateAccount #container .content .tabs h2 {
	font-family: "franklin-gothic-urw", Arial, sans-serif;
	font-weight: 500;
	font-size: var(--portal-text-18);
}


/* content fonts */
.CustomCommunityLogin form .input-container input,
.CustomCommunityForgotPassword form .forgot-form input {
	font-family: "franklin-gothic-urw", Arial, sans-serif;
	font-size: 1rem;
	padding: 18px 15px 15px 42px;
}

.CreateAccount .input-container input {
	font-family: "franklin-gothic-urw", Arial, sans-serif;
	font-size: 1rem;
	padding: 8px 8px 8px 18px;
}

.CreateAccount .input-container .placeholder {
	font-family: "franklin-gothic-urw", Arial, sans-serif;
	font-size: 1rem;
}

.CreateAccount .input-row ul li,
.CreateAccount .input-row label {
	font-family: "franklin-gothic-urw", Arial, sans-serif;
}

.CreateAccount .input-row ul li::before {
	color: var(--portal-text);
}


/* buttons and links */
.CustomCommunityLogin input[type=submit],
.CustomCommunityLogin input[type=submit]:focus,
.CustomCommunityForgotPassword .forgot-form input[type=submit],
.CustomCommunityForgotPassword .forgot-form input[type=submit]:focus,
.CreateAccount .login-form input[type=submit],
.CreateAccount .login-form input[type=submit]:focus {
	background-color: var(--portal-teal) !important;
	border-color: var(--portal-teal) !important;
	font-family: "franklin-gothic-urw", Arial, sans-serif;
	font-size: 1rem;
	padding: 14px;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
	white-space: pre-wrap;
}

.CustomCommunityLogin input[type=submit]:active,
.CustomCommunityLogin input[type=submit]:hover,
.CustomCommunityForgotPassword .forgot-form input[type=submit]:active,
.CustomCommunityForgotPassword .forgot-form input[type=submit]:hover,
.CreateAccount .login-form input[type=submit]:active,
.CreateAccount .login-form input[type=submit]:hover {
	background-color: var(--portal-teal-dark) !important;
}

.CustomCommunityLogin .forgot-container a,
.CustomCommunityForgotPassword .forgot-form a, 
.CustomCommunityForgotPasswordConfirm .content > div:nth-child(3) a, 
.CreateAccount .login-form a {
	color: var(--portal-orange-link) !important;
	font-family: "franklin-gothic-urw", Arial, sans-serif !important;
	font-size: 1rem !important;
}

.CustomCommunityLogin .forgot-container a:active,
.CustomCommunityLogin .forgot-container a:visited,
.CustomCommunityForgotPassword .forgot-form a:active, 
.CustomCommunityForgotPassword .forgot-form a:visited,
.CustomCommunityForgotPasswordConfirm .content > div:nth-child(3):active
.CustomCommunityForgotPasswordConfirm .content > div:nth-child(3):visited
.CreateAccount .login-form a:active,
.CreateAccount .login-form a:visited {
	color: var(--portal-orange-link-hover) !important;
}


/* modals */
.CreateAccount .modal-dialog .modal-header h1 {
	font-family: "brandon-grotesque", sans-serif;
}
.CreateAccount .modal-dialog .modal-header h1 {
	font-weight: 700 !important;
	font-size: var(--portal-text-28) !important;
	color: var(--portal-orange);
	text-transform: uppercase;
}
.CreateAccount .modal-dialog .modal-body h2 {
	font-family: "franklin-gothic-urw", Arial, sans-serif;
	font-weight: 500;
	font-size: var(--portal-text-24);
}
.CreateAccount .modal-dialog .modal-body {
	font-family: "franklin-gothic-urw", Arial, sans-serif;
}
.CreateAccount .modal-body p, 
.CreateAccount .modal-body li,
.CreateAccount .modal-body li p {
	font-size: var(--portal-text-16);
}
.CreateAccount .modal-body p strong {
	font-size: var(--portal-text-18);
}
.CreateAccount .modal-dialog .modal-footer button,
.CreateAccount .modal-dialog .modal-footer button:focus {
	font-family: "franklin-gothic-urw", Arial, sans-serif;
	background-color: var(--portal-teal) !important;
}
.CreateAccount .modal-dialog .modal-footer button:active,
.CreateAccount .modal-dialog .modal-footer button:hover {
	background-color: var(--portal-teal-dark) !important;
}


/* @media breakpoints */
@media (max-width: 480px) {
	.CustomCommunityForgotPassword #container,
	.CustomCommunityForgotPasswordConfirm #container,
	.CreateAccount #verification {
		width: 90%;
	}
}

@media (max-width: 720px) {
	.CustomCommunityLogin #container {
		width: 90%;
	}
	.CreateAccount #container {
		width: 90%;
	}
}

@media (min-width: 768px) {
	.CustomCommunityLogin #container,
    .CustomCommunityForgotPassword #container,
    .CustomCommunityForgotPasswordConfirm #container,
	/* disabling CreateAccount to fit panel on 1080 */
	/* .CreateAccount #container, */
	.CreateAccount #verification {
		margin-top: 3em;
    }
}

@media (min-width: 1024px) {
	.CustomCommunityLogin #container,
    .CustomCommunityForgotPassword #container,
    .CustomCommunityForgotPasswordConfirm #container,
	/* disabling CreateAccount to fit panel on 1080 */
	/* .CreateAccount #container, */
	.CreateAccount #verification {
		margin-top: 5em;
    }
}


/* Additional Login modal when submitting as request from guest home */
.cQAProcess.login-modal .slds-modal__header {
	background-color: var(--portal-dark-grey) !important;
	padding: 5px !important;
}

.cQAProcess.login-modal .slds-modal__header .logo-container {
	display: none;
}

.cQAProcess.login-modal .slds-modal__header .btn-close {
	color: #fff !important;
}
.cQAProcess.login-modal .slds-modal__header::after {  
	content: '';
	background-image: var(--portal-logo);
	display: block;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	height: 52px;
	margin: 15px auto;
}

.slds-modal.login-modal .cLoginRegister h2 {
	font-family: "brandon-grotesque", sans-serif !important;
	font-weight: 700 !important;
	font-size: var(--portal-text-16) !important;
	text-transform: uppercase !important;
}

.slds-modal.login-modal .cLoginRegister .btn-login,
.slds-modal.login-modal .cLoginRegister .btn-register {
	background-color: var(--portal-teal) !important;
	border-color: var(--portal-teal) !important;
	font-family: "franklin-gothic-urw", Arial, sans-serif;
	text-transform: uppercase;
	white-space: pre-wrap;
}

.cQAProcess .slds-modal__content .forgot-container a {
	color: var(--portal-orange-link) !important;
}
.cQAProcess .slds-modal__content .forgot-container a:hover {
	color: var(--portal-orange-link-hover) !important;
}