/*------------------------------------*
	SUMMARY
	
	Layout Style Sheet for OFIS Controls 
	
	For Core Brand Styles - see styles.css 
	For AAO Control Layout - see layout_aao_controls.css 
*------------------------------------*/

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

/*
	Base Elements 
    LocalServerTimeControl
	Buttons 
	Collapsible Styles
	Errors and Messages
	Account Details
    LoginAndResetControl
	Maturity
	Account Status Control
	Secure Message & Inbox
	Account Personalisation
	Summary & Statement Tables
    Goals
    SCA
    Client Account
	Change Details
    ModalWindow
	Chart
    CalendarControl
    Tax Year Countdown
    Progress Control
    JQuery Date Control
    Password Control
	Responsive
*/

/*------------------------------------*
	$Base Elements
*------------------------------------*/
body {
  position: relative;
}

.QuestionWrapper {
  min-width: 0;
}

#EditMemorableDetails_pnlEditState input {
  min-width: 14em;
}

.MonthlyStatement .QuestionWrapper {
  clear: both;
  width: 100%;
}

.Question {
  float: left;
  width: 35%;
  margin: 0.25em 0;
  padding: 0.25em 0;
  border: 1px solid transparent;
}

.EditNameControl .Question {
  width: auto;
}

.ExtraInfo {
  position: relative;
  float: left;
  padding-top: 9px;
}

.Answer {
  float: left;
  margin: 0.25em 0;
}

div.Answer.Confirmation {
  width: 65%;
}

.Answer.Confirmation {
  margin: 0.25em 0;
  padding: 0.25em;
  border: 1px solid transparent;
  font-weight: bold;
}

.AccLabel {
  position: absolute;
  left: -9000px;
}

.ConfirmationRow {
  overflow: hidden;
}

.ConfirmationRow label,
.ConfirmationRow span {
  float: left;
  width: 35%;
  margin: 0.25em 0;
  padding: 0.25em 0;
  border: 1px solid transparent;
}

.ConfirmationValue {
  float: left;
  margin: 0.25em 0;
  padding: 0.25em;
  border: 1px solid transparent;
  font-weight: bold;
}

.SecureMessageConfirmValue {
  float: left;
  width: 65%;
}

.SecureMessageDeletePage .ConfirmationValue {
  margin: 15px 0;
  padding: 0;
}

.SecureMessageReplyPage .SecureMessageConfirmValue,
.SecureMessageCreatePage .ConfirmationValue {
  margin: 20px 0;
}

.SecureMessageDeletePage .ConfirmationRow p {
  float: left;
  width: 35%;
}

select,
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="email"] {
  height: 30px;
  margin: 0.25em 0.25em 0.25em 0;
  padding: 0.25em;
  border: 1px solid #888888;
  font: inherit;
}

select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus {
  display: inline-block;
  border: 1px solid #282828;
  outline: none !important;
}

textarea {
  margin: 0.25em 0.25em 0.25em 0;
  padding: 0.25em;
  border: 1px solid #888888;
  font: inherit;
}

textarea:focus {
  display: inline-block;
  border: 1px solid #282828;
  outline: none !important;
}

input[type="radio"]:not(old),
input[type="checkbox"]:not(old) {
  display: none;
}

.InboxPage input[type="radio"]:not(old) {
  display: inline-block;
  margin: 0 0 0 5px;
}

input[type="radio"]:not(old)+label,
input[type="checkbox"]:not(old)+label {
  display: inline-block;
  margin-bottom: 10px;
  margin-left: 0;
  padding-left: 35px;
  line-height: 22px;
  cursor: pointer;
  cursor: hand;
}

input[type="radio"]:not(old)+label {
  background: url(../images/icons/InputRadioUnchecked.png) no-repeat 0 0 /20px;
}

input[type="checkbox"]:not(old)+label {
  background: url(../images/icons/InputCheckUnchecked.png) no-repeat 0 0 /20px;
}

input[type="radio"]:checked:not(old)+label {
  background: url(../images/icons/InputRadioChecked.png) no-repeat 0 0 /20px;
}

input[type="checkbox"]:checked:not(old)+label {
  background: url(../images/icons/InputCheckChecked.png) no-repeat 0 0 /20px;
}

input[disabled="disabled"]+label {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.RememberMeCheckBoxDiv {
  margin: 1em 0;
}

.RememberMeCheckBox>input {
  margin-right: 0.5em;
}

input.NationalInsuranceNumber1,
input.NationalInsuranceNumber2,
input.NationalInsuranceNumber3,
input.NationalInsuranceNumber4,
input.NationalInsuranceNumber5 {
  width: 2.2em;
  margin-right: 0.5em;
  text-align: center;
}

input.NationalInsuranceNumber5 {
  width: 1.1em;
}

/*------------------------------------*
	$LocalServerTimeControl 
*------------------------------------*/
#LocalServerTimeControl {
  float: right;
  padding: 0.5em 0;
}

/*------------------------------------*
	$Collapsible Style
*------------------------------------*/
.CollapsedPanel .Expanded,
.ExpandedPanel .Collapsed {
  display: block;
}

.ExpandedPanel .Expanded,
.CollapsedPanel .Collapsed {
  display: none;
}

#InterestStatementChoice .ExpandedPanel .Expanded,
#InterestStatementChoice .CollapsedPanel .Collapsed {
  display: block;
}

/*------------------------------------*
	$Errors and Messages
*------------------------------------*/
.Alert.Error,
.Error,
.Errors,
.Information,
.Warning,
.InformationDescription {
  clear: both;
  display: block;
  margin: 0.5em 0;
  padding: 0.5em;
  background: #b84439;
  color: #fff;
}

.Information {
  background-color: #8cc63e;
}

.Warning {
  background: #b84439;
}

