/*------------------------------------*
	SUMMARY
	
	Main Brand Stylesheet 
	
	This should include styles for brand and overall layout
	
	For OFIS Control Layout - see layout_ofis_controls.css
	For AAO Control Layout - see layout_aao_controls.css
*------------------------------------*/

/*------------------------------------*
	CONTENTS
*------------------------------------*/

/*
	Misc Development Styles
	Base Element Styles
	Site Layout
	Main Menu + Sub Menu
    Account Menu
    Account Context Menu
	Site Header
	Site Footer
    Category Styles
    Advert
	Responsive
*/

/*------------------------------------*
	Misc Development Styles
*------------------------------------*/

/* Hides content notations for documentation */
.questionNumber,
.lblDay,
#InterestStatementChoice #ChoiceRadioList {
  display: none;
}

/*------------------------------------*
	$Base Element Styles
*------------------------------------*/
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

html,
body,
#form1,
#FullPage {
  height: 100%;
}

html {
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #555;
  font-family: "VAG Rounded Light", arial;
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
}

.ClearFloat {
  clear: both;
  height: 0;
  font-size: 0;
}

/*------------------------------------*
	$Site Layout 
*------------------------------------*/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#FullPage {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/*------------------------------------*
	$Site Header
*------------------------------------*/
#HeaderDiv {
  position: relative;
  -webkit-box-flex: 0;
  flex: none;
  width: 100%;
  background-color: #ffffff;
  -webkit-flex: none;
}

#HeaderDiv:after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  content: ".";
}

#HeaderDivContent {
  position: relative;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 20px;
}

#pageLogo {
  max-width: 325px;
}

#pageLogo img {
  width: 100%;
}

.NavContainer {
  display: block;
  overflow: hidden;
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 0 1rem;
}

.NavContainer ul.TopNav {
  float: right;
  display: table;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.NavContainer ul.TopNav li {
  display: inline-block;
}

.NavContainer ul.TopNav li a {
  display: block;
  margin-left: 30px;
  padding: 20px 0 20px 28px;
  color: #747678;
  font-family: "VAG Rounded Bold", arial;
  text-decoration: underline;
}

.NavContainer ul.TopNav .LI_TermsCond a {
  background: url("../images/icons/DocumentIcon.png") no-repeat left center /22px;
}

.NavContainer ul.TopNav .LI_ContactUs a {
  background: url("../images/icons/CallIcon.png") no-repeat left center /22px;
}

.NavContainer ul.TopNav .LI_Help a {
  background: url("../images/icons/QuestionIcon.png") no-repeat left center /22px;
}

.MenuContent {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
}

/*------------------------------------*
	$Site Content
*------------------------------------*/
#ContentWrapper {
  clear: both;
  -webkit-box-flex: 1;
  flex: 1 0 auto;
  width: 100%;
  -webkit-flex: 1 0 auto;
}

#ContentDiv {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 1em 20px;
  background-color: #ffffff;
}

.MaturityOptionsPage #ContentDiv:after {
  clear: both;
  display: table;
  content: '';
}

#RightSideDiv {
  display: none;

  /*position: relative;
	width:100%;
	max-width:920px;
	margin: 0 auto;
	padding:1px 20px 1em 20px;
	background-color:transparent;*/
}

#LeftSideDiv {
  clear: both;
  width: 100%;
  background: #f9f9f9;
  border-top: 1px solid #efefef;
}

/*------------------------------------*
	$Site Footer
*------------------------------------*/
#FooterDiv {
  clear: both;
  -webkit-box-flex: 0;
  flex: none;
  width: 100%;
  margin: 0 auto;
  background: #6e2f92;
  color: #ffffff;
  -webkit-flex: none;
}

#FooterContentWrapper {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 1rem;
  color: #fff;
  font-size: 0.8rem;
}

.FooterLinkContainer {
  border-bottom: 1px solid #9058b3;
}

.FooterLinks {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  padding: 1rem;
  color: #fff;
}

.FooterLinks ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.FooterLinks ul li {
  display: inline-block;
  padding-right: 4%;
}

/*------------------------------------*
	$Font Styles
*------------------------------------*/
h1 {
  margin: 0 0 25px;
  padding: 0;
  color: #6e2f92;
  font-family: "VAG Rounded Light", arial;
  font-size: 2.750rem;
}

h2 {
  color: #6e2f92;
  font-family: "VAG Rounded Light", arial;
  font-size: 1.375rem;
}

h3 {
  color: #6e2f92;
  font-family: "VAG Rounded Light", arial;
  font-size: 1.250rem;
  line-height: 1.2;
}

