/*------------------------------------
CONTENTS
------------------------------------*/
/*
Resets & Hides
Layout
Header
Content
Footer
Headers
Hyperlinks
Tables
Navigation
Modal
Responsive
*/

/*------------------------------------
$Resets & Hides
------------------------------------*/

:root {

    --stockport-red:#AC1E2D;
    --salford-royal-blue:#1C57A5;
    --bolton-dark-green:#286140;
    --manchester-purple:#8F1A95;
    --thameside-stone:#D3C5A0;
    --wigan-yellow:#FFD84A;
    --bury-orange:#F57F45;
    --rochdale-blue:#96CFEA;
    --trafford-green: #C7DB48;
    --oldham-pink:#F388AF;
    --greater-black:#0A0203;
    
    --base-font-size: 1.125rem;
    --primary-font-colour: #0A0203;
    --primary-brand-colour: #0A0203;
    --primary-background-colour: #0A0203;
    --secondary-background-colour: #fff;
    --tertiary-background-colour: transparent;

    --page-title-background-colour: #F57F45;

    /* Default navigation styles */
    --navigation-text-colour: #0A0203;
    --navigation-text-hover-colour: #2c2d2e;
    --navigation-text-focus-colour: #0A0203;
    --navigation-text-active-colour:#2c2d2e;

    /* Default anchor link styles */
    --anchor-link-colour: #0A0203;
    --anchor-link-hover-colour: #2c2d2e;

    --input-focus-colour: #FFD84A;
    --input-border-colour: #0A0203;
    
    /* Primary button styles */
    --primary-button-background-colour: #0A0203;
    --primary-button-text-colour: #fff;
    --primary-button-border-colour: #0A0203;

    /* Primary button hover styles */
    --primary-button-hover-background-colour: #fff;
    --primary-button-hover-text-colour: #0A0203;
    --primary-button-hover-border-colour: #0A0203;

    /* Secondary button styles */
    --secondary-button-background-colour: transparent;
    --secondary-button-text-colour: #0A0203;
    --secondary-button-border-colour: #0A0203;

    /* Secondary button hover styles */
    --secondary-button-hover-background-colour: #0A0203;
    --secondary-button-hover-text-colour: #fff;
    --secondary-button-hover-border-colour: #0A0203;

    /* Log out button styles */
    --logoff-button-background-colour: #0A0203;
    --logoff-button-text-colour: #fff;
    --logoff-button-border-colour: #0A0203;
   
    /* Log out button hover styles */
    --logoff-button-hover-background-colour: #fff;
    --logoff-button-hover-text-colour: #0A0203;
    --logoff-button-hover-border-colour: #0A0203;

    --button-focus-colour: #0A0203;
    --error-border-colour: #AC1E2D;
    --error-text-colour: #AC1E2D;
}

.questionNumber,
.DirectDebitAccountHeader,
.DirectDebitAccount,
.LogoMobile {
    display: none;
}

/*Sticky footer/Page height fix*/

html {
    position: relative;
    color: #2e2e2e;
    box-sizing: border-box;
    height: 100%;
    scroll-behavior: smooth;
}

body {
    height: 100%;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    -ms-grid-rows: 1fr auto;
    grid-template-columns: 100%;
    grid-template-rows: 1fr auto;
    padding: 0;
    font-size: var(--base-font-size);
    line-height: 1.5;
    font-family: "inter", Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: var(--greater-black);
    margin: 0;
}

p {
    margin: 1rem 0;
    line-height: 1.5;
}

/*END*/

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

*, *:focus, *:hover {
    box-sizing: border-box;
}

img {
    background-color: transparent;
}

@media only screen and (max-width: 1024px) {
    body {
        font-size: 1rem;
    }
}

textarea,
input.text,
input[type='text'],
input[type='submit'],
input[type='email'],
input[type='tel'],
input[type='password'],
input[type='number'],
.input-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font: inherit;
    font-family: "inter", Arial, "Helvetica Neue", Helvetica, sans-serif;
    padding: 8px 12px;
    border: 2px solid var(--input-border-colour);
    border-radius: 6px;
    max-width: 50%;
    width: 100%;
}

select {
    font: inherit;
    font-family: "inter", Arial, "Helvetica Neue", Helvetica, sans-serif;
    padding: 8px 12px;
    border: 2px solid var(--input-border-colour);
    border-radius: 6px;
    max-width: 50%;
    width: 100%;
}

select:focus,
input[type='text']:focus,
input[type='email']:focus,
input[type='tel']:focus,
input[type='password']:focus,
input[type='number']:focus,
textarea:focus{
    outline: 3px solid var(--input-focus-colour);
    outline-offset: 0;
    box-shadow: inset 0 0 0 1px;
}

input[type='radio'],
input[type='checkbox'] {
    position: relative;
	margin: 0;
    vertical-align:middle;
    top: 0;
    accent-color: var(--salford-royal-blue);
    width: 2rem;
    height: 2rem;
}

input[type='radio']:disabled,
input[type='checkbox']:disabled,
input[type='radio']:disabled + label,
input[type='checkbox']:disabled + label {
    cursor: not-allowed;
}

select {
    padding: 10px 5px;
}

@media screen and (max-width:800px){
    textarea,
    input.text,
    input[type='text'],
    input[type='button'],
    input[type='submit'],
    input[type='email'],
    input[type='tel'],
    input[type='password'],
    input[type='number'],
    select,
    .input-checkbox,
    .Answer {
        max-width: 100%;
    }
}

/*------------------------------------
$Layout
------------------------------------*/
#FullPage {
    display: -ms-grid;
    display: grid;
    min-height: 100%;
    -ms-grid-columns: 100%;
    -ms-grid-rows: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
    grid-template-areas: "Header""Content""Footer";
    width: 100%;
}

