/*------------------------------------
CONTENTS
------------------------------------*/
/*
Questions
Welcome Message
Secure Message
Change Details
Buttons
Errors & Messages
Maturity Options
Account Status Control
Personalisation
Account Summary
SCA
Account Box
Statement
Monthly Statement
Savings Goal
Interest Statement
Interest Options
Transaction Wizard
Fraud Warning
Modal
Tax Year Countdown
Date Picker / Calander
Responsive
Registrations Page
Open New Account
Print Styles
*/

/*------------------------------------
$Sign out pages
------------------------------------*/
.LogOffPage #FooterDiv .help-container {
    display: none;
}

#LogOffControl,
#ErrorControl {
    display: block;
}

#LogOffControl {
    max-width: 430px;
}

#LogOffControl > div {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.SiteErrorPage .Reference {
    display:block;
    margin-top: 1rem;
    font-weight:500;
}

.SiteErrorPage #ContentWrapper {
    background: none;
}

/*------------------------------------
$Questions
------------------------------------*/
.QuestionWrapper {
    display:flex;
    flex-direction: column;
    margin:1rem 0;
}

.Question {
    border: transparent solid 1px;
    display:flex;
    align-items: center;
}

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

.Answer {
   	display:flex;
   	align-items: center;
    margin: 0.5rem 0;
}

.Answer.Confirmation {
    border: transparent solid 1px;
}

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

.ConfirmationRow {
    overflow: hidden;
}

.ConfirmationRow label,
.ConfirmationRow span {
    float: left;
    width: 15%;
    margin: 0.25em 0;
    padding: 0.25em 0;
}

.ConfirmationValue {
    margin: 0.25em 0;
    font-weight: 500;
    padding: 0.25rem;
}

/*------------------------------------
$Welcome Message
------------------------------------*/
.WelcomeControl {
    max-width: 1440px;
    width:100%;
	margin: 80px auto;
    color: #fff;
	padding: 0 1rem;
    z-index: 1;
    p {
        line-height: 0;
    }
}

.WelcomeMessagePrefix,
.WelcomeMessageBody {
    font-size: 3.813rem; /* 61px */
    font-weight: 700;
	line-height: initial;
}
#WelcomeMessage {
    width: 75%;
}

.UpdateEmailAddress {
    display: flex;
    align-self: flex-start;
    margin-top: 2rem;
    text-decoration: none;
    width: fit-content;
}

.update-email-wrapper {
    margin: 0 0 0.1rem;
    clear: both;
    text-decoration: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='14' viewBox='0 0 9 14'><path d='M1 1L7 7L1 13' stroke='white' stroke-width='2' stroke-linecap='round' fill='none'/></svg>") no-repeat right center / 7px auto;
    padding: 0 1.2rem 0.1rem 0;
    border: none;
    text-align: left;
    color: #fff;
    border-bottom: 2px solid #fff;
}

.update-email-wrapper:hover {
    border: none;
}

.UpdateEmailAddress:hover {
    border-bottom: 2px solid transparent;
}

@media screen and (max-width:1024px) {
    .WelcomeMessagePrefix,
    .WelcomeMessageBody {
        font-size: 3.063rem; /* 49px */
    }
}

/*------------------------------------
$Secure Message
------------------------------------*/
.InboxPage .DateFrom,
.InboxPage .DateTo,
.Inbox-SearchDates,
.ArchivedInboxPage .DateFrom,
.ArchivedInboxPage .DateTo {
    display: flex;
    flex-direction: row;
}

.lblDay {
    display: none;
}

.Inbox-SearchDates .DateLabel {
    font-weight: 500;
}

.Inbox-SearchDates {
    gap:2rem;
    margin: 2rem 0;
}

.ArchivedInboxMenuItem a:hover::after {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='14' viewBox='0 0 9 14'><path d='M1 1L7 7L1 13' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
}

#LocalServerTimeControl {
    float: right;
    padding: 0.5em 0;
}

#account-summary-links{
   display: grid;
    column-gap: 1rem;
    margin: 2rem 0 3rem;
    grid-template-columns: 1fr 1fr;
}

.InboxNotificationControl,
#SavingsGoalsLink {
    padding: 0;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}

.InboxNotificationControl:hover,
#SavingsGoalsLink:hover {
	-webkit-box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.25);
}

.NotificationMessage h4,
#SavingsGoalsLink h4 {
    margin: 0 0 0.3em 0;
    font-size: 1.125em;
    font-weight: 600;
}

.masthead-image-card,
.masthead-image-card-desktop {
    height: 15rem;
    object-fit: cover;
    width: 100%;
	vertical-align: middle;
    border-radius: 12px 12px 0 0;
}

@media screen and (min-width: 830px) {
    .masthead-image-card {
        display: none;
    }
	.masthead-image-card-desktop {
        width: -webkit-fill-available;
		display: block;
        border-radius: 12px 12px 0 0;
    }
}
@media screen and (max-width: 829px) {
    #account-summary-links{
        grid-template-columns: 1fr;
        row-gap: 2rem;
    }
    .masthead-image-card-desktop {
		display: none;
    }
    .masthead-image-card {
        display: block;
    }
}

.inboxBtn {
    cursor: pointer;
}

.your-messages-text {
    padding: 2rem 1.5rem 0 1.5rem;
}

.SavingsGoalsText {
    padding: 2rem 1.5rem 1.5rem 1.5rem;
}

.NotificationMessage .ActionButton {
    padding: 0 1.5rem;
}

.NotificationMessage h5,
.SavingsGoalsText h5 {
    margin: 0 0 1.5rem;
}

.NotificationMessage p:hover {
    font-weight:normal;
}

.InboxMessage-RelatedMessage {
    padding: 1rem;
    margin-top: 2rem;
    border-radius: 12px;
    background: #f9f9f9;
}

.InboxMessage-RelatedMessage p {
    margin-top:0;
}

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

.SecureMessageDeletePage .ConfirmationValue {
    margin: 1rem 0;
    padding: 0;
    font-weight:bold;
}

.SecureMessageReplyPage .SecureMessageConfirmValue {
    margin: 1rem 0;
}

.SecureMessageReplyPage .ConfirmationRow:nth-of-type(2) .SecureMessageConfirmValue {
    margin-top:0;
}

.SecureMessageCreatePage .ConfirmationValue {
    margin: 1rem 0;
    font-weight:bold;
    padding:0;
}

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

.SM_MessageLimit {
    margin: 1rem 0;
}

.InboxNotificationControl .NewMessageCount {
    font-weight: 700;
}

.InboxPage .InboxNotificationControl {
    position: relative;
    width: 100%;
    padding: 65px 15px 15px 25px;
    text-align: left;
    color: #2e2e2e;
}

#InboxSubMenu {
    text-align: right;
}

.InboxMessages {
    margin: 3rem 0 1rem;
    border-top: 1px solid rgba(10, 2, 3, .1);
}

.InboxMessage {
    border-bottom: 1px solid rgba(10, 2, 3, .1);
}

.InboxMessage-Header-Read + .InboxMessage-Summary {
    overflow: hidden;
    padding: 0rem 0 2rem 10rem;
}

.InboxMessage-Header-Unread + .InboxMessage-Summary {
    overflow: hidden;
    padding: 0rem 0 2rem 11.5rem;
}

.InboxMessage-Header-Unread .InboxMessage-Subject .MessageDate, 
.InboxMessage-Header-Unread .InboxMessage-Subject .MessageSubjectText {
    color: var(--primary-brand-colour);
}

.InboxMessage-Header {
    overflow: hidden;
}

.InboxMessage-Header-Unread {
    font-weight: 700;
    border-left: 10px solid var(--rochdale-blue);
}

.InboxMessage.Expired {
    color: #999;
}

.InboxMessage-Header-Read .InboxMessage-Read,
.InboxMessage-Header-Unread .InboxMessage-Unread {
    display: flex;
    align-items: center;
}

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

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

.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.Collapsed,
.MonthlyStatementChoicePage #SearchTools.ExpandedPanel h2 a,
#InboxSearchTools.ExpandedPanel h2 a.ToggleEvent,
#HideSearchButton a {
    padding-right: 20px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 14 9'><style>.cls-1{fill:none;stroke:%230a0203;stroke-linecap:round;stroke-width:1.5px;}</style><g><g id='Layer_1'><path class='cls-1' d='M1,8L7,2l6,6'/></g></g></svg>") center right no-repeat;
    background-size: 14px;
    height: 20px;
}

.MonthlyStatementChoicePage #SearchTools.CollapsedPanel h2 a,
.InboxMessage-Toggle.Expanded,
#InboxSearchTools.CollapsedPanel h2 a.ToggleEvent {
    padding-right: 20px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'><path d='M13 1L7 7L1 1' stroke='%230A0203' stroke-width='1.5' stroke-linecap='round'/></svg>") center right no-repeat;
    height: 20px;
}

#InboxSearchTools h2 a,
#HideSearchButton a {
    text-decoration: none;
    color: #4D4D4D;
}

#InboxSearchTools h2 a:hover,
#InboxSearchTools h2 a:focus,
#HideSearchButton a:hover,
#HideSearchButton a:focus {
    color: #848484;
}

.InboxMessage-ActionButtons {
    display: flex;
    gap: 1rem;
}

.InboxNavigationLinks {
    position: relative;
    height: 60px;
    text-align: center;
    margin-top: 3rem;
}

.PageInformation {
    padding: 0 30px;
}

.PagingPageOf {
    color: var(--primary-brand-colour);
    margin-left: 0.5rem;
    display:inline-block;
}

.InboxNavigationLinks .NextPageButton img,
.InboxNavigationLinks .PreviousPageButton img {
    height: 10px;
    position: relative;
    top: 0;
}

.ReleatedMessageContent {
    border: 1px solid rgba(10, 2, 3, .1);
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    color: #848484;
}

.Inbox-Search-Wrapper {
    border-radius: 12px;
    background: #f9f9f9;
    padding: 0.1rem 2rem 2rem;
}

.Inbox-SearchDates .DateLabel,
.Inbox-SearchDates #DateSelectionControl {
    margin-right: 1rem;
    margin-top:5px;
}

.Inbox-SearchStatuses,
.Inbox-SearchDirection {
    margin-bottom:2rem;
}

.Inbox-SearchStatuses span,
.Inbox-SearchDirection span {
    margin-right: 1rem;
}

.Inbox-SearchStatuses input,
.Inbox-SearchDirection input {
    margin-right:0.5rem;
}

#InboxSearchTools #SearchOptions .ActionButton:last-of-type {
    margin-left:1rem;
}

#SearchOptions .ActionButton {
    float:left;
}

#SearchOptions:after {
    display: table;
    content: '';
    clear: both;
}

.SecureMessageCreateMenu ul {
    padding: 0.5rem 0 1rem;
    display:flex;
    flex-direction: row;
    gap:1rem;
}

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

.MessageDate {
    display: inline-block;
    margin: 0 3rem 0 0;
    line-height: 25px;
}

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

.InboxMessage-Toggle {
    text-align: right;
    color: transparent;
    font-size: 5px;
}