h4 {
  margin-top: 0;
  padding-top: 0;

  /*18px*/
  font-family: "VAG Rounded Light", arial;
  font-size: 0.75rem;
  font-weight: 700;
}

.GreenText {
  font-family: "VAG Rounded Bold", arial;
}

a,
a:link,
a:visited,
a:active {
  color: #6e2f92;
  text-decoration: none;
}

.InboxMessage-ActionButtons a {
  font-weight: 700;
}

a:hover {
  color: #8cc63e;
}

.FooterLinkContainer a,
.FooterLinkContainer a:link,
.FooterLinkContainer a:visited,
.FooterLinkContainer a:active {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.FooterLinkContainer a:hover {
  color: #fff;
  text-decoration: underline;
}

.PasswordRef{
  color: #6e2f92;
  font-family: arial;
  font-size: 1.2rem;
  font-weight: 700;
}

/*------------------------------------*
	$Buttons 
*------------------------------------*/
input[type="button"],
input[type="submit"],
.input-checkbox {
  border-radius: 0;
  -webkit-appearance: none;
}

.MonthlyStatementChoiceMenuItem a,
.ActionButton a,
.ActionButton input,
.ActionButtons a,
.ActionButtons input,
.WizardButtons a,
.maintenanceinformationbutton a,
.InLineFormButton,
.ExportToButton,
.FilterButton,
.ShowAllButton,
.ShowDeletedButton,
.ShowActiveButton,
.InlineFormButton,
.PrintButton,
.ActionButtons.Action .Button,
.SecureMessageCreateMenuItem a,
a.WorkWithDescription,
.maturityButtonDiv a,
.RefreshButton,
a.maturitybackButton,
#MonthlyStatementMenu .MonthlyStatementChoiceMenuItem a,
.DGS_Wording a.Button,
.ActionButton .ViewMonthlyStatement,
.ActionButton .UpdateButton,
.maturityButtonDiv .maturitycontinueButton,
.maturitybackButton,
.maintenanceinformationbutton a,
.ActionButton .Button,
.GeneralTerms a,
.maturityButtonDiv .maturityamendButton,
.maturityButtonDiv .maturityconfirmButton,
#MaturityOptionsControl .maturityendButton,
.SavingsGoalOptions .EditGoalButton,
.SavingsGoalOptions .DeleteGoalButton,
.WizardButton .DlPDF,
.TimeoutPromptMessage a,
.ConfirmPageButton .Button,
.ConfirmPageButton .MoveForward,
.ConfirmPageButton .MoveForward,
.MoveForward,
.OverviewButton a,
.MainAdvert .ActionButton a,
.problem-with-service-section a,
#ContinueTransactionLinkWrapper a,
#StopTransactionLinkWrapper a {
  display: inline-block;
  min-width: 180px;
  margin: 15px 0 15px;
  padding: 9px 40px;
  border: 0;
  border-radius: 20px;
  font-family: "VAG Rounded Bold", arial;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
}

.ActionButtons input.MoveNext,
.ActionButtons input.Next,
.ActionButtons input.MemMoveNext,
.ActionButtons .Button,
.WizardButtons a,
.ActionButton .NextButton,
#MonthlyStatementMenu .MonthlyStatementChoiceMenuItem a,
#StatementControl_PrintButtonPanel a,
a.RefreshButton,
.MonthlyStatement .ActionButtons a.PrintButton,
.MonthlyStatement .ActionButtons a.DownloadPdfButton,
.DGS_Wording a.Button,
.ActionButton .ViewMonthlyStatement,
.ActionButton .UpdateButton,
.maturityButtonDiv .maturitycontinueButton,
.maintenanceinformationbutton a,
.ActionButton .Button,
.maturityButtonDiv .maturityamendButton,
.maturityButtonDiv .maturityconfirmButton,
.SavingsGoalOptions .EditGoalButton,
.SavingsGoalOptions .DeleteGoalButton,
.SecureMessageCreateMenuItem a,
.ActionButton #SecureMessageCreateControl_lnkConfirmButton,
.ActionButton #StatementControl_RefreshLinkButton,
.ActionButton #SecureMessageCreateControl_btnSubmitLink,
.ActionButton #SecureMessageCreateControl_lnkContinueButton,
#DeleteButton a,
#ContinueButton a,
.ActionButton .MoveForward,
.C2CProductPage .ActionButton a,
.ConfirmPageButton .Button,
.ConfirmPageButton .MoveForward,
#ScaNotificationControl .ActionButton a,
#ScaVerificationControl .ActionButton.change-nom-btn a,
.MoveForward,
.OverviewButton a,
.ad-btn a,
.MainAdvert .ActionButton a,
#NoEmailMessage .ActionButton a,
#NoMobileMessage .ActionButton a,
.problem-with-service-section a,
#ContinueTransactionLinkWrapper a {
  background: #8cc63e url("../images/icons/ForwardBtnArrow.png") no-repeat right 15px center;
  color: #282828;
  cursor: pointer;
}

