:root {
  --sty-font-family: 'NickelCity';
  --sty-link-font-family: 'NickelCity';
  --sty-button-font-family: 'NickelCity';
  --sty-generic-result-font-family: 'NickelCity';
  --sty-primary-color: #007856;
  --sty-body-bg: #ffffff;
  --sty-panel-min-width: 300px;
  --sty-panel-max-width: 310px;
  --sty-panel-logo-padding: 0rem;
  --sty-panel-container-padding: 0rem 0rem;
  --sty-panel-border-color: #ffffff;
  --sty-input-border-radius: 4px;
  --sty-input-border-color: #8697a7;
  --sty-input-border-style: solid;
  --sty-input-readonly-border-style: solid;
  --sty-input-padding-inline: 12px;
  --sty-input-focus-bg: 2px;
  --sty-panel-box-shadow: none;
  --sty-button-border-radius: 4px;
  --sty-button-secondary-border-color: #007856;
  --sty-button-secondary-text-color: #007856;
  --sty-button-secondary-text-focus-bg: #007856;
  --sty-input-style: outer;
  --sty-input-label-color: #4d5a68;
  --sty-input-label-font-weight: 400px;
  --sty-input-label-line-height: 150%;
  --sty-radio-group-label-color: #4d5a68;
  --sty-radio-label-line-height: 150%;
  --sty-checkbox-border-width: 1.5px;
  --sty-checkbox-border-radius: 1px !important;
  --sty-checkbox-border-color: #007856;
  --sty-checkbox-checked-border-color: #007856;
  --sty-checkbox-checked-bg: #007856;
  --sty-checkbox-checked-box-shadow: none !important;
  --sty-checkbox-label-line-height: 16px;
  --sty-link-decoration: underline;
  --sty-input-list-item-selected-bg: #ffffff !important;
  --sty-checkbox-readonly-border-style: solid !important;
  --sty-input-list-item-selected-color: #2f3840 !important;
  --sty-toast-border-radius: 2px !important;
  --sty-toast-box-shadow:
    0px 1px 2px 0px rgba(9, 9, 9, 0.1), 0px 2px 4px 0px rgba(0, 0, 0, 0.1) !important;
  --mtb-toast-color: #e8ebee;
  --sty-toast-info-icon-bg: var(--mtb-toast-color) !important;
  --sty-toast-info-color: var(--mtb-toast-color) !important;
  --sty-toast-success-icon-bg: var(--mtb-toast-color) !important;
  --sty-toast-success-color: var(--mtb-toast-color) !important;
}


sty-toast{ 
  font-size: 14px;
  font: "NickelCity";
  color: #2F3840;
  font-style: normal;
  font-weight: 500%;
}

#app.mfaPasscode .text{
  display: none !important;
}
/* Background overwrite. The index.css file is pointed to the wrong sty variable atm.*/
body{
  background: var(--sty-body-bg) !important;
}


.fadeIn {
  opacity: 1 !important;
  visibility: visible !important;
}

#app.passwordReset #container{
  opacity: 0;
  transition: opacity 1s ease;
  visibility: hidden;
}

.panel {
  width: 310px !important;
  min-width: 300px !important;
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

[data-section='language-selector'],
[data-section='copyright'],
[data-section='notice'],
.notice {
  display: 'none' !important;
}
/*Universal Changes*/
sty-button,
sty-input-text,
sty-input-password {
  margin-block-start: 16px !important;
  /*margin-inline:12px;*/
}

/*GR-1517*/
#app.identifier sty-button {
  margin-block-end: 0rem !important;
}

label,
.group-header {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 150%;
  color: #4d5a68;
}

.group-header {
  margin-block: 8px !important;
}