.TransactionWizardPage .Warning h3.warning-title {
  color: #ffffff;
}

/*------------------------------------*
	$Account Details
*------------------------------------*/
.AccountMaintainScreen {
  overflow: hidden;

  /*border-bottom: 1px solid #ccc;*/
}

.maintenanceinformationheader {
  clear: both;

  /*border-top: 1px solid #ccc;*/
}

.maintenancelabel {
  float: left;
  width: 35%;
  margin: 0.25em 0;
  padding: 0.25em 0;
  border: 1px solid transparent;
}

.maintenancevalue {
  float: left;
  margin: 0.25em 0;
  padding: 0.25em 0;
  border: 1px solid transparent;
  font-weight: bold;
}

/*------------------------------------*
	$LoginAndResetControl
*------------------------------------*/
.LoginContainer {
  overflow: hidden;
  margin-top: 70px;
  padding: 23px 33px;
  border: 1px solid #6e2f92;
}

.UserName {
  padding-top: 4%;
}

.Password {
  padding-bottom: 4%;
}

.RememberMe,
.RememberMe .CheckBoxQuestion,
.RememberMe .ActionButton {
  float: left;
}

.LogInPage .Question {
  width: 20%;
  font-weight: 700;
}

#MemInfoTip {
  clear: both;
  width: 100%;
}

.MemorableDataDescription {
  font-weight: 700;
}

.MemorableDataPanel1 select {
  margin-left: 0;
}

.RememberMe .CheckBoxQuestion {
  margin: 25px 40px 25px 0;
}

.RememberMe .ActionButton {
  margin-right: 25px;
}

.MemorableDataPanel2 select {
  margin-left: 20px;
}

.MemorableDataPanel3 select {
  margin-left: 40px;
}

.InputTip {
  clear: both;
  display: block;
  width: 100%;
  padding-bottom: 10px;
  font-style: italic;
}

/*------------------------------------*
	$Maturity
*------------------------------------*/
#MaturityOptionsControl_MaturityOptionsDiv {
  clear: both;
}

.maturityinformationtype {
  clear: both;
}

.MaturityRateInformation {
  display: none;
}

.MaturityOption {
  margin-bottom: 1em;
  padding-bottom: 1em;
}

.MaturityOption textarea {
  width: 100%;
  height: 200px;
}

.MaturityOption.UKTaxResidency {
  padding-bottom: 0.5em;
}

.Maturity_AER {
  clear: both;
  width: 100%;
  padding-top: 20px;
}

.mat_question {
  float: left;
  clear: both;
  width: 25%;
  margin: 0.25em 0;
  padding: 0.25em 0;
}

.mat_answer {
  float: left;
  width: 25%;
  margin: 0.5em 0;
}

.mat_link {
  margin: 0.5em 0;
}

.TermsBox {
  overflow: auto;
  width: 100%;
  height: 180px;
  margin: 10px 0;
  padding: 5px;
  border: 1px solid #7aa428;
  border-radius: 5px;
  background-color: #fff;
  line-height: 17px;
}

.UnpaidInterestDestination {
  padding-bottom: 30px;
}

#MaturityOptionsControl .OptionSelected label,
#MaturityOptionsControl .Cell6 label {
  text-indent: -9000px;
}

.MaturityOption.Confirmation .Question {
  clear: both;
}

.AccountInfo .ActionButton {
  margin: 0;
  padding: 0;
  text-align: left;
}

.AccountInfo .ActionButton a {
  padding: 0;
  background: none;
  color: #000;
  text-decoration: underline;
}

/*.AccountInfo .Button {color:#005694;}*/
.AccountInfo .Button:hover {
  background-color: transparent;
  color: #666;
  text-decoration: underline;
}

/*.AccountInfo tr:hover {background: none;}*/

/*------------------------------------*
	$Account Status Control
*------------------------------------*/
.AccountStatusControl {
  position: relative;
  margin-top: 1em;
}

/* Hide User Details from Savings View */
.AccountStatusControl.SavingsAccountStatus .UserDetails {
  display: none;
}

/* Hide headings 'off screen' to allow usage by accessibility tool */
.AccountStatusControl .ProductName .Question,
.AccountStatusControl .CompanyName .Question {
  position: absolute;
  left: -9000px;
}

/* Account Name (Alias for Client Acc) */
.AccountStatusControl .ProductName,
.AccountStatusControl .CompanyName {
  display: block
}

.AccountStatusControl .ProductName .Answer,
.AccountStatusControl .CompanyName .Answer {
  padding-left: 0;
  color: #6e2f92;
  font-size: 1.286em;
}

.AccountStatusControl .PseudoName .Answer,
.AccountStatusControl .FriendlyName .Answer {
  padding-left: 0;
}

/* Account Balance */
.AccountStatusControl .PseudoName .Question,
.AccountStatusControl .PseudoName .Answer,
.AccountStatusControl .FriendlyName .Question,
.AccountStatusControl .FriendlyName .Answer,
.AccountStatusControl .Balance .Question,
.AccountStatusControl .Balance .Answer {
  float: left;

  /*width: auto;*/
  padding-right: 4px;
  padding-left: 0;
}

/* User Details (Logged In User) */
.AccountStatusControl .UserDetails .Question,
.AccountStatusControl .UserDetails .Answer.Confirmation,
.AccountStatusControl .AccountStatus .Question,
.AccountStatusControl .AccountStatus .Answer.Confirmation {
  float: none;
  display: inline-block;
  width: auto;
  padding-right: 0;
}