.ActionButtons input.Previous,
.WizardButtons .CancelButton,
.MonthlyStatement .ActionButtons a.ReturnToAllStatementsButton,
.maturitybackButton,
.ActionButton .AccountDetails,
.ActionButton .BackButton,
#MaturityOptionsControl .maturityendButton,
.SavingsGoalWizardControl .ActionButton .ExitButton,
.TransactionWizardControl .ActionButton .ExitButton,
.ActionButton #SecureMessageCreateControl_lnkAmendButton,
#CancelButton a,
.ActionButton .MoveBack,
#StopTransactionLinkWrapper a,
.ActionButton a {
  background: #eeeef0 url("../images/icons/BackBtnArrow.png") no-repeat left 15px center;
  color: #6e2f92;
  cursor: pointer;
}

.ActionButton .ResetPassword{
  background: #eeeef0;
  color: #6e2f92;
}

#InterestStatement .PrintButton,
.TimeoutPromptMessage a {
  background: #8cc63e;
  color: #282828;
}

.WizardButton .DlPDF {
  padding: 9px 50px;
  background: #8cc63e url("../images/icons/Adobe_PDF_file_icon_32x32.png") no-repeat right 13px center /25px;
  color: #282828;
  font-weight: 700;
}

.ActionButtons input.MoveNext:hover,
.ActionButtons input.Next:hover,
.ActionButtons input.MemMoveNext:hover,
.ActionButtons .Button:hover,
.WizardButtons a:hover,
.ActionButton .NextButton:hover,
#MonthlyStatementMenu .MonthlyStatementChoiceMenuItem a:hover,
#StatementControl_PrintButtonPanel a:hover,
a.RefreshButton:hover,
.MonthlyStatement .ActionButtons a.PrintButton:hover,
.MonthlyStatement .ActionButtons a.DownloadPdfButton:hover,
.DGS_Wording a.Button:hover,
.ActionButton .ViewMonthlyStatement:hover,
.ActionButton .UpdateButton:hover,
.maturityButtonDiv .maturitycontinueButton:hover,
.maintenanceinformationbutton a:hover,
.ActionButton .Button:hover,
.GeneralTerms a:hover,
.maturityButtonDiv .maturityamendButton:hover,
.maturityButtonDiv .maturityconfirmButton:hover,
.SavingsGoalOptions .EditGoalButton:hover,
.SavingsGoalOptions .DeleteGoalButton:hover,
.SecureMessageCreateMenuItem a:hover,
.ActionButton #SecureMessageCreateControl_lnkConfirmButton:hover,
.ActionButton #SecureMessageCreateControl_btnSubmitLink:hover,
.ActionButton #SecureMessageCreateControl_lnkContinueButton:hover,
#DeleteButton a:hover,
#ContinueButton a:hover,
.ActionButton .MoveForward:hover,
.C2CProductPage .ActionButton a:hover,
.ConfirmPageButton .Button:hover,
.ConfirmPageButton .MoveForward:hover,
#ScaNotificationControl .ActionButton a:hover,
#ScaVerificationControl .ActionButton.change-nom-btn a:hover,
.MoveForward:hover,
.OverviewButton a:hover,
.ad-btn a:hover,
.MainAdvert .ActionButton a:hover,
#NoEmailMessage .ActionButton a:hover,
#NoMobileMessage .ActionButton a:hover,
.problem-with-service-section a:hover,
#ContinueTransactionLinkWrapper a:hover {
  background: #6e2f92 url("../images/icons/ForwardBtnArrowHover.png") no-repeat right 15px center;
  color: #fff;
  text-decoration: none;
}

.ActionButtons input.Previous:hover,
.WizardButtons .CancelButton:hover,
.MonthlyStatement .ActionButtons a.ReturnToAllStatementsButton:hover,
.maturitybackButton:hover,
.ActionButton .AccountDetails:hover,
.ActionButton .BackButton:hover,
#MaturityOptionsControl .maturityendButton:hover,
.SavingsGoalWizardControl .ActionButton .ExitButton:hover,
.TransactionWizardControl .ActionButton .ExitButton:hover,
.ActionButton a#SecureMessageCreateControl_lnkAmendButton:hover,
#CancelButton a:hover,
.ActionButton .MoveBack:hover,
.ChangeDetailsControl .ActionButton .BackButton:hover,
.InterestOptionsControl .ActionButton .BackButton:hover,
.DeleteSavingsGoalControl .ActionButton .BackButton:hover,
#StopTransactionLinkWrapper a:hover,
.ActionButton a:hover {
  background: #6e2f92 url("../images/icons/BackBtnArrowHover.png") no-repeat left 15px center;
  color: #fff;
  text-decoration: none;
}