.group-container {
  font-family: 'NickelCity';
  color: #333;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

sty-radio::part(input)::before {
  border: 2px solid green !important;
  background: white !important;
}

sty-radio:not([disabled]):not([readonly])[checked]::part(input)::before {
  background-color: white !important;
}

sty-radio[checked]::part(input)::after {
  border: 6px solid green !important;
}

/*
sty-radio:not([disabled]):not([readonly])[focused]::part(focus-ring),
sty-radio:not([disabled]):not([readonly])[focused-visible]::part(focus-ring) {
  visibility: hidden !important;
}*/

sty-radio-group.custom sty-radio,
sty-radio-group.custom-w-cards sty-radio {
  padding: 16px !important;
  border-style: solid !important;
}

.button-container {
  display: flex;
  gap: 12px;
  width: 100%;
  align-items: baseline;
}
.button-container sty-button {
  flex: 1;
  padding: 12px;
}

sty-button[disabled] {
  color: #8697a7;
  background: #e8ebee !important;
  cursor: not-allowed;
}

.logout-message {
  color: var(--color-text-brand-title, #007856);
  text-align: center;
  font-family: var(--type-font-family, 'NickelCity');
  font-size: var(--type-heading-title-3-font-size, 32px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 38.4px */
  letter-spacing: var(--type-title-3-letter-spacing, 0px);
  align-self: stretch;
}

.loggedOut > .brand-logo {
  display: block;
}

.logout-logo {
  padding-bottom: 34px;
}

:not(.loggedOut) > .brand-logo,
.account-info,
.selector,
.language-selector,
.copyright .notice,
[data-section='copyright'] {
  display: none !important;
}

.separator {
  padding-block-start: 12px !important;
  padding-top: 0 !important;
  margin-block: 0 !important;
  margin-inline: 0 !important;
  position: static !important;
  text-align: center !important;
}

.info-icon {
  padding: 1px 8px;
  display: flex;
}

.info-container {
  display: none;
  border-radius: 4px;
  border: 1px solid #7094e0;
  margin-top: 12px;
  padding: 12px;
}

.info-text {
  font-family: 'NickelCity';
  display: flex;
  font-size: 12px;
  color: #607183;
}

[data-section='resend'] {
  display: flex;
  border-radius: 4px;
  border: 1px solid #7094e0;
  align-items: center;
  font-size: 12px;
  line-height: 150%;
  font-weight: 400;
  font-style: normal;
  color: #607183;
  margin-block-start: 12px !important;
  padding: 12px;
}
[data-section='resend'] a {
  padding-inline: 0px !important;
  padding-block: 0px !important;
}

#app.mfapasscode .info-icon {
  align-items: center;
  padding: 12px;
}

.mfaMethods-link {
  margin-top: 12px;
  color: var(--color-text-brand-title, #007856);
  /*font-family: "NickelCity";*/
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.edit-show-links {
  color: #007856;
  text-decoration: underline;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  cursor: pointer;
}

/* ----- END OF -------------- */

#app.mfaMethod .footer-layout,
#app.rememberedAccount .footer-layout,
#app.mfaPasscode .footer-layout,
#app.progressiveProfiling .footer-layout,
#app.genericResult .footer-layout,
#app.identifier .footer-additional,
#app.postForm .footer-additional, 
#app.password .footer-additional,
#app.loggedOut .footer-additional,
#app.loggedOut .footer-layout,
#app.loggedOut .state-icon,
#app.loggedOut .section-title,
#app.redirect .footer-additional,
#app.genericResult .footer-additional,
#app.passwordReset .footer-additional,
#app.passwordReset .footer-layout,
/* GR-1538 */
#app.magicLinkExpired .footer-additional,
#app.magicLinkExpired .footer-layout,
#app.magicLinkExpired .section-title
{
  display: none !important;
}

/* ----- Passcode Reset -------- */
#app.passwordReset .header-message {
  text-align: left;
}

#app.passwordReset .header-message .heading {
  text-align: left;
  margin-bottom: -20px;
}

#app.passwordReset .header-message .text {
  text-align: left;
}

#app.passwordReset sty-input-password::part(container) {
  border-radius: var(--sty-input-border-radius, var(--sty-border-radius, 4px)) var(--sty-input-border-radius, var(--sty-border-radius, 4px)) 0 0;
}

#app.passwordReset .footer-ssn {
  display: flex !important;
}
#accountPasswordResetLink {
  display: inline !important;
 }
 #app.passwordReset .validation-rules {
    background-color: #F5F6F8;
    font-family: 'NickelCity';
    font-size: 12px;
    font-weight: 400 !important;
    color: #4d5a68;
    margin-bottom: 40px;
    padding: 10px;
    line-height: 6px;
 }

 #app.passwordReset .passcode-confirm-rules {
  margin-bottom: 20px !important;
}

 #app.passwordReset sty-radio,
 #app.passwordReset sty-radio[disabled],
 #app.passwordReset sty-radio[readonly] {
  color: #4d5a68;
  --sty-radio-border-width: 1px !important;
  margin: 5px 0;  
 }

  #app.passwordReset sty-radio[checked]::part(input)::after {
    background: var(--sty-success-color, hsl(165, 100%, 25%)) !important;
    content: '\2713';
    color: white;
    font-size: 12px;
    width: 1.10em;
    height: 1.10em;
    padding: 0 5px 5px 0;
 }

 #app.passwordReset sty-radio[checked]::part(input)::before {
    border: 1px solid var(--sty-success-color, hsl(165, 100%, 25%))  !important;
    background-color: var(--sty-success-color, hsl(165, 100%, 25%));
 }

 #app.passwordReset sty-radio::part(input) {
    min-width: 1.05rem;
    height: 1.05rem;
    border-style: none;
  }

 #app.passwordReset sty-radio::part(input)::before {
    border: 1px solid #4d5a68 !important;
    background-color: #F5F6F8 !important;
  }

  sty-input-password[invalid]::part(error-icon) {
  display: none !important;
  }

  .passcode-reset-cancel {
    margin-top: 15px;
  }

  .password-changed-header {
    display: block !important;
    color: var(--sty-success-color, hsl(165, 100%, 25%));
    width: 310px;
    font-weight: 400 !important;
    font-size: 32px !important;
    height: 76px;
    line-height: 1.2 !important;
  }
  .password-desc-text {
    font-family: 'NickelCity';
    width: 240px;
    height: 48px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5 !important;
    margin: 0 auto;
    color: #4d5a68;
  }
  .password-changed-btn {
      margin-top: 20px !important;
      display: inline-flex;
  }
   