.InboxMessage-Header-Read,
.InboxMessage-Header-Unread {
    overflow: hidden;
    cursor: pointer;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.MessageDirection {
    display: none;
}

.InboxMessage-Subject {
    display: flex;
    flex-direction: row;
    width: 80%;
}

.InboxMessage .ConfirmationRow {
    padding: 0.7rem 0;
    width: 90%;
    display: flex;
    flex-direction: row;
}

.InboxMessage .ConfirmationRow.InboxMessage-Category, 
.InboxMessage .ConfirmationRow.InboxMessage-RelatedAccount {
    border-bottom: 2px dotted var(--greater-black);
}

.InboxMessage .ConfirmationRow span {
    width: 25%;
}

.MessageText, .PreFormattedMessage, 
.MessageConfirm {
    margin: 0;
    padding: 0rem 0 2rem;
    overflow-wrap: break-word;
    font-family: inherit;
    line-height: 1.5;
    display: flex;
    flex-direction:column;
}

.InboxMessage-SummaryText .MessageText{
    margin-top:1rem;
}

.unread-icon {
    background-color: var(--rochdale-blue);
    border-radius: 5px;
    padding: 0.3rem 1rem;
    width:fit-content;
    font-size: 0.875rem;
    font-weight: bold;
}

#SecureMessageReplyControl .ConfirmationRow:nth-of-type(2) .SecureMessageConfirmValue,
#SecureMessageDeleteControl .SecureMessageConfirmValue,
#SecureMessageCreateControl .SecureMessageConfirmValue {
    width: 100%;
}

#SecureMessageCreateControl .ConfirmationRow label, 
#SecureMessageCreateControl .ConfirmationRow span,
.SecureMessageReplyPage .ConfirmationRow label, 
.SecureMessageReplyPage .ConfirmationRow span{
    padding:0;
    margin:0;
}

#SecureMessageCreateControl .ConfirmationRow span, 
#SecureMessageReplyControl .ConfirmationRow span, 
#SecureMessageArchiveControl .ConfirmationRow span, 
#SecureMessageUnarchiveControl .ConfirmationRow span {
    width: 10rem;
    font-weight: 500;
}

.Row {
    float: left;
    width: 100%;
}

#SecureMessageDeleteControl .ConfirmationRow p, 
#SecureMessageReplyControl .Row span, 
#SecureMessageReplyControl .Row label p {
    float: left;
    width: 10rem;
    font-weight: 500;
}

#SecureMessageReplyControl .Row label p {
    width: 100%;
}

#SecureMessageReplyControl .OriginalMessage span {
    font-weight: 500;
}

#SecureMessageReplyControl .OriginalMessage {
    margin-top: 3rem;
}

.OriginalMessage span{
    margin-bottom:1rem;
    display:block;
}

@media screen and (max-width:800px){
    .Inbox-Search-Wrapper {
        padding: 0.1rem 1rem 1rem;
    }
    .unread-icon {
        margin: 0 1rem;
    }
    .SecureMessageCreateMenu ul{
        flex-direction:column;
    }
    .InboxPage .DateFrom,
    .InboxPage .DateTo,
    .Inbox-SearchDates,
    .ArchivedInboxPage  .DateFrom,
    .ArchivedInboxPage  .DateTo {
        flex-direction: column;
    }
    .InboxMessage .ConfirmationRow{
        width:100%;
    }
    .Inbox-SearchDates .DateLabel, 
    .Inbox-SearchDates #DateSelectionControl{
        margin-bottom:1rem;
    }
    .Inbox-SearchDates{
        margin: 1rem 0 0;
        gap:0;
    }
    .Inbox-SearchStatuses span:first-of-type,
    .Inbox-SearchDirection span:first-of-type{
        margin-top:1rem;
        display: block;
        margin-bottom: 1rem;
    }
    .InboxMessage-Header-Read, 
    .InboxMessage-Header-Unread {
        flex-direction: row;
        padding: 1rem 0;
    }
    .InboxMessage-Subject {
        padding: 0;
        flex-direction: column;
    }
    .InboxMessage-Summary {
        overflow: hidden;
        padding: 1.5rem 0 2rem 1rem;
    }
    .SecureMessageDeletePage .ConfirmationRow p,
    .ConfirmationRow label,
    .ConfirmationRow span{
        float:none;
        width:100%;
        display:block;
    }
    .SecureMessageReplyPage .SecureMessageConfirmValue, 
    .SecureMessageReplyPage .ConfirmationRow:nth-of-type(2) .SecureMessageConfirmValue, 
    .SecureMessageCreatePage .ConfirmationValue,
    .SecureMessageConfirmValue{
        margin: 0;
        width: 100%;
        padding-left: 0;
    }
    #SecureMessageCreateControl select{
        width:100%;
        max-width: 100%;
    }
    .Inbox-SearchStatuses span, 
    .Inbox-SearchDirection span{
        font-size:1rem;
    }
    #SecureMessageCreateControl .ConfirmationRow span, 
    #SecureMessageDeleteControl .ConfirmationRow p, 
    #SecureMessageReplyControl .ConfirmationRow span, 
    #SecureMessageArchiveControl .ConfirmationRow span {
        width: 100%;
    }
    #SecureMessageCreateControl .ConfirmationRow span p, 
    #SecureMessageDeleteControl .ConfirmationRow p, 
    #SecureMessageReplyControl .ConfirmationRow span p, 
    #SecureMessageArchiveControl .ConfirmationRow span {
        margin: 1rem 0 0;
    }
    .InboxMessage-Header-Unread + .InboxMessage-Summary,
    .InboxMessage-Header-Read + .InboxMessage-Summary{
        padding-left:0;
    }
    .WelcomeControl {
        margin: 30px auto;   
        p {
            line-height: 1.5;
        }
    }
    .SecureMessageDeletePage .ConfirmationValue {
        margin: 0;
    }
}

@media screen and (max-width:400px){
    .InboxMessage-ActionButtons {
        flex-direction: column;
    }
    #SearchOptions .ActionButton {
        float: none;
    }
    #InboxSearchTools #SearchOptions .ActionButton:last-of-type {
        margin-left: 0;
    }
}

/*------------------------------------
$Change Details
------------------------------------*/
.ChangeAccountDetailsControl, .ChangeDetailsBox {
    margin-bottom: 2rem;
}

.ChangeDetailsBox .Answer {
    margin:0;
    flex:1;
    font-size: 1rem;
}

.ChangeDetailsBox .ViewNameControl .Question, 
.ChangeDetailsBox .ChangeDetailsControl h3,
.ChangeDetailsBox .Question {
    font-weight: bold;
    font-size: 1.125rem;
}

.ChangeDetailsBox h3 {
    margin: 0;
}

.ChangeDetailsBox .ChangeDetailsControl {
    border-top: 1px solid rgba(10, 2, 3, .1);
}

.ChangeDetailsBox .ChangeDetailsControl.ChangeSecurityDetailsControl .QuestionWrapper {
    border-top: 1px solid rgba(10, 2, 3, .1);
}

.ChangeDetailsBox .ChangeDetailsControl.ViewNameControl, 
.ChangeDetailsBox .ChangeSecurityDetailsControl, 
.ChangeDetailsBox .ViewContactPreferencesControl, 
.ChangeDetailsBox .ViewNominatedAccountControl {
    border-top: none;
    padding: 2rem 0 0;
}

.ChangeDetailsBox .ChangeDetailsControl.ViewNameControl h2 {
    border-bottom: 1px solid rgba(10, 2, 3, .1);
    padding-bottom: 2rem;
    margin-bottom: 0;
}

.ChangeDetailsBox .ChangeDetailsControl.ViewNameControl h3, 
.ChangeDetailsBox .ChangeDetailsControl.ChangeSecurityDetailsControl h3, 
.ChangeDetailsBox .ChangeDetailsControl.ViewContactPreferencesControl h3, 
.ChangeDetailsBox .ChangeDetailsControl.ViewNominatedAccountControl h3 {
    margin-top: 0;
}

.ChangeDetailsControl.ViewNameControl,
.ChangeDetailsControl.ViewAddressControl,
.ChangeDetailsControl.ViewEmailAddressControl {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    padding: 0;
    flex-direction: row;
}

.ChangeDetailsBox .ChangeDetailsControl.ViewNameControl,
.ChangeDetailsControl.ViewEmailAddressControl {
    align-items: center;
}

.ViewNameControl h2 {
    width:100%;
}

.ChangeDetailsPage  .QuestionWrapper {
    flex-direction: column;
    flex: 1;
}

.security-details-container .QuestionWrapper,
.ViewContactDetailsControl .QuestionWrapper {
    flex-direction: row;
}

.CurrentName .Question,
.ViewAddressControl h3,
.ViewEmailAddressControl h3,
.ViewContactDetailsControl .Question {
    width:15rem;
}

.ViewAddressControl h3,
.ViewEmailAddressControl h3 {
    width: 100%;
    margin-top: 1.5rem;
}

.ViewAddressControl .CurrentAddress,
.ViewAddressControl .ActionButton,
.ViewEmailAddressControl .CurrentEmailAddress,
.ViewEmailAddressControl .ActionButton {
    margin-top: 0;
}

.ViewContactDetailsControl .Question,
.ChangeNamePage .Question {
    width:fit-content;
}

.ViewContactDetailsControl .Question {
    font-weight: normal;
    font-size: 1rem;
}

.CurrentEmailAddress.QuestionWrapper,
.ChangeNamePage .QuestionWrapper {
    flex-direction: row;
    gap: 1rem;
}

.ChangeDetailsBox .ChangeDetailsControl.ChangeAddAccountHolderControl {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 0;
}

.ChangeDetailsControl.ViewContactDetailsControl {
    position: relative;
    padding: 1.5rem 0;
}

.ViewContactDetailsControl .QuestionWrapper {
    margin-bottom: 0;
}

.ChangeDetailsBox .ChangeDetailsControl.ViewContactPreferencesControl, 
.ChangeDetailsBox .ChangeDetailsControl.ViewNominatedAccountControl {
    position: relative;
}

.security-details-container .QuestionWrapper {
    margin: 0;
    align-items: center;
    padding: 0;
}

.ViewContactDetailsControl .CurrentHomeNumber:has(> .Answer:empty),
.ViewContactDetailsControl .CurrentMobileNumber:has(> .Answer:empty),
.ViewContactDetailsControl .CurrentWorkNumber:has(> .Answer:empty) {
    display: none;
}

.QuestionWrapper.MobileNumber .Question {
    display: block;
}

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

input.NationalInsuranceNumber5 {
    width: 1.1rem;
}

.ChangeDetailsControl h2 {
    margin-top: 0.5rem;
    padding-top: 0;
    font-size: 2.438rem;
}

.ViewEmailAddressControl .NoEmailAddressWarning {
    margin-right: 1rem;
}

.ViewContactPreferencesControl .RowCheckBox,
.ViewContactPreferencesControl .RowCheckBox *,
.EditContactPreferencesControl .RowCheckBox,
.EditContactPreferencesControl .RowCheckBox * {
    display: flex;
    align-items: center;
    font-size: 1rem;
}