.ActionButton.change-nom-btn a,
#ExpiredResetCode.ActionButton a,
#FailedResetCode.ActionButton a,
#UnverifiedResetCode.ActionButton a{
  padding-right: 0;
  padding-left: 0;
  background: none;
  color: #747678;
  text-decoration: underline;
}

.ActionButton.change-nom-btn a:hover,
#ExpiredResetCode.ActionButton a:hover,
#FailedResetCode.ActionButton a:hover,
#UnverifiedResetCode.ActionButton a:hover{
  text-decoration: none;
}

.ActionButton .ResetPassword:hover{
  background: #6e2f92;
  color: #fff;
  text-decoration: none;
}

#InterestStatement .PrintButton:hover,
.TimeoutPromptMessage a:hover {
  background: #6e2f92;
  color: #fff;
  text-decoration: none;
}

.WizardButton .DlPDF:hover {
  background: #6e2f92 url("../images/icons/Adobe_PDF_file_icon_32x32.png") no-repeat right 13px center /25px;
  color: #fff;
}

.ActionButtons .Button,
.ActionButtons input.Next,
.WizardButtons a,
.ActionButtons input.MemMoveNext,
#MonthlyStatementMenu .MonthlyStatementChoiceMenuItem a,
#StatementControl_PrintButtonPanel a,
a.RefreshButton,
.MonthlyStatement .ActionButtons a.PrintButton,
.MonthlyStatement .ActionButtons a.DownloadPdfButton,
.ActionButton .UpdateButton,
.maturityButtonDiv .maturitycontinueButton,
.maintenanceinformationbutton a,
.ActionButton .NextButton,
.maturityButtonDiv .maturityamendButton,
.maturityButtonDiv .maturityconfirmButton,
.SavingsGoalOptions .EditGoalButton,
.SavingsGoalOptions .DeleteGoalButton,
.SecureMessageCreateMenuItem a,
.ActionButton #SecureMessageCreateControl_lnkConfirmButton,
.ActionButton #SecureMessageCreateControl_btnSubmitLink,
.ActionButton #SecureMessageCreateControl_lnkContinueButton,
.ActionButton #StatementControl_RefreshLinkButton,
#ContinueButton a,
.ActionButton .MoveForward,
.C2CProductPage .ActionButton a,
.ActionButtons .MoveNext,
#InterestStatement .PrintButton,
.ConfirmPageButton .MoveForward {
  float: right;
  clear: right;
}

.ActionButtons input.Previous,
.ActionButton .ResetPassword,
.WizardButtons .CancelButton,
.MonthlyStatement .ActionButtons a.ReturnToAllStatementsButton,
.maturitybackButton,
.ActionButton .AccountDetails,
.ActionButton .BackButton,
.GeneralTerms a,
.ActionButton .Button,
#MaturityOptionsControl .maturityendButton,
.SavingsGoalWizardControl .ActionButton .ExitButton,
.TransactionWizardControl .ActionButton .ExitButton,
.ActionButton #SecureMessageCreateControl_lnkAmendButton,
#CancelButton a,
.ActionButton .MoveBack {
  float: left;
  clear: left;
}

/*---  Secondary Button Styles  ---*/
.MustAgreeToTerms .AgreementLink a,
.WizardButton .DlPDF,
.ActionButton .SecondaryBtn,
.GeneralTerms a,
.MaturityOption .ActionButton .Button {
  display: table;
  margin-top: 15px;
  margin-bottom: 20px;
  border-radius: 20px;
  color: #6e2f92;
  font-family: "VAG Rounded Light";
  text-decoration: none;
}

.MustAgreeToTerms .AgreementLink a,
.GeneralTerms a,
.MaturityOption .ActionButton .Button {
  min-width: 332px;
  padding: 5px 15px 5px 50px;
  background: #eeeef0 url("../images/icons/download.png") no-repeat left 15px center;
  text-align: right;
}

.ActionButton.ApplicationLoadPDF a {
  margin-left: 0;
  padding: 10px 15px 10px 60px;
  background: #eeeef0 url("../images/icons/download.png") no-repeat left 15px center;
  text-align: right;
}