#app.passwordReset .panel-errors .error-message {
  margin: -20px 0 20px 0;
}
/* ----- END Passcode Reset----- */


#app.mfaMethod .footer-additional,
#app.mfaPasscode .footer-additional {
  display: block !important;
}

#app.identifier sty-input-password [slot='suffix'],
#app.password [data-field='password'] [slot='suffix'] {
  display: none;
  margin-right: 12px;
}

#app.identifier sty-input-password::part(container),
#app.password sty-input-password::part(container) {
  margin-top: 48px;
}
#app.identifier sty-input-password::part(input),
#app.password sty-input-password input {
  padding-inline-start: 12px !important;
}

#app.identifier [data-field='password']::part(label),
#app.password [data-field='password']::part(label) {
  font-weight: 400 !important;
  line-height: 150% !important;
  font-size: 14px !important;
  font-style: normal !important;
}
#app.mfaPasscode [data-field='rememberDevice']::part(label),
#app.identifier [data-field='rememberAccount']::part(label) {
  font-family: var(--type-font-family, 'NickelCity');
  color: #2f3840;
  font-weight: 500;
  line-height: 2;
  font-size: 14px;
  font-style: normal;
  align-items: center !important;
}

#app.mfaMethod sty-radio::part(container){
  display: flex !important;
  align-items: center !important;
}

[data-field='rememberAccount'] {
  margin-top: 12px;
  width: 150px;
  /*inset-block-start: 0px !important;*/
}

/* #START REGION HEADERS */
#app.identifier
  [data-field='identifier']::part(feedback)
  #app.password
  [data-field='identifier']::part(feedback) {
  display: none !important;
}

#app.password sty-input-text,
.styInputText {
  --sty-input-border-style: none;
  --sty-input-bg: #f5f6f8;
  --sty-input-border-radius: 4px;
  padding: 16px;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  background-color: #f5f6f8;
  padding-block-start: 1rem !important;
}

#app.password sty-input-text::part(label),
.styInputText::part(label) {
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #4d5a68;
  font-style: normal;
}
#app.password sty-input-text::part(input),
.styInputText::part(input) {
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  color: #2f3840;
  font-style: normal;
}
#app.password sty-input-text::part(container),
.styInputText::part(container) {
  border: none !important;
  box-shadow: none !important;
}

.InvalidIdentifier {
  --sty-input-border-style: none;
  --sty-input-bg: #f5f6f8;
  --sty-input-border-radius: 4px;
  padding: 16px;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  background-color: #f5f6f8;
}

.InvalidIdentifier:host([disabled]) [part='container'],
.InvalidIdentifier::part(container) {
  border: none !important;
  box-shadow: none !important;
  background: #f5f6f8;
  margin-top: 8px;
}

.InvalidIdentifier [slot='label'] {
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  color: #4d5a68;
  font-style: normal;
}

.InvalidIdentifier [name='identifier'] {
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  color: #2f3840;
  font-style: normal;
}

header {
  display: grid;
  grid-template-columns: auto var(--sty-panel-max-width, minmax(300px, 310px)) auto;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    'fdic fdic fdic'
    'stripe stripe stripe'
    '. panelMessage .'
    '. panelError .';
}