/*------------------------------------
$Header
------------------------------------*/
#HeaderDiv {
    grid-area: Header;
    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);
    position: relative;
    z-index: 10;
}

.ChangeDetailsPage #HeaderDiv,
.InboxPage #HeaderDiv,
.OpenNewAccountPage #HeaderDiv {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding-top: 0;
}

.LogInPage #HeaderDiv,
.LogOffPage #HeaderDiv {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

#logo-container {
    margin: 0 auto;
    max-width: 1440px;
    padding: 0 1rem;
    background-color: white;
}

.LogInPage #logo-container,
.LogOffPage #logo-container,
.SiteErrorPage #logo-container {
    padding: 1rem 1rem 0.5rem;
}

.logo {
    height: 67px;
}

.logo a,
#logo-container a {
    display: block;
    width: max-content;
}

img.main-logo,
.moblie-menu-header-logo {
    width: 165px;
    height: 67px;
    position:relative;
}

.CollapsedPanel .moblie-menu-header-logo {
    display:none;
}

img.statement-logo {
    display:none;
    width: 165px;
    height: 67px;
}

.full-width-header-container {
    background-color: #fff;
}

.inner-header-container {
    display: flex;
    max-width: 1440px;
    margin: 0 auto;
    padding: 1rem;
    align-items: center;
}

nav.desktop {
    justify-content: flex-end;
}

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

.AccountSummaryPage #LeftSideDiv {
    position: relative;
    display: flex;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='494' height='338' viewBox='0 0 494 338' fill='none'><path d='M494.007 0V338C237.965 338 20.6261 272 0.777832 0H494.007Z' fill='%2396CFEA'/></svg>") top right no-repeat;
    background-size: 30%;
    background-color: var(--manchester-purple);
    height: 430px;
    z-index: 2;
}

.AccountSummaryPage #LeftSideDiv::before {
    content: "";
    position: absolute;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1439' height='32' viewBox='0 0 1439 32' fill='none'><path d='M1439 27.2809C803.483 -22.1274 214.868 6.69408 0 27.2809V32H1439V27.2809Z' fill='white'/></svg>") no-repeat;
    bottom: 0;
    left: 0;
    top: 1px;
    width: 100%;
    height: 100%;
    background-size: 100%;
    background-position: bottom;
}

/* Page Title */

#title-container{
    background-color: var(--page-title-background-colour);
}
#title-container-details {
    display: flex;
    position: relative;
    background: var(--bolton-dark-green) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='411' height='471' viewBox='0 0 411 471' fill='none'><path d='M178.5 450.988C-3 415.5 -20.5 284.5 17.4719 184.5C66.6118 50.2393 121.5 0 121.5 0L410 0.0122021L411 462.988H410C410 462.988 360 486.476 178.5 450.988Z' fill='%23FFD84A'/></svg>") right / 40% no-repeat;
    padding-left:0;
    height: 430px;
    color: white;
    &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        top: 1px;
        width: 100%;
        height: 100%;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1439' height='32' viewBox='0 0 1439 32' fill='none'><path d='M1439 27.2809C803.483 -22.1274 214.868 6.69408 0 27.2809V32H1439V27.2809Z' fill='white'/></svg>") no-repeat;
        background-size: 100%;
        background-position: bottom;
    }
}
#title-container-inbox {
    display: flex;
    position: relative;
    background: var(--bury-orange) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='793' height='404' viewBox='0 0 793 404' fill='none'><path d='M798.238 -3V404C487 157 331 77 0.761719 -3H798.238Z' fill='%231C57A5'/></svg>") right top no-repeat;
    background-size: 50% cover;
    color: var(--primary-brand-colour);
    height: 430px;
    &::before {
        content: "";
        position: absolute;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1439' height='32' viewBox='0 0 1439 32' fill='none'><path d='M1439 27.2809C803.483 -22.1274 214.868 6.69408 0 27.2809V32H1439V27.2809Z' fill='white'/></svg>") no-repeat;
        bottom: 0;
        left: 0;
        top: 1px;
        width: 100%;
        height: 100%;
        background-size: 100%;
        background-position: bottom;
    }
}

#title-container-account {
    display: flex;
    position: relative;
    background: var(--trafford-green) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='793' height='404' viewBox='0 0 793 404' fill='none'><path d='M798.238 -3V404C487 157 331 77 0.761719 -3H798.238Z' fill='%23AC1E2D'/></svg>") right top no-repeat;
    background-size: 50% cover;
    color: var(--primary-brand-colour);
    height: 430px;
    &::before {
        content: "";
        position: absolute;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1439' height='32' viewBox='0 0 1439 32' fill='none'><path d='M1439 27.2809C803.483 -22.1274 214.868 6.69408 0 27.2809V32H1439V27.2809Z' fill='white'/></svg>") no-repeat;
        bottom: 0;
        left: 0;
        top: 1px;
        width: 100%;
        height: 100%;
        background-size: 100%;
        background-position: bottom;
    }
}

#title-container-inner {
    max-width: 1440px;
    width: 100%;
    margin: 100px auto;
    padding: 0 1rem;
}

/*------------------------------------
$Content
------------------------------------*/
#ContentWrapper {
    grid-area: Content;
}

#ContentDiv {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 1rem;
}

#RightSideDiv {
    display: none;
}

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

.InboxPage #RightSideDiv,
.StatementPage #RightSideDiv,
.AccountMaintenancePage #RightSideDiv,
.InterestHistoryPage #RightSideDiv,
.InterestStatementChoicePage #RightSideDiv{
    position: absolute;
    top: 70px;
    left: 2%;
    width: 21%;
}