.MustAgreeToTerms .AgreementLink a:hover,
a.thankyoudoclist:hover,
a.stockshareform:hover,
.ActionButton.ApplicationLoadPDF a:hover,
.GeneralTerms a:hover,
.MaturityOption .ActionButton .Button:hover{
  background: #d2d2d2 url("../images/icons/download.png") no-repeat left 15px center;
  color: #6e2f92;
}

.MustAgreeToTerms .AgreementLink.Read a {
  background: #eeeef0 url("../images/icons/downloadtick.png") no-repeat left 15px center;
}

.MustAgreeToTerms .AgreementLink.Read a:hover {
  background: #d2d2d2 url("../images/icons/downloadtick.png") no-repeat left 15px center;
}

.LoginContainer .ActionButtons input.MoveNext {
  float: left;
}

.MonthlyStatement .ActionButtons,
.MonthlyStatement .ActionButtons a.DownloadPdfButton,
.ActionButton .Button {
  clear: both;
  overflow: hidden;
}

#MaturityOptionsControl .AccountInfo .ActionButton .Button{
  overflow: visible;
}

.TransactionWizardControl .ActionButton .ExitButton {
  display: block;
}

.TaxResidencyInputs .ActionButton .ForwardButton,
.TaxResidencyInputs .ActionButton .BackButton {
  min-width: 150px;
  font-family: "VAG Rounded Light";
}

.ActionButton .ForwardButton:hover,
.ActionButton .BackButton:hover,
.ActionButton .SecondaryBtn:hover {
  background: #d2d2d2;
  color: #6e2f92;
}

p.ActionButton{
  clear: both;
  overflow: hidden;
  width: 100%;
}

#NoEmailMessage .ActionButton,
#NoMobileMessage .ActionButton {
  margin: 0;
}

.SavingsGoalOptions {
  clear: both;
  overflow: hidden;
  width: 100%;
}

.SavingsGoalOptions a {
  margin: 5px 0 !important;
}

table {
  width: 100%;
  margin: 1em 0;
  font-size: 0.875rem;
  border-collapse: collapse;
}

table,
th,
td {
  border: 0 none;
}

th,
td {
  padding: 0.5rem;
  text-align: left;
  vertical-align: top;
}

th {
  background: #6e2f92;
  color: #ffffff;
}

tr:nth-child(2n+1) {
  background: #eaeaec;
}

dd {
  min-height: 1.5rem;
  margin: -2.40rem 0 0 170px;
  padding: 1.25rem 0 0.5rem 0;
  font-weight: bold;
}

.StatementKey table {
  font-size: inherit;
}

.StatementKey th {
  width: 20%;
  background: none;
  color: inherit;
}

.StatementKey tr:nth-child(2n+1) {
  background: none;
}

.DirectDebitAccountHeader,
.DirectDebitAccount {
  display: none;
}

/*$Login Banner */
.AuthenticationBanner {
  margin: 15px 0;
  padding: 10px 25px;
  border-width: 1px 1px 1px 4px;
  border-style: solid;
  border-color: #6e2f92;
}

.AuthenticationBanner a,
.ContactUpdate a {
  text-decoration: underline;
}

.AuthenticationBanner a:hover,
.ContactUpdate a:hover {
  text-decoration: none;
}

.AuthenticationBanner h2 {
  position: relative;
  margin-top: 6px;
}

.AuthenticationBanner .FraudImg {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.checkdetailsBtn {
  float: left;
}

/*------------------------------------*
	$Main Menu + Sub Menu
*------------------------------------*/
#LeftSideDiv:after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  content: ".";
}

.MainNav {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
}

.MainMenu {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 auto;
}

#AccountSummaryMenu,
#ViewSecureMessageMainMenu {
  margin-left: -0.75rem;
}

.MainMenu ul {
  margin: 0;
  padding: 0 10px;
  list-style: none;
}

.MainMenu ul.AccSumMenuItem {
  float: left;
}

.MainMenu ul.AccountNav {
  float: right;
}

.MainMenu ul:after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  content: ".";
}

.MainMenu ul li {
  float: left;
  margin: 0;
  padding: 0;
}

.MainMenu ul.TopNav li {
  float: none;
}

.MainMenu li a {
  position: relative;
  display: block;
  padding: 20px 10px;
  color: #747678;
  font-family: "VAG Rounded Bold", arial;
  text-decoration: underline;
}

.MainMenu li.AccountSubMenu a.ShowMenuButton {
  padding-right: 1.5rem;
  background-image: url('../Images/icons/arrow_down_grey.png');
  background-position: right 5px center;
  background-repeat: no-repeat;
}