.ViewContactPreferencesControl .RowCheckBox,
.EditContactPreferencesControl .RowCheckBox {
    margin-bottom:1rem;
}

.ChangeNamePage .ActionButton,
.ChangeEmailAddressPage .ActionButton,
.ChangeContactDetailsPage .ActionButton,
.ChangePasswordPage .ActionButton,
.ChangeMemorableDetailsPage .ActionButton,
.PersonaliseUserIdPage .ActionButton,
.ChangeContactPreferencesPage .ActionButton
#ProductError .back-button {
    margin-top:3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ChangeDetailsPage .Information,
.SecureMessageView .Information {
    padding: 1rem 1rem 1rem 3.5rem;
    width: 100%;
}

.ChangeDetailsControl .ActionButton .BackButton,
.second-account-holder-change .ActionButton .BackButton,
#ProductError .back-button a {
    max-width: max-content;
    border-bottom: 2px solid var(--greater-black);
    border-radius: 0;
    text-decoration: none;
}

.ChangeDetailsControl .ActionButton .BackButton:hover,
a.MoveBack:hover,
.ActionButton .BackButton:hover, 
a.ExitButton:hover,
#ProductError .back-button a:hover {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important; 
    border-bottom: 2px solid transparent !important;
}

.ChangeDetailsControl .Warning {
    padding: 1rem 2rem 1rem 4rem;
}

@media screen and (max-width:800px){
    .ChangeDetailsPage .QuestionWrapper,
    .ChangeDetailsControl.ViewNameControl, 
    .ChangeDetailsControl.ViewAddressControl, 
    .ChangeDetailsControl.ViewEmailAddressControl,
    .ChangeDetailsBox .ChangeDetailsControl.ChangeAddAccountHolderControl {
        flex-direction: column;
        align-items: flex-start;
    }
    .ChangeDetailsBox .ChangeDetailsControl.ChangeAddAccountHolderControl {
        padding-top: 1.5rem;
    }
    .ChangeDetailsBox .Answer {
        max-width: 100%;
    }
    .security-details-container .QuestionWrapper {
        padding: 1rem 0 0;
    }
    .ChangeDetailsBox .ChangeDetailsControl.ViewNameControl {
        align-items: baseline;
    }
    .ChangeDetailsPage #ContentDiv .ChangeSecurityDetailsControl .ActionButton,
    .ChangeDetailsPage #ContentDiv .ChangeAddAccountHolderControl .ActionButton,
    .ChangeDetailsPage #ContentDiv .ViewContactDetailsControl .ActionButton {
        margin-top: 1rem;
    }
    .ChangeDetailsBox .ChangeDetailsControl.ViewContactDetailsControl .ActionButton {
        margin-bottom: 0;
    }
}

/*------------------------------------*
$Password with Strength
*------------------------------------*/
.ClientValidation ul{
    padding-left:0;
}

.ClientValidation li{
    list-style-type:none;
}

.ClientValidation .Text .Icon, .PasswordValidation .Text .Icon {
    display: inline-block;
    width: 30px;
    background-repeat: no-repeat;
    background-position: center left;
    padding-right: 40px;
    height: 27px;
}

.ClientValidation .Text p, .PasswordValidation .Text p {
    padding: 0;
    margin: 0;
    line-height: 25px;
}

.PasswordValidation .Text p,
.ClientValidation span.Text{
    display:flex;
    margin-bottom:10px;
}

.ClientValidation .Text, .PasswordValidation .Text {
    display: inline-block;
    line-height: 25px;
    width: 100%;
}

.ClientValidation .Neutral .Text .Icon, .PasswordConfirm.Neutral .Text .Icon, .Rule.Neutral .Text .Icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 48 48' height='48px' viewBox='0 0 48 48' width='48px'><g id='Layer_3'><circle cx='24' cy='24' r='24' fill='%23CCCCCC'/></g></svg>");
    background-repeat: no-repeat;
    background-size: 9px 9px;
}

.ClientValidation .Negative .Text .Icon, .PasswordConfirm.Negative .Text .Icon, .Rule.Negative .Text .Icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23AC1E2D' viewBox='0 0 24 24'><style>.st0{opacity:0.2;fill:none;stroke:%23000000;stroke-width:0.05;stroke-miterlimit:10;}</style><g id='grid_system'/><g id='_icons'><path d='M5.3,18.7C5.5,18.9,5.7,19,6,19s0.5-0.1,0.7-0.3l5.3-5.3l5.3,5.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L13.4,12l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0L12,10.6L6.7,5.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3-5.3,5.3C4.9,17.7,4.9,18.3,5.3,18.7z'/></g></svg>");
    background-repeat: no-repeat;
    background-size: 25px 25px;
}

.ClientValidation .Positive .Text .Icon, .PasswordConfirm.Positive .Text .Icon, .Rule.Positive .Text .Icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23286140' viewBox='0 0 24 24'><g id='Glyph'><path d='M8.43,20h0a1,1,0,0,1-.72-.32l-6.44-7a1,1,0,1,1,1.48-1.36l5.71,6.22L21.28,4.3a1,1,0,1,1,1.44,1.4L9.15,19.7A1,1,0,0,1,8.43,20Z'/></g></svg>");
    background-repeat: no-repeat;
    background-size: 22px 22px;
}

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

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

.MobileMenu {
    display: none;
}

/*------------------------------------
$Account Status Control
------------------------------------*/
.AccountMaintainScreen {
    overflow: hidden;
}

.maintenanceinformationheader {
    clear: both;
}

.maintenancelabel {
    width: 35%;
    border: transparent solid 1px;
}

.maintenanceinformationtype {
    display:flex;
    flex-direction:column;
}

.maintenancevalue {
    margin: 0.25em 0;
    padding: 0.25em 0;
    border: transparent solid 1px;
}

.AccountMaintenance.AccountMainteance_StatementHeader {
    margin-bottom:2rem;
}

.AccountMaintenance.AccountMainteance_StatementHeader  dl {
    display: grid;
    grid-auto-flow: column;
    margin-top: 0;
}
.AccountMaintenance.AccountMainteance_StatementHeader  dl > div {
    display: block;
}

.AccountMaintenance.AccountMainteance_StatementHeader dt {
    min-height: auto;
    margin: 0;
    padding: 0.5em 0;
}

.AccountMaintenance.AccountMainteance_StatementHeader dd {
    min-height: auto;
    margin: 0;
    padding: 0.25em 0;
    font-weight: 700;
}

.AccountMaintenance.AccountMainteance_Main .MaintenanceItem {
    display: grid;
    grid-template-columns: 30% 1fr;
}

.StatementHeaderSubHeading {
    margin-top: 2rem;
    display: block;
    font-size: 1.125rem;
    font-weight: normal;
}

.AccountMaintenance.AccountMainteance_Main dt {
    margin: 1rem 0;
}

.AccountMaintenance.AccountMainteance_Main dd {
    margin: 1rem 0;
    padding: 0;
    font-weight: 600;
}

.AccountMaintenance.AccountMainteance_Main dd a {
    display: block;
    margin-top: 1rem;
    font-weight: normal;
    max-width: max-content;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='14' viewBox='0 0 9 14'><path d='M1 1L7 7L1 13' stroke='%230A0203' stroke-width='2' stroke-linecap='round' fill='none'/></svg>") center right / 8px no-repeat;
    padding: 0 1.2rem 0.3rem 0;
    text-decoration: none;
    border-bottom: 2px solid;
}

.AccountMaintenance.AccountMainteance_Main dd a:hover {
    border-bottom: 2px solid white;
}

.AccountMaintenance.AccountMainteance_Main .MaintenanceItem {
    grid-template-columns: 30% 1fr;
}

@media screen and (max-width:800px){
    .AccountMaintenance.AccountMainteance_Main .MaintenanceItem {
        grid-template-columns: 1fr;
    }

    .AccountMaintenance.AccountMainteance_StatementHeader dl {
        grid-auto-flow: row;
    }
    .AccountMaintenance.AccountMainteance_StatementHeader dl > div {
        margin-top: 0.5rem;
    }

    .AccountMaintenance.AccountMainteance_Main dt {
        margin:0;
    }
    .AccountMaintenance.AccountMainteance_Main dd {
        margin-top:0.5rem;
        margin-bottom:2rem;
    }
}

/*------------------------------------
$Personalisation
------------------------------------*/
.AccountImageSelector [type="radio"],
.CurrentFriendlyAccountImage {
    display: none;
}

.PersonaliseAccountsAccountWrapper .QuestionWrapper .Answer.Confirmation {
    font-weight: 700;
}

.PersonaliseAccountsAccountWrapper .FriendlyName .character-length {
    margin-left:1rem;
}

@media screen and (max-width:1023px) {
    .PersonaliseAccountsAccountWrapper .QuestionWrapper {
        flex-direction:column;
    }
    .PersonaliseAccountsAccountWrapper .Question {
        width:100%;
    }
}

.PersonaliseAccountsAccountWrapper .HideImage-Toggle {
    display:none;
}

.PersonaliseAccountsAccountWrapper input[type="radio"] + label {
    margin-left: 0;
    margin-right: 1rem;
    cursor: pointer;
}

.AccountImageSelector label img {
    pointer-events: none;
    opacity: 0.5;
    height: 50px;
}

.AccountImageSelector [type="radio"]:checked+label img {
    opacity: 1;
}

.AccountImageSelector label {
    display: inline-block;
}

.PersonaliseAccountsAccountWrapper.SelectedAccount {
    display: block;
    padding: 1rem 0 2rem;
}

.personalisation-instruction {
    margin-top:2rem;
}

.PersonaliseAccountsAccountWrapper {
    display: none;
}

@media screen and (max-width:800px) {
    .PersonaliseAccountsAccountWrapper.SelectedAccount {
        padding: 0;
    }
}

/*------------------------------------
$Account Summary
------------------------------------*/
.AccountSummaryPage h2 {
    margin: 4rem 0 1rem;
}

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

.AccountBox.baby .Header {
    background-image: url('../images/icons/Personalisation/baby.svg');
}

.AccountBox.car .Header {
    background-image: url('../images/icons/Personalisation/car.svg');
}

.AccountBox.education .Header {
    background-image: url('../images/icons/Personalisation/education.svg');
}

.AccountBox.gift .Header {
    background-image: url('../images/icons/Personalisation/gift.svg');
}

.AccountBox.holiday .Header {
    background-image: url('../images/icons/Personalisation/holiday.svg');
}

.AccountBox.home .Header {
    background-image: url('../images/icons/Personalisation/home.svg');
}

.AccountBox.rainy-day .Header {
    background-image: url('../images/icons/Personalisation/rainy-day.svg');
}

.AccountBox.wedding .Header {
    background-image: url('../images/icons/Personalisation/wedding.svg');
}

.AccountBox.baby .Header,
.AccountBox.car .Header,
.AccountBox.education .Header,
.AccountBox.gift .Header,
.AccountBox.holiday .Header,
.AccountBox.home .Header,
.AccountBox.rainy-day .Header,
.AccountBox.wedding .Header {
    background-size: 50px 50px;
    background-position: left 2rem center;
    background-repeat: no-repeat;
}

