/* Custom CSS for Loft Application */
		:root {
			--MasterColour: #0f75bc;
			--AlternateColour: #292c2e;
			--ThirdColour: #dedfe0;
			--ForthColour: #CCCCCC;
		}

		body {
			font-family: 'Default-Regular', sans-serif, Arial, 'Hiragino Sans GB', 'Microsoft YaHei';
			color: #54595F;
		}

		.login-header {
			text-align: center;
			height: 76px;
			background: #FFF;
			border-bottom: 4px solid var(--MasterColour);
		}

		.application-login a {
			color: var(--MasterColour);
		}

		.application-login .form-button-control span {
			background-color: var(--MasterColour);
		}

		.application-login .form-button-control span:hover {
			background-color: var(--ThirdColour);
		}

		.PageImageColorOverlay {
			background-color: rgba(15, 117, 188, 0.40);
		}

		.PageImageColorOverlay.Dark {
			background-color: rgba(15, 117, 188, 0.40);
		}

		.ResultsPage .ButtonPosition .Button {
			background: var(--MasterColour);
			color: #FFF;
		}

		.PageMainContainer .contact-details .icon-disply .fa-circle {
			color: var(--MasterColour);
		}

		.PageMainContainer .contact-details .icon-disply .fa-mobile {
			color: #FFF;
		}

		.SideBar .ClientBalance .FlexFullWidth_NoMargin {
			background: var(--MasterColour);
		}

		.SideBar .ClientBalance .FlexOneHalf_NoMargin {
			background: #e5e5e5;
		}

		.SideBar .ClientBalance .FlexOneHalf_NoMargin:nth-child(2n) {
			background: var(--MasterColour);
			color: #FFF;
		}

		.SideBar .MainNavigation ul li a.Active {
			background: var(--MasterColour);
			color: #FFF;
		}

		.SideBar .MainNavigation ul li a:hover {
			background: var(--MasterColour);
			color: #FFF;
		}

		.SideBar .SubNavigation ul li a:hover,
		.SideBar .SubNavigation ul li span:hover {
			color: var(--MasterColour);
		}

		.SideBar .SubNavigation ul li a.Active {
			color: var(--ThirdColour);
		}

		.SideBar .SubNavigation ul li span.Active {
			background: var(--AlternateColour);
			color: #FFF;
		}

		.page-hero-container {
			background: var(--MasterColour) url('/asset-general-images/hero-background.svg');
		}

		.ResponsiveNavigation {
			margin: 0;
		}

		.ResponsiveNavigation ul ul li a {
			color: var(--MasterColour);
			background-color: rgba(15, 117, 188, 0.70);
			border-top: 1px solid #FFF;
			color: #FFF;
		}

		.ResponsiveNavigation>ul>li>a:hover,
		.ResponsiveNavigation>ul>li.active>a,
		.ResponsiveNavigation>ul>li.open>a {
			color: #FFF;
			background: var(--ThirdColour);
		}

		.ResponsiveNavigation ul ul li:hover>a,
		.ResponsiveNavigation ul ul li.open>a,
		.ResponsiveNavigation ul ul li.active>a {
			background-color: rgba(15, 117, 188, 1);
			color: #FFF;
		}

		.ResponsiveNavigation ul ul li.has-sub>a::after {
			border-top: 2px solid var(--AlternateColour);
			border-left: 2px solid var(--AlternateColour);
		}

		.ResponsiveNavigation ul ul li.has-sub:hover>a::after {
			border-top: 2px solid #FFF;
			border-left: 2px solid #FFF;
		}

		.ClientAccountTotalContainer .ClientAccountTotalItem h2 {
			color: var(--MasterColour);
		}

		.ClientAccountTotalContainer .ClientAccountTotalItem h3 {
			color: #54595F;
		}

		.ClientAccountTotalContainer .ClientAccountTotalItem i {
			color: var(--MasterColour);
		}

		.ClientAccountTotalContainer .ClientAccountTotalItem a {
			background: var(--MasterColour);
			color: #FFF;
		}

		.ProfileNavigation h3 {
			color: var(--MasterColour);
		}

		.ProfileNavigation ul li .Icon i {
			color: var(--AlternateColour);
		}

		.ProfileNavigation ul li .Chevron.Active i {
			color: var(--AlternateColour);
		}

		.HeaderFilterBar .HeaderTitle {
			color: var(--MasterColour);
		}

		.BannerHeader .HeaderStripe {
			background: var(--MasterColour);
		}

		.DefaultPageForm .SectionHeader {
			border: 1px solid var(--MasterColour);
			background: var(--MasterColour);
			color: #FFF;
		}

		.DefaultPageForm .SectionContent .ContactNumber .TitleBox {
			background-color: var(--MasterColour);
			color: #FFF;
		}

		.DefaultPageForm .SectionContent label.CustomUploadFile {
			background-color: var(--MasterColour);
			color: #FFF;
		}

		.DefaultPageForm .RadioButtonContainer .RadioButtonOption.Active {
			color: #FFF;
			background: var(--MasterColour);
		}

		.DefaultPageForm .SectionContent .InputContainer span.RadioButtonSelector.Active {
			border: 1px solid var(--MasterColour);
			background: var(--MasterColour);
			color: #FFF;
		}

		/*	Radio Button Selector Flex 	*/
		.DefaultPageForm .SectionContent .RadioButtonSelectorFlex:hover {
			border: 1px solid var(--AlternateColour);
		}

		.DefaultPageForm .SectionContent .RadioButtonSelectorFlex.Active {
			border: 1px solid #ffd1b5;
			background: #fde3d4;
		}

		.DefaultPageForm .SectionContent .RadioButtonSelectorFlex.Active .IconFlexItem i {
			color: var(--ThirdColour);
		}

		.DefaultPageForm .ButtonControl .Button.Save {
			border: 1px solid var(--AlternateColour);
			background: var(--AlternateColour);
		}

		.DefaultPageForm .ButtonControl .Button.Cancel {
			border: 1px solid var(--MasterColour);
			background: var(--MasterColour);
		}

		.dataTables_wrapper .dataTables_paginate .paginate_button.current,
		.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
			background: var(--MasterColour);
			color: #FFF !important;
		}

		.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
			border: 1px solid var(--MasterColour);
			background: var(--MasterColour);
			color: #FFF !important;
		}

		.DefaultTable.client-fund-table tr td.item-display a.curved-table-button {
			background: var(--ThirdColour);
			color: #FFF;
		}

		.DefaultTable.fund-payment-responsive-table tr td.item-display a.curved-table-button {
			background: var(--ThirdColour);
			color: #FFF;
		}

		.DeleteDocument.fancybox-content .tright button,
		.DeleteDocument.fancybox-content .tright a {
			border: 1px solid var(--AlternateColour);
			background: var(--AlternateColour);
			color: #FFF;
		}

		.DeleteDocument.fancybox-content .tright a {
			border: 1px solid var(--MasterColour);
			background: var(--MasterColour);
			color: #FFF;
		}

		.ProgressBarContianer .BarColour {
			background: var(--MasterColour);
		}

		.InvestmentDisplayContainer.FundingPaymentPlan .InvestmentHeaderContainer .ContainerWidth135.FundingDate {
			background: var(--MasterColour);
		}

		.InvestmentDisplayContainer.FundingPaymentPlan .InvestmentHeaderContainer .ContainerWidth135.FundingStatus {
			color: #FFF;
			background: #00235a;
		}

		.InvestmentDisplayContainer.FundingPaymentPlan .InvestmentHeaderContainer .ContainerWidth150.FundingProof {
			background: var(--ThirdColour);
		}

		.InvestmentDisplayContainer.FundingPaymentPlan .InvestmentHeaderContainer .ContainerWidth150.FundingProof .DisplayIcon .fa-check-circle,
		.InvestmentDisplayContainer.FundingPaymentPlan .InvestmentHeaderContainer .ContainerWidth150.FundingProof .DisplayIcon .fa-file-signature {
			color: var(--MasterColour);
		}

		.InvestmentDisplayContainer .InvestmentHeaderContainer .ContainerWidth135.InvestmentAnnualReturn,
		.InvestmentDisplayContainer .InvestmentHeaderContainer .ContainerWidth135.IPOInvestmentStockValue {
			background: var(--MasterColour);
		}

		.InvestmentDisplayContainer .InvestmentHeaderContainer .ContainerWidth135.IPOInvestmentCurrentPrice {
			background: var(--AlternateColour);
		}

		.InvestmentControlsContainer .ControlButtons a,
		.InvestmentControlsContainer .ControlButtons span {
			color: #FFF;
			background: var(--MasterColour);
		}

		.InvestmentControlsContainer .ControlButtons a.Active,
		.InvestmentControlsContainer .ControlButtons span.Active {
			background: var(--ThirdColour);
		}

		.InvestmentDisplayContainer.InvestmentOptionsHeader .InvestmentHeaderContainer .InvestmentOptionAnnualReturn .DisplayData {
			color: var(--AlternateColour);
		}

		.InvestmentDisplayContainer.InvestmentOptionsHeader .InvestmentHeaderContainer .InvestmentOptionAnnualReturn .DisplayData span.Symbol {
			color: var(--AlternateColour);
		}

		.InvestmentDisplayContainer .InvestmentHeaderContainer .ContainerHeaderGrow .DisplayItem a {
			background: var(--MasterColour);
			color: #FFF;
		}

		.InvestmentDividendPaymentsContainer .DefaultTable td.ReinvestHolder {
			color: var(--MasterColour);
		}

		.InvestmentDividendPaymentsContainer .DefaultTable td.ReinvestHolder a.ReinvestButton {
			color: var(--MasterColour);
		}

		.InvestmentDividendPaymentsContainer .DefaultTable td.ReinvestHolder a.ReinvestButton:hover {
			color: var(--AlternateColour);
		}

		.InvestmentCalculatorContainer {
			background-color: var(--MasterColour);
		}

		.InvestmentCalculatorContainer .InvestmentCalculator .ButtonControl span.Button,
		.InvestmentCalculatorContainer .InvestmentCalculatorDetails .ButtonControl span.Button {
			background: var(--AlternateColour);
			color: #FFF;
		}

		.InvestmentCalculatorCompareContainer {
			background-color: #e4edf0;
		}

		.InvestmentCalculatorCompareContainer .InvestmentCalculatorCompare span.Button {
			background-color: var(--AlternateColour);
			color: #FFF;
		}

		.InvestmentCalculatorCompareContainer .InvestmentCalculatorCompare span.Button:hover {
			background-color: var(--MasterColour);
		}

		.InvestmentCalculatorCompareContainer .InvestmentCalculatorCompare .ButtonControl span {
			background-color: var(--AlternateColour);
			color: #FFF;
		}

		.InvestmentCalculatorCompareContainer .InvestmentCalculatorCompare .ButtonControl span:hover {
			background-color: var(--MasterColour);
		}

		.CompareInvestmentsResponsive .ClearAllButton span {
			background-color: var(--AlternateColour);
			color: #FFF;
		}

		.CompareInvestmentsResponsive .ClearAllButton span:hover {
			background-color: var(--MasterColour);
		}

		.DefaultPageForm.direct-debit-request-form .ButtonControl .Button.Save {
			border: 1px solid var(--ThirdColour);
			background: var(--ThirdColour);
		}

		.TradeViewSide .TradeViewList li.current,
		.TradeViewSide .TradeViewList li:hover {
			background: var(--MasterColour);
			color: #FFF;
		}

		.PageMainContainer.ApplicationForm.FlexContainer .SideBarContainer {
			background: var(--MasterColour);
		}

		.PageMainContainer.ApplicationForm.FlexContainer .SideBarContainer .SideBar h2 {
			color: var(--AlternateColour);
		}

		.ApplicationWizard li.Active {
			background: var(--MasterColour);
			border-color: var(--MasterColour);
			color: #FFF;
		}

		.ApplicationReviewMenu li a {
			font-size: 0.9em;
			color: #FFF;
			margin-right: 10px;
			text-decoration: none;
		}

		.ApplicationReviewMenu li a:hover {
			color: var(--AlternateColour);
		}

		.ApplicationReviewMenu li a span {
			font-size: 1.2em;
			color: #FFF;
			margin-right: 6px;
		}

		.ApplicationReview .ButtonManagement .Button {
			background: var(--AlternateColour);
			border-color: var(--AlternateColour);
			color: #FFF;
		}

		.ApplicationReview .FlexContainer .FlexOneHalf_NoMargin .IdentificationContainer i {
			color: var(--MasterColour);
		}

		.ApplicationForm .ButtonControl a i {
			color: var(--MasterColour);
		}

		.ApplicationForm .ButtonControl a span {
			float: left;
			line-height: 60px;
			text-decoration: none;
			color: var(--MasterColour);
		}

		.ApplicationForm .ButtonControl a:hover {
			background: var(--MasterColour);
		}

		.SectionContentNote {
			background: #f8ebe3;
			border-color: var(--ThirdColour);
		}

		.PopupContainer .BottomControls a {
			background: var(--AlternateColour);
			color: #FFF;
		}

		.PopupContainer .BottomControls a.Cancel {
			background: var(--MasterColour);
			color: #FFF;
		}

		.PopupContainer .ResponseContainer .PageHeaderResponseMessage {
			background: var(--AlternateColour);
			color: #FFF;
		}
		.BannerHeader .CenterContainer .CompanyLogo img {
			max-width: 200px;
		}

		.SideBar .BrandingLogo img {
			max-width: 200px;
		}

		.LoginPage.AccountApplication .LoginForm .ContentContainer_Middle .AuthenticationForm .CompanyLogo {
			padding-bottom: 30px;
		}

		.active-selector {
			background-color: #0f75bc !important;
			color: #fff !important;
		}

		.item-selector {
			cursor: pointer;
			/* Add padding/margin if not already present in your CSS */
		}


		.roof-calculation ul li li{
			line-height: 1.3em !important;
		}

		.roof-calculation {
			margin-top: 20px;
			margin-bottom: 10px;
		}