.MainMenu li.AccountSubMenu a.ShowMenuButton:hover,
.MainMenu li.AccountSubMenu a.ShowMenuButton:focus {
  background-image: url('../Images/icons/arrow_down_grey.png');
}

.MainMenu li a:hover,
.MainMenu li a:focus {
  color: #747678;
}

.MainMenu li.ActivePage a {
  text-decoration: none;
}

/*------------------------------------*
	$Account Menu
*------------------------------------*/
.MainMenu ul.AccountsSubMenu {
  background: #fff;
}

.ExpandedPanel .MainMenu::after {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  display: block;
  opacity: 0.75;
  width: 100%;
  height: 100%;
  background-color: #000;
  content: "";
}

.AccountsMenuPanel {
  position: absolute;
  z-index: 100;
  top: 61px;
  right: 0;
  width: 100%;
  padding: 0 10px 10px 10px;
  background: #fff;
  border-bottom: solid 6px #2e2e2e;
}

ul li .AccountItem {
  display: inline-block;
  box-sizing: border-box;
  width: 20%;
  margin-bottom: 1em;
}

ul li .AccountItem a {
  display: block;
  margin-right: 10px;
  padding: 5px 12px 5px 12px;
  background: #2e2e2e;
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.5;

  /*box-shadow: 1px 1px 2px #888888;*/
}

.MyAccounts ul.AccountsSubMenu li a {
  border: 1px solid #2e2e2e;
  background: #fff;
  color: #555
}

ul li .AccountItem .ProductName {
  display: inline-block;
  overflow: hidden;
  width: 100%;
  color: #6e2f92 ;
  white-space: nowrap;
  text-overflow: ellipsis;
}

li .AccountItem a:hover,
li .AccountItem a:focus,
li .AccountItem.ActivePage a {
  color: #747678;
}

.ExpandedPanel .AccountsMenuPanel {
  display: block;
}

.CollapsedPanel .AccountsMenuPanel {
  display: none;
}

/*------------------------------------*
	$Account Context Menu
*------------------------------------*/
.AccountContextMenu,
.AccountSummariesMenu {
  display: block;
  border-bottom: 2px solid #6e2f92;
}

.AccountSummariesMenu {
  margin: 1em 0;
}

.AccountContextMenu ul,
.AccountContextMenu ul li,
.AccountSummariesMenu ul,
.AccountSummariesMenu ul li {
  display: inline-block;
  margin: 0 0 -0.5px 0;
  padding: 0;
  list-style: none;
}

.AccountContextMenu ul,
.AccountSummariesMenu ul {
  width: 100%;
  margin-bottom: -1px;
}