/*------------------------------------*
	$Secure Message & Inbox
*------------------------------------*/
.InboxNotificationControl a {
  position: relative;
  width: 100%;
  padding: 40px 100px 40px 15px;
  border-radius: 0;
  background: #6e2f92 url(../Images/icons/inbox.png) right 5px top 20px no-repeat;
  color: #fff;
  text-align: right;

  &:hover {
    background: #642c85 url(../Images/icons/inbox.png) right 5px top 20px no-repeat;
  }
}

.InboxNotificationControl .NewMessageCount {
  position: absolute;
  top: 15px;
  right: 4px;
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 2px solid #fff;
  border-radius: 100px;
  background: #6e2f92;
  color: #ffffff;
  font-size: 0.75em;
  line-height: 25px;
  text-align: center;
}

.InboxNotificationControl .NewMessageCount.Waiting {
  background-color: darkred;
}

.InboxPage .InboxNotificationControl {
  position: relative;
  width: 100%;
  padding: 65px 15px 15px 25px;
  background: #ededed url(../Images/icons/inbox.png) left 5px top 5px no-repeat;
  color: #2e2e2e;
  text-align: left;
}

/* Sets the position of the 'create new message' button */
#InboxSubMenu {
  text-align: right;
}

.InboxMessage {
  margin: 0.75em 0;
  border: 1px solid #e5e6e8;
}

.InboxMessage-Summary {
  overflow: hidden;
  padding: 10px;
}

.InboxMessage .InboxMessage-Toggle {
  color: #6e2f92;
  font-weight: 700;
}

.InboxMessage .InboxMessage-Toggle:hover {
  color: #8cc63e;
}

.InboxMessage-Header {
  overflow: hidden;
}

.InboxMessage-Header-Read,
.InboxMessage-Header-Unread {
  overflow: hidden;
  padding: 10px;
  cursor: pointer;
}

.InboxMessage-Header-Unread {
  background: #fdf3f9;
  font-weight: bold;
}

.ExpandedPanel .InboxMessage-Header-Read,
.ExpandedPanel .InboxMessage-Header-Unread {
  border-bottom: 1px solid #f2f3f5;
}

.InboxMessage.Expired {
  color: #999;
}

.InboxMessage-Read,
.InboxMessage-Unread {
  float: left;
  width: 46px;
  height: 56px;
  background: 0 1px no-repeat;
  text-indent: -9000px;
}

.InboxMessage-Header-Read .InboxMessage-Read,
.InboxMessage-Header-Unread .InboxMessage-Unread {
  display: block;
}

.InboxMessage-Header-Unread .InboxMessage-Read,
.InboxMessage-Header-Read .InboxMessage-Unread {
  display: none;
}

.BroadcastMessage .InboxMessage-Read {
  background-image: url(../images/inbox/Icon_DocumentRead.png);
}

.BroadcastMessage .InboxMessage-Unread {
  background-image: url(../images/inbox/Icon_DocumentUnread.png);
}

.Expired .InboxMessage-Read,
.Expired .InboxMessage-Unread {
  background-image: url(../images/inbox/Icon_DocumentExpired.png);
}

.SystemMessage .InboxMessage-Read {
  background-image: url(../images/inbox/Icon_DocumentRead.png);
}

.SystemMessage .InboxMessage-Unread {
  background-image: url(../images/inbox/Icon_DocumentUnread.png);
}

.DocumentMessage .InboxMessage-Read {
  background-image: url(../images/inbox/Icon_DocumentWithAttachmentRead.png);
}

.DocumentMessage .InboxMessage-Unread {
  background-image: url(../images/inbox/Icon_DocumentWithAttachmentUnread.png);
}

.AdvisorMessage .InboxMessage-Read {
  background-image: url(../images/inbox/Icon_MessageRead.png);
}

.AdvisorMessage .InboxMessage-Unread {
  background-image: url(../images/inbox/Icon_MessageUnread.png);
}

.CustomerMessage .InboxMessage-Read {
  background-image: url(../images/inbox/Icon_MessageSentRead.png);
}

.InboxMessage-Subject {
  float: left;
  overflow: hidden;
  padding: 4px 3px 5px 3px;
}

.MessageDirection {
  display: inline-block;
  line-height: 25px;
}

.MessageDate {
  display: inline-block;
  margin-left: 4px;
  line-height: 25px;
}

.MessageSubjectText {
  display: block;
  line-height: 25px;
}

.InboxMessage-Toggle {
  float: right;
  margin-top: 28px;
  line-height: 25px;
  text-align: right;
}

.InboxMessage-Toggle.Collapsed,
.MonthlyStatementChoicePage #SearchTools.ExpandedPanel h2 a,
#InboxSearchTools.ExpandedPanel h2 a.ToggleEvent,
#HideSearchButton a {
  padding-right: 20px;
  background: url(../images/inbox/arrow_up.png) center right no-repeat;
}

#HideSearchButton {
  text-align: right;
}

#HideSearchButton a {
  font-family: "VAG Rounded Bold", arial;
  font-size: 1.077em;
}

.MonthlyStatementChoicePage #SearchTools.CollapsedPanel h2 a,
.InboxMessage-Toggle.Expanded,
#InboxSearchTools.CollapsedPanel h2 a.ToggleEvent {
  padding-right: 20px;
  background: url(../images/inbox/arrow_down.png) center right no-repeat;
}

.InboxMessage-ActionButtons {
  text-align: right;
}

.InboxNavigationLinks {
  position: relative;
  height: 60px;
}

.PageInformation {
  position: absolute;
  top: 16px;
  left: 50%;
  display: block;
  width: 80px;
  margin-left: -40px;
  font-size: 1.154em;
  font-weight: bold;
  line-height: 1;
  text-align: center;
}

.PagingPageOf {
  font-size: 0.733em;
  font-weight: normal;
}

.NextPageButton {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: 40px;
}

.PreviousPageButton {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -88px;
}