/*------------------------------------
$ISA Tax Year End Styles
------------------------------------*/

.TYE_Info {
    border-radius: 12px;
    background: var(--bury-orange);
    padding: 2rem 3rem;
    display: block;
    margin: 0 0 3rem;
    color: var(--greater-black);
}

/*------------------------------------
$Footer
------------------------------------*/
#FooterDiv {
    grid-area: Footer;
    margin-top: 3rem
}

.SiteErrorPage #FooterDiv {
    margin-top: 3rem;
}

.help-container {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    background: 
    linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 50%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='817' height='604' viewBox='0 0 817 604' fill='none'><mask id='mask0_983_1867' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='924' height='604'><path d='M96 222C56 159.6 15.3333 48 0 0L924 18L906 604H454C351.333 502.667 136 284.4 96 222Z' fill='%23C7DB48'/></mask><g mask='url(%23mask0_983_1867)'><path d='M817.001 48C817.001 48 -96 48 -625 -16V630L817.001 568V48Z' fill='%23F57F45'/></g></svg>") center no-repeat;
    background-position: right center;
    background-size: 60%;
    background-color: #8F1A95;
    padding: 3rem 0 4rem;
}

.help-content {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

.help-content h2 {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 3.063rem;
}

.help-content h2 {
    margin-bottom: 1rem;
}

.help-content h5 {
    margin: 2rem 0;
}

.help-content a {
    color: #fff;
    text-decoration: none;
    word-wrap: break-word;
}

.help-content p {
    margin-bottom: 10px;
    width: 45%;
    word-wrap: break-word;
}

.phone-number {
    font-weight: bold;
}

.help-button {
    background-color: white;
    color: #000;
    padding: 0.8rem 3rem;
    font-size: 1rem;
    font-weight:500;
    border-radius: 50px;
    cursor: pointer;
    margin-top: 1.5rem;
    border: 2px solid #fff;
}

.help-button:hover {
    background-color: transparent;
    color: white;
    border: 2px solid;
}

.help-button:after {
    display: none;
}

.help-button:focus-visible {
    background-color: #FFF;
    color: var(--greater-black);
}

.footer-container {
    box-sizing: border-box;
    display: flex;
    background-color: var(--primary-brand-colour);
    flex-direction: column;
    align-items: center;
    width: 100%;
    color:White;
    padding: 2rem 0;
    ul {
        list-style: none;
        padding: 0;
    }
    h2 {
        font-weight: bold;
    }
    li {
        padding-bottom:3px;
    }
    li a{
        color:white;
        text-decoration: none;
    }
    a:focus-visible {
        outline-color: var(--input-focus-colour);
    }
}

.footer-links {
    display: flex;
    gap: 2rem;
    a:hover {
        text-decoration: underline;
    }
}

.footer-logos {
    display: flex;
    gap: 3rem;
    margin-top: 2.188rem;
}

.footer-top, .footer-bottom {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
    margin-left: 0px;
    box-sizing: border-box;
    max-width: 1440px;
    padding: 0 1rem;
	font-size: 1rem;
    p {
        max-width: 1440px;
    }
}
.footer-bottom a {
    color: #fff;
}
.footer-top h6 {
    margin: 1rem 0;
}

.white-logo {
    width: 250px;
    height: 80px;
}
.white-fscs {
    width: 150px;
}

.fscs-png {
    width: 200px;
    margin-top: -60px;
}
.social-icons {
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
}
.social-icons a {
    height: 1.5rem;
    width: 1.5rem;
    display: block;
}
.social-icons a img {
    transition: all ease 0.3s;
}
.social-icons a:hover img {
    transform: scale(1.5);
}

.footer-container {
    a:focus-visible {
        text-decoration: underline;
    }
}

@media only screen and (max-width: 1280px) {
    footer {
        text-align: left;
    }
    footer ul li {
        display: block;
        padding: 0 0 10px 0;
        border: 0;
    }
    .help-container {
        background: none;
        background-color: #8F1A95;

    }
    .help-content {
        padding-left: 1rem;
    }
    .footer-container {
        flex-direction: column;
    }
    #title-container-details {
        background-image: none;
    }
}

@media (max-width: 1024px) {
    .AccountSummaryPage #LeftSideDiv {
        position: relative;
        display: flex;
        background: var(--manchester-purple);
        overflow: hidden;
        height: fit-content;
    }
    #title-container-inbox {
        position: relative;
        display: flex;
        background: var(--bury-orange);
        height: fit-content;
    }
    #title-container-details {
        display: flex;
        position: relative;
        background: var(--bolton-dark-green);
        padding-left:0;
        color: white;
        overflow: hidden;
        height: fit-content;
    }
    #title-container-account {
        position: relative;
        display: flex;
        background: var(--trafford-green);
        height: fit-content;
    }
    #title-container-inner {
        margin: 2rem auto;
    }
}

/* Responsive */
/* Mobile Devices*/
@media (max-width: 768px){
    .logo {
        padding-top:0.5rem;
        margin-bottom: 0.5rem;
    }
    .fscs-png {
        margin-left: -4rem;
    }
    .full-width-header-container {
        position: fixed;
        z-index: 2;
        width: 100%;
        -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);
    }
    .inner-header-container {
        padding: 0.5rem 1rem 1rem;
    }
    .moblie-menu-header-logo {
        padding-top: 0.95rem;
        margin-bottom: 0.5rem;
    }
    #ContentWrapper {
        margin-top: 6.2rem;
    }
    .AccountSummaryPage #ContentWrapper,
    .ChangeDetailsPage #ContentWrapper,
    .InboxPage #ContentWrapper,
    .OpenNewAccountPage #ContentWrapper,
    .LogInPage #ContentWrapper,
    .LogOffPage #ContentWrapper,
    .SiteErrorPage #ContentWrapper {
        margin-top: 0;
    }
    .footer-container {
        flex-direction: column;
        text-align: left;
    }
    .AccountSummaryPage #LeftSideDiv {
        margin-top: 6rem;
    }
    #title-container-inner {
        margin-top: 7rem;
    }
}