.AccountContextMenu ul li,
.AccountSummariesMenu ul li {
  width: auto;
  margin-bottom: 1px;
  background: #fff;
  color: #6e2f92;
  font-weight: 700;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.AccountContextMenu ul li a,
.AccountSummariesMenu ul li a {
  display: block;
  padding: 15px 1rem 14px;
  text-align: center;
  text-decoration: none;
}

.AccountContextMenu ul li:hover,
.AccountContextMenu ul li:focus,
.AccountSummariesMenu ul li:hover,
.AccountSummariesMenu ul li:focus {
  background: #6e2f92;
  color: #fff !important;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.AccountContextMenu ul li a:hover,
.AccountSummariesMenu ul li a:hover {
  color: #fff;
}

.AccountContextMenu ul li.ActivePage,
.AccountSummariesMenu ul li.ActivePage,
.MonthlyStatementChoicePage .StatementMenuItem,
.MonthlyStatementPage .StatementMenuItem {
  background: #6e2f92;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.AccountContextMenu ul li.ActivePage a,
.AccountSummariesMenu ul li.ActivePage a {
  color: #fff;
}

.AccountContextMenu ul li.ActivePage:hover,
.AccountContextMenu ul li.ActivePage:focus,
.AccountSummariesMenu ul li.ActivePage:hover,
.AccountSummariesMenu ul li.ActivePage:focus {
  color: #fff;
}

.MonthlyStatementChoicePage .AccountContextMenu .StatementMenuItem a,
.MonthlyStatementPage .AccountContextMenu .StatementMenuItem a {
  color: #fff !important;
}

/*------------------------------------*
	$Category Styles
*------------------------------------*/
.HorizontalNavigation {
  background-color: #bbbbbb;
  color: #fff;
}

.AccountSummaryOptions .ShowOptions,
.AccountSummaryOptions .HideOptions {
  background-color: #eeeeef;
  border-top: 1px solid #6e2f92;
}

.AccountBox {
  border: 1px solid #6e2f92;
}

/*------------------------------------*
	$Advert
*------------------------------------*/
.MainAdvert {
  overflow: hidden;
  margin: 1em 0;
  padding: 32px 29px;
  background: #6e2f92;
}

.MainAdvert h2{
  margin: 0;
  padding: 0;
}

.MainAdvert .ActionButton a,
.MainAdvert .ActionButton a:hover{
  float: none;
  background-image: none;
}

.AdContent{
  overflow: hidden;
  width: 49%;
  padding: 22px 18px 10px;
  border-radius: 5px;
  background: #f1ebf4;
}

/*--------------------------------------------------------------
PRODUCT PAGES
----------------------------------------------------------------*/
.C2CSummary {
  float: left;
  width: 49%;
  padding-right: 2%;
  padding-bottom: 15px;
}

.C2CSummary .ActionButton{
  background: none;
  text-align: center;
}

.C2CSummary .ActionButton a{
  float: none;
  margin: 0;
}

.C2CProduct{
  color: #6e2f92;
  font-family: "VAG Rounded Bold", arial;
  font-size: 1.5rem;
}

.CSCSumTR {
  display: table;
  width: 100%;
  background: #fff;
}

.CSCSumTH,
.CSCSumTD {
  display: table-cell;
  width: 50%;
  padding: 10px;
}

.CSCSumTH {
  font-weight: 600;
  vertical-align: middle;
}

.CSCSumTH.alignTop{
  vertical-align: top;
}

.CSCSumTD {
  background: #eaeaec;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
}

.C2CRate{
  background: #f5e5ff;
}

.C2CProdRate{
  float: left;
  color: #6e2f92;
  font-family: "VAG Rounded Bold", arial;
  font-size: 1.5rem;
}

.C2CProdPercent{
  float: left;
  color: #6e2f92;
  font-family: "VAG Rounded Bold", arial;
}

.C2CProductPage .CSCSumTH {
  width: 30%;
}

.C2CProductPage .CSCSumTD {
  width: 60%;
}

.C2CProductPage .C2CSummary{
  width: 100%;
  padding: 0;
}

.C2CProductPage .CSCSumTH {
  vertical-align: top;
  border-top: 2px solid #fff;
}

.C2CProductPage .ExpandedPanel,
.C2CProductPage .CollapsedPanel{
  clear: both;
  overflow: hidden;
  width: 100%;
  margin-top: 10px;
}

.C2CProductPage .ExpandedPanel{
  border: 1px solid #ccc;
}

.C2CBtnSummary{
  display: block;
  padding: 15px 10px;
  font-family: "VAG Rounded Bold", arial;
  font-size: 1.5rem;
}

.CollapsedPanel .C2CBtnSummary{
  border: 1px solid #ccc;
  background: transparent url("../images/icons/DownBtnArrowDown.png") no-repeat right 20px center;
  color: #6e2f92;
}

.CollapsedPanel .C2CBtnSummary:hover{
  background: #6e2f92 url("../images/icons/DownBtnArrowHoverDown.png") no-repeat right 20px center;
  color: #fff;
}

.ExpandedPanel .C2CBtnSummary:hover{
  background: #6e2f92 url("../images/icons/DownBtnArrowHoverUp.png") no-repeat right 20px center;
  color: #fff;
}

.ExpandedPanel .C2CBtnSummary{
  display: block;
  background: #6e2f92 url("../images/icons/DownBtnArrowHoverUp.png") no-repeat right 20px center;
  color: #fff !important;
}

.InterestTable{
  padding: 0;
}

ul.KeyFeat{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul.KeyFeat li{
  padding: 0 0 10px 30px;
  background: url("../images/icons/icon-key-features-tick.png") no-repeat top left;
}

.DidYouKnow,
.TermsConditions{
  padding: 10px
}

.TermsConditions a{
  display: table;
  padding-left: 20px;
  background: url("../images/icons/Terms-bullet-links.png") no-repeat left center;
}

.TermsConditions a:hover{
  background: url("../images/icons/Terms-bullet-links-hover.png") no-repeat left center;
}

.C2CSummary table{
  margin: 0;
  font-size: 16px;
}

.InfoBoxes{
  display: table;
  border-collapse: separate;
  border-spacing: 20px;
}

.InfoBoxes .InfoBox{
  color: #fff;
}

.InfoBoxes a{
  display: table-cell;
  padding: 10px;
  background: #8cc63e;
}

.InfoBoxes a,
.InfoBoxes a:hover{
  text-decoration: none;
}

.InfoBoxes .InfoBoxInsurance{
  width: 30%;
  margin-right: 20px;
}

.InfoBoxes .InfoBoxSavings{
  Width: 60%;
}

.InfoBoxHeading{
  color: #6e2f92;
  font-family: "VAG Rounded Bold", arial;
  font-size: 1.250rem;
}

.SortCodeInput{
  width: 42px !important;
}

.spacerDiv {
  display: block;
  display: table;
  width: 100%;
  margin: 45px 0;
}

/*---------------------------------------------*
	$Responsive - Mobile/Tablet Style Display
*---------------------------------------------*/
@media print {
  *{
    color: #000 !important;
  }

  #FullPage {
    display: block !important;
  }

  body,
  html,
  #FullPage,
  #form1 {
    height: auto !important;
  }

  .AccountStatusControl,
  .AccountMaintainScreen,
  .ActionButtons,
  .AccountContextMenu,
  .MonthlyStatementChoicePage,
  .MonthlyStatementPage #HeaderDiv,
  #LeftSideDiv,
  .StatementPage .MonthlyStatementChoiceMenuItem,
  .StatementSelectionDescription,
  #StatementControl select,
  a.PrintButton,
  #PendingTransactionsControl,
  .CutomStatementPanel,
  .ActionButton,
  .ActionButtons,
  #FooterDiv,
  .ConfirmPageButton,
  .DGS_Wording,
  .StatementKey,
  p.StatementPrintContent,
  #StatementControl_ExportPanel,
  #HeaderDivContent {
    display: none;
  }

  .MonthlyStatementPage .StatementDocument,
  .StatementPage .StatementDocument,
  .InterestHistoryPage .StatementDocument {
    padding: 0;
    border: 0 none;
  }

  .MonthlyStatementPage h2,
  .ProfitAER,
  .StatementPage h1,
  .InterestHistoryPage h1{
    display: none;
  }

  .PrintOnly {
    display: block
  }

  table {
    border: 1px solid #000;
  }

  th,
  td {
    border-bottom: 1px solid #000;
  }
}

/*------------------------------------*
    Fraud Warning
*------------------------------------*/
.TakeFiveLogo {
  float: right;
}

.TakeFiveLogo img {
  float: right;
  width: 40%;
  height: 40%;
}

#FraudWarningWrapper {
  position: fixed;
  z-index: 91;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#FraudWarningBackground {
  position: absolute;
  z-index: 92;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.75;
  background: #000;
  filter: alpha(opacity=75);
}