.AccountBox.baby .Header,
.AccountBox.car .Header,
.AccountBox.education .Header,
.AccountBox.gift .Header,
.AccountBox.holiday .Header,
.AccountBox.home .Header,
.AccountBox.rainy-day .Header,
.AccountBox.wedding .Header {
    padding-left: 7rem;
}

.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;
}

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

@media screen and (max-width: 1023px) {
	.AccountBox.baby .Header,
	.AccountBox.car .Header,
	.AccountBox.education .Header,
	.AccountBox.gift .Header,
	.AccountBox.holiday .Header,
	.AccountBox.home .Header,
	.AccountBox.rainy-day .Header,
	.AccountBox.wedding .Header {
		background-size: 40px 40px;
    	background-position: left 1.5rem center;
	}
	.AccountBox.baby .Header,
	.AccountBox.car .Header,
	.AccountBox.education .Header,
	.AccountBox.gift .Header,
	.AccountBox.holiday .Header,
	.AccountBox.home .Header,
	.AccountBox.rainy-day .Header,
	.AccountBox.wedding .Header {
    	padding-left: 5rem;
	}
}

@media screen and (max-width:800px) {
    #InterestRateInformation_AccountMaintenanceScreen, 
    #MaturityDate_AccountMaintenanceScreen {
        margin-top:0;
    }
    .SavingsAccountStatus .QuestionWrapper {
        margin-bottom:1rem;
        margin-top:0;
    }
}

/*------------------------------------
$SCA
------------------------------------*/
.AccountSummaryPage .NoticeContainer {
    margin-top: 3rem;
}

.NoticeContainer {
    padding: 2rem;
    background: var(--oldham-pink);
    align-items: center;
    border-radius: 12px;
}

.change-nom-btn {
    display: inline-block;
}

.RequestNewCodeButton,
.SubmitChangeButton
{
    margin-top:1rem;
}
#UnverifiedResetCode.ActionButton A{
    margin-top:1rem;
}

@media screen and (max-width:800px) {
    .NoticeContainer{
        margin-top:2rem;
        padding: 1rem;
    }
}

.NoticeContainer h2 {
    color: var(--greater-black);
    font-size: 2.438rem; /* 39px */
    margin-top:0;
}

@media screen and (max-width: 1024px) {
    .NoticeContainer .NoticeContainer-wrapper {
        max-width:100%;
    }
    .NoticeContainer h2 {
        font-size: 1.938rem; /* 31px */
    }
}

/*------------------------------------
$Account Box
------------------------------------*/
.AccountBox {
    position: relative;
    margin: 2rem 0;
    box-sizing: border-box;
    overflow: hidden;
    background-position: right 3rem top 3rem;
    background-repeat: no-repeat;
}

.AccountBox h2 {
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    padding-top: 2rem;
    color: var(--primary-brand-colour);
}

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

.AccountBox .Header,
.AccountBox .Details {
    position: relative;
    padding: 0 2rem;
}

.AccountBox .Header {
    padding: 1.5rem 2rem;
}

.AccountBox .Header h3 {
    margin: 0;
}

.AccountBox .Header .friendly-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.AccountBox .Details {
    display: flex;
    gap: 7rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.AccountBox .PseudoName,
.AccountBox .InterestRate,
.AccountBox .Balance,
.AccountBox .MaturityDate {
    display: flex;
    flex-direction: column;
}

.AccountBox .PseudoName-value,
.AccountBox .InterestRate-value,
.AccountBox .Balance-value,
.AccountBox .MaturityDate-value {
    margin-top: 0.2rem;
    font-size: 1.25rem;
}

.AccountBox .PseudoName-value strong,
.AccountBox .InterestRate-value strong,
.AccountBox .Balance-value strong,
.AccountBox .MaturityDate-value strong {
    font-weight: 600;
}

@media screen and (max-width:1023px) {
    .AccountBox {
        background-image: none !important;
    }
	.AccountSummaryOptions .OptionsList {
    	padding: 1rem 1.5rem 0;
	}
	.AccountBox .Header {
    	padding: 1rem 1.5rem;
	}
	.AccountBox .Details {
		row-gap: 1rem;
        column-gap: 3rem;
        padding: 0 1.5rem;
    }
}

@media screen and (max-width:600px) {
    .AccountBox .Details {
        flex-direction: column;
		gap: 1rem;
    }
}

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

.AccountSummaryOptions {
    position: relative;
}

.AccountSummaryOptions .ShowOptions,
.AccountSummaryOptions .HideOptions {
    display: none;
}

.AccountSummaryOptions .ShowOptions:hover,
.AccountSummaryOptions .HideOptions:hover {
    opacity: 0.8;
}

.AccountSummaryOptions .OptionsList {
    padding: 2rem 2rem 0;
    overflow: hidden;
}

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

.AccountSummaryOptions .OptionsList ul {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 2rem 0;
    border-top: 1px solid #eaeaea;
    row-gap: 1rem;
}

@media screen and (max-width:1023px) {
	.AccountSummaryOptions .OptionsList {
    	padding: 1rem 1.5rem 0;
	}
    .AccountSummaryOptions .OptionsList ul {
        grid-template-columns: 1fr 1fr 1fr;
		padding: 1rem 0;
    }
}

@media screen and (max-width:800px) {
    .AccountSummaryOptions .OptionsList ul {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width:600px) {
    .AccountSummaryOptions .OptionsList ul {
        grid-template-columns: 1fr;
    }
}

.AccountSummaryOptions .OptionsList li a {
    display: inline-block;
    text-decoration: none;
    line-height: 1.7rem;
    border-bottom: 2px solid var(--greater-black);
}

.AccountSummaryOptions .OptionsList li a:hover {
    border-bottom: 2px solid #fff;
}

.AccountSummaryOptions .OptionsList li a:after {
    content:'';
    width: 15px;
    height: 17px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='14' viewBox='0 0 9 14'><path d='M1 1L7 7L1 13' stroke='%230A0203' stroke-width='2' stroke-linecap='round' fill='none'/></svg>") no-repeat right center / 7px auto;
    display:inline-block;
    top: 2px;
    position: relative;
    margin-left: 0.3rem;
}

.AccountBox {
	border: 3px solid var(--primary-brand-colour);
    border-radius: 20px;
}

.AccountBox.Deleted {
	border: none;
	background-color: #f9f9f9;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.1);
}

.AccountBox.Deleted .Header {
    display: flex;
    gap: 5rem;
    padding: 2rem 2rem 0;
}

.AccountBox.Deleted .Details {
    margin-top: 0;
    justify-content: flex-start;
    gap: 5rem;
    padding: 0;
}

.AccountBox.Deleted .ProductName h3 {
    font-size: 1.25rem;
    margin-top: 0.55rem;
}

@media screen and (max-width:1023px) {
    .AccountBox.Deleted .Header {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem 1.5rem 0;
    }
    .AccountBox.Deleted .Details {
        gap: 0;
    }
}

/*----------------------------------------
$Account Summary Product Category colours
------------------------------------------*/
.AccountBox.SubCategory_E,
.AccountBox.SubCategory_D {
    border: 3px solid var(--oldham-pink);
}
.AccountBox.SubCategory_E .Header,
.AccountBox.SubCategory_D .Header {
    background-color: var(--oldham-pink);
}

.AccountBox.SubCategory_F {
    border: 3px solid var(--trafford-green);
}
.AccountBox.SubCategory_F .Header {
    background-color: var(--trafford-green);
}

.AccountBox.SubCategory_N {
    border: 3px solid var(--rochdale-blue);
}
.AccountBox.SubCategory_N .Header {
    background-color: var(--rochdale-blue);
}

.AccountBox.Category_I {
    border: 3px solid var(--bury-orange);
}
.AccountBox.Category_I .Header {
    background-color: var(--bury-orange);
}

.AccountBox.SubCategory_R {
    border: 3px solid var(--thameside-stone);
}
.AccountBox.SubCategory_R .Header {
    background-color: var(--thameside-stone);
}

/*------------------------------------
$Statement
------------------------------------*/
.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 {
    font-weight: 600;
}

.TransactionAmountHeader,
.TransactionAmountColumn {
    display: none;
}

.MiniStatementTable .THeading5,
.MiniStatementTable .THeading6 {
    width: 9rem;
}

.MiniStatementTable .THeading7,
.MiniStatementTable .Column7,
.OpeningBalanceAmount,
.ProcessedBalanceAmount,
.ClearedBalanceAmount,
.ClosingBalanceAmount {
    text-align: right
}

#StatementControl_PrintButtonPanel {
    margin: 3rem 0;
}

.SavingsExtraInfo {
    margin-bottom: 3rem;
}

.DGS_Wording strong {
    color: var(--primary-brand-colour);
}

#StatementControl {
    margin-top: 2rem;
    clear:both;
}

.DateTo {
    clear: both;
}

.PendingTransactionsTitle h3 {
    margin-top: 0;
}

#PendingTransactionsControl .DatePickerControl {
    display: inline-block;
}

#PendingTransactionsControl .DatePickerControl .DropDown {
    margin-bottom: 0;
}

#PendingTransactionsControl_PendingTransactionsWarning {
    padding: 1rem 0;
}

.PendingTransactionsWarningLabel,
.CutomStatementPanel .InformationDescription {
    border-radius: 12px;
    padding: 1rem 2rem 1rem 4rem;
    font-weight: 600;
    display: block;
    background: var(--rochdale-blue) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><g clip-path='url(%23clip0_1073_757)'><path d='M8 0C5.87827 0 3.84344 0.842854 2.34315 2.34315C0.842854 3.84344 0 5.87827 0 8C0 10.1217 0.842854 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842854 10.1217 0 8 0ZM8 12C7.58438 12 7.25 11.6656 7.25 11.25L7.25 7.75C7.25 7.33438 7.58438 7 8 7C8.41563 7 8.75 7.33438 8.75 7.75V11.25C8.75 11.6656 8.41563 12 8 12ZM9 5C9 5.26522 8.89464 5.51957 8.70711 5.70711C8.51957 5.89464 8.26522 6 8 6C7.73478 6 7.48043 5.89464 7.29289 5.70711C7.10536 5.51957 7 5.26522 7 5C7 4.73478 7.10536 4.48043 7.29289 4.29289C7.48043 4.10536 7.73478 4 8 4C8.26522 4 8.51957 4.10536 8.70711 4.29289C8.89464 4.48043 9 4.73478 9 5Z' fill='%230A0203'/></g><defs><clipPath id='clip0_1073_757'><rect width='16' height='16' fill='white' transform='matrix(-1 0 0 -1 16 16)'/></clipPath></defs></svg>") left 1.5rem top 1.3rem / 20px no-repeat;
}

.CutomStatementPanel .InformationDescription {
    margin: 2rem 0;
}

.StatementDocument,
#PendingTransactionsControl {
    padding: 2rem;
	border: 1px solid rgba(10, 2, 3, .1);
	border-radius: 12px;
}

.statement-footer {
    display: none;
}

.MiniStatementTable {
    margin-top: 3rem;
}