/* FDIC stripe on top */
.fdicstripe {
  grid-area: fdic;
  background-color: #00543f;
  color: white;
  text-align: center;
  padding: 10px;
  font-size: 11px;
  font-family: 'NickelCity', Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

.fdicstripe p {
  margin: 0 auto;
  font-style: italic;
}

.header-mtb-stripe {
  grid-area: stripe;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px 32px;
  isolation: isolate;
  height: 72px;
  background: linear-gradient(90.18deg, #007856 0%, #185645 100%);
}

.header-mtb-stripe .logo {
  margin: auto;
  width: 179px;
  height: 72px;
  padding: 24px;
  gap: 10px;
}



.panel-messages {
  margin-bottom: 32px;
  text-align: center;
}

.panel-messages div[data-message],
.panel-messages div[data-message] {
  display: none !important;
}

[data-message='welcome'] .text {
  font-size: 20px;
}

[data-message='mfa-title'] .heading,
[data-message='mfa-code'] .heading,
[data-message='mfa-update'] .heading,
[data-message='change-passcode'] .heading {
  text-align: left;
  font-family: 'NickelCity';
}

[data-message='mfa-title'] .mfa-text,
[data-message='mfa-code'] .text,
[data-message='mfa-code'] .text,
[data-message='mfa-update'] .text {
  margin-top: 12px;
  font-size: 16px;
  text-align: left;
  font-family: 'NickelCity';
  font-weight: 400 !important;
}


/* END REGION HEADERS */

/* START REGION FOOTER */

.divider {
  background: #cdd4da;
}

footer {
  border-top: 1px solid #cdd4da;
}

.footer-layout {
  max-width: 41.5rem;
  margin: 20px auto;
}

.footer-grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.footer-grid-padding {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.footer-grid-paddin > .footer-cell {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.footer-cell {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

footer .footer-help b {
  font-family: 'NickelCity', Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500 !important;
  line-height: 24px;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #767676;
}

.OtpHelp {
  margin-bottom: auto !important;
}

.footer-contact {
  font-family: 'NickelCity';
  font-size: 12px;
  font-weight: 400 !important;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #767676;
  margin-bottom: 0px;
  margin-block-start: 6px;
}

.footer-time {
  font-family: 'NickelCity', Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #767676;
  margin: 0px !important;
}

.contact-help {
  margin: 0 auto;
  font-family: 'NickelCity';
  font-size: 12px;
  font-weight: 400 !important;
  line-height: 150%;
  text-align: center !important;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
  color: #767676;
  max-width: 275px;
}

.contact-help p {
  margin: 6px 0px 20px 0px;
}

.mtb-footer--auth {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  -ms-flex-item-align: stretch;
  margin-bottom: 16px;
}

.mtb-footer--auth a {
  font-size: 12px;
  line-height: 200%;
  padding: 0 .5rem;
  text-decoration: underline;
  font-family: 'NickelCity';
  font-weight: 300;
}

.mtb-footer--non-auth {
  -ms-flex-item-align: stretch;
  text-align: center;
  font-size: 12px;
  color: #2f3840;
  font-weight: 300;
  margin-bottom: 32px;
}

.mtb-footer__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: -1%;
}

#footer-policy-links {
  font-style: 'NickelCity';
}

.footer-phone-links {
  font-size: 13px;
}
.mtb-footer hr {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.mtb-footer {
  overflow: hidden;
  background-color: #f5f6f8;
  font-size: 0.625rem;
  width: 100%;
  text-align: center;
}

.flex-dir-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 2rem !important;
}

.flex-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.align-center-middle {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
}

.mtb-footer--auth a:last-child {
  border-right-width: 0;
}

.mobilebr {
  display: none;
}

.error-icon {
  display: flex;
  align-items: start;
  padding: 4px 8px 4px 0px;
  color: #fff;
}

.error-text {
  color: white;
  font-weight: bold;
  font-size: 16px;
}

sty-feedback[invalid] {
  font-weight: 400;
}

sty-input-text[invalid]::part(container) {
  border-radius: 4px;
  border: 1px solid #8697a7;
}

sty-input-passcode[invalid]::part(container) {
  border-radius: 4px;
  border: 1px solid #bc3b32;
}

sty-input-passcode[invalid]::part(input) {
  color: #bc3b32;
  font-weight: 400;
  line-height: 150%;
}

sty-input-passcode[invalid]::part(error-icon) {
  display: none !important;
}

.loggedOut > .brand-logo {
  display: block;
  /* or any specific styles you want to apply */
}

:not(.loggedOut) > .brand-logo {
  display: none;
}

.external-login-providers {
  display: none !important;
}

.mtb-app-enrollment .mtb-page-header .cell {
  max-width: 41.5rem;
}

/*Body BEGIN */

/* Default Footer END*/
/*MEDIA*/

.account-info,
[data-block='progressiveProfiling'] .section-title,
[data-block='progressiveProfiling'] .account-info,
[data-block='progressiveProfiling'] [data-text='identifier'],
[data-block='identifier'] [data-button='reset'],
[data-block='progressiveProfiling'] [data-button='reset'],
[data-block='progressiveProfiling'] .additional-text {
  display: none !important;
}

[data-block='genericResult'] .section-title {
  display: block !important;
  color: var(--color-text-emphasis-title, #2f3840);
  text-align: center;
  align-self: stretch;
  /* Heading/Title 3 */
  font-family:'NickelCity';
  font-size: var(--type-heading-title-3-font-size, 32px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 38.4px */
  letter-spacing: var(--type-title-3-letter-spacing, 0px);
}

[data-block='genericResult'] .section-title span {
  display: block;
}

#app.genericResult .panel {
  width: 472px !important;
  min-width: 472px !important;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  display: flex;
  /*position: absolute;
  top: 222px;
  bottom: 270px;
  */

}

#app.genericResult .text {
  color: var(--color-text-emphasis-title, #2f3840);
  text-align: center;
  align-self: stretch;
  font-family:'NickelCity';
  font-size: var(--type-body-large-font-size, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin: auto;
}

#app.genericResult .text a {
  padding-inline: 0px;
  text-decoration: underline !important; 
  padding: 0 !important; 
  border-width: 2px 0 !important;
}

#app.genericResult .text span {
  display: block;
}

.section-link{
  display: flex; 
  justify-content: center; 
  align-items: center;
  font-family: var(--sty-generic-result-font-family, 'NickelCity');
  font-size: var(--type-body-large-font-size, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

/* REMEMBER ME */

#app.mfaMethod [data-field='rememberDevice'],
#app.password [data-button='forgottenPassword'],
#app.password [data-section='accountInfo'],
#app.password [data-separator='login'],
#app.consent [data-section='accountInfo'],
#app.consent [data-separator='login'],
#app.consent .section-title,
#app.identifier sty-feedback,
#app.password sty-feedback,
#app.password [data-field='password'] sty-feedback,
#app.password [data-field='password']::part(error-icon),
#app.password [data-field='identifier']::part(feedback),
#app.identifier [data-separator='registration'],
#app.identifier [data-field='password']::part(feedback),
#app.identifier [data-field='identifier'] sty-feedback,
#app.identifier [data-field='identifier']::part(error-icon) {
  display: none !important;
}

#app.mfaPasscode [data-field='rememberDevice'] {
  margin-top: -4px;
  width: 175px;
}

/* GR-1517*/
.olbReset {
  margin-top: 8px;
}

.mtb-footer__logo svg {
  max-width: 100%;
  height: auto;
}

.footer-policy-links a {
  margin: 0 0.5rem;
}

.session-expired-header {
  display: block !important;
  color: var(--sty-primary-color) !important;
  width: 310px;
  font-weight: 400 !important;
  font-size: 32px !important;
  height: 76px;
  line-height: 1.2 !important;
}

.session-expired-text {
  font-family: 'NickelCity';
  width: 310px;
  height: 48px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5 !important;
}

/*

sty-toast.resend-toast {
  display: flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
  gap: 8px !important;
  width: 310px !important;
  border-radius: 4px !important;
  box-shadow:
    0px 1px 2px 0px rgba(0, 0, 0, 0.1),
    0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  background: #e8ebee !important;
}

.resend-toast [slot='heading'] {
  color: #2f3840;
  font-family: var(--sty-font-family);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  display: flex;
}

.resend-toast::part(container) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex: 1 0 0;
  padding-block: unset !important;
  padding-inline: 0.5rem !important;
}

.resend-toast::before,
.resend-toast::after,
.resend-toast::part(icon)::before,
.resend-toast::part(icon)::after {
  display: none !important;
  border-color: unset;
  background-color: unset;
}

.resend-toast::part(icon) {
  all: unset;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}

.resend-toast::part(resend-toast-icon) {
  display: flex;
  width: 24px;
  height: 24px;
  padding: 4px;
  justify-content: center;
  align-items: center;
}

.resend-toast::part(close) {
  all: unset;
  cursor: pointer;
  border-radius: var(--sty-border-radius, 4px);
  transition: color var(--sty-transition-duration, 0.15s)
    var(--sty-transition-timing-function, ease-in-out);
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  align-self: stretch;
}

.resend-toast::part(resend-toast-dismiss) {
  display: flex;
  padding: 4px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
}

.resend-toast::part(resend-toast-dismiss-icon) {
  display: flex;
  width: 16px;
  height: 16px;
  padding: 3.333px;
  justify-content: center;
  align-items: center;
}

.spinner-container {
  display: flex;
  padding: 12px 16px;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 2px;
  background: #2f3840;
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin-block-start: 12px !important;
}

.spinner-container svg {
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}
*/
.are-you-sure-header {
  font-weight: 400;
  font-size: 28px;
  color: var(--sty-primary-color);
}

.stv-display-grid {
  grid-template-columns: 1fr !important;
  grid-template-areas:
    'header header header'
    'container container container'
    'footer footer footer' !important;
}

.stv-display-grid-cancel {
  grid-template-columns: 1fr !important;
  grid-template-areas:
    'header header header'
    'areYouSure areYouSure areYouSure'
    'footer footer footer' !important;
}

#are-you-sure {
  flex-direction: column;
  align-items: start;
  justify-self: center;
  padding: 0px;
  margin-top: 32px;
  max-width: 90vw;
  width: 472px;
  height: 214px;
}

#are-you-sure-buttons {
  text-align: end;
  width: 100%;
}

#yes-cancel-button {
  background-color: var(--sty-primary-color);
  color: white;
}