/*Tablets (768px - 1024px) */

@media (min-width: 768px) and (max-width: 1024px) {
    .footer-container {
        flex-direction: column;
    }
    .help-container {
        background: none;
        background-color: #8F1A95;
    }
    .help-content {
        padding-left: 1rem;
    }
}
@media (max-width: 1163px){
    .help-container {
        background: none;
        background-color: #8F1A95;
        padding: 1.5rem 0 1rem;
    }
    .help-content {
        padding-left: 1rem;
    }
    .help-content p {
        width: 100%;
    }
    .help-content h2 {
        font-size: 2.438rem;
    }
    .help-content h3 {
        font-size: 1.938rem;
    }
}

@media only screen and (max-width: 705px) {
    .help-container {
        background: none;
        background-color: #8F1A95;
    }
    .help-content p {
        font-size: 1rem;
        margin-bottom: 0.625rem;
        width: 100%;
        word-wrap: break-word;
    }
    /* Footer Mobile */
    .social-icons {
        margin-left:2.5rem;
        margin-right: 0;
    }
    .footer-bottom {
        margin-left:2.5rem;
        padding-right: 0.625rem;;
    }
    #FooterDiv ul {
        display: block;
        border: 0;
        margin:0;
        padding: 0;
    }
    .social-icons {
        margin:0;
        padding-left: 0;
        padding-top: 1rem;
    }
    .footer-bottom {
        margin:0;
        padding: 1rem 1rem 0;
    }
    .footer-links {
        flex-direction: column;
        gap: 1rem;
    }
}

@media only screen and (max-width: 400px) {
    .footer-logos {
        flex-direction: column;
        gap: 1rem;
    }
}

/*------------------------------------
$Headers
------------------------------------*/
#title-container h1 {
    color:#fff;
    margin-top:0;
}

h1 {
    font-size: 3.813rem; /* 61px */
    line-height: 1;
}

h2 {
    font-size: 3.063rem; /* 49px */
    line-height: 1;
}

h3 {
    font-size: 2.438rem; /* 39px */
    line-height: 1;
}

h4 {
    font-size: 1.938rem; /* 31px */
    line-height: 1;
    font-weight:600;
}

h5 {
    font-size: 1.563rem; /* 25px */
    line-height: 1;
    font-weight:600;
}

h6 {
    font-size: 1.25rem; /* 20px */
    line-height: 1;
    font-weight:600;
}

@media only screen and (max-width: 1024px) {
    h1 { font-size: 3.063rem; /* 49px */ }
    h2 { font-size: 2.438rem; /* 39px */ }
    h3 { font-size: 1.938rem; /* 31px */ }
    h4 { font-size: 1.563rem; /* 25px */ }
    h5 { font-size: 1.25rem; /* 20px */ }
}

/*------------------------------------
$Hyperlinks
------------------------------------*/
a {
    color: var(--greater-black);
    text-underline-offset: .15em;
}

a:hover {
    text-decoration: none;
}

a:focus-visible {
    outline: 2px solid yellow;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px blue;
    border-radius: 4px;
}

/*------------------------------------
$Tables
------------------------------------*/
table {
    margin: 1em 0;
    width: 100%;
    border-collapse: collapse;
}

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

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

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

td {
    border-bottom: 1px solid rgba(10, 2, 3, .1);
    font-size: 1rem;
}

dl{
    line-height:1;
}

.MonthlyStatementPage dd,
.StatementPage dd {
    font-weight: 700;
    padding: 1.3rem 0 0.5rem 0;
    margin: -2.40rem 0 1rem 170px;
    min-height: 1.5rem;
    line-height:1;
}

/*------------------------------------
$Errors & Messages
------------------------------------*/
.Alert.Error,
.Error,
.Errors,
.Information,
.Warning {
    display: block;
    padding: 0.5rem 1.5rem;
    margin-bottom: 1.5rem;
    clear: both;
}

.Error,
#ErrorSummary,
#SecureError {
    background: var(--stockport-red);
    max-width: 50%;
    color: #fff;
    border-radius: 12px;
}

#ProductError.Error {
    background: transparent;
    max-width: 100%;
    color: var(--greater-black);
    border-radius: 0;
    padding: 0;
}
#ProductError.Error h1 {
    color: var(--greater-black);
    font-size: 2.438rem;
    padding: 0;
}

.Errors{
    border-left: 4px solid var(--error-border-colour);
    color: var(--error-text-colour);
    font-weight: bold;
}

.Error h1,
.Error h2,
.Error h3,
.Errors h3,
#ErrorSummary h2,
#ErrorSummary h4 {
    color: #fff;
    font-size: var(--base-font-size);
    font-weight: bold;
    background: 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_772)'><path d='M8 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.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16ZM8 4C8.41562 4 8.75 4.33437 8.75 4.75V8.25C8.75 8.66562 8.41562 9 8 9C7.58437 9 7.25 8.66562 7.25 8.25V4.75C7.25 4.33437 7.58437 4 8 4ZM7 11C7 10.7348 7.10536 10.4804 7.29289 10.2929C7.48043 10.1054 7.73478 10 8 10C8.26522 10 8.51957 10.1054 8.70711 10.2929C8.89464 10.4804 9 10.7348 9 11C9 11.2652 8.89464 11.5196 8.70711 11.7071C8.51957 11.8946 8.26522 12 8 12C7.73478 12 7.48043 11.8946 7.29289 11.7071C7.10536 11.5196 7 11.2652 7 11Z' fill='white'/></g><defs><clipPath id='clip0_1073_772'><rect width='16' height='16' fill='white'/></clipPath></defs></svg>") no-repeat left center / 15px auto;
    padding-left: 2rem;
    margin-top: 1rem;
    line-height: normal;
}