.MiniStatementTable th,
.MiniStatementTable td {
    padding: 1.5rem 0;
}

td.Column4, .THeading4 {
    max-width: 400px;
}

.MiniStatementTable .Column6 {
    color: var(--stockport-red);
}

.MiniStatementTable .Column5 {
    color: var(--bolton-dark-green);
}

.MiniStatementTable .Column8{
    padding-left: 1.5rem;
    text-align: right;
}

.CompanyDetails {
    margin: 1.5rem 0;
}

.address-details {
    display:flex;
    justify-content: space-between;
}

.StatementDocument .company-address {
    text-align: right;
}

.SavingsExtraInfo p {
	width: 70%;
}

.SavingsExtraInfo .Information {
	background: none;
	padding: 0;
	font-weight: 700;
}

.FSCS-container {
	border-radius: 12px;
	background: var(--manchester-purple);
	padding: 3rem;
	display: flex;
	gap: 3rem;
    align-items: flex-start;
	margin: 3rem 0 0;
    color: #fff;
        h3 {
	        margin-top: 0;
        }
        p {
	        width: 100%;
        }
        a {
	        color: #fff;
        }
}

@media screen and (max-width:800px) {
    .address-details{
        flex-direction:column;
    }
    .StatementDocument .company-address {
        text-align:left;
    }
}

.StatementDocument .CompanyDetails img {
    max-width:170px;
}

.StatementDocument .CustomerDetails {
    clear: both;
}

.transaction-close-warning{
    font-weight: bold;
    display: inline-block;
}

.StatementSelectionDescription,
.PendingTransactionsSelectionDescription {
    width: 100%;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.CutomStatementPanel,
#StatementControl_ExportPanel {
    border-radius: 12px;
    background-color: #F9F9F9;
    padding: 1.5rem 2rem 1rem;
    margin-bottom: 2rem;
}

#StatementControl_ExportPanel {
    margin-top: 2rem;
    padding-bottom: 2rem;
}

.CutomStatementPanel h3,
.ExportStatementHeader h3 {
    margin-top: 1rem;
}

.FromDateDescription, .ToDateDescription {
    margin-bottom: 0.5rem;
    display: block;
}

.CutomStatementPanel .SelectDate {
    display: flex;
}

#StatementControl .DateFrom, #StatementControl .DateTo {
    width: 19rem;
}
#StatementControl select#StatementControl_ExportToDropDown {
    width: 50%;
    margin-right: 2%;
}

#StatementControl .RefreshButton{
    display:inline-block;
}

#StatementControl_StatementSelectionDropDown {
    margin-bottom:2rem;
    width: 15rem;
}

.problem-with-service-section .ActionButton,
#ProductError .back-button {
    margin-top: 3rem;
}

@media screen and (max-width:800px) {
    .StatementDocument, 
    #PendingTransactionsControl {
        padding:0;
        border:none;
    }
    .CutomStatementPanel .SelectDate {
        flex-direction: column;
    }
}

/*------------------------------------
$Monthly Statement
------------------------------------*/
.StatementsFilter h3 {
    margin-top: 1rem;
}
.MonthlyStatementChoicePage #ContentDiv .ExpandedPanel #SearchOptions.Expanded,
.MonthlyStatementChoicePage #ContentDiv .CollapsedPanel #SearchOptions.Collapsed,
.MonthlyStatementChoicePage #ContentDiv .CollapsedPanel #SearchOptions.Expanded, 
.MonthlyStatementChoicePage #ContentDiv .ExpandedPanel #SearchOptions.Collapsed {
    display: flex;
}

.MonthlyStatementChoicePage .StatementsFilter .DateFrom,
.MonthlyStatementChoicePage .StatementsFilter .DateTo {
    width: 20rem;
}

.MonthlyStatementChoicePage #SearchOptions {
    display: flex;
}

.MonthlyStatementChoicePage .StatementsFilter .ActionButton {
    display: flex;
    justify-content: flex-end;
    height: max-content;
    margin: 3rem 0;
}

.MonthlyStatementChoicePage .StatementsFilter .Answer {
    max-width: 100%;
}

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

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

.MonthlyStatementChoice ul {
    margin-left: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(10, 2, 3, .1);
}

.MonthlyStatementChoice ul li {
    margin: 0;
    border-bottom: 1px solid rgba(10, 2, 3, .1);
    display: flex;
    align-items: center;
}

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

.MonthlyStatementChoice ul li .Description {
    flex: 1;
}

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

.MonthlyStatementChoice .StatementsFilter {
    border-radius: 12px;
    background-color: #F9F9F9;
    padding: 1.5rem 2rem 1rem;
    margin-bottom: 4rem;
}

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

.MonthlyStatementLoadingSpinner {
    width: 100px;
    float: none;
    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{
    display:flex;
    gap:1rem;
    flex-direction: row;
    margin:3rem 0;
}

.MonthlyStatement{
    clear:both;
    margin-top:3rem;
}

@media screen and (max-width: 800px) {
    .MonthlyStatementChoicePage #SearchOptions,
    .MonthlyStatementPage .ActionButtons{
        flex-direction:column;
    }
    .MonthlyStatementChoicePage .StatementsFilter .ActionButton{
        justify-content: flex-start;
        margin:0 0 2rem;
    }
    .MonthlyStatementChoice ul li{
        flex-direction:column;
        align-items: flex-start;
    }
    .MonthlyStatementChoice ul li .ActionButton {
        margin-top: 0;
    }
}

/* Statement Responsive */
@media screen and (max-width: 800px) {
    .MiniStatementTable {
        margin-top: 1rem;
    }
	#PendingTransactionsControl {
		margin-top: 3rem;
	}
	.maintenanceinformationbutton {
		float: left;
		width: 100%;
		margin-left: 0;
	}
	.MiniStatementTable td {
        border: none;
        padding: 1rem 0;
	}
	.MiniStatementTable tr,
	.MiniStatementTable td,
	.MiniStatementTable th {
    	display: block;
    	width: 100%;
    	position: relative;
    }
    .MiniStatementTable tr {
        border-bottom: 1px solid rgba(10, 2, 3, .1);
    }
    td.ClosingBalanceAmount,
	td.OpeningBalanceAmount, 
	td.ProcessedBalanceAmount, 
	td.ClearedBalanceAmount {
    	position: absolute;
    	top: 0;
    	width: 30%;
        right:0;
	}
	.OpeningBalanceRow,
	.ClearedBalanceRow {
    	background: transparent;
	}
	.MiniStatementTable .Column8 a {
		margin-bottom: 5px;
	}
    .SavingsExtraInfo p {
        width: 100%;
    }
	/* Statement Tables (includes Mini/Custom Statement, Pending Transactions) */
    #PendingTransactionsControl .MiniStatementTable table {
        border: #2e2e2e solid;
        border-width: 2px 0;
    }
	.MonthlyStatement .MiniStatementTable table tr,
    #StatementControl .MiniStatementTable table tr,
    #PendingTransactionsControl .MiniStatementTable table tr {
        display: block;
        position: relative;
        overflow: hidden;
    }
    /* Reset table data display to allow for restyling */
    .MonthlyStatement .MiniStatementTable table td,
	#StatementControl .MiniStatementTable table td,
    #PendingTransactionsControl .MiniStatementTable table td {
        display: block;
        border: 0px none;
        box-sizing: border-box;
        padding: 0.5rem 0.75rem;
    }
    /* Hide headings 'off screen' to allow usage by accessibility tool */
    .MonthlyStatement .MiniStatementTable th,
	#StatementControl .MiniStatementTable th,
    #PendingTransactionsControl .MiniStatementTable th {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    /* Hide Transaction Status, Debit Amount, Credit Amount */
    .MonthlyStatement .MiniStatementTable td.Column3,
    .MonthlyStatement .MiniStatementTable td.Column5,
    .MonthlyStatement .MiniStatementTable td.Column6,
	#StatementControl td.Column3,
    #StatementControl td.Column5,
    #StatementControl td.Column6,
    #PendingTransactionsControl td.Column3,
    #PendingTransactionsControl td.Column5,
    #PendingTransactionsControl td.Column6 {
        display: none;
    }
    /* Transaction Date */
    .MonthlyStatement .MiniStatementTable td.Column2,
	#StatementControl td.Column2,
    #PendingTransactionsControl td.Column2 {
        width: 100%;
        display: block;
    }
    /* Transaction Description */
    .MonthlyStatement .MiniStatementTable td.Column4,
	#StatementControl td.Column4,
    #PendingTransactionsControl td.Column4 {
        width: 60%;
        display: block;
		padding: 0.5rem 0;
    }
    /* Transaction Amount Column */
    .MonthlyStatement .MiniStatementTable .TransactionAmountColumn,
	#StatementControl .TransactionAmountColumn,
    #PendingTransactionsControl .TransactionAmountColumn {
        position: absolute;
        top: 2rem;
        right: 0;
        width: 80%;
        text-align: right;
        font-weight: 600;
        color: var(--stockport-red);
        height: 100%;
    }
	.MonthlyStatement .MiniStatementTable .OpeningBalanceRow .TransactionAmountColumn {
		display:none;
	}
    #PendingTransactionsControl .TransactionAmountColumn {
        bottom: 3.214rem;
    }
    .MonthlyStatement .MiniStatementTable .CreditAmount, 
	.TransactionAmountColumn .CreditAmount {
        color: var(--bolton-dark-green);
		font-weight: 600;
    }
    /* Transaction Balance */
    .MonthlyStatement .MiniStatementTable td.Column7,
	#StatementControl td.Column7,
    #PendingTransactionsControl td.Column7 {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        text-align: right;
    }
	.MiniStatementTable .THeading7, 
	.MiniStatementTable .Column7,
    .MiniStatementTable .THeading2, 
	.MiniStatementTable .Column2 {
    	padding: 0.5rem 0;
	}
	.OpeningBalanceDescription, 
	.ProcessedBalanceDescription, 
	.ClearedBalanceDescription, 
	.ClosingBalanceDescription {
		padding-left: 1rem;
	}
	.OpeningBalanceAmount, 
	.ProcessedBalanceAmount, 
	.ClearedBalanceAmount, 
	.MonthlyStatementPage .ClosingBalanceAmount {
		padding-right: 1rem;
	}
    /* Transaction Details Link Column */
    #PendingTransactionsControl td.Column8 {
        width: 100%;
        text-align: right;
    	padding: 0 0 1rem;
    }
    /* Transaction Balance Rows */
    .ClosingBalanceDescription,
    .StartingBalanceDescription,
    .ProcessedBalanceDescription,
    .ClearedBalanceDescription,
    .OpeningBalanceDescription {
        width: 70% !important;
    }
    .StartingBalanceValue,
    .ProcessedBalanceAmount,
    .ClearedBalanceAmount,
    .OpeningBalanceAmount {
        top: 0;
        right: 0;
        bottom: 0;
        text-align: right;
    }
    /* Hide Transaction Amount Column from Transaction Balance Rows */
	#StatementControl table tr.OpeningBalanceRow .TransactionAmountColumn,
    #StatementControl table tr.ProcessedBalanceRow .TransactionAmountColumn,
    #StatementControl table tr.ClearedBalanceRow .TransactionAmountColumn {
        display: none;
    }
	.AccountInfo .Heading1,
	.AccountInfo .Cell1 {
    	padding: 0 1rem !important;
	}
	.AccountInfo .Cell5 {
		border-bottom: none !important;
	}
	.AccountInfo .QuestionWrapper {
		margin-bottom: 0;
	}
	.UnpaidInterestDestination .Question,
	.UnpaidInterestDestination .Answer {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	#StatementControl_ExportPanel select {
    	width: 100% !important;
    	margin: 10px 0 20px 0;
        max-width: 100%;
	}
	.CutomStatementPanel, 
	#StatementControl_ExportPanel {
    	padding: 1rem 1.2rem;
	}
	#StatementControl_PrintButtonPanel {
		float: left;
    	width: 100%;
	}
	#PendingTransactionsControl .MiniStatementTable tr:first-child {
		border-radius: 4px 4px 0 0;
	}
	#PendingTransactionsControl .MiniStatementTable tr:last-child {
		border-radius: 0 0 4px 4px;
	}
	dd, dt {
		padding: 00;
	}
	dd {
		padding: 1rem 0;
	}
	.CutomStatementPanel .SelectDate {
    	flex-direction: column;
        gap: 1rem;
	}
}