#no-dont-cancel-button {
  border: 1px solid var(--sty-primary-color);
  color: var(--sty-primary-color);
  background-color: white;
  margin-right: 1rem;
}

.enroll-Now-Link {
  text-align: center;
  font-weight: 400;
  display: flex;
  justify-content: center;
  padding: 1em;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


.svg-container {
  position: relative;
  width: 64px; /* or whatever size you want */
  height: 64px;
  margin: 0 auto; /* center in parent horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.svg-layer {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

/* manchester noOtp*/
section[data-block='genericResult'] sty-button{
  width: 310px;
  margin-top: -20px !important;
  margin: 0 auto;
}

[data-error='no-otpmethods']{
  width: 310px !important;
}


/* GR-1538 */

#app.magicLinkExpired .panel {
  width: 472px !important;
  min-width: 472px !important;
  border: none;
  margin: 0px;
}


section[data-block="magicLinkExpired"] .text,
section[data-block="magicLinkExpired"] .session-expired{
  display: none;
}

.linkedContainer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'NickelCity';
  border: 1px solid #CDD4DA;
  text-align: left;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 18px;
}

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

.linkedHeader3 {
  font-family: 'NickelCity';
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0px;
  color: #2F3840;
  margin: 0px;
  text-align: center;
  margin-bottom: 36px;
}