#FraudWarningMessage {
  position: absolute;
  z-index: 93;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
}

#FraudMessageInner {
  display: grid;
  align-self: center;
  grid-template-columns: auto auto;
  grid-template-areas: "fraud-heading fraud-heading"
    "fraud-content fraud-content"
    "stop-link continue-link";
  background: #fff;
}

#FraudHeadingWrapper {
  grid-area: fraud-heading;
  padding-top: 85px;
  background: #9e121a url(../images/icons/triangle-exclamation-light.svg) top 25px center no-repeat;
  background-size: 80px;
  color: #fff;
  text-align: center;
}

#FraudHeadingWrapper h2 {
  color: #fff;
  font-size: 2em;
  font-weight: normal;
}

#FraudContentWrapper {
  box-sizing: content-box;
  grid-area: fraud-content;
  width: 700px;
  margin-bottom: 1em;
  padding: 10px;
  border-bottom: 1px solid #000;
  place-self: center;
}

#StopTransactionLinkWrapper,
#ContinueTransactionLinkWrapper {
  width: 350px;

  /*text-align: center;*/
  margin: 1em 1em 2em 1em;

  a {
    width: 80%;
  }
}

#StopTransactionLinkWrapper {
  justify-self: end;
  grid-area: stop-link;
}

#ContinueTransactionLinkWrapper {
  justify-self: start;
  grid-area: continue-link;
}

/*#StopTransactionLinkWrapper a {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  margin: 0px;
  min-height: 2.6rem;
  line-height: 4.6rem;
  font-size: 1rem;
  font-weight: bold;
  background: #fff;
}
#StopTransactionLinkWrapper a:hover {
  background: #f3f3f3;
}*/
@media screen and (max-width:700px) {
  #FraudMessageInner {
    grid-template-columns: auto;
    grid-template-areas: "fraud-heading"
      "fraud-content"
      "stop-link"
      "continue-link";
  }

  #FraudContentWrapper {
    width: auto;
  }

  #ContinueTransactionLinkWrapper,
  #StopTransactionLinkWrapper {
    justify-self: left;
    margin-bottom: 1em;
    text-align: center;
  }

  #ContinueTransactionLinkWrapper.ActionButton a,
  #StopTransactionLinkWrapper.ActionButton a {
    float: none;
  }
}