/*------------------------------------
$Savings Goal
------------------------------------*/
.SavingsGoalSummaryControl{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

.SavingsGoalWizardControl .Answer input:disabled,
.SavingsGoalWizardControl .Answer select:disabled {
    border: 1px solid #bbbbbb;
    background: #f0f1f2;
    color: #bbbbbb;
    cursor: not-allowed;
}

.SavingsGoalWizardPage .SavingsAccounts ul.Answer {
    padding-left:0;
    flex-direction:column;
    align-items: flex-start;
}

.SavingsGoalWizardPage .SavingsAccounts ul.Answer span:not(.aspNetDisabled) {
    display: block;
}

.SavingsGoalWizardPage .Information + .SavingsAccounts {
    display:none;
}

.SavingsGoalProgress {
    position: relative;
    background-size: 100%;
    text-align: center;
    color: #fff;
    margin: 3rem 0 0.5rem;
}

.PercentageOverlay {
    position: absolute;
    font-weight: 500;
    color: var(--greater-black);
}

.SavingsGoalTotal {
    width: 100%;
    height: 10px;
    background: #EAEAEA;
    border-radius: 12px;
}

.SavingsGoalProgress .CurrentGoalProgress {
    display: inline-block;
    height: 100%;
    background-color: var(--primary-brand-colour);
    border-radius: 12px;
}

.SavingsGoalProgress .RemainingGoalProgress {
    display: inline-block;
}

.SavingsGoals {
    margin-bottom: 20px;
}

.SavingsGoalSummaryControl .SavingsGoalSummary {
    box-sizing: border-box;
    padding: 1.5rem 2rem;
    text-align: center;
    border: 1px solid rgba(10, 2, 3, .1);
    border-radius: 20px;
}

.SavingsGoalSummaryControl .SavingsGoalSummary h2 {
    margin-top: 0;
    font-size: 1.4rem;
}

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

.SavingsGoalSummaryControl .PercentageOverlay {
    top: -2rem;
    left: 50%;
    transform: translateX(-50%);
}

.SavingsGoalOptions {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.SavingsGoalWizardControl li {
    padding: 0.5rem 0;
}

.SavingsGoalWizardControl li:has(.aspNetDisabled) {
    display: none;
}

.SavingsGoalWizardPage .SavingsAccounts ul {
    list-style-type: none;
}

.DeleteSavingsGoalControl .ActionButton {
    display: flex;
    flex-direction: column;
    margin-top: 3rem;
}

.DeleteSavingsGoalControl .ActionButton a {
    max-width: max-content;
}

.DeleteSavingsGoalControl .ActionButton .BackButton {
    border-bottom: 2px solid;
    border-radius: 0;
}

.DeleteSavingsGoalControl .ActionButton .BackButton:hover {
    border-bottom: 2px solid white;
}

.Progress {
    position: relative;
    background-size: 100%;
    text-align: center;
    background: #848484;
    margin: 0 auto;
    height: 10px;
    margin-bottom: 1rem;
}

.Progress .PercentageOverlay {
    display: none;
}

.Progress .CurrentProgress {
    display: inline-block;
    height: 100%;
    background: var(--rochdale-blue);
}

.Progress .RemainingProgress {
    background: #E9EFEC;
    float: right;
    height: 100%;
}

.SavingsGoalConfirmation .PercentageOverlay {
    top: -2rem;
}

.SavingsGoalTargetDate .Answer{
    padding-left: 3rem;
}

.SavingsGoalWizardControl .Question{
    margin: 0.5rem 0;
    font-weight: normal;
}

.SavingsGoalWizardControl .QuestionWrapper{
    margin: 0.5rem 0;
}

.SavingsGoalWizardPage .CheckBoxQuestion{
    display:grid;
    grid-template-columns: auto 1fr;
    align-items: center;
}

.SavingsGoalWizardControl .Errors {
    background-color: var(--stockport-red);
    border-radius: 12px;
    border: none;
    color: #fff;
}

.SavingsGoalWizardControl .ActionButton,
.PersonaliseAccountControl .ActionButton,
.InterestOptionsControl .ActionButton,
.TransactionWizardControl .ActionButton {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 2rem;
}

.SavingsGoalWizardControl .ActionButton .BackButton,
.SavingsGoalWizardControl .ActionButton a.ExitButton,
.PersonaliseAccountControl .ActionButton .BackButton,
.InterestOptionsControl .ActionButton .BackButton,
.TransactionWizardControl .ActionButton .ExitButton,
.TransactionWizardControl .ActionButton .BackButton  {
    border-bottom: 2px solid;
    border-radius: 0;
}

.SavingsGoalWizardControl .ActionButton .BackButton:hover,
.SavingsGoalWizardControl .ActionButton a.ExitButton:hover,
.PersonaliseAccountControl .ActionButton .BackButton:hover,
.InterestOptionsControl .ActionButton .BackButton:hover,
.TransactionWizardControl .ActionButton .ExitButton:hover,
.TransactionWizardControl .ActionButton .BackButton:hover {
    border-bottom: 2px solid transparent;
}

@media screen and (max-width: 800px) {
   .SavingsGoalSummaryControl{
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 400px) {
    .SavingsGoalSummaryControl .SavingsGoalOptions a {
        padding: 0.7rem 1rem;
    }
}

/*------------------------------------
$Interest Statement
------------------------------------*/
#ChoiceRadioList {
    margin: 2rem 0;
}

#ChoiceRadioList br {
    display: none;
}

#ChoiceRadioList span {
    display: block;
    margin-bottom: 0.7rem;
}

.ActionButtons .AccountMainteance_Main{
    margin-bottom: 2rem;
}

#InterestStatement th {
    width: 50%;
    padding-right: 1rem;
}

#InterestStatement td {
    border-top: 1px solid rgba(10, 2, 3, .1);
}

.Error#InterestStatementError {
    max-width: 100%;
    margin-top: 2rem;
}

#InterestStatement .ActionButtons a.AccountDetails::after {
    display: none;
}

/*------------------------------------
$Interest Options
------------------------------------*/
.AccountMaintainScreen{
    margin-top: 3rem;
}

.FrequencyRadioButtonList label:after,
.PaymentRadioButtonList label:after {
    display: table;
    content: '';
}

.FrequencyRadioButtonList,
.PaymentRadioButtonList{
    display:grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    row-gap: 1rem;
}

.interest-frequency-title,
.interest-instruction-title{
    margin-top:3rem;
}

.FrequencyRadioButtonList br,
.PaymentRadioButtonList br{
    display:none;
}

.InterestPanel{
    padding-bottom:2rem;
}

.AccountMaintenancePage .AccountMaintainScreen .maintenanceinformationtype {
    border-top: 1px solid #cccccc;
    padding: 2rem 0;
}
.AccountMaintenancePage .AccountMaintainScreen .maintenanceinformationtype:first-of-type{
    border:0;
}

.AccountMaintainScreen .maintenancelabel,
.AccountMaintainScreen .maintenancevalue {
    padding: 0;
    margin: 0;
}

.AccountMaintainScreen .maintenanceinformationtype, 
.AccountMaintainScreen .maintenanceinformationtype .maintenancelabel, 
.AccountMaintainScreen .maintenanceinformationtype .maintenancevalue {
    width: auto;
}

.AccountMaintainScreen .maintenanceinformationtype {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column;
}

.AccountMaintenancePage .AccountMaintainScreen .maintenanceinformationbutton{
    margin: -5rem 0.3rem 0 0;
    position: relative;
    z-index: 10;
}

@media screen and (max-width:800px){
    .AccountMaintainScreen .maintenanceinformationtype{
        flex-direction:column;
    }
    .AccountMaintenancePage .AccountMaintainScreen .maintenanceinformationbutton{
        margin:0;
    }
    .AccountMaintenancePage .AccountMaintainScreen .maintenanceinformationbutton a{
        margin-bottom:2rem;
    }
}

/*------------------------------------
$Transaction Wizard
------------------------------------*/
.TransactionWizardControl .ExpandedPanel {
    margin-top: 0.5rem;
    padding: 0.5rem 0;
}

.TransactionWizardControl .CollapsedPanel {
    margin-top: 0.5rem;
    padding: 0.5rem 0;
}

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

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

.TransactionWizardControl #ScaNotificationControl .ActionButton {
    display: inline-block;
    margin-top: 1rem;
}

.TransactionWizardControl .Answer.Confirmation {
    font-weight: 600;
    margin: 0;
}

.QuestionWrapper.TransactionAmount {
    margin: 0;
}

.NoticeChargePeriod {
    background-position: top right;
    background-size: 40px 32px;
    background-repeat: no-repeat;
}

table td.NoticeChargePeriod a {
    background: var(--stockport-red) !important;
    background-image: none;
    color: #fff !important;
}

input[type="radio"] + label{
    position: relative;
    margin-left:1rem;
}

input[type="checkbox"] + label{
    position: relative;
    margin-left:1rem;
}

.SavingsGoalMonthlyContribution .Answer label,
.SavingsGoalAmount .Answer label,
.CurrencySymbol {
    margin-right: 1rem;
}

.CurrencySymbol {
    font-weight: 600;
}

.TransactionWizardPage select{
    width:100%
}