.linkedHeader1{
  font-family: 'NickelCity';
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 0px;
  margin: 0px
}

.linkedText{
  font-family: 'NickelCity';
  font-weight: 400;
  font-size: 12px;
  line-height: 150%;
  letter-spacing: 0px;
  margin: 0px;
  color: #4D5A68;
}

.buttonOverwrite{
  all: unset;
  width: fit-content;
  text-decoration: underline;
  cursor: pointer;
  color: #007856;
  background-color: transparent;
  display: block;
  margin: 0 auto;
  padding: 4px 0px 0px 0px;
  font-size: 16px;
  font-weight: 400;
}


/*GR-1742 Password reset page*/
/* AAI-2021 CSS selectors updated based on the buffalo release*/
#requirements {
  visibility: visible !important;
  width: auto;
  opacity: 1;
  position: unset;
  display: block;
  margin-top: 0px !important;
  background-color: #F5F6F8;
  padding: 4px;
  border-style: none;
  animation: unset;
  box-shadow: none !important;
  margin-bottom: 3rem;
}

div[part="validator-header"]::after {
  content: "Password includes:"; 
  float: left;
  color: #4D5A68 !important;
}

[part="validator-header"] {
  font-size: 12px;
  font-weight: 400;
  color: #F5F6F8;
}

[part="validator-list"] {
  position: relative;
  padding-left: 1rem;
  font-size: 12px;
  font-weight: 300;
  padding-top: 5px;
  color: #4D5A68 !important;
  margin-top: 4px;
  margin-bottom: 0px;
}


[part="validator-item"]::before {
  position: absolute !important;
  inset-inline-start: -1px !important;
  content: "";
  width: 1rem !important;
  height: 1rem !important;
  background: #F5F6F8;
  border-radius: 50% !important;
  border-style: solid !important;
  border-width: 2px !important;
  color: #607183
}

[part="validator-item"] {
  padding-left: 4px;
  border-radius: 2px !important;
  padding-bottom: 8px;
  font-weight: 400;
}

[part="validator-item"].valid::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDRDMTYuNDE4MyA0IDIwIDcuNTgxNzIgMjAgMTJDMjAgMTYuNDE4MyAxNi40MTgzIDIwIDEyIDIwQzcuNTgxNzIgMjAgNCAxNi40MTgzIDQgMTJDNCA3LjU4MTcyIDcuNTgxNzIgNCAxMiA0Wk0xNS41NzUgOEwxMC4xOTE1IDEzLjg3ODFMOC4zNzY2IDEyLjA3NjhMNy4zMzMzMyAxMy4xMTI4TDEwLjI0MTcgMTZMMTYuNjY2NyA4Ljk4NTY0TDE1LjU3NSA4WiIgZmlsbD0iIzAwNzg1NiIvPgo8L3N2Zz4=");
  background-position: center;
  font-size: 11px;
  padding-left: 3px;
  border-width: 1px !important;
}

[part="validator-item"]::marker {
 display: none !important;
}

.requirementHeader {
  font-size: 12px;
  font-weight: 300;
  color: #4D5A68;
}

#app.passwordEnroll [data-field="password"] sty-feedback,
#app.passwordEnroll [data-field="passwordConfirmation"] sty-feedback,
#app.passwordEnroll [data-field="password"]::part(error-icon),
#app.passwordEnroll [data-field="passwordConfirmation"]::part(error-icon),
#app.customerInput[data-custom-screen='ssn'] .footer-layout,
#app.passwordEnroll .footer-layout,
#app.passwordReset .footer-layout,
#app.passwordReset sty-popover::part(arrow),
#app.passwordReset sty-input-password [slot='feedback'] {
  display: none !important;
}