.Errors ul,
#SecureError ul {
    margin: 0.5rem 0;
    font-weight: normal;
}

.Information,
.Warning {
	border-radius: 12px;
    padding: 0.1rem 1.5rem 0.1rem 4rem;
    font-weight: 600;
    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;
}

.Warning {
    background: var(--bury-orange) 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_1303_149)'><path d='M8 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.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16ZM8 4C8.41562 4 8.75 4.33437 8.75 4.75V8.25C8.75 8.66562 8.41562 9 8 9C7.58437 9 7.25 8.66562 7.25 8.25V4.75C7.25 4.33437 7.58437 4 8 4ZM7 11C7 10.7348 7.10536 10.4804 7.29289 10.2929C7.48043 10.1054 7.73478 10 8 10C8.26522 10 8.51957 10.1054 8.70711 10.2929C8.89464 10.4804 9 10.7348 9 11C9 11.2652 8.89464 11.5196 8.70711 11.7071C8.51957 11.8946 8.26522 12 8 12C7.73478 12 7.48043 11.8946 7.29289 11.7071C7.10536 11.5196 7 11.2652 7 11Z' fill='%230A0203'/></g><defs><clipPath id='clip0_1303_149'><rect width='16' height='16' fill='white'/></clipPath></defs></svg>") left 1.5rem top 1.3rem / 20px no-repeat;
}

.Information h3 {
    font-size: var(--base-font-size);;
}

.Information ul {
    padding: 0;
}

@media screen and (max-width:980px){
    .Error,
    #ErrorSummary {
        max-width: 100%;
    }
}

/*------------------------------------
$Navigation
------------------------------------*/
#MainMenu {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
}

#MainMenu ul {
    list-style: none;
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
    margin: 0 auto;
    align-items: center;
}

#MainMenu li {
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#MainMenu li a {
    line-height: 1.625rem;
    font-weight: 600;
    text-decoration: none;
}

#MainMenu li a {
    border-bottom: 4px solid transparent;
}

#MainMenu li a:hover,
#MainMenu li a:focus {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 0.188rem;
    text-underline-offset: 0.375rem;
    text-decoration-color: var(--thameside-stone);
}

#MainMenu li#AccountSummaryMenuItem a:hover,
#MainMenu li#AccountSummaryMenuItem a:focus {
    text-decoration-color: var(--stockport-red);
}

#MainMenu li#InboxMenuItem a:hover,
#MainMenu li#InboxMenuItem a:focus {
    text-decoration-color: var(--manchester-purple);
}

#MainMenu li#ChangeDetailsMenuItem a:hover,
#MainMenu li#ChangeDetailsMenuItem a:focus {
    text-decoration-color: var(--bolton-dark-green);
}

#MainMenu li#OpenNewAccountMenuItem a:hover,
#MainMenu li#OpenNewAccountMenuItem a:focus {
    text-decoration-color: var(--salford-royal-blue);
}

#MainMenu li.OpenNewAccountMenuItem a {
    border-right: none;
}

#MainMenu li a:focus-visible {
    color:var(--navigation-text-focus-colour);
}

#MainMenu ul.AccountsSubMenu {
    background: #fff;
}

.Menu {
    flex-basis: 100%;
}

li#LogOffMenuItem {
    margin-left: auto;
}

/*------------------------------------
$Buttons
------------------------------------*/
.ActionButton,
.ActionButtons,
.WizardButtons {
    margin: 1rem 0;
}

.SiteErrorPage .WizardButtons,
.LogOffPage #LogOffControl .WizardButtons {
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
    margin-bottom: 250px;
}

.LogOffPage #LogOffControl .WizardButtons {
	justify-content: flex-start;
}

.SiteErrorPage .WizardButtons {
	margin-bottom: 0;
}

.maintenanceinformationbutton {
    float: right;
    margin: 0.25rem 0 0 0.5rem;
}

.ActionButton.Inline {
    float: left;
    margin: 0.25rem 0 0 0.5rem;
}

/* Default / Primary Button Styles */

.ActionButton a,
.ActionButtons a,
.WizardButtons a,
.maintenanceinformationbutton a,
.InLineFormButton,
.ExportToButton,
.FilterButton,
.ShowAllButton,
#MainMenu #LogOffMenuItem a,
.ShowDeletedButton,
.ShowActiveButton,
.InlineFormButton,
.PrintButton,
.ActionButtons.Action .Button,
.SecureMessageCreateMenuItem a,
.ArchivedInboxMenuItem a,
.MessageReplyButton,
.MessageArchiveButton,
.SecureMessageCreateMenu .InboxMenuItem a,
a.WorkWithDescription,
.RefreshButton,
.MessageUnarchiveButton,
.LogOffButton,
.CloseButton,
.ApplicationFormButtonUnavailable,
.apply .ActionButton,
.default-button a,
.Product-Information-Button a,
.rounded-button a,
.DocumentDownloadButton,
#MainMenu #LogOffMenuItem a {
    padding: 0.75rem 1.25rem;
    background: var(--greater-black);
    color: #fff;
    line-height: 25px;
    border-radius: 50px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    letter-spacing: 0.02rem;
    border: 2px solid transparent;
    font-family: "inter", Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: normal;
        &: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>");
            background-repeat: no-repeat;
            vertical-align: middle;
            width: 9px;
            height: 15px;
            content: '';
            display: inline-block;
            margin-left: 10px;
        }
        &:hover {
            background-color: #fff;
            color: var(--greater-black);
            border: 2px solid var(--greater-black);
            text-decoration: none;
            cursor:pointer;
        }
        &: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='%230A0203' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
        }
        &:focus-visible {
            background-color: #fff;
            color: var(--greater-black);
            border: 2px solid var(--greater-black);
            outline: 0.125rem solid yellow;
            outline-offset: 0.125rem;
            box-shadow: 0 0 0 0.125rem blue;
            border-radius: 4rem;
        }
        &:focus-visible: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='%230A0203' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
        }
}