/*------------------------------------*
    Fraud Warning
*------------------------------------*/
#FraudWarningWrapper {
	position: fixed;
	inset: 0;
	z-index: 91;
}
#FraudWarningBackground {
	position: fixed;
	inset: 0;
	z-index: 92;
	background: #000;
	filter: alpha(opacity=75);
	opacity: 0.75;
}
#FraudWarningMessage {
	position: fixed;
	width: 100%;
	inset: 0;
	z-index: 93;
	display: grid;
	overflow-y: auto;
}
#FraudMessageInner {
	place-self: center;
	max-width: 700px;
	height: fit-content;
	display: grid;
	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: 2em;
	text-align: center;
	background: var(--stockport-red);
	color: #fff;
}
#FraudHeadingWrapper h2 {
 	font-size: 1.5em;
	font-weight: normal;
	color: #fff;
}
#FraudContentWrapper {
	grid-area: fraud-content;
	place-self: center;
	box-sizing: content-box;
	margin: 1em 2em 1em 2em;
	border-bottom: 1px solid rgba(10, 2, 3, .1);
	background: #fff;
}
#StopTransactionLinkWrapper,
#ContinueTransactionLinkWrapper {
	margin: 1em 2em 2em 2em;
}
#StopTransactionLinkWrapper {
	grid-area: stop-link;
	justify-self: start;
}
#ContinueTransactionLinkWrapper {
	grid-area: continue-link;
	justify-self: end;
}
.FraudMessagePage h4 {
    margin-bottom: 1rem;
}
.FraudMessagePage .ActionButton {
    margin-top: 3rem;
}
.TakeFiveLogo img {
    width: 400px;
}
@media screen and (max-width:700px) {
	#FraudMessageInner {
		grid-template-columns: auto;
		grid-template-areas:
			"fraud-heading"
			"fraud-content"
			"stop-link"
			"continue-link";
	}
	#ContinueTransactionLinkWrapper {
		grid-area: continue-link;
		justify-self: start;
	}
	#StopTransactionLinkWrapper,
	#ContinueTransactionLinkWrapper {
		margin: 1em;
	}
}

/*------------------------------------
$Tax Year Countdown
------------------------------------*/
.TaxYearCountDownControl h2 {
    background-color: #2e2e2e;
    color: #fff;
    padding: 10px;
    text-align: center;
}

.TaxYearCountDownControl .CountDown {
    font-weight: 700;
    margin-right: 3px;
}

.CountdownSectionsWrapper {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
}

.Section.DayWrapper {
    margin-right: 0.2em;
}

.small {
    font-size: 0.667rem;
}

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

.TaxYearCountDownControl .CountdownLegend {
    text-transform: uppercase;
    display: none;
}

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

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

.datePicker .ui-datepicker {
    padding: 0;
    margin-top: 1rem;
    margin-left: 2px;
    display: inline-block !important;
}

.datePicker .ui-datepicker-calendar {
    border: var(--greater-black) solid 1px;
    margin: 0;
}

.datePicker .ui-datepicker-calendar tr td {
    border: var(--greater-black) solid 1px;
    text-align: center;
}

a.btnToggleDatePicker {
    display: inline-block;
    width: 25px;
    height: 25px;
    position: relative;
    top: 5px;
    left: 5px;
}

.datePicker .ui-datepicker-header {
    border: var(--greater-black) solid 1px;
    background-color: var(--greater-black);
    padding: 10px;
    color: #fff;
}

.datePicker .ui-datepicker-header .ui-datepicker-prev {
    float: left;
    color: #fff;
    padding: 0 3px;
}

.datePicker .ui-datepicker-header .ui-datepicker-next {
    float: right;
    color: #fff;
    padding: 0 3px;
}

.datePicker .ui-datepicker-header .ui-datepicker-prev:hover,
.datePicker .ui-datepicker-header .ui-datepicker-next:hover {
    text-decoration: none;
    background-color: #fff;
    color: var(--greater-black);
    cursor: pointer;
}

.datePicker .ui-datepicker-header .ui-datepicker-title {
    text-align: center;
}

.datePicker .ui-datepicker-header .ui-state-disabled {
    opacity: 0.4;
}

.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: 5px 10px;
}

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

.datePicker .ui-datepicker-calendar .ui-datepicker-unselectable {
    opacity: 0.3;
}

.datePicker .ui-datepicker-calendar tr .ui-datepicker-today {
    background-color: var(--rochdale-blue);
    color: var(--greater-black);
}

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

.datePicker .ui-datepicker-calendar .ui-state-default {
    background-color: var(--thameside-stone);
    color: var(--greater-black);
    text-decoration: none;
}

.ui-datepicker-current-day .ui-state-active {
    background-color: var(--rochdale-blue) !important;
    font-weight: bold;
}

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

.DatePickerControl .DropDown {
    overflow: hidden;
    float: left;
    margin: 0 8px 0 0;
    width: 100px;
}

.DatePickerControl .ddMonthYear {
    width: 118px;
    padding-left: 10px;
}

.DatePickerControl .ToggleImage {
    width: 22px;
}

.DatePickerControl {
    border-radius: 4px;
    max-width: 460px;
}

.DatePickerControl th,
.DatePickerControl td {
    padding: 5px;
    font-size: 1rem;
    border-bottom: 1px solid var(--greater-black);
    text-align: center;
}

/*------------------------------------
$Open New Account
------------------------------------*/
.ProductInformation .default-button,
.ApplicationForm .default-button{
    display: flex;
    margin: 0;
}

.ProductInformationTable .ApplicationFormHeader,
.ProductInformationTable .ProductInformationHeader{
    text-align: center;
}

.ApplicationForm .default-button,
.ProductInformation .default-button{
    justify-content: center;
}

.ProductListControl .savingsProduct {
    margin-bottom: 2rem;
}

.ProductListControl h3 {
    margin-top: 4rem;
}

.ProductListControl p,
.introduction-text p {
    width: 70%;
}

.DefinedAccessRateTable {
    margin: 0;
}

.DefinedAccessRateTable th,
.DefinedAccessRateTable .AnnualRateColumn,
.DefinedAccessRateTable .MonthlyRateColumn {
    display: none;
}

.DefinedAccessRateTable td {
    width: 100%;
    display: block;
    padding: 0;
    border: none;
}

.DefinedAccessRateTable .DescriptionColumn {
    color: #505a5f;
}

.savingsProduct {
    border: 6px solid var(--thameside-stone);
    padding: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 1rem;
    grid-gap: 2rem;
}

.grid {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    margin: 0 auto;
}

.ProductOverviewControl .grid {
    grid-gap: 4rem;
}

.NewAccountContentWrapper {
    padding: 1rem 0 3rem;
}

.NewAccountContentWrapper .ActionButton {
    margin: 0;
    border-bottom: 2px solid;
    width: max-content;
}

.NewAccountContentWrapper .ActionButton:hover {
    border-bottom: 2px solid transparent;
}

.NewAccountContentWrapper .ActionButton a {
    margin: 0;
    line-height: initial;
    border:none !important;
}

.summary,
.col-lg-9 {
    grid-column: span 8;
    width: 75%;
}

.col-lg-8 {
    grid-column: span 7;
}

.col-md-6 {
    grid-column: span 5;
}

.col-lg-4 {
    grid-column: span 4;
}

.name {
    padding: 2rem 1.25rem;
    width: 20%;
}

.name h4 {
    margin: 0;
    text-wrap: balance;
}

.key-features {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    padding: 2rem 1rem 1rem 0;
}

.feature-list {
    margin: 0;
}

.key-features .feature-list li,
.two-column-list li {
    margin-bottom: 0.7rem;
    display: flex;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54.63 39.18'><polygon points='51.44 0 18.62 32.82 3.18 17.38 0 20.56 15.44 36 15.44 36 18.62 39.19 54.63 3.18 51.44 0' fill='black'/></svg>") left top 0.3rem / 15px no-repeat;
    padding-left: 1.7rem;
}

.two-column-list .right-column li {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 45.7 45.7'><polygon points='45.7 3.18 42.52 0 42.52 0 22.85 19.67 3.18 0 0 3.18 19.67 22.85 0.13 42.39 3.31 45.57 22.85 26.03 42.52 45.7 45.7 42.52 26.03 22.85 45.7 3.18' fill='black'/></svg>") left top 0.4rem / 13px no-repeat;
}

.two-column-list ul {
    padding: 0;
}

.two-column-list h5 {
    margin: 0;
}

.right-column, .left-column {
    width: 50%;
}

.rate-wrapper {
    display: flex;
    width: 30%;
}

.rate-wrapper.col-lg-3 {
    grid-column: span 3;
}

.rate-wrapper .rate,
.DefinedAccessRateTable .AerRateColumn {
    font-size: 3rem;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 0;
    margin-top: 0;
}

.DefinedAccessRateTable .AerRateColumn {
    margin: 0.5rem 0 2rem;
}

.annual-rate {
    font-size: 1rem;
    color: #505A5F;
    font-weight: normal;
    display: block;
    margin-top: 1rem;
}

.product-information {
    width: 70%;
}

.Product-Information-Button {
    justify-self: flex-end;
    margin-bottom: 2rem;
}

.ProductOverviewControl .two-column-list {
    border-top: 0.5rem solid var(--bury-orange);
    padding: 3rem 0 0;
    margin: 2rem 0;
}

.ProductOverviewControl h1 {
    margin: 0;
}

.ProductOverviewControl .apply {
    position: sticky;
    top: 8rem;
    width: 30%;
    align-self: flex-start;
    margin-bottom: 0;
}

.ProductOverviewControl .content-top {
    color: #fff;
    background-color: var(--greater-black);
    border: 2px solid var(--greater-black);
    padding: 2rem 1.5rem 0;
    border-radius: 0.75rem 0.75rem 0 0;
}

.ProductOverviewControl .content-top h5,
.ProductOverviewControl .content-bottom h5 {
    margin: 0;
}

.ProductOverviewControl .content-top .ActionButton {
    margin: 1.5rem 0;
    padding: 0;
    width: 100%;
}

.ProductOverviewControl .content-top .ActionButton:after {
    display: none !important;
}

.ProductOverviewControl .content-bottom p {
    font-size: 1rem;
}

.ActionButton .ApplicationFormButton {
    background-color: #fff;
    width: 100%;
    padding: 0.7rem 1rem;
}

.ActionButton .ApplicationFormButton:hover {
    border-color: #fff !important;
}

.apply .ActionButton a:focus-visible {
    background-color: #fff;
    color: var(--greater-black);
}

.apply .ActionButton a:hover::after {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='14' viewBox='0 0 9 14'><path d='M1 1L7 7L1 13' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
}

.ProductOverviewControl .content-bottom {
    padding: 2rem 1.5rem 1rem;
    border: 2px solid var(--greater-black);
    border-radius: 0 0 0.75rem 0.75rem;
}

.ProductInformationTable th {
	background-color: #fff;
	color: var(--primary-font-colour);
	border-bottom: 5px solid var(--primary-background-colour);
	width: 28%;
}

.ProductInformationTable tr {
	border-bottom: 1px solid #ddd;
}

.ProductInformationTable tr:last-child {
	border-bottom: none;
}

th.ProductNameHeader {
    width: 25%;
}

.introduction-text {
    margin: 3rem 0 1.5rem;
}

#termsAndConditions ul {
    padding: 0;
}