#app.passwordEnroll [data-field="password"],
#app.passwordEnroll [data-field="passwordConfirmation"],
#app.mfaPasswordEnroll [data-field="password"],
#app.passwordReset [data-field="password"],
#app.passwordReset [data-field="passwordConfirmation"] {
  --sty-danger-color: #8697A7 !important;
}

#app.passwordEnroll [data-field="passwordConfirmation"] {
  margin-top: 3rem;
}
   
.pwdContainer{
  display: inline-flex;
  align-items: center;
}

.password-requirements .validator:before {
  position: absolute !important;
  inset-block-start: .4rem !important;
  inset-inline-start: -4px !important;
  content: "";
  width: 1rem !important;
  height: 1rem !important;
  background: #F5F6F8 !important;
  border-radius: 50% !important;
  border-style: solid !important;
  border-width: 2px !important;
}

.passwordMatch {
  background-color: #F5F6F8;
  margin-top: 0px;
}

.passwordMatch p {
  margin-top: 0px;
  font-size: 12px;
  color: #4D5A68;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 1.9rem;/*AAI-2021*/
  position: relative;
  text-align: left;
}

.passwordMatch p::before {
  position: absolute;
  inset-inline-start: 10px; /*AAI-2021*/
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border-style: solid;
  border-width: 2px;
}

.password-requirements .validator.valid:before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDRDMTYuNDE4MyA0IDIwIDcuNTgxNzIgMjAgMTJDMjAgMTYuNDE4MyAxNi40MTgzIDIwIDEyIDIwQzcuNTgxNzIgMjAgNCAxNi40MTgzIDQgMTJDNCA3LjU4MTcyIDcuNTgxNzIgNCAxMiA0Wk0xNS41NzUgOEwxMC4xOTE1IDEzLjg3ODFMOC4zNzY2IDEyLjA3NjhMNy4zMzMzMyAxMy4xMTI4TDEwLjI0MTcgMTZMMTYuNjY2NyA4Ljk4NTY0TDE1LjU3NSA4WiIgZmlsbD0iIzAwNzg1NiIvPgo8L3N2Zz4=");
  background-position: center;
  font-size: 11px;
  padding-left: 2px;
}

.passwordMatch p.valid::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDRDMTYuNDE4MyA0IDIwIDcuNTgxNzIgMjAgMTJDMjAgMTYuNDE4MyAxNi40MTgzIDIwIDEyIDIwQzcuNTgxNzIgMjAgNCAxNi40MTgzIDQgMTJDNCA3LjU4MTcyIDcuNTgxNzIgNCAxMiA0Wk0xNS41NzUgOEwxMC4xOTE1IDEzLjg3ODFMOC4zNzY2IDEyLjA3NjhMNy4zMzMzMyAxMy4xMTI4TDEwLjI0MTcgMTZMMTYuNjY2NyA4Ljk4NTY0TDE1LjU3NSA4WiIgZmlsbD0iIzAwNzg1NiIvPgo8L3N2Zz4=");
  background-position: center;
  font-size: 11px;
  padding-left: 2px;
  border-width: 2px;
}

.phLink{
  padding-block: 0 !important;
  padding-inline: 0 !important;
  font-family: "NickelCity";
  font-weight: 350;
  color:  var(--sty-success-color, hsl(165, 100%, 25%)) !important;
  text-decoration: underline;
  cursor: pointer;
}

/* AAI-1909 New styling for a custom cancel button*/
#app.passwordEnroll a {
  text-decoration: underline;
  padding-top: 16px;
}


.resetPanelText {
  text-align: left;
  color: #333333;
  visibility: visible;
  left: 0;
  top: 0;
  width: 100%;
  font-weight: 400;
  padding-bottom: 24px;
  font-family: 'NickelCity';
}

#app.passwordReset .edit-show-links{
  padding-right: 8px;
}

/*GR-1742 Password reset page end*/

#app.customerInput[data-custom-screen="sty-input-pwd"] sty-feedback {
  display: none !important;
}

#app.customerInput[data-custom-screen="sty-input-pwd"] sty-input-password [slot='suffix'] {
  display: none;
  margin-right: 12px;
}

#app.customerInput[data-custom-screen="sty-input-pwd"] sty-input-password::part(container)
{
  margin-top: 48px;
}

#app.customerInput[data-custom-screen="sty-input-pwd"] sty-input-text::slotted(input) {
font-size: 16px !important;
font-weight: 500 !important; 
line-height: 150% !important;
color:#2f3840 !important;
font-style: normal;
}

#app.customerInput[data-custom-screen="sty-input-pwd"] sty-input-password::part(label){
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 150%;
  color: #4d5a68;
}

#app.customerInput[data-custom-screen="sty-input-pwd"] .separator{
  display: none!important;
}