.MessageText,
.PreFormattedMessage,
.MessageConfirm {
  margin: 0;
  padding: 10px 0;
  font-family: Arial, sans-serif;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.ReleatedMessageContent {
  margin-bottom: 0.5em;
  padding: 0.5em;
  border: 1px solid #e5e5e5;
  color: #848484;
}

.Inbox-Search-Wrapper {
  padding: 9px;
  border: 1px solid #ededed;
}

#InboxSearchTools h2 {
  margin: 0;
  font-size: 1.077em;
  font-weight: normal;
}

.Inbox-SearchDates .DateLabel,
.Inbox-SearchDates #DateSelectionControl {
  /*float: left;*/
  margin-right: 4px;
}

.Inbox-SearchDates,
.Inbox-SearchStatuses,
.Inbox-SearchDirection {
  margin: 5px 0;
}

.Inbox-Search-Wrapper .ActionButton,
.Inbox-Search-Wrapper .ActionButton a {
  margin: 0.25em;
}

#SearchOptions {
  overflow: hidden;
  margin: 10px 0;
  padding: 10px 0;
  border: solid #c8c8c8;
  border-width: 1px 0;
}

#SecureMessageCreateControl #AmendButton,
#SecureMessageReplyControl #AmendButton,
#SecureMessageReplyControl #BackButton {
  float: left;
}

.SecureMessageCreateMenu {
  text-align: right;
}

.SecureMessageCreateMenu ul {
}

.SecureMessageCreateMenu ul li {
  list-style: none;
}

/*------------------------------------*
	$Account Personalisation
*------------------------------------*/

/* Hide the radio buttons */
.AccountImageSelector [type='radio'] {
  display: none;
}

/* Add a image border to avoid shift on selection */
.AccountImageSelector label img {
  opacity: 0.5;
  border: 3px solid transparent;
  pointer-events: none;
}

img:selection {
  background-color: transparent;
}

/* Add a style for the selected option */
.AccountImageSelector [type='radio']:checked+label img {
  opacity: 1;
  border-color: #8cc63e;
}

.AccountImageSelector label {
  display: inline-block;
  padding-right: 10px;
}

.PersonaliseAccountControl .PersonaliseAccountsAccountWrapper:nth-child(2n+2) {
  background: #f1f1f1;
}

.PersonaliseAccountsAccountWrapper .QuestionWrapper {
  display: table;
}

.PersonaliseAccountControl .QuestionWrapper .Question,
.PersonaliseAccountControl .QuestionWrapper .Answer {
  float: none;
  display: table-cell;
  padding: 5px;
}

.PersonaliseAccountControl .QuestionWrapper .Question {
  width: 195px;
}

.CurrentFriendlyAccountImage.baby a,
.CurrentFriendlyAccountImage.car a,
.CurrentFriendlyAccountImage.education a,
.CurrentFriendlyAccountImage.gift a,
.CurrentFriendlyAccountImage.holiday a,
.CurrentFriendlyAccountImage.home a,
.CurrentFriendlyAccountImage.rainy-day a,
.CurrentFriendlyAccountImage.wedding a {
  height: 32px;
  padding-left: 42px;
  background-repeat: no-repeat;
}

.CurrentFriendlyAccountImage.baby a {
  background-image: url('../images/icons/Personalisation/baby-32.png');
}

.CurrentFriendlyAccountImage.car a {
  background-image: url('../images/icons/Personalisation/car-32.png');
}

.CurrentFriendlyAccountImage.education a {
  background-image: url('../images/icons/Personalisation/education-32.png');
}

.CurrentFriendlyAccountImage.gift a {
  background-image: url('../images/icons/Personalisation/gift-32.png');
}

.CurrentFriendlyAccountImage.holiday a {
  background-image: url('../images/icons/Personalisation/holiday-32.png');
}

.CurrentFriendlyAccountImage.home a {
  background-image: url('../images/icons/Personalisation/home-32.png');
}

.CurrentFriendlyAccountImage.rainy-day a {
  background-image: url('../images/icons/Personalisation/rainy-day-32.png');
}

.CurrentFriendlyAccountImage.wedding a {
  background-image: url('../images/icons/Personalisation/wedding-32.png');
}

.CategorisedAccountSummaryControl tr .OptionsData {
  background-position: top right;
  background-repeat: no-repeat;
}

.CategorisedAccountSummaryControl tr.baby .OptionsData {
  background-image: url('../images/icons/Personalisation/baby-32.png');
}

.CategorisedAccountSummaryControl tr.car .OptionsData {
  background-image: url('../images/icons/Personalisation/car-32.png');
}

.CategorisedAccountSummaryControl tr.education .OptionsData {
  background-image: url('../images/icons/Personalisation/education-32.png');
}

.CategorisedAccountSummaryControl tr.gift .OptionsData {
  background-image: url('../images/icons/Personalisation/gift-32.png');
}

.CategorisedAccountSummaryControl tr.holiday .OptionsData {
  background-image: url('../images/icons/Personalisation/holiday-32.png');
}

.CategorisedAccountSummaryControl tr.home .OptionsData {
  background-image: url('../images/icons/Personalisation/home-32.png');
}

.CategorisedAccountSummaryControl tr.rainy-day .OptionsData {
  background-image: url('../images/icons/Personalisation/rainy-day-32.png');
}

.CategorisedAccountSummaryControl tr.wedding .OptionsData {
  background-image: url('../images/icons/Personalisation/wedding-32.png');
}

/* - Account Status Page Icons - */
.AccountBox.baby,
.AccountStatusControl.SavingsAccountStatus.baby {
  background-image: url('../images/icons/Personalisation/baby-80-mobile.png');
}

.AccountBox.car,
.AccountStatusControl.SavingsAccountStatus.car {
  background-image: url('../images/icons/Personalisation/car-80-mobile.png');
}