#termsAndConditions li {
    list-style-type: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M2.794 18.409a1.203 1.203 0 0 1 -1.206 -1.203V5.291H0v11.915a2.794 2.794 0 0 0 2.794 2.79h11.947v-1.587Z'/><path d='M0 3.704L0 5.291L11.048 5.291L12.635 3.704L0 3.704Z'/><path d='M14.741 9.048L14.741 18.413L14.741 20L16.328 20L16.328 18.413L16.328 7.46L14.741 9.048Z'/><path d='M19.986 1.122v-0.3a0.776 0.776 0 0 0 -0.06 -0.317A0.797 0.797 0 0 0 19.192 0.014h-8.677v1.587h6.762L8.589 10.275l1.122 1.129L18.399 2.709v6.765h1.587Z'/></svg>") left center / 20px no-repeat;
    padding-left: 2.5rem;
    margin-bottom: 1rem;
}

.terms-and-conditions.button {
    padding: 1.5rem 0;
    display: block;
}

.terms-and-conditions.button a {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'><path d='M13 1L7 7L1 1' stroke='%230A0203' stroke-width='1.5' stroke-linecap='round' fill='none'/></svg>") right center / 13px no-repeat;
    padding-right: 1.5rem;
    font-size: 1rem;
    transition: 1s all linear;
    -webkit-transition: 1s all linear;
    -moz-transition: 1s all linear;
    -ms-transition: 1s all linear;
    -o-transition: 1s all linear;
    text-underline-offset: 0.5em;
}

.issue-number{
    display: block;
}

.ProductOverviewControl .defined-access .issue-number{
    display:inline-block;
}

@media screen and (max-width:960px){
    .ProductListControl{
        margin-bottom:0;
    }
    .ProductListControl .product-category-title,
    .aer-information{
        text-align:center;
        display:block;
		border-bottom: 5px solid var(--primary-background-colour);
        margin: 0;
        padding: 1rem;
    }
    .ProductInformationTable thead {
        display: none;
    }
    .ProductInformationTable td {
        width: 100% !important;
        display: inline-block;
        text-align: center;
    }
    .ProductInformationTable td.ProductName {
		padding-top: 1.5rem;
	}
	.aer-information {
		border: none;
	}
}

/*------------------------------------*
$ C2C product colours
*------------------------------------*/
.fixed-rate-bonds {
    border: 0.375rem solid var(--trafford-green);
}
.fixed-rate-bonds .name {
    background-color: var(--trafford-green);
}
.ProductOverviewControl .fixed-rate-bonds {
    border: none;
}
.ProductOverviewControl .fixed-rate-bonds .two-column-list {
    border-top: 0.5rem solid var(--trafford-green);
}

.easy-access,
.defined-access {
    border: 0.375rem solid var(--oldham-pink);
}
.easy-access .name,
.defined-access .name {
    background-color: var(--oldham-pink);
}
.ProductOverviewControl .easy-access,
.ProductOverviewControl .defined-access {
    border: none;
}
.ProductOverviewControl .easy-access .two-column-list,
.ProductOverviewControl .defined-access .two-column-list {
    border-top: 0.5rem solid var(--oldham-pink);
}

.regular-saver {
    border: 0.375rem solid var(--thameside-stone);
}
.regular-saver .name {
    background-color: var(--thameside-stone);
}
.ProductOverviewControl .regular-saver {
    border: none;
}
.ProductOverviewControl .regular-saver .two-column-list {
    border-top: 0.5rem solid var(--thameside-stone);
}

.notice {
    border: 0.375rem solid var(--rochdale-blue);
}
.notice .name {
    background-color: var(--rochdale-blue);
}
.ProductOverviewControl .notice {
    border: none;
}
.ProductOverviewControl .notice .two-column-list {
    border-top: 0.5rem solid var(--rochdale-blue);
}

.ISA {
    border: 0.375rem solid var(--bury-orange);
}
.ISA .name {
    background-color: var(--bury-orange);
}
.ProductOverviewControl .ISA {
    border: none;
}
.ProductOverviewControl .ISA .two-column-list {
    border-top: 0.5rem solid var(--bury-orange);
}

/*------------------------------------*
$Summary Box
*------------------------------------*/
caption {
    text-align: left;
    margin-bottom: 1rem;
    font-weight: bold;
}

.savings-summary-box .summary-box-section-heading {
    padding: 0.5rem 1rem 0 0;
}

.savings-summary-box .summary-box-section-heading h2,
.savings-summary-box .summary-box-section-heading h3 {
    font-size: 1rem;
    line-height: initial;
    margin: 1rem 0;
}

.savings-summary-box .summary-box-section-content {
    padding: 0.5rem 0 1rem 0;
}

.savings-summary-box .summary-box-section-content p {
    font-size: 1rem;
}

.summary-box-section-content ul{
    font-size:1rem;
}

    @media (min-width: 768px) {
        .savings-summary-box {
            border-top-width: 1px;
        }
        .savings-summary-box section {
            display: grid;
            grid-template-columns: 30% auto;
            border-top: 1px solid rgba(10, 2, 3, .1);
        }
        .savings-summary-box section:last-child {
            border-bottom: 1px solid rgba(10, 2, 3, .1);
        }
    }

.savings-summary-box table {
    margin: 1rem 0;
    font-size: 1rem;
}

.savings-summary-box table th,
.savings-summary-box table td {
    padding: 0.5rem;
    border: none;
    text-align: left;
}

#lower-interest-rate-header {
    font-size: 1rem;
    font-weight: bold;
}

/* Layout tables side-by-side */
@media only screen and (min-width: 768px) {
    .side-by-side-tables {
        display: grid;
        grid-template-columns: 1fr;
    }
    .savings-summary-box table th,
    .savings-summary-box table td{
        padding: 0 1rem 1rem 0;
    }
    .side-by-side-tables table:first-child caption,
    .side-by-side-tables table:first-child th:last-child,
    .side-by-side-tables table:first-child td:last-child {
        border-right-color: transparent;
    }
    .side-by-side-tables th,
    .side-by-side-tables td {
        text-align: center;
    }
}

@media only screen and (max-width: 800px) {
    .grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    .ProductListControl p,
    .introduction-text p,
    .product-information,
    .right-column,
    .left-column {
        width: 100%;
    }
    .left-column {
        padding-bottom: 2rem;
    }
    .FSCS-container {
        display: flex;
        flex-direction: column;  
        padding: 2rem;
    }
    .ProductOverviewControl .grid{
        grid-gap: 0;    
        width: 100%;
    }
    .ProductOverviewControl .apply {
        width: 100%;
        margin-top: 2rem;
    }
    .ProductOverviewControl .key-features {
        margin-top: 2rem;
    }
    .terms-and-conditions.button {
        display: none;
    }
    .name,
    .summary {
        grid-column: span 8;
        width: 100%;
        padding: 1rem;
    }
    .key-features {
        padding: 0 0 1rem;
    }
    .Product-Information-Button {
        padding-right: 1rem;
    }
    .savings-summary-box .summary-box-section-heading,
    .savings-summary-box .summary-box-section-content {
        padding: 0;
    }
}

@media only screen and (max-width: 450px) {
    .key-features {
        flex-direction: column;
    }
    .feature-list {
        padding: 1rem 0 0;
    }
    .Product-Information-Button {
        padding-right: 0;
        width: 100%;
    }
    .Product-Information-Button a {
        width: 100%;
    }
}

/*------------------------------------
$Print Styles
------------------------------------*/
@media print {
    @page {
        size: A4;
        margin: 1.5cm 0.7cm; 
      }
    .main-logo,
    .StatementDocument img {
        display:none !important;
    }
    .statement-logo {
        display:block !important;
    }
    .full-width-header-container{
        position: relative;
    }
    html, body{
        width: 210mm;
        height: 282mm;
        background: #FFF;
        overflow: visible;
        font-size:13px;
        color:#000;
    }
    #ContentDiv,
    .inner-header-container {
        padding: 0 1rem;
    }
    #title-container{
        background-color: transparent;
    }
    #title-container-inner{
        padding-top:0;
        padding-bottom:0;
    }
    h1 {
        display: none;
    }
    h2 {
        font-size: 2rem;
        margin: 0 !important;
    }
    h3{
        font-size:18px;
    }
    #StatementControl,
    .AccountMaintenance.AccountMainteance_StatementHeader,
    .MiniStatementTable {
        margin: 0 !important;
    }
    .SavingsExtraInfo p {
        width: 100%;
    }
    .FSCS-container {
        padding: 0;
        display: block;
        margin: 0 0 1rem;
        color: #000;
        background: transparent;
    }
    .FSCS-container img {
        display: none;
    }
    .FSCS-container a {
        color: #000;
    }
    .AccountStatusControl{
        margin-top:0;
    }
    .address-details {
        flex-direction: row;
    }
    .MiniStatementTable td,
    .MiniStatementTable th{
        padding:1rem;
    }
    table {
        border-collapse:collapse;
        border:1px solid #cccccc;
        width:100%;
        page-break-inside: auto;
        }
        tr { 
            page-break-inside: avoid; 
            page-break-after: auto; 
        }
        th, td {
        border:1px solid #cccccc;
        padding:10px;
        color: #000 !important;
        }
        th {
        text-align:left;
        padding:10px;
        }
        thead { 
            display: table-header-group; 
        }
        tfoot { 
            display: table-footer-group; 
        }
        .THeading4,
        .Column4 {
            width:400px;
        }
        .THeading2,
        td.Column2 {
            width: 130px;
        }
    .desktop,
    .mobile,
    .AccountContextMenu,
    .StatementSelectionDescription,
    #StatementControl select,
    .CutomStatementPanel,
    #StatementControl_ExportPanel,
    .PrintButton,
    #FooterDiv,
    .ActionButtons,
    .CompanyDetails,
    .PendingTransactionsSelectionDescription,
    .DatePickerControl,
    .RefreshButton,
    .Column8,
    .THeading8,
    #LeftSideDiv,
    #PendingTransactionsControl .ActionButton,
    #PendingTransactionsControl,
    .statement-account-information {
        display:none !important;
    }
    .MonthlyStatement,
    #title-container-inner {
        margin-top:0;
    }
    .AccountStatusControl {
        float:none;
    }
    .StatementDocument, 
    #PendingTransactionsControl {
        border:0 !important;
        padding:0 !important;
    }
    .AccountStatusControl .QuestionWrapper.PseudoName, 
    .AccountStatusControl .QuestionWrapper.Balance, 
    #InterestRateInformation_AccountMaintenanceScreen, 
    #MaturityDate_AccountMaintenanceScreen {
        float:none;
        margin-top:0;
    }
    .QuestionWrapper {
        margin:0;
    }
    .AccountMaintainScreen .maintenanceinformationtype, 
    .AccountMaintainScreen .maintenanceinformationtype .maintenancelabel, 
    .AccountMaintainScreen .maintenanceinformationtype .maintenancevalue {
        margin-bottom:0.5rem;
    }
    .StatementDocument,
    #StatementControl {
        margin-top:0;
    }
    .ot-floating-button {
        display:none !important;
    }
    .statement-footer {
        display: block;
    }
    #HeaderDiv,
    .full-width-header-container {
        box-shadow: none !important;
        border: none !important;
        margin-bottom: 0;
    }
    .statement-definitions {
        page-break-before : always;
    }
    #ContentWrapper{
        margin-top:0;
    }
}