#Archived_lnkClearButton:focus-visible,
.WizardButtons a.CancelButton:focus-visible,
a.ReturnToAllStatementsButton:focus-visible, 
#AmendButton a:focus-visible, 
#CancelButton a:focus-visible, 
#BackButton a:focus-visible, 
.ProductInformation .ActionButton a:focus-visible, 
a.RemoveTaxResidency:focus-visible, 
.ActionButtons a.ProductInformationDocumentButton:focus-visible,
.default-button.secondary-btn-style a:focus-visible,
.InboxMessage-ActionButtons a.MessageArchiveButton:focus-visible {
    background-color: #fff;
    outline: 2px solid var(--input-focus-colour);
    outline-offset: 8px;
    border: 2px solid var(--greater-black);
    color: var(--greater-black);
        &: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='%230A0203' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
        }
}

/* Secondary Button Styles */

.ArchivedInboxMenuItem a, 
#ctl02_lnkClearButton,
#Archived_lnkClearButton,
.InboxMessage-ActionButtons a.MessageArchiveButton, 
.WizardButtons a.CancelButton, 
a.DeleteGoalButton,
a.ReturnToAllStatementsButton,  
#AmendButton a, 
#CancelButton a, 
#BackButton a,
.ProductInformation .ActionButton a, 
a.RemoveTaxResidency,
.ActionButtons a.ProductInformationDocumentButton,
.MessageUnarchiveButton,
.CloseButton,
.default-button.secondary-btn-style a,
.ActionButtons .AccountDetails,
.ActionButton .ApplicationFormButton {
    border: 2px solid var(--secondary-button-border-colour);
	background-color: var(--secondary-button-background-colour);
    color: var(--secondary-button-text-colour);
        &:before {
            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='M8 1L2 7L8 13' stroke='%230A0203' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
            background-repeat: no-repeat;
            vertical-align: middle;
            width: 9px;
            height: 15px;
            content: '';
            display: inline-block;
            margin-right: 10px;
        }
        &:hover {
            text-decoration: none;
            border: 2px solid var(--secondary-button-hover-border-colour);
            background-color: var(--secondary-button-hover-background-colour) !important;
            color:var(--secondary-button-hover-text-colour) !important;
        }
        &:hover::before,
        &:focus-visible:before {
            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='M8 1L2 7L8 13' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
        }
        &:focus-visible {
            background-color: var(--greater-black) !important;
            color: #fff !important;
        }
        &:after {
            display: none !important;
        }
}

/* Tertiary Button Styles */

.NoticeContainer .ActionButton {
    border-bottom: 2px solid var(--greater-black);;
    display: inline-block;
    margin-top: 1rem;
        &:hover {
            border-bottom: 2px solid transparent;
        }
}

.NoticeContainer .ActionButton a {
    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='%230A0203' stroke-width='2' stroke-linecap='round' fill='none'/></svg>") no-repeat right center / 7px auto;
    padding: 0 1.2rem 0.1rem 0;
    color: var(--greater-black);
    border: none;
    text-align: left;
        &:after {
            display: none;
        }
        &:hover {
            border: none !important;
            background-color: transparent !important;
        }
        &:focus-visible{
            border: none !important;
            border-radius: 4px !important;
            background-color: transparent !important;
        }
}

/* Back buttons */

a.MoveBack,
.ActionButton .BackButton,
a.ExitButton,
#ProductError .back-button a {
    background: none;
    padding: 0 0 0.2rem 0;
    color: var(--primary-brand-colour);
    margin-top: 1.5rem;
    text-decoration: none;
    border: none;
        &:focus-visible {
            border-radius: 4px !important;
            background-color: transparent;
            text-underline-offset: .3em;
            text-decoration-thickness: max(3px, .1875rem, .12em);
            border-color:transparent;
            outline: 2px solid #000;
            color: var(--primary-brand-colour);
        }
        &:before {
            height: 20px;
            width: 20px;
            content: '';
            display: inline-block;
            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' fill='none'><path d='M8 1L2 7L8 13' stroke='%230A0203' stroke-width='2' stroke-linecap='round'/></svg>");
            background-repeat: no-repeat;
            background-position: center left;
            background-size: 7px 12px;
            top: 4px;
            position: relative;
        }
        &:after {
            display: none !important;
        }
}

.ActionButton#CancelButton a::after,
#ctl02_lnkClearButton:after,
.ArchivedInboxMenuItem a:before,
.InboxMessage-ActionButtons a.MessageArchiveButton::after,
.apply .ActionButton a:before,
.WizardButtons .CancelButton::after,
.TimeoutPromptMessage .CloseButton::before,
.TimeoutPromptMessage .CloseButton:hover::before,
a.DeleteGoalButton:after,
a.ReturnToAllStatementsButton:after,
.NoticeContainer .ActionButton a:after {
    display: none !important;
}

/* savings goals and inbox buttons (on Account Summary) */

.NotificationMessage .ActionButton a,
#SavingsGoalsLink .ActionButton a{
    margin-top: 1rem;
}

