@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap');
/* #region font */
@font-face {
font-family: 'M&T Balto Web';
font-style: normal;
font-weight: 100;
src: url('https://www.mtb.com/etc.clientlibs/axp-common/clientlibs/clientlib-site/resources/fonts/MTB_Balto/Webfonts/mandtbaltoweb-light.woff');
}
@font-face {
font-family: 'M&T Balto Web';
font-style: normal;
font-weight: 300;
src: url('https://www.mtb.com/etc.clientlibs/axp-common/clientlibs/clientlib-site/resources/fonts/MTB_Balto/Webfonts/mandtbaltoweb-book.woff');
}
@font-face {
font-family: 'M&T Balto Web';
font-style: normal;
font-weight: 500;
src: url('https://www.mtb.com/etc.clientlibs/axp-common/clientlibs/clientlib-site/resources/fonts/MTB_Balto/Webfonts/mandtbaltoweb-medium.woff');
}
/* #endregion */
:root {
--mnt-green: #007856;
--mnt-fraud-bg: #fcc4cc;
--mnt-banner-bg: #ffe8b2;
--sty-primary-color: var(--mnt-green);
--sty-bg: #ffffff;
/* upgrade bug on manchester build 0. Try deleting after next upgrade */
--sty-body-bg: #ffffff;
--sty-font-family: 'M&T Balto Web', Arial, Helvetica, sans-serif;
--sty-text-color: #000;
--sty-panel-bg: transparent;
--sty-panel-border-width: 0;
--sty-panel-box-shadow: none;
--sty-panel-container-padding: 0;
--sty-input-style: 'outer';
--sty-input-box-shadow: none;
--sty-input-border-color: #a5a5a5;
--sty-input-border-radius: 2px;
--sty-input-helper-color: #000;
--sty-input-label-font-weight: bold;
--sty-button-border-radius: 2px;
--sty-checkbox-border-color: black;
font-weight: 300 !important;
}
/* #region header */
header {
display: grid;
grid-template-columns: auto var(--sty-panel-max-width, minmax(360px, 400px)) auto;
grid-template-rows: auto 1fr auto auto auto;
grid-template-areas:
"fdic fdic fdic"
"inner inner inner"
"banner banner banner"
"bigMessage bigMessage bigMessage"
". message .";
}
header .header-inner {
display: flex;
align-items: center;
background: var(--mnt-green);
padding: 0.7rem 2.5rem;
grid-area: inner;
}
header .header-inner .logo {
width: 182px;
height: 33px;
}
header .header-inner .text {
color: #fff;
display: inline-block;
font-size: 2.5rem;
font-family: var(--sty-font-family);
font-weight: 100;
}
header .header-inner .text::before {
border-left: 1px solid #fff;
margin: 0 1.5rem;
content: '';
}
header .banners {
grid-area: banner;
margin-bottom: 4rem;
}
header .big-messages {
grid-area: bigMessage;
max-width: 650px;
margin: auto;
}
header .big-messages div[data-message] {
display: none;
}
header .big-messages [data-message='frauders'] {
background-color: var(--mnt-fraud-bg);
padding: 0.5rem;
}
header .big-messages [data-message='frauders'] .image {
float: left;
margin: 1rem;
}
header .big-messages [data-message='frauders'] .heading {
color: #000;
font-weight: bold;
}
header .big-messages [data-message='frauders'] .text {
text-align: justify;
}
header .panel-messages {
display: flex;
flex-direction: column;
grid-area: message;
}
header .panel-messages div[data-message]+div[data-message] {
margin-top: 1rem;
}
header .panel-messages .heading {
color: var(--mnt-green);
font-size: 1.5rem;
line-height: 1.8rem;
}
.registerToken {
color: var(--mnt-green) !important;
font-size: 1.5rem !important;
line-height: 1.8rem !important;
}
header .panel-messages div[data-message] {
max-width: 400px;
display: none;
}
header .panel-messages [data-message='code-resend'] {
width: 400px;
border: 1px solid #5bb684;
border-radius: 2px;
background: #d8f3e4;
padding: 1rem;
}
header .panel-messages [data-message='code-resend'] .image {
float: left;
margin-right: 10px;
margin-bottom: -5px;
}
header .panel-messages [data-message='code-resend'] .text {
margin-top: 1px;
}
header .panel-messages [data-message='magic-link'] .text {
margin-top: 1rem;
font-size: .8rem;
}
header .panel-messages div[data-message] .text+.text {
margin-bottom: .5rem;
}
header div[data-banner] {
display: none;
/* use flex */
flex-direction: row;
justify-content: center;
align-items: center;
background-color: var(--mnt-banner-bg);
padding: 0.5rem;
column-gap: 0.5rem;
}
header [data-banner='identifier-info'] {
justify-content: start !important;
}
@media only screen and (max-width: 768px) {
header .header-inner {
flex-direction: column;
}
header .header-inner .logo {
width: 130px;
height: 23px;
}
header .header-inner .text {
font-size: 1.4rem;
width: 100%;
text-align: center;
border-top: 1px solid #fff;
margin-top: 5px;
}
header .header-inner .text::before {
border: 0;
margin: 0;
}
}
.fdic {
grid-area: fdic;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 26px;
background-color: #005840;
color: #FFFFFF;
font-family: "Source Sans Pro", sans-serif;
font-style: italic;
font-size: 12.8px;
font-weight: 400;
padding: 10px;
column-gap: 0.5rem;
}
.fdic-icon {
background: url(https://onlinebanking.mtb.com/Assets/images/fdic-digital-sign-white.svg) no-repeat left center;
background-repeat: no-repeat;
width: 37.36px;
height: 15.74px;
}
/* #endregion */
/* #region footer */
footer {
text-align: center;
}
footer li {
display: inline-block;
}
footer li+li::before {
border-left: 1px solid #979797;
content: '';
margin: 0 1rem;
}
@media only screen and (max-width: 768px) {
footer li {
display: block;
}
footer li+li::before {
border: 0;
margin: 0;
}
}
/* #endregion footer */
/* #region globals */
[data-button='cancel'] {
--sty-button-secondary-bg: #d7d7d7;
--sty-button-secondary-color: #000;
--sty-button-border-width: 0;
}
.button-wrapper {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 1rem;
}
.button-wrapper-back-to-login {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1rem;
}
.button-wrapper sty-button {
min-width: 180px;
}
.custom-forgot-password {
margin: 0.5rem 0;
text-decoration: underline;
font-weight: 100;
}
.custom-show {
cursor: pointer;
font-weight: 500;
}
.phone-icon {
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
width: 25px;
height: 25px;
}
.mtb-warning::after {
content: '';
background-image: url('data:image/svg+xml,');
display: block;
width: 2rem;
height: 2rem;
}
.big-mtb-warning {
content: '';
background-image: url('data:image/svg+xml,');
margin: auto auto 1rem auto;
width: 40px;
height: 40px;
}
.mtb-green-tick::after {
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 140'%3E%3Cpath fill='%237bb800' d='M137.5-.5h3a430 430 0 0 0 21 16.5 9231 9231 0 0 1-109 120q-1 1-2 0a3221 3221 0 0 0-48-47.5v-3q8.97-8.468 18-17a1293 1293 0 0 1 30.5 30 4153 4153 0 0 0 89.5-99'/%3E%3C/svg%3E");
display: block;
width: 40px;
height: 35px;
}
.mtb-field-error {
display: flex;
flex-direction: row;
align-items: center;
background-color: var(--mnt-banner-bg);
padding: 0.25rem;
column-gap: 0.5rem;
}
[data-section='panel'] {
margin: 1.5rem 0 0 0 !important;
}
sty-input-passcode::part(input),
sty-input-password::part(input),
sty-input-text::part(input),
sty-input-passcode input,
sty-input-password input,
sty-input-text input {
font-weight: 300;
}
[data-content='left'] {
display: none;
}
[data-section="methods"],
#notifications,
#language-selector,
#app.login [data-section="accountInfo"],
#app.login [data-block-title],
#app.login [data-section="panelHeader"],
/* MJF.HCM 10/24/24 new css line below this block to style the separator element. Original line => #app.login [data-separator="login"],*/
/* MJF.HCM 10/24/24 The below styling ensures we show the "Log in using a different account" elemnt on the remembered accounts page*/
#app.login:not(.rememberedAccount) [data-separator="login"] {
display: none !important;
}
.iconAlignmentFix {
width: fit-content;
margin: auto;
margin-bottom: 1rem;
}
.iconAlignmentFix::after {
width: 2.5rem;
height: 2.5rem;
}
#app[data-redirect] header>div:not(.header-inner),
#app[data-redirect] #container {
display: none;
}
/* #endregion globals*/
#app.identifier [data-field="rememberAccount"] {
text-align: center;
display: inline-block;
}
#app.identifier [data-field="rememberAccount"]::part(focus-ring) {
visibility: hidden !important;
}
#app.identifier .remember-label {
display: flex;
column-gap: 10px;
margin-bottom: -2px;
position: relative;
}
#app.identifier .remember-question-mark {
background-color: var(--mnt-green);
color: #fff;
border-radius: 9999px;
width: 20px;
height: 20px;
padding-top: 1px;
}
#app.identifier .remember-help-text {
display: none;
position: absolute;
left: calc(100% - 10px);
top: calc(100% + 15px);
z-index: 100;
background-color: #fff;
padding: 10px;
border: 1px solid #a5a5a5;
min-width: 240px;
font-size: .9rem;
line-height: 1rem;
text-align: left;
}
#app.identifier .remember-question-mark:hover~.remember-help-text {
display: block;
}
#app.progressiveProfiling .button-wrapper {
margin-bottom: 2rem;
}
[data-field='identifier'][readonly] {
--sty-input-border-width: 0;
}
#app.mfaEnrollTargetSelect [data-section="panel"],
#app.mfaMethod [data-section="panel"] {
display: none;
}
#app.mfaPasscode [data-section='resend'],
#app.mfaEnrollChallenge [data-section='resend'] {
text-align: left;
margin-bottom: 2rem;
font-size: 0;
}
#app.mfaPasscode [data-button='resend'],
#app.mfaEnrollChallenge [data-button='resend'] {
font-size: 1rem;
margin: 0;
padding: 0;
border: 0;
--sty-link-decoration: underline;
--sty-link-hover-decoration: underline;
}
#app.mfaPasscode [data-section='panel'],
#app.mfaEnrollChallenge [data-section='panel'] {
margin-top: 0;
}
#app.mfaPasscode .remember-warning,
#app.mfaEnrollChallenge .remember-warning {
display: block;
background-image: url('data:image/svg+xml,');
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: left;
background-color: var(--mnt-banner-bg);
text-align: left;
margin-bottom: 2rem;
padding: 10px 0px 10px 35px;
}
#app.mfaPasscode .content2,
#app.mfaEnrollChallenge .content2 {
text-align: left;
margin-bottom: 4rem;
}
#app.mfaPasscode sty-form>.text,
#app.mfaEnrollChallenge sty-form>.text {
display: none !important;
}
/* Keep it scoped to the panel area / block so it doesn't bleed elsewhere */
[data-block] [data-section="contactUs"] {
margin-top: 0.75rem; /* space from buttons */
line-height: 1.35;
color: var(--text-secondary, #2f3c43);
/* If the text wraps too narrowly in your layout, cap it or let it fill */
/* max-width: 36ch; */
}
#app.mfaPasscode [data-section='contactUs'],
#app.mfaEnrollChallenge [data-section='contactUs'] {
text-align: left;
}
#app.mfaPasscode [role='status'],
#app.mfaEnrollChallenge [role='status'],
#app.customerInput[data-custom-screen='rsa'] [data-section='panel'],
#app.customerInput[data-custom-screen='smSession'] [data-section='panel'],
#app[data-screen='mfaEnrollSuccess'] [data-section='panelContainer'] {
display: none;
}
#app.customerInput:not([data-custom-screen]) #container,
#app.customerInput[data-custom-screen='password'] [data-separator='login'],
#app.customerInput[data-custom-screen='password'] [data-field='attribute-local.forgotPassword'],
#app.customerInput[data-custom-screen='password'] .text-optional {
display: none !important;
}
#app.customerInput[data-custom-screen='password'] [data-field='attribute-local.userId'] {
--sty-input-border-width: 0;
}
#app.customerInput[data-custom-screen="pwResetUserid"] .text-optional,
#app.customerInput[data-custom-screen="pwResetUserid-error"] .text-optional,
#app.customerInput[data-custom-screen="forgotPasswordUserInput-error"] .text-optional,
#app.customerInput[data-custom-screen="forgotPasswordUserInput"] .text-optional {
display: none;
}
#app.progressiveProfiling[data-screen="hardTokenRegister"] [data-field="attribute-attributes.custom.tokenSerialNr"] label .text-optional {
display: none !important;
}
#app.passwordReset .password-additional-text,
#app.passwordEnroll .password-additional-text {
margin-bottom: 3rem;
text-align: left;
}
#app.passwordReset .pw-policy-list-title,
#app.passwordEnroll .pw-policy-list-title {
margin-bottom: 0.5rem;
}
#app.passwordReset .pw-policy-list,
#app.passwordEnroll .pw-policy-list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
align-items: flex-start;
}
#app.passwordReset .pw-policy-list li,
#app.passwordEnroll .pw-policy-list li {
display: flex;
flex-direction: row-reverse;
}
#app.passwordReset .pw-policy-list .icon,
#app.passwordEnroll .pw-policy-list .icon {
position: relative;
top: 0.3rem;
display: block;
width: 1rem;
height: 1rem;
min-width: 1rem;
min-height: 1rem;
max-width: 1rem;
max-height: 1rem;
margin-right: 0.4rem;
}
#app.passwordReset .pw-policy-list .icon.dark,
#app.passwordEnroll .pw-policy-list .icon.dark {
color: #040404;
}
#app.passwordReset .pw-policy-list .icon.red,
#app.passwordEnroll .pw-policy-list .icon.red {
color: #f34436;
}
#app.passwordReset .pw-policy-list .icon.valid,
#app.passwordEnroll .pw-policy-list .icon.valid {
color: #7bb800;
}
#app.magicLink [data-block="magicLink"] {
display: none;
}
#app.genericResult,
#app.customerInput[data-custom-screen="forgot-pw-error-screen"],
#app.customerInput[data-custom-screen="token-down"] {
--sty-panel-text-alignment: left;
}
#app.genericResult .icon,
#app.genericResult [data-separator],
#app.genericResult [data-button='login'] {
display: none;
}
[data-content='left'] div[data-error-code] .logo,
#app.genericResult [data-block='genericResult'] .logo,
#app.customerInput[data-custom-screen="forgot-pw-error-screen"] .logo,
#app.customerInput[data-custom-screen="token-down"] .logo {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
#app.genericResult [data-block='genericResult'] .link {
color: var(--mnt-green);
margin-top: 1rem;
text-decoration: underline;
cursor: pointer;
}
#app.genericResult .mfa-success-center-header {
text-align: center;
}
#app.genericResult .success-screen .text .link {
display: inline;
}
#app.genericResult .success-screen .text {
text-align: center;
}
#app.genericResult .success-screen .text:nth-child(4) {
margin: 0 0 3rem;
}
[data-content='left'] div[data-error-code] .header,
#app.genericResult [data-block='genericResult'] .header,
#app.customerInput[data-custom-screen="forgot-pw-error-screen"] .header,
#app.customerInput[data-custom-screen="token-down"] .header {
color: var(--mnt-green);
font-size: 1.5rem;
line-height: 1.8rem;
margin-bottom: 1rem;
}
[data-content='left'] div[data-error-code] .smallHeader,
#app.genericResult [data-block='genericResult'] .smallHeader {
color: var(--mnt-green);
margin: 1rem 0;
}
[data-content='left'] div[data-error-code] .errorCode {
font-size: 0.8rem;
margin-top: 1rem;
}
[data-content='left'] [data-error-code='EC001'] {
max-width: 300px;
margin: auto;
}
[data-section="resend"] {
margin-top: 16px;
}
/* Using aria-label (value is stable and readable) */
sty-checkbox[aria-label="Remember this device"] {
margin-top: 20px;
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
#app.landing.magicLinkExpired [data-block="login"] {
max-width: 300px;
margin: 2rem auto;
}
#app.landing.magicLinkExpired [data-section="panelHeader"],
#app.landing.magicLinkExpired [data-block="magicLinkExpired"] *:not([data-button="login"]) {
display: none !important;
}
/* region screen control */
#app.identifier[data-redirect] [data-block="identifier"][data-show="true"],
#app.identifier [data-block="identifier"] {
display: none;
}
#app.identifier [data-block="identifier"][data-show="true"] {
display: block;
}
#app.customerInput section {
display: none;
}
#app.customerInput:not([data-custom-screen="smSession"]) section[data-show="true"],
#app.customerInput:not([data-custom-screen="rsa"]) section[data-show="true"] {
display: block;
}