#app.customerInput .footer-layout{
  display: none !important;
}
#app.customerInput[data-custom-screen="sty-input-pwd"] [slot='input']{
  font-size: 16px !important; 
  font-weight: 500 !important;
  line-height: 150% !important; 
  color: #2f3840 !important;

}

.show-error-color {
  --sty-danger-color: red !important;
}

#app.identifier .section-title, 
#app.password .section-title,
#app.passwordReset .section-title,
#app.mfaPasscode .section-title { 
  margin-bottom: 32px !important;
}

.section-title {
  color: var(--PrimaryBase, #007856) !important;
  text-align: center;
  font-family:'NickelCity' !important;
  font-size: 28px !important;
  font-style: normal;
  font-weight: 400 !important;
  letter-spacing: var(--type-title-3-letter-spacing, 0px) !important;
  
}

.section-header {
  color: var(--PrimaryBase, #007856) !important;
  text-align: center;
  font-family:'NickelCity' !important;
  font-size: 28px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 120% !important;
  letter-spacing: var(--type-title-3-letter-spacing, 0px) !important;
}

.section-text {
  margin-top: 12px;
  font-size: 16px !important;
  font-family: 'NickelCity' !important;
  font-weight: 400 !important;
  color: #4D5A68 !important;
}

#app.mfaPasscode .section-title{
  text-align: left !important;
  margin-bottom: 36px !important;
}

#app.mfaPasscode .section-header {
  text-align: left !important;
}

#app.passwordReset .section-header{
  text-align: left !important;
}

.message-box {
  display: inline-flex;
	background: var(--color-background-danger, #f8e5e4);
	border-radius: 0 rem;
	color: #ffffff;
	padding: 16px;
	margin-bottom: 1rem;
  border-left: 3px solid var(--color-border-danger-emphasis, #bc3b32);

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

/*
.message-box
.error-message {
  display: flex;
  height: auto;
  padding: 16px;
  gap: var(--spacingmd8px);
  border-radius: 0px var(--radiussm4px) var(--radiussm4px) 0px;
  border: 0px 0px 0px 3px;
  opacity: 0px;
  background: var(--color-background-danger, #f8e5e4);
  border-left: 3px solid var(--color-border-danger-emphasis, #bc3b32);
}
*/

.error-text {
  font-family: 'NickelCity';
  font-size: 16px;
  font-weight: 390;
  line-height: 150%;
  text-align: left;
  color: #bc3b32;
}

.alert-container {
  display: flex;
  justify-content: space-between; /* alert on left, close on right */
  align-items: flex-start;
  padding: 8px 12px;
  margin: 8px 0;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
  width: 300px; /* you can change this */
  font-family: sans-serif;
  position: relative;
}

.alert-icon {
  font-size: 20px;
}

.alert-text {
  flex: 1; /* expand in between icons if you want text */
  margin: 0 10px;
}

.close-icon {
  font-size: 18px;
  cursor: pointer;
  user-select: none;
}

.alert-display-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: top;
  padding: 16px;
  gap: 8px;

  width: 310px;
  background: #ffe7ad;
  border-left: 3px solid #8b6200;
  border-radius: 0px 4px 4px 0px;
  margin-top: 32px;
  margin-bottom: 32px;
}

.alert-display-icon-container {
  display: flex;
  justify-content: center;
  margin-top: 5px;
}

.alert-display-content {
  display: flex;
  flex-direction: column;
  justify-content: left;

  font-family: 'NickelCity';
  font-style: normal;
  line-height: 150%;
  padding-top: 0px;
  text-align: left;

  color: #8b6200;
}

.alert-display-content p {
  margin-top: 0px;
  margin-bottom: 0px;
}

.alert-display-content p a {
  display: inline;
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.alert-display-close-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 5px;
}

.alert-display-close-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: top;
  max-height: 20px;
  padding: 4px;
  gap: 2px;
  background-color: transparent;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
}

.alert-display-close-button-icon {
  position: relative;
}

.alert-display-container.is-hidden { display: none; }

@media print, screen and (min-width: 36em) {
  .footer-grid > .medium-auto {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0;
    -ms-flex: 1 1 0;
    flex: 1 1 0;
    width: auto;
  }

  .footer-grid > .medium-shrink,
  .footer-grid > .medium-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  .footer-grid > .medium-shrink {
    width: auto;
  }

  .footer-grid > .medium-6 {
    width: 50%;
  }
}


@media (max-width: 769px) {
  .mtb-section-header {
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  #app {
    flex-direction: column;
    grid-template-columns: 1fr;
    justify-content: center !important;
    overflow: auto !important;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      'header'
      'container'
      'left'
      'footer';
  }
}

@media (max-width: 768px) {
  .footer-grid {
    flex-direction: column;
    align-items: center;
  }
  .footer-cell {
    width: 100%;
  }

  .mtb-footer__logo svg {
    max-width: 100%;
    height: auto;
  }
}