/* Timeout buttons */

.LogOffButton,
.CloseButton{
    display:inline-block;
}

.CloseButton {
    margin-left: 1rem;
}

.CloseButton:after {
    display: none;
}

/* SCA links */

.ActionButton #Exit {
    margin-top: 0.5rem;
}

.TransactionWizardPage .CloseAccountButton{
    margin-top: 1rem;
}

.PageButtons {
    text-align: center;
}

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

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

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

/* Change Details buttons */

.ChangeDetailsBox .ActionButton a:after {
    display:inline-block;
    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='%230A0203' stroke-width='2' stroke-linecap='round' fill='none'/></svg>") !important;
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 7px 12px;
    position: relative;
}

.ChangeDetailsBox .ActionButton a:focus-visible {
    background: transparent;
    border-radius: 4px !important;
    border: none !important;
}

.ChangeDetailsBox .ActionButton a:hover {
    border: none !important;
}

.ChangeDetailsBox #ScaNotificationControl .ActionButton a:after,
.ChangeDetailsBox #ScaNotificationControl .ActionButton a:before {
    display:none;
}

.ChangeDetailsPage  #ContentDiv .ActionButton {
    border-bottom: 2px solid var(--greater-black);
    width: max-content;
        &:hover {
            border-bottom: 2px solid transparent;
        }
}

.ChangeDetailsBox .ChangeDetailsControl .ActionButton a.NextButton {
    border-radius: unset;
    color: var(--anchor-link-colour);
    margin: 0;
    background-color: transparent;
    border:none;
    padding: 0 0 0.1rem 0;
    text-decoration: none;
}

.ChangeDetailsBox .ChangeDetailsControl.ViewContactDetailsControl .ActionButton,
.ChangeDetailsBox .ChangeDetailsControl.ViewContactPreferencesControl .ActionButton,
.ChangeDetailsBox .ChangeDetailsControl.ViewNominatedAccountControl .ActionButton {
    position: absolute;
    top: 2rem;
    right: 0;
}

.ChangeDetailsBox .ChangeDetailsControl.ViewContactDetailsControl .ActionButton {
    top: 0.2rem;
}

.ChangeDetailsBox #ScaNotificationControl .ActionButton{
    top:0;
    position:relative;
    justify-content: flex-start;
    width: auto;
}

.security-details-container .QuestionWrapper {
    justify-content: space-between;
}

@media screen and (max-width:800px){
    .ChangeDetailsPage  #ContentDiv .ActionButton{
        text-align:left;
        justify-content: flex-start;
        text-align:center;
        margin-top: 0;
    }
    .ChangeDetailsBox .ChangeDetailsControl.ViewContactDetailsControl .ActionButton,
    .ChangeDetailsBox .ChangeDetailsControl.ViewContactPreferencesControl .ActionButton,
    .ChangeDetailsBox .ChangeDetailsControl.ViewNominatedAccountControl .ActionButton{
        position:relative;
        top:unset;
        margin-top: 1rem;
    }
}

@media screen and (max-width:400px){
    .ActionButton a,
    .ActionButtons a,
    .WizardButtons a,
    .maintenanceinformationbutton a,
    .InLineFormButton,
    .ExportToButton,
    .FilterButton,
    .ShowAllButton,
    #MainMenu #LogOffMenuItem a,
    .ShowDeletedButton,
    .ShowActiveButton,
    .InlineFormButton,
    .PrintButton,
    .ActionButtons.Action .Button,
    .SecureMessageCreateMenuItem a,
    .ArchivedInboxMenuItem a,
    .MessageReplyButton,
    .MessageArchiveButton,
    .SecureMessageCreateMenu .InboxMenuItem a,
    a.WorkWithDescription,
    #AmendButton a,
    .RefreshButton,
    .MessageUnarchiveButton,
    .LogOffButton,
    .CloseButton,
    .ApplicationFormButtonUnavailable,
    .default-button a {
        width: 100%;
    }
    .InboxMessage-ActionButtons {
        flex-direction: column;
    }
    #SearchOptions .ActionButton {
        float: none !important;
    }
}
@media screen and (max-width:450px){
    #LogOffControl .WizardButtons {
        flex-direction: column;
    }
    #LogOffControl .WizardButtons a {
        width: 100%;
    }
}

/* Application Unavalible (Reg Saver Apply Button) */

.ApplicationFormButtonUnavailable{
    background-color: #D3D3D3;
    color:#000;
    cursor: not-allowed !important;
    border: none !important;
    width: 100%;
}

.ApplicationFormButtonUnavailable:after {
    display: none !important;
}

.ApplicationFormButtonUnavailable:hover {
    background-color: #D3D3D3 !important;
}

/* ./end buttons */

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

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

ul li .AccountItem a {
    margin-right: 10px;
    display: block;
    line-height: 1.5;
    padding: 5px 12px 5px 12px;
    color: #FFFFFF;
    background: #2e2e2e;
}

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

li .AccountItem a:hover,
li .AccountItem a:focus-visible,
li .AccountItem.ActivePage a {
    color: #bbbbbb;
}

.ExpandedPanel .AccountsMenuPanel {
    display: block;
}

.CollapsedPanel .AccountsMenuPanel {
    display: none;
}

.AccountSummariesMenu {
    margin: 1em 0;
}

.AccountContextMenu{
    margin-bottom:3rem;
}

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

.AccountContextMenu ul,
.AccountSummariesMenu ul {
    display: flex;
    width: 100%;
    justify-content: space-between;
	border-top: 8px solid var(--bury-orange);
}

.AccountContextMenu ul li,
.AccountSummariesMenu ul li {
    border-left: 1px solid rgba(80, 90, 95, .2);
}

