@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/Rubik-Regular.ttf') format('truetype');
}

/* - Raleway */

@font-face {
    font-family: 'Raleway';
    font-style : normal;
    font-weight: normal;
    src: local('Raleway Regular'), local('Raleway-Regular'), url('fonts/raleway/Raleway-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Raleway Medium';
    font-style : medium;
    font-weight: 500;
    src: local('Raleway Medium'), local('Raleway-Medium'), url('fonts/raleway/Raleway-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Raleway Bold';
    font-style : bold;
    font-weight: 700;
    src: local('Raleway Bold'), local('Raleway-Bold'), url('fonts/raleway/Raleway-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Raleway Italic';
    font-style : italic;
    font-weight: normal;
    src: local('Raleway Italic'), local('Raleway-Italic'), url('fonts/raleway/Raleway-Italic.ttf') format('truetype');
}

/* - Montserrat */

@font-face {
    font-family: 'Montserrat';
    font-style : normal;
    font-weight: normal;
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url('fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat Medium';
    font-style : medium;
    font-weight: 500;
    src: local('Montserrat Medium'), local('Montserrat-Medium'), url('fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat Bold';
    font-style : bold;
    font-weight: 700;
    src: local('Montserrat Bold'), local('Montserrat-Bold'), url('fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat Italic';
    font-style : italic;
    font-weight: normal;
    src: local('Montserrat Italic'), local('Montserrat-Italic'), url('fonts/montserrat/Montserrat-Italic.ttf') format('truetype');
}




.tip {
        width: 240px;
        z-index: 13000;
        border: 1px solid black
}

.tip-title {
        font-weight: bold;
        font-size: 0.8em;
        padding: 2px;
        text-align: center;
        color: #009966;
        background: #003366
}

.tip-text {
        font-size: 0.8em;
        padding: 2px 8px;
        color: #FFFFFF;
        background: #003366
}

.leftnavitem {
        text-decoration: none;
        font-size:       smaller;
}

.hr-td {
        font-size: 0.6em;
}

.requiredmarker {
        font-weight: bold;
        color: #993300;
}


.datatable {
    border-collapse: collapse;
    width: 100%;
}

.datatable-sortable {
    text-decoration: underline;
    cursor:          pointer;
}

.datatable-header {
    font-size:    inherit;
    font-weight:  700;
    font-family:  Montserrat, Verdana, Arial, Helvetica, Geneva;
    text-align:   left;
    border:       1pt solid #cccccc;
    padding-top:    2px;
    padding-bottom: 2px;
    padding-right:  5px;
    padding-left:   5px;
    background:   #CCCCCC;
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 50%;
    background-image: url(/images/spacer.gif);
}

.datatable-headerasc {
    background-image: url(/images/asc.gif);
    padding-right:    16px;
    background-position: right;
    background-repeat: no-repeat;
}

.datatable-headerdesc {
    background-image: url(/images/desc.gif);
    padding-right:    16px;
    background-position: right;
    background-repeat: no-repeat;
}

.datatable td {
    font-size:    inherit;
    font-family:  Montserrat, verdana, arial, helvetica, geneva;
    border:       1px solid #CCCCCC;
    padding-top:    2px;
    padding-bottom: 2px;
    padding-right:  5px;
    padding-left:   5px;
    vertical-align: middle;
}

.datatable .odd > td {
    background-color: #eeeeee;
}

.action-column {
    text-align: center;
}

.datatable td.action-column {
    background-color: white;
    border: 0px;
    padding: 5px 13px;
}

.datatable th.action-column {
    background-color: white;
    border: 0px;
}

.action-column img {
    display: inline-block;
    margin: 0px;
    border: 0px;
    white-space: nowrap;
}

.toolbar {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.toolbar > td {
    vertical-align: middle;
    display: inline-block;
    padding: 4px 0;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.toolbar > span {
    vertical-align: middle;
    display: inline-block;
    padding: 4px 4px;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

/* The display: inline-block in the previous rule will override the global .ui-hidden, so bring back the behavior */
.toolbar > td.ui-hidden {
    display: none;
}

.compact-toolbar {
    display: inline;
    margin: 0;
    padding: 0;
}

span.compact-toolbar {
    white-space: nowrap;
}

.compact-toolbar > span {
    vertical-align: middle;
    display: inline-block;
    padding: 4px 4px;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

/* The display: inline-block in the previous rule will override the global .ui-hidden, so bring back the behavior */
.compact-toolbar > span.ui-hidden {
    display: none;
}

.compact-toolbar span.ui-icon {
    margin: 4 4px;
}

.compact-toolbar > td.ui-hidden {
    display: none;
}

.toolbar td.ui-icon {
    margin: 4 4px;
}

.toolbar .toolbar-button-label {
    display: inline-block;
    font-size: 1.0em;
    vertical-align: middle;
    padding-right: 4px;
}

.toolbar .toolbar-label {
    cursor: normal;
    background: #eeeeee;
    color: rgb(85, 85, 85);
    margin-left: 4px;
    padding-left: 4px;
    padding-right: 4px;
    font-size: 0.8em;
    border: 0px;
}

.toolbar .toolbar-button-control {
    display: inline-block;
    font-size: 1.0em;
    padding-right: 2px;
    valign: middle;
}

.toolbar-button {
    white-space: nowrap;
}

.nowrap {
    white-space: nowrap;
}

table.userform {
    border-spacing: 10;
}
.editinfo-label {
    text-align: right;
}
.editinfo-input-cell {
    text-align: left;
}
.editinfo-label-after {
    text-align: right;
    font-size: 0.8em;
}

#newuser-landing-wrapper { width: 300px; margin: 0 auto; display: block; }
#newuser-landing-title { font-size: 1.2em; margin: 0 auto; text-align: center; }
#newuser-landing-instructions { font-size:0.8em; font-color: blue; margin: 0 auto;text-align: center; padding: 10px; }
#newuser-landing-social-icons { margin: 0 auto;text-align: center; padding: 10px;}
#newuser-landing-or { font-weight: bold; font-size: 1.2em; margin: 0 auto;text-align: center; padding: 10px;}
#newuser-landing-email { margin: 0 auto;text-align: center; padding: 10px; }
#newuser-landing-email-button { font-size: 1.2em; font-weight: bold; }

.error-message {
    color: red;
    font-size: 0.8em
}

.page-header {
    margin-top: 20px;
}

.pageheaderwrapper {
    margin: 3px 5px 15px 5px;
    border-bottom: 1px solid black;
    font-weight: bold;
}

.page-text {
    margin-top: 20px;
    margin-bottom: 20px;
}

.smaller-text {
    font-size: 0.8em;
}

.top-link-item {
    border: 1px solid windowtext;
    border-color: #666666;
    border-top: none;
    padding: 3px 8px;
    text-align: center;
}

.setup-topnav {
    height: 40px;
}

.setup-topnav ul,
.setup-topnav ul li {
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 30px;
}

.setup-topnav ul {
    height: 40px;
    background-color: grey;
}

.setup-topnav ul li a {
    display: inline-block;
    height: 40px;
    padding: 0 9px;
    color: #ccc;
    text-decoration: none;
}

.setup-topnav ul li.current-menu-item a {
    color: #fff;
}

.setup-topnav ul li a:hover {
    color: #fff;
}

input.px-button {
    border-radius: 5px;
    border: 1px solid #c3c3c3;
    background-color: #fff;
    padding: 5px 15px;
    cursor: pointer;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
}

/* UPDATED WITH REBRANDING - JAN 2023 */
/* based on the mixins in ~/server/server/webapp/to_serve/src/main/react/style/Buttons.scss */
input[type=button], input[type=submit], input[type=type], input[type=reset], button[data-type="primary"] {
  color: #fff;
  padding: 0 16px;
  font-family: Raleway, Rubik, sans-serif;
  text-transform: uppercase;
  line-height: 40px;
  background: #425CC7;
  font-size: 16px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -o-border-radius: 3px;
  text-decoration: none;
  border: 0;
  letter-spacing: 1px;
  cursor: pointer;
  -webkit-transition: all 0.375s; /* Safari */
  transition: all 0.375s;
}

input[type=button].large, input[type=submit].large, input[type=type].large, input[type=reset].large, button.[data-type="primary"]large {
  line-height: 48px;
}

input[type=button].small, input[type=submit].small, input[type=type].small, input[type=reset].small, button[data-type="primary"].small{
  line-height: 32px;
}

input[type=button]:hover, input[type=submit]:hover, input[type=type]:hover, input[type=reset]:hover, button[data-type="primary"]:hover {
  background-color: #344DAF;
  border-color    : #344DAF;
}

input[type=button]:active, input[type=submit]:active, input[type=type]:active, input[type=reset]:active, button[data-type="primary"]:active {
  background-color: #2C4092;
  border-color    : #2C4092;
  color           : #FFFFFF;
}

input[type=button]:disabled, input[type=submit]:disabled, input[type=type]:disabled, input[type=reset]:disabled, button[data-type="primary"]:disabled {
  background-color: #425CC7;
  border-color    : #425CC7;
  opacity         : .4;
}

.gift-history-table { display: table; }
.gift-history-header-row { display: table-row; }
.gift-history-header-cell { display: table-cell; font-weight: bold; }
.gift-history-header-name { font-weight: normal; }
.gift-history-items-row { display: table-row; }
.gift-history-item-table { display: table; }
.gift-history-item-row { display: table-row; }
.gift-history-item-cell { display: table-cell; }
.gift-history-item-quantity { padding-left: 20px; padding-right: 5px; }
.gift-history-header-status { padding-left: 20px; text-align: right; }
.gift-history-header-status-pending-response { color: orange; }
.gift-history-header-status-accepted { color: green; }
.gift-history-header-status-rejected { color: red; }
.gift-history-header-status-returned { color: blue; }
.gift-history-header-status-expired { color: red; }

.messages-section-header { font-size: 1.0em; font-weight: bold; }
.messages-table { border: 0px solid ; border-collapse: collapse; }
.messages-message-cell { font-size: 0.9em; padding-left: 1px;}
.messages-date-cell { font-size: 0.9em; padding-left: 1px; white-space: nowrap; }
.messages-delete-cell { font-size: 0.9em; }

.challenge-progressbar-complete { height: 0.8em; margin-top: 0.1em; overflow: hidden; float: left; background-color: green; border-style: solid; border-color: green; border-width: 1px 0px 1px 1px }
.challenge-progressbar-incomplete { height: 0.8em; margin-top: 0.1em; overflow: hidden; float: left; background-color: white; border-style: solid; border-color: green; border-width: 1px 1px 1px 0px }
.challenge-ul { list-style: none; padding: 5px 5px 0px 0px;}
.challenge-li { margin: 5px 0 5px 10px;}
.challenge-counter-ul { list-style: none; padding: 0px 0px 10px 30px;}
.challenge-exp-date:before { content: "(ends"; margin-left: 10px; margin-right: 5px;}
.challenge-exp-date:after { content: ")"; margin-left: 0px; margin-right: 5px;}
.challenge-group-name:before { content: "with"; margin-left: 10px; margin-right: 5px;}
.challenge-group-name:after { content: ""; margin-left: 0px; margin-right: 5px;}
.challenge-counter-name { margin: 5px;}
.challenge-detail-name { font-weight: bold; font-size: 1.6em; margin: 20px 0 20px 0; }
.challenge-detail-badge img { display: block; margin-left: auto; margin-right: auto; }
.challenge-detail-description { margin: 20px 0 20px 0; }
.challenge-detail-reward { margin: 20px 0 20px 0; }
.challenge-detail-reward-name:before { content: "Reward:"; margin: 0 10px 0 0; font-weight: bold; }
.challenge-detail-reward-qty:before { content: "Quantity:"; margin: 0 10px 0 0; font-weight: bold; }
.challenge-detail-reward-exp:before { content: "Expire In:"; margin: 0 10px 0 0; font-weight: bold;}
.challenge-detail-reward-exp:after { content: "Days"; margin-left: 5px;}

.fb-post-instructions { font-size: 0.8em; color: #880000; }

#add-passbook{ background-image:url('/images/add-pass.png'); background-color:tranparent; height:40px; width:120px; display:block; text-decoration:none; }

table.acct-bal-external-account-buttons td { padding-right: 5px; padding-top: 10px; padding-bottom: 10px; padding-left: 5px; }

div.mobile-wallet-body { margin-bottom: 40px; font-weight:bold; }

.checkin-wrapper { text-align: center }
.checkin-above-content { font-weight: normal }
.checkin-content { text-align: center }
.checkin-error-title-cell { text-align: center }
#checkin-error-title { font-size: 1.2em }
.checkin-error-message-cell { text-align: center }
#checkin-error-message { color: red }
.checkin-cell { text-align: center }
#checkin-message { font-weight: bold; font-size: 1.2em }
#checkin-instructions-top { font-weight: normal }
#checkin-code { color: blue; font-weight: bold; font-size: 2.2em }
#checkin-expires-cell { font-size: 0.8em; font-weight: normal }
#checkin-instructions-bottom-cell { text-align: center; font-weight: normal }
#checkin-code-unavailable { font-weight: bold; color: red }
#checkin-close-button { font-weight: normal }
#checkin-below-content { font-weight: normal }

.finishreg-wrapper { text-align: center }
.finishreg-above-content { font-weight: normal }
.finishreg-content { text-align: center }
.finishreg-error-title-cell { text-align: center }
#finishreg-error-title { font-size: 1.2em }
.finishreg-error-message-cell { text-align: center }
#finishreg-system-error-message { color: red }
#finishreg-already-finished { font-weight: bold; font-size: 1.2em }
.finishreg-instructions-top-cell { text-align: center }
#finishreg-bday-instructions-top { font-weight: normal }
.finishreg-birthday-cell { text-align: center }
.finishreg-bday-select { font-weight: normal }
.finishreg-field-error-cell { text-align: center }
#finishreg-bday-field-error { color: red }
.finishreg-instructions-bottom-cell { text-align: center }
#finishreg-bday-instructions-bottom { font-weight: normal }
.finishreg-divider-cell { font-weight: normal }
.finishreg-divider { width: 30% }
#finishreg-pwd-instructions-top { font-weight: normal }
.finishreg-username-cell { text-align: center }
#finishreg-username-prefix { font-weight: normal }
#finishreg-username { font-weight: normal }
.finishreg-password-cell { text-align: center }
.finishreg-password2-cell { text-align: center }
.finishreg-pwd-input { width: 100% }
#finishreg-pwd-field-error { color: red }
#finishreg-pwd-instructions-bottom { font-weight: normal }
.finishreg-changes-saved-cell { text-align: center }
#finishreg-changes-saved { font-weight: normal }
.finishreg-finished-cell { text-align: center }
#finishreg-finished { font-weight: normal }
.finishreg-button-cell { text-align: center }
.finishreg-button { font-weight: normal }
.finishreg-below-content { font-weight: normal }
#finishreg-password-wrapper { width:130px; margin:0px auto }
.finishreg-password-label { font-size: 0.8em; text-align:left }


#tell-a-friend-history {
    height: 200px;
    overflow-y: scroll;
}

#tell-a-friend-history table {
    width: 100%;
}

#tell-a-friend-submit {
    float:right;
}

#blk-url-input {
    color: #c7c7c7;
    border: 1px solid #c7c7c7;
    height: 40px;
    font-size: 14px;
    width: 75%;
    float:left;
    padding: 5px;
}

#refer-social-icons {
    width: 25%;
    float: right;
}

#refer-social-icons a {
    margin: 0px 0px 0px 5px;
    cursor: pointer;
}

.copy-link-headline {
    font-weight: bold;
}

#tell-a-friend-submit {
    height: 30px;
    margin-top: 10px;
}

.refer-message-container textarea {
    height: 100px;
}

#adspot a {
    text-decoration: none;
}

.table_spacer_cell { border-style: hidden }

.greyed-out { color: #BFBFBF; }

.table_wide_column { min-width: 250px;}

.text-bold {
    font-weight: bold;
}

#overlay {
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 9999;
    cursor: pointer;
    color: white;
    display: none;
}

.gdprBackgound{
    background-color: #1A2658;
    padding: 20px;
    position: absolute; 
    bottom: 0%; 
    left: 0%; 
    right: 0%;
}

#privacyLinkTheme {
    color: #788BD7;             
 }

.gdprTitle{margin: 10px; font-size: 24px}

.gdprBody{margin:10px; font-size: 16px}

.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #aaa;
    text-decoration: none;
    cursor: pointer;
}


/*Merchant Website*/
html {
  box-sizing: border-box;
  height: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.merchant-wrapper {
    width: 100%;
    font-family: Raleway, 'Rubik', sans-serif;
    height: 100%;
}

.merchant-banner {
    background-color: #fff;
    height: 90px;
    padding: 7.5px 50px; /* 50px is based on the left-margin on the login form to align the logo with the form*/
}

.merchant-banner img{
    max-height: 75px;
    width: auto;
}

.merchant-banner-partner {
    background-color: #fff;
    padding: 12px 0px 12px 56px;
    height: 88px;
}

.merchant-banner-partner img{
    height: 64px;
    width: 282px;
}

.merchant-main {
    height: calc(100% - 176px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    position: relative;
}

.news-banner {
  position: absolute;
  background-color: #425CC7; /* Changed to rebranding $primary-500(Midnight Blue) */
  visibility: hidden;
  padding: 12px 12px 12px 56px;
  width: 100%;
  font-size: 16px;
  color: #fff;
}

.news-banner-text * {
  margin: 0;
  padding: 0;
  color: #fff !important;
}

.news-banner .close-news {
  float: right;
  text-align: center;
  padding: 0;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
}

.news-banner .close-news:hover, .news-banner .close-news:active {
  color: #eee;
}

.merchant-login {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(((100%) / 2) - 200px);
    left: 56px;
    width: 400px;
    background-color: #fff;
    padding: 32px 0px 0px 0px;
    border-radius: 3px;
}

hr.merchant-login-break {
    width: 90%;
    height: 0px;
}

.merchant-login-failed {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(((100%) / 2) - 200px);
    left: 56px;
    width: 400px;
    background-color: #fff;
    padding: 32px 0px 0px 0px;
    border-radius: 3px;
}

.merchant-login-sso {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(((100%) / 2) - 200px);
    left: 56px;
    width: 400px;
    background-color: #fff;
    padding: 32px 0px 0px 0px;
    border-radius: 3px;
}

.merchant-login-more-space {
    padding: 24px 0;
}

p.merchant-login-header {
    font-size: 32px;
    color: #333;
    line-height: 32px;
    padding: 0 24px 8px 24px;
    margin: 0px;
    font-weight: 400;
}

p.merchant-login-body {
    font-size: 14px;
    color: #333;
    line-height: 14px;
    padding: 8px 24px 8px 24px;
    margin: 0px;
    font-weight: 400;
}

#tfa_selector{
  font-size: 26;
}

#tfa-setup {
margin-bottom: 24px;
}

.merchant-message-display {
    height: 40px;
    background-color: #C7FFB9;
    display: none;
    overflow: hidden;
    color: #2E8419;
}

.merchant-error {
    background-color: #F6D1D1;
    color: #D21D1D;
}

.merchant-inline-centered {
    display: inline-block;
    height: 100%;
    vertical-align: top;
}

.merchant-message-icon {
    height: 20px;
    width: 20px;
    margin: 10px 8px 10px 24px;
    font-size: 20px;
    line-height: 20px;
}

.merchant-one-line {
    line-height: 40px;
}

.merchant-two-line {
    margin: 8px 24px 8px 0px;
    line-height: 12px;
}

/*.merchant-message-display span {
    text-align: left;
    color: #D21D1D;
    font-size: 12px;
    padding: 0px;
    width: 340px;
    vertical-align: middle;
}*/

.merchant-message-display span {
    text-align: left;
    font-size: 12px;
    padding: 0px;
}

.merchant-message-display  p{
    text-align: left;
    color: #D21D1D;
    font-size: 12px;
    padding: 0px;
    width: 340px;
    vertical-align: middle;
    line-height: 48px;
    display: inline-block;
    margin: 0px;
  }
.merchant-login-form-container {
    padding: 4px 24px 24px 24px;
}

.merchant-login-form-input {
    position: relative;
}

.merchant-login-form-container input[type="text"], input[type="password"] {
    font-size: 16px;
    display: block;
    color: #4A4A4A;
    margin-top: 24px;
    padding: 20px 0 8px 0;
    width: 100%;
    border: 0px;
    border-bottom: 2px solid #425CC7; /* Changed to rebranding $primary-500(Midnight Blue) */
    outline: none;
    font-family: Raleway,'Rubik', sans-serif;
}

.merchant-tfa-form-selector-container {
    padding: 40px 24px 52px 24px;
}
.merchant-tfa-form-selector-container input label {
    font-size: 16px;
    display: block;
    color: #4A4A4A;
    margin-top: 24px;
    padding: 20px 0 8px 0;
    width: 100%;
    border: 0px;
    border-bottom: 2px solid #0A5499;
    outline: none;
}

.merchant-tfa-form-content-container {
    padding: 0px 0px 24px 24px;
}
.merchant-tfa-form-content-container p {
    font-size: 14px;
    color: #333333;
    margin-bottom: 0;
    margin-top: 3;
    padding-bottom: 2px;
    width: 100%;
    border: 0px;
}
.merchant-tfa-form-content-container input {
    font-size: 14px;
    color: #333333;
    padding-bottom: 4px;
    width: 70%;
    height: 40px;
    padding-top: 4px;
    padding-left: 2;
    border: 0px;
    border-bottom: 2px solid #0A5499;
    background-color: #F5F5F6;
}
.merchant-tfa-form-content-container input.border-red{
  border-bottom: 2px solid #ff3124;
}

.merchant-login-form-container p {
    font-size: 14px;
    color: #4A4A4A;
    margin-top: 44px;
    padding-bottom: 8px;
    width: 100%;
    border: 0px;
}

.merchant-login-form-container label {
    position: absolute;
    color: #808080;
    top: 0;
    left: 0;
    text-align: left;
    line-height: 64px;
    font-size: 16px;
    transition: all .15s ease-in-out;
}
.merchant-login-form-input input:-webkit-autofill + label {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
}
.merchant-login-form-input input:valid + label,
.merchant-login-form-input input:focus + label {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
}

.merchant-login-form-container div:first-child input:first-child {
    margin-top: 0px;
}
.merchant-login-form-container p:first-child {
    margin: 0px;
}
.merchant-tfa-selector-form-container {
    padding: 40px 24px 52px 24px;
}
.merchant-tfa-selector-form-container input {
    font-size: 16px;
    color: #4A4A4A;
    padding-left: 24;
    padding-bottom: 8px;
    padding-top: 8px;
    margin-top: 24px;
    width: 18px;
    border: 0px;
    border-bottom: 2px solid #0A5499;
}
.merchant-tfa-selector-form-container input:first-of-type {
    margin-top: 0px;
}
.merchant-tfa-selector-form-container div {
    font-size: 12px;
    color: #5C5C5C;
    margin-top: 1px;
    padding-left: 28px;
    padding-bottom: 3px;
    width: 100%;
    border: 0px;
}
.merchant-tfa-selector-form-container div:first-of-type {
    padding-bottom: 32px;
}
.merchant-tfa-selector-form-container label {
    font-size: 16px;
    color: #333333;
    padding-bottom: 8px;
    width: 100%;
    border: 0px;
}
.merchant-login-selector-form-container input:first-child {
    margin-top: 0px;
}
.merchant-tfa-submission-header p {
  font-size: 23px;
  font-weight: 350;
  color: #333;
  line-height: 28px;
  padding: 0px 24px 5px 24px;
  margin: 0px;
}
.merchant-tfa-submission-header p:first-child {
  padding-bottom: 0px;
}
.merchant-tfa-submission-subheader{
  font-size: 16px;
  font-weight: 350;
  color: #333;
  line-height: 18px;
  padding: 8px 24px 22px 24px;
  margin: 0px;
}
/*.merchant-tfa-mini-header{
  margin: 0;
  padding-left: 24px;
  text-align: left;
}

.merchant-tfa-mini-header a{
  font-size: 10px;
  color: #5C5C5C;
  font-weight: 300;
  font-style: italic;
  margin-top: 2px;
  margin-bottom: 2px;
}*/
.merchant-tfa-num-size{
  margin-top: 3px;
  margin-bottom: 3px;
  text-align: left;
}

.merchant-tfa-num-size span{
  font-size: 10px;
  color: #5C5C5C;
  font-weight: 300;
  font-style: italic;
}
.merchant-tfa-num-size span.text-red{
  color: #ff3124;
}
.text-red {
  color: #ff3124;
}
.help-box {
    margin: 0;
    padding: 18px 0 0 0;
    text-align: right;
}

.help-box a {
    font-size: 12px;
    color: #425CC7; /* Changed to rebranding $primary-500(Midnight Blue) */
    text-decoration: none;
    border-bottom: 1px solid #425CC7; /* Changed to rebranding $primary-500(Midnight Blue) */
    cursor: pointer;
}
.help-box a:hover {
    border-bottom: none;
    color: #425CC7; /* Changed to rebranding $primary-500(Midnight Blue) */
}
.help-box a:link,
.help-box a:visited {
    color: #425CC7; /* Changed to rebranding $primary-500(Midnight Blue) */
}


.resend-code {
  padding-right: 92px;
}

.resend-code a {
  /* font should be smaller */
  font-size: 12px;
  color: #125697;
  text-decoration: none;
  border-bottom: 1px solid #125697;
  cursor: pointer;
}
.resend-code a:hover {
    border-bottom: none;
}

.italic {
    font-style: italic;
}
a.change-email {
  /* font should be smaller */
  font-size: 14px;
  color: #125697;
  text-decoration: none;
  border-bottom: 1px solid #125697;
  cursor: pointer;
  margin: 0px 24px;
}
a.change-email:hover {
  border-bottom: none;
}


.merchant-contact-form-container {
    padding: 0px 24px 16px 24px;
}
.merchant-contact-form-container p{
    font-size: 14px;
    color: #4A4A4A;
    padding-bottom: 2px;
    width: 100%;
    border: 0px;
    margin: 0px;
}
.merchant-contact-form-container input {
    font-size: 16px;
    display: block;
    color: #4A4A4A;
    padding: 20px 0 8px 0;
    width: 100%;
    border: 0px;
    border-bottom: 2px solid #0A5499;
    outline: none;

    background-color: #F5F5F6;
}
.merchant-contact-form-container input.border-red{
  border-bottom: 2px solid #ff3124;
}

.remember-computer{
  height: 30px;
  font-size: 14px;
  color: #5C5C5C;
  margin: 8px 0px;
}
.remember-computer input{
  font-size: 14px;
  color: #5C5C5C;
  width: auto;
  height: 20px;
  vertical-align: middle;
}
.remember-computer label{
  font-size: 12px;
  color: #5C5C5C;
  width: auto;
  height: auto;
  vertical-align: middle
  /* display: inline; */
}
input.merchant-login-submit {
    width: calc(100% - 48px);
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0 24px;
    padding: 0px;
    height: 48px;
    line-height: 48px;
    color: #fff;
    background-color: #425CC7; /* Changed to rebranding $primary-500(Midnight Blue) */
    border-radius: 4px;
    cursor: pointer;
    font-family: Raleway, 'Rubik', sans-serif;
    border: none;
}

input.merchant-login-submit:hover, input.merchant-login-submit:active {
    background-color: #425CC7; /* Changed to rebranding $primary-500(Midnight Blue) */
    color: #fff
}

input.merchant-login-submit-sso {
    width: calc(100% - 48px);
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 0 24px;
    height: 48px;
    line-height: 48px;
    color: #425CC7; /* Changed to rebranding $primary-500(Midnight Blue) */
    background-color: #fff;
    cursor: pointer;
    font-family: Raleway,'Rubik', sans-serif;
    border: 1px solid #425CC7; /* Changed to rebranding $primary-500(Midnight Blue) */
    border-radius: 3px;
}

input.merchant-login-submit-sso:hover, input.merchant-login-submit-sso:active {
    background-color: #425CC7; /* Changed to rebranding $primary-500(Midnight Blue) */
    color: #fff
}

.merchant-login-form {
    margin-block-end: 24px;
}
.merchant-sso-form {
    margin-top: 24px;
    margin-block-end: 24px;
}
.merchant-footer {
    padding: 35px 0px;
    text-align: center;
    background-color: #fff;
    height: 88px;
    visibility: hidden;
}

.merchant-footer a {
    text-decoration: none;
    font-size: 18px;
    line-height: 18px;
    color: #4A4A4A;
    text-transform: uppercase;
    margin: 0 0 0 48px;
    cursor: pointer;
}

.merchant-footer a:first-child {
    margin-left: 0px;
}

.merchant-footer a:hover,
.merchant-footer a:active {
    color: #425CC7; /* Changed to rebranding $primary-500(Midnight Blue) */
    border-bottom: 2px solid #425CC7; /* Changed to rebranding $primary-500(Midnight Blue) */
    text-decoration: none;
    cursor: pointer;
}
.merchant-footer a:link,
.merchant-footer a:visited {
    color: #425CC7; /* Changed to rebranding $primary-500(Midnight Blue) */
}

.visible {
    visibility: visible;
}


.login-message-visible {
    visibility: visible;
    display: inherit;
}

@media screen and (max-width: 600px) {
    .merchant-banner {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 64px;
    }
    .merchant-banner img {
        max-height: 60px;
        width: auto;
    }
    .merchant-main {
        height: calc(100% - 128px);
    }
    .merchant-login {
        left: 0;
        right: 0;
        top: 45px;
        margin: auto;
        width: 80%;
        max-height: fit-content;
    }
    p.merchant-login-header {
        font-size: 6vw;
    }
    .merchant-footer {
        padding: 21px 0px;
        height: 64px;
    }
    .merchant-footer a {
        font-size: 14px;
        line-height: 14px;
        margin: 0 0 0 15px;
    }
}

@media screen and (max-width: 462px) {
    .merchant-banner {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .merchant-banner img{
        max-height: 30px;
        width: auto;
    }
    .news-banner {
    padding: 12px 12px 12px 40px;
    }
    .merchant-message-icon {
        font-size: 0px;
        margin-right: 0px;
    }
}

@media screen and (max-width: 428px) {
    .merchant-message-display span {
        font-size: 10px;
    }
}

@media screen and (max-width: 366px) {
    .merchant-message-display span {
        font-size: 8px;
    }
}

@media screen and (max-height: 660px) {
    .merchant-login {
        height: 300px;
        padding: 16px 0;
    }
    p.merchant-login-header {
        padding: 0 24px 0 24px;
    }
    .merchant-login-form-container {
        padding: 4px 24px 16px 24px;
    }
    .merchant-login-form-container input[type="text"], input[type="password"] {
        padding: 20px 0 4px 0;
        margin-top: 20px;
        font-family: Raleway,'Rubik', sans-serif;
    }
    .merchant-login-form-container label {
        line-height: 52px;
    }
    .help-box {
        padding: 8px 0 0 0;
    }
}

/* REBRANDING 2023 */
/* #425CC7 === $primary-500 (Midnight Blue) */
.forgotPassword {
    font-family: Raleway, "Rubik", "Sans Serif";
}

.textLinkColor {
    color: #425CC7;
}