.AccountBox.education,
.AccountStatusControl.SavingsAccountStatus.education {
  background-image: url('../images/icons/Personalisation/education-80-mobile.png');
}

.AccountBox.gift,
.AccountStatusControl.SavingsAccountStatus.gift {
  background-image: url('../images/icons/Personalisation/gift-80-mobile.png');
}

.AccountBox.holiday,
.AccountStatusControl.SavingsAccountStatus.holiday {
  background-image: url('../images/icons/Personalisation/holiday-80-mobile.png');
}

.AccountBox.home,
.AccountStatusControl.SavingsAccountStatus.home {
  background-image: url('../images/icons/Personalisation/home-80-mobile.png');
}

.AccountBox.rainy-day,
.AccountStatusControl.SavingsAccountStatus.rainy-day {
  background-image: url('../images/icons/Personalisation/rainy-day-80-mobile.png');
}

.AccountBox.wedding,
.AccountStatusControl.SavingsAccountStatus.wedding {
  background-image: url('../images/icons/Personalisation/wedding-80-mobile.png');
}

.AccountStatusControl.SavingsAccountStatus.baby,
.AccountStatusControl.SavingsAccountStatus.car,
.AccountStatusControl.SavingsAccountStatus.education,
.AccountStatusControl.SavingsAccountStatus.gift,
.AccountStatusControl.SavingsAccountStatus.gift,
.AccountStatusControl.SavingsAccountStatus.holiday,
.AccountStatusControl.SavingsAccountStatus.home,
.AccountStatusControl.SavingsAccountStatus.rainy-day,
.AccountStatusControl.SavingsAccountStatus.wedding {
  background-position: bottom right;
  background-repeat: no-repeat;
}

.AccountBox {
  background-position: top right;
  background-repeat: no-repeat;
}

.AccountImageSelection .ChangeImage-Toggle,
.AccountImageSelection .HideImage-Toggle {
  margin: 0.25em;
}

/*------------------------------------*
	$Summary & Statement Tables
*------------------------------------*/

/*SCA ISA Account Summary*/
.ActiveISAAccountSummaryPage #ScaNotificationControl {
  margin-bottom: 15px;
}

/* Amount and Balance Column Style */
.MonthlyStatementPage .ClosingBalanceAmount,
.MiniStatementTable .Column5,
.MiniStatementTable .Column6,
.MiniStatementTable .Column7,
.OpeningBalanceAmount,
.ProcessedBalanceAmount,
.ClearedBalanceAmount {
  text-align: right;
}

/* Footer Style */
.TFooter1,
.TFooter2,
.TFooter3,
.TFooter4,
.TFooter5,
.TFooter6,
.TFooter7,
.TFooter8,
.TFooter9,
.AccountStatusFooter,
.StartingBalanceDescription,
.StartingBalanceValue,
.ProcessedBalanceDescription,
.ProcessedBalanceAmount,
.ClearedBalanceDescription,
.ClearedBalanceAmount,
.OpeningBalanceDescription,
.OpeningBalanceAmount,
.StartingBalanceRow .TransactionAmountColumn,
.ProcessedBalanceRow .TransactionAmountColumn,
.ClearedBalanceRow .TransactionAmountColumn,
.OpeningBalanceRow .TransactionAmountColumn {
  background: #6e2f92;
  color: #ffffff;
  font-weight: bold;
}

.TransactionAmountHeader,
.TransactionAmountColumn {
  /* Ref: TransactionAmountColumnDesktopDisplay */

  /* Comment out the following line if TransactionAmountColumn is to be displayed in Desktop view */
  display: none;
}

.MiniStatementTable .THeading5,
.MiniStatementTable .THeading6,
.MiniStatementTable .THeading7 {
  width: 7em;
  text-align: right;
}

.DGS_Wording {
  padding: 0 0.5em;
  border: 2px solid #2e2e2e;
}

/* Categorised Account Summary */

/* SCA Account Summary Notice */
.ViewNominatedAccountControl .UnverifiedNotification .ActionButton,
.UnverifiedNotification .ActionButton {
  text-align: center;
}

.NoticeContainer {
  padding: 20px;
  border: 5px solid #6e2f92;
  background: #fff;
  text-align: center;
}

.NoticeContainer h2 {
  color: #6e2f92;
}

.WelcomeMessagePrefix,
.WelcomeMessageBody {
  color: #6e2f92;
  font-family: "VAG Rounded Light", arial;
  font-size: 2.750rem;
}

.LastLogonDateValue,
.LastLogonTime,
.LastLogonTimeValue,
.EmailAddressValue {
  font-family: "VAG Rounded Bold", arial;
}

.BalanceInfo {
  font-family: "VAG Rounded Bold", arial;
  font-size: 1.3rem;
}

.AccountBox {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  margin: 1em 0;
  background-position: right 10px top 20px;
  color: #6e2f92;
}

.AccountBox h2 {
  margin: 0.5em 0 0.25em 0;
}

.AccountBox p {
  margin: 0.5em 0 0.25em 0;
}

.AccountBox .Header,
.AccountBox .Details {
  position: relative;
  padding: 0 20px;
}

.AccountBox .PseudoName {
  /*position: absolute;
        bottom: 0.25em;
        right: 20px;*/
  margin: 0.25em 0;
  font-weight: bold;
}

.AccountBox .Balance {
  font-family: "VAG Rounded Bold", arial;
  font-size: 2em;
}

.SummaryTotals {
  padding: 0.5em;
  background: #6e2f92;
  color: #ffffff;
}

.OptionsData {
  width: 180px;
  padding: 0.2em 32px 0.2em 0.2em;
}