.AccountContextMenu ul li:last-child,
.AccountSummariesMenu ul li:last-child {
    border-right: 1px solid rgba(80, 90, 95, .2);
}

.AccountContextMenu ul li a,
.AccountSummariesMenu ul li a {
    text-decoration:none;
    width: 100%;
    text-align:center;
    padding: 1.5rem 0;
    display:block;
}

.AccountContextMenu ul li:hover a,
.AccountContextMenu ul li:focus-visible a,
.AccountSummariesMenu ul li:hover a,
.AccountSummariesMenu ul li:focus-visible a{
    background: var(--bury-orange);
}

.AccountContextMenu ul li.ActivePage a,
.AccountSummariesMenu ul li.ActivePage a{
    background-color: var(--bury-orange);
	font-weight: 700;
}

.HorizontalNavigation {
    background-color: #bbbbbb;
    color: #fff;
}

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

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

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

#ModalMessage .CloseButton::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='%230A0203' stroke-width='2' stroke-linecap='round' fill='none'/></svg>") !important;
}

@media screen and (max-width: 400px) {
    #ModalMessage .CloseButton {
        margin: 1rem 0 0;
    }
}

/*------------------------------------
$Responsive
------------------------------------*/
/* Less than 800px */
@media screen and (max-width:1023px) {
    .AccountContextMenu ul, .AccountSummariesMenu ul{
        flex-direction:column;
    }
    .AccountContextMenu ul li, .AccountSummariesMenu ul li{
        border-top: none;
        border-left: none;
        border-right: none;  
        border-bottom: 1px solid rgba(10, 2, 3, .1);;
    }
    .AccountContextMenu ul li:last-child,
    .AccountSummariesMenu ul li:last-child {
        border-right: none;
    }
    .AccountContextMenu ul,
    .AccountSummariesMenu ul {
        border-top: none;
    }
    .AccountContextMenu ul li a {
        display: block;
        padding: 1rem 0;
        text-align: center;
    }
    .InboxPage .AccountContextMenu ul li {
        width: 50%;
    }
    #SubMenu ul li {
        width: 50%;
        float: left;
    }
    .footer-image{
        margin-bottom: 1.5rem;
    }
    .footer-row.one,
    .footer-row.two{
        grid-template-columns: 1fr;
    }
    .footer-row.one {
        justify-items: center;
    }
    .footer-image{
        margin-bottom: 2.500rem;
    }
    .footer-whole{
        padding-top:1.5rem;
    }
    .footer-whole h3{
        margin-top: 1.5rem;
    }
}

/* Less than 480px */
@media screen and (max-width:480px) {
    .SelectControlHeading,
    .RateControlHeading,
    .AerControlHeading,
    .AmountControlHeading,
    .IncludeInterestControlHeading {
        display: inline;
        padding-right: 1rem;
    }
    .QuestionHead {
        margin-bottom: 20px;
        background-size: 670px 110px;
    }
    .QuestionHead h2{
        padding-left: 0;
        margin-left: 0;
        float: none;
    }
}

/* Mobile Menu */

@media screen and (max-width:1023px) {
	.ShowMenuButton img {
        width: 60px;
    }
    .HideMenuButton img {
        width: 55px;
    }
    nav.desktop{
        display:none;
    }
    nav.mobile{
        display:flex;
        width:100%;
    }
    #MainMenu{
        width: 100%;
        right: 0;
        left: 0;
        top: 0;
        background-color: #fff;
        z-index: 100;
    }
    #MainMenu.ExpandedPanel{
        position: fixed;
        padding-top: 0.5rem;
    }
    .mobile-menu-header {
        display: flex;
        flex-basis: 100%;
        padding: 0 1rem;
    }
    .moblie-menu-header {
        display: block;
    }
    .ShowMenuButton, .HideMenuButton {
        display: inline-block;
        padding: 0;
        width: auto;
        top: -1.2rem;
        position: absolute;
        right: 0;
    }
    .HideMenuButton {
        position: absolute;
        right: 1rem;
        z-index: 105;
        padding: 0;
        top: 1.7rem;
    }
    #MainMenu.CollapsedPanel .Menu,
	#MainMenu .HideMenuButton,
	#MainMenu.ExpandedPanel .ShowMenuButton{
        display: none;
    }
    #MainMenu.ExpandedPanel .HideMenuButton {
        display: inline-block;
    }
    #MainMenu.ExpandedPanel .Menu {
        display: block;
        position: absolute;
        background: #fff;
        left: 0;
        right: 0;
        top: 75px;
    }
	#MainMenu li {
		border-bottom: 2px solid rgba(10, 2, 3, 0.1);
		width: 100%;
		padding: 1rem 0.5rem;
	}
	#MainMenu li a {
		border: none;
		padding: 0;
	}
    .MenuWrapper {
        margin-top: 1.45rem;
        padding-bottom:2rem;
    }
    nav.mobile #MainMenu ul{
        max-width:100%;
        flex-direction: column;
        padding: 0 1rem;
        align-items: flex-start;
    }
    li#LogOffMenuItem {
        list-style-type: none;
        margin-top: 1rem;
		border: none;
        bottom: 0;
        position: fixed;
    }
    li#LogOffMenuItem a {
        width: 100%;
    }
    .ExpandedPanel .NavigationMask{
        background-color: #fff;
        position:fixed;
        top:0;
        right:0;
        left:0;
        bottom:0;
    }
}

@media screen and (min-width:1024px) {
    nav.desktop{
        flex-basis: 100%;
    }
    nav.mobile{
        display:none;
    }  
}
    
/*Fix logo width */
@media screen and (max-width:340px){
    .Logo{
        width:100%;
    }
}