.CollapsibleOptionsPanel.CollapsedOptions .OptionsList,
.CollapsibleOptionsPanel.CollapsedOptions .HideOptions,
.CollapsibleOptionsPanel.ExpandedOptions .ShowOptions {
  display: none;
}

.AccountSummaryOptions {
  position: relative;
}

.AccountSummaryOptions .ShowOptions,
.AccountSummaryOptions .HideOptions {
  display: block;
  padding: 10px 20px;
  background-position: right 20px center;
  background-repeat: no-repeat;
  text-decoration: none;
}

.AccountSummaryOptions .HideOptions {
  padding-right: 45px;
  background-image: url(../Images/icons/minus-16.png);
  color: #6e2f92;
  font-family: "VAG Rounded Bold", arial;
  text-align: right;
}

.AccountSummaryOptions .ShowOptions {
  padding-right: 45px;
  background-image: url(../Images/icons/plus-16.png);
  color: #6e2f92;
  font-family: "VAG Rounded Bold", arial;
  text-align: right;
}

.AccountSummaryOptions .OptionsList {
  overflow: hidden;
  padding: 0 0.5em 0.5em 0;
  background-color: #eeeeef;
}

.AccountSummaryOptions .OptionsList ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.AccountSummaryOptions .OptionsList li,
.AccountSummaryOptions .OptionsList li {
  float: left;
  box-sizing: border-box;
  width: 33%;
  margin: 0;
  padding: 0.5em 0 0 0.5em;
}

.AccountSummaryOptions .OptionsList li a {
  display: block;
  padding: 0.5em;
  border-radius: 20px;
  background: #8cc63e url("../images/icons/ForwardBtnArrow.png") no-repeat right 15px center;
  color: #282828;
  font-family: "VAG Rounded Bold", arial;
  text-align: center;
  text-decoration: none;
}

.AccountSummaryOptions .OptionsList li a:hover,
.AccountSummaryOptions .OptionsList li a:focus {
  background: #6e2f92 url("../images/icons/ForwardBtnArrowHover.png") no-repeat right 15px center;
  color: #fff;
}

#StatementControl {
  overflow: hidden;
  margin-top: 2em;
}

.DateTo {
  clear: both;
}

#StatementControl_ExportPanel {
  overflow: hidden;
}

/*
#------------------------------------*
    $MonthlyStatements
*------------------------------------*/
.StatementDocument {
  clear: both;
  padding: 25px;
  border: 2px solid #ccc;
}

.StatementDocument .CompanyDetails {
  overflow: hidden;
  padding-bottom: 20px;
  text-align: right;
}

.StatementDocument .CompanyDetails img {
  float: left;
  width: 300px;
}

.MonthlyStatement .QuestionWrapper .Answer {
  font-weight: 700;
}

.MonthlyStatement .MiniStatementTable {
  padding-top: 10px;
}

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

.MonthlyStatementForAllAccounts ul li {
  margin: 0;
  padding: 0;
}

.MonthlyStatementChoice ul {
  margin-left: 0;
  padding: 0;
  border-top: 1px solid #ccc;
  list-style: none;
}

.MonthlyStatementChoice ul li {
  margin: 0;
  padding: 0 10px;
  border-bottom: 1px solid #ccc;
}

.MonthlyStatementChoice ul li:nth-child(2n+1) {
  background: #f1f1f1;
}

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

.MonthlyStatementChoice ul li .Description {
  float: left;
  margin: 22px 0 0 0;
}

.MonthlyStatementChoice ul li .ActionButton {
  float: right;
}

.MonthlyStatementChoice .LatestMonthlyStatement {
  font-weight: bold;
}

.MonthlyStatementChoice .StatementsFilter {
  padding: 0 10px;
  border: 1px solid #ccc;
}

.MonthlyStatementsLoading {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  text-align: center;
}

.MonthlyStatementLoadingSpinner {
  float: none;
  width: 100px;
  margin: 0 auto;
}

.MonthlyStatementResults {
  position: relative;
}

.MonthlyStatementChoice.Loading #MonthlyStatementPeriods {
  opacity: 0.3;
}

#MonthlyStatementMenu ul {
  margin: 1em 0 0 0;
  padding: 0;
  text-align: right;
}

#MonthlyStatementMenu ul li {
  list-style: none;
}

.MonthlyStatementPage .ActionButtons a {
  float: none;
  clear: none;
}

.MonthlyStatementPage .ActionButtons a.PrintButton,
.MonthlyStatementPage .ActionButtons a.ExportToButton {
  float: right;
  margin-left: 1em;
}

/*------------------------------------*
	$Goals
*------------------------------------*/
.SavingsGoalProgress {
  position: relative;
  background-size: 100%;
  color: #fff;
  text-align: center;
}

.PercentageOverlay {
  position: absolute;
  color: rgb(0, 0, 0);
  color: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-weight: bold;
}

.SavingsGoalTotal {
  width: 100%;
  height: 100%;
  margin-top: 10px;
  background: #0b2742;
}

.SavingsGoalProgress .CurrentGoalProgress {
  float: left;
  display: inline-block;
  height: 100%;
}

.SavingsGoalProgress .RemainingGoalProgress {
  float: right;
  display: inline-block;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
}

/* Savings Goal Summary */
.SavingsGoals {
  margin-bottom: 20px;
}

.SavingsGoalSummaryControl .SavingsGoalSummary {
  float: left;
  box-sizing: border-box;
  width: calc(50% - 10px);
  margin: 0 0.5% 10px;
  padding: 10px;
  box-shadow: 1px 1px 2px #888888;
  background: #f9f9f9;
}

.SavingsGoalSummaryControl .SavingsGoalSummary h2 {
  margin-top: 0;
  font-size: 1.5em;
}

.SavingsGoalSummaryControl .SavingsGoalProgress {
  width: 100%;
  height: 110px;
}

.SavingsGoalSummaryControl .PercentageOverlay {
  top: 12%;
  right: 0;
  width: 100%;
  font-size: 5em;
  text-align: center;
}

.SavingsGoalSummaryControl .SavingsGoalProgress.Car {
  background: url('../images/style/car.jpg') no-repeat;
  background-size: 100%;
}

.SavingsGoalSummaryControl .SavingsGoalProgress.Other {
  background: url('../images/style/Other.jpg') no-repeat;
  background-size: 100%;
}

.SavingsGoalSummaryControl .SavingsGoalProgress.House {
  background: url('../images/style/House.jpg') no-repeat;
  background-size: 100%;
}

.SavingsGoalSummaryControl .SavingsGoalProgress.Wedding {
  background: url('../images/style/Wedding.jpg') no-repeat;
  background-size: 100%;
}

.SavingsGoalSummaryControl .SavingsGoalProgress.Baby {
  background: url('../images/style/Baby.jpg') no-repeat;
  background-size: 100%;
}

.SavingsGoalSummaryControl .SavingsGoalProgress.Education {
  background: url('../images/style/Education.jpg') no-repeat;
  background-size: 100%;
}

.SavingsGoalSummaryControl .SavingsGoalProgress.Holiday {
  background: url('../images/style/Holiday.jpg') no-repeat;
  background-size: 100%;
}

.SavingsGoalSummaryControl .SavingsGoalProgress.Business {
  background: url('../images/style/Business.jpg') no-repeat;
  background-size: 100%;
}

.SavingsGoalWizardControl li {
  list-style: none;
}

.SavingsGoalWizardControl li {
  list-style: none;
}

.SavingsGoalWizardControl li .aspNetDisabled {
  display: none;
}

/*------------------------------------*
	$SCA
*------------------------------------*/
#ScaVerificationControl .change-nom-btn {
  text-align: left;
}

#ScaVerificationControl .ActionButton.change-nom-btn a,
#ScaVerificationControl .ActionButton.change-nom-btn a:hover {
  background: none;
  color: #747678;
}

/*------------------------------------*
	$Client Account
*------------------------------------*/
.PageButtons {
  text-align: center;
}

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

.PageButtons .Previous {
  float: none;
  margin-right: 0.5em;
}

.PageButtons .Next {
  margin-left: 0.5em;
}

/*------------------------------------*
	$Change Details
*------------------------------------*/
.ChangeDetailsBox {
  display: table;
  width: calc(100% + 28px);
  margin: 10px -14px;
  border-collapse: separate;
  border-spacing: 15px 7px;
}

.ChangeDetailsControl {
  display: table-cell;
  width: 50%;
  padding: 10px;
}

.ChangeDetailsControl h2 {
  margin-top: 0.5em;
  padding-top: 0;
}

.ViewNameControl,
.ViewEmailAddressControl,
.ViewAddressControl,
.ViewNominatedAccountControl,
.ViewContactDetailsControl,
.ChangeSecurityDetailsControl,
.ViewContactPreferencesControl {
  width: 50%;
  border: 1px solid #efefef;
}

.ViewNominatedAccountControl .ActionButton,
.ViewContactPreferencesControl .ActionButton,
.ChangeAccountDetailsControl .ActionButton,
.ChangeDetailsBox .ActionButton {
  text-align: left;
}

/* Transaction Wizard Control (Nbs.Savings.UserControls.Transactions) */
.TransactionWizardControl .ExpandedPanel {
  margin-top: 0.5em;
  padding: 0.5em;
  border: 1px solid #ccc;
}

.TransactionWizardControl .CollapsedPanel {
  margin-top: 0.5em;
  padding: 0.5em;
  border: 1px solid #ccc;
}

.TransactionWizardControl .ExpandedPanel .TransactionDateSelection {
  display: block;
}

.TransactionWizardControl .CollapsedPanel .TransactionDateSelection {
  display: none;
}

.ViewContactPreferencesControl input:not([type="image"]) {
  /*opacity: 0;*/
  margin-right: 0.5em;
  margin-left: 0;
}

.TransactionWizardPage #ScaNotificationControl {
  margin-bottom: 1em;
}

/*------------------------------------*
	$ModalWindow
*------------------------------------*/
#ModalWrapper {
  position: fixed;
  z-index: 101;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
}

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

#ModalMessage {
  position: fixed;
  z-index: 1003;
  top: 0;
  right: 0;
  left: 0;
  display: none;
  margin: 100px 0 0 0;
  padding: 20px;
  background: #fff;
  text-align: center;
}

/*------------------------------------*
    $CalendarControl
 *------------------------------------*/
.NoticeChargePeriod {
  /*background: #f00 !important;
	color: #fff !important;*/
  background-image: url("../images/icons/redCorner.png");
  background-position: top right;
  background-size: 40px 32px;
  background-repeat: no-repeat;
}

table td.NoticeChargePeriod a {
  background: #f00 !important;
  background-image: none;
  color: #fff !important;
}

/*------------------------------------*
    $Tax Year Countdown Control
 *------------------------------------*/
.TaxYearCountDownControl {
  /*width: 25em;
    /*height:9em;
    float:left;*/

  /*background-color:#2e2e2e;*/
}

.TaxYearCountDownControl h2 {
  padding: 10px;
  background-color: #2e2e2e;
  color: #fff;
  text-align: center;

  /*font-size:20px;*/
}

.CountdownSectionsWrapper {
  margin-top: 10em;
  padding: 1em 2em;
  border-radius: 0.5em;
  background-color: #2e2e2e;
  color: #fff;
  text-align: center;
}

.TaxYearCountDownControl .CountDown {
  width: 1.5em;
  margin: 0 auto 0.25em auto;
  border-radius: 4px;
  background-color: #fff;
  color: #2e2e2e;
  font-size: 3em;
}

.TaxYearCountDownControl .Section {
  text-align: center;
}

.DayWrapper {
  margin: 0 auto;
}

.small {
  font-size: 0.667em;
}

.CountdownDescription {
  float: right;
  padding-top: 0.5em;
  text-align: left;
}

.TaxYearPeriod {
  margin: 0 0 8px 0;
  text-align: center;
}

.Section.HourWrapper,
.Section.MinuteWrapper,
.Section.SecondWrapper,
.TaxYearCountDownControl .CountdownLegend {
  display: none;
}

/*------------------------------------*
	$ProgressControl 
*------------------------------------*/
.Progress {
  position: relative;
  height: 30px;
  margin: 0 auto;
  margin-bottom: 1em;
  background: #848484;
  background-size: 100%;
  text-align: center;
}

.Progress .PercentageOverlay {
  display: block;
  opacity: 1;
  width: 100%;
  color: black;
  font-weight: bold;
  line-height: 30px;
  text-align: center;
}

.Progress .CurrentProgress {
  float: left;
  display: inline-block;
  opacity: 0.7;
  height: 100%;
  background: #2e2e2e;
}

.Progress .RemainingProgress {
  float: right;
  display: inline-block;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
}

/*------------------------------------*/

/* $JQuery Date Control */

/*-----------------------------------*/
.datePicker {
  clear: both;
  max-width: 320px;
  margin-top: 12px;
}

/* datepicker control */
.datePicker .ui-datepicker {
  margin-top: 14px;
  margin-left: 2px;
  padding: 0;
  background-color: #b6b0b0;
}

/* calender container */
.datePicker .ui-datepicker-calendar {
  margin: 0;
  border: 1px solid black;
}

.datePicker .ui-datepicker-calendar tr td {
  border: 1px solid #808080;
  text-align: center;
}

/* Header */
.datePicker .ui-datepicker-header {
  padding: 10px;
  border: 1px solid black;
  background-color: #6e2f92;
  color: #eee;
}

/* previous month text link */
.datePicker .ui-datepicker-header .ui-datepicker-prev {
  float: left;
  padding: 4px;
  color: #fff;
}

/* next month text link */
.datePicker .ui-datepicker-header .ui-datepicker-next {
  float: right;
  padding: 4px;
  color: #fff;
}

/* Prev/Next button hover behaviour */
.datePicker .ui-datepicker-header .ui-datepicker-prev:hover,
.datePicker .ui-datepicker-header .ui-datepicker-next:hover {
  background-color: white;
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* current month year header */
.datePicker .ui-datepicker-header .ui-datepicker-title {
  text-align: center;
}

/* header disabled prev/next buttons */
.datePicker .ui-datepicker-header .ui-state-disabled {
  opacity: 0.2;
}

.datePicker .ui-datepicker-header .ui-state-disabled:hover {
  background-color: inherit;
  color: inherit;
}

.datePicker .ui-datepicker-calendar td {
  padding: 0;
}

.datePicker .ui-datepicker-calendar .ui-state-default {
  display: block;
  padding: 4px;
}

.datePicker tr:hover,
.datePicker tr {
  background: inherit;
}

/* Unselectable day */
.datePicker .ui-datepicker-calendar .ui-datepicker-unselectable {
  opacity: 0.3;
}

/* selected Date */
.datePicker .ui-datepicker-calendar tr .ui-datepicker-today {
  background-color: orange;
  color: black;
}

.datePicker .ui-datepicker-calendar a:hover {
  text-decoration: none;
}

.datePicker .ui-datepicker-calendar .ui-state-default {
  background-color: #eee;
  color: #000;
}

/* Current Date */
.ui-datepicker-current-day .ui-state-active {
  background-color: orange !important;
}

/* Layout of control */
.DatePickerControl .Label {
  float: left;
  overflow: hidden;
  width: 90px;
  height: 26px;
  margin: 4px;
  margin-top: 0;
  padding-top: 6px;
  text-align: center;
}

/* Drop down styles */
.DatePickerControl .DropDown {
  float: left;
  overflow: hidden;
  height: 32px;
  margin: 4px;
  margin-top: 0;
}

/* Month Year Drop down */
.DatePickerControl .ddMonthYear {
  width: 118px;
  padding-left: 2px;
}

/* Calender image to toggle datepicker */
.DatePickerControl .ToggleImage {
  width: 22px;
}

/* Control */
.DatePickerControl {
  max-width: 460px;
  min-height: 30px;
  border-radius: 4px;
}

/*------------------------------------*
	$Password Control
*------------------------------------*/
.PasswordValidation .Text .Icon {
  display: inline-block;
  width: 20px;
  height: 12px;
  padding: 0.25em 1em;
}

.PasswordValidation .Neutral .Text .Icon {
  background: url("../images/checkbox/neutral.png") left center no-repeat;
}

.PasswordValidation .Positive .Text .Icon {
  background: url("../images/checkbox/positive.png") left center no-repeat;
}

.PasswordValidation .Negative .Text .Icon {
  background: url("../images/checkbox/negative.png") left center no-repeat;
}

.ShowPassword {
  margin: 1em 0;
}

/*------------------------------------*
	$SignedOffRedirect Control
*------------------------------------*/
.UrlReplies img {
  display: none;
}

/*------------------------------------*
		$View Registrations 
	*------------------------------------*/
.ViewRegistrationsPage #ContentWrapper #LeftSideDiv {
  width: 0;
}

.ViewRegistrationsPage #ContentWrapper #ContentDiv {
  margin: 0;
  padding: 0;
}

.RegistrationName {
  overflow: hidden;
  max-width: 300px;
  white-space: nowrap;
  text-overflow: ellipsis;
}