/*** Rev 2.2.1 — MHT STYLES CUSTOMIZATION
 *
 * Organization: styles are scoped by payment method context to avoid cross-contamination.
 *
 *   1. Shared base styles (body, typography, grid layout, form inputs)
 *   2. ACH-specific block — starts with "ACH-specific layout and styling" banner
 *      Scoped with `.ach-payment ...` selectors. Changes here never affect CC.
 *   3. CC-specific block — starts with "CC-specific layout and styling" banner
 *      Scoped with `#pay-section ...` and `.cc-payment ...` selectors. Changes here never affect ACH.
 *
 * The four contexts (MHT+CC, MHT+ACH, Hydronica+CC, Hydronica+ACH) map to:
 *   mht-styles.css → MHT+CC (CC section) and MHT+ACH (ACH section)
 *   hydronica-styles.css → Hydronica+CC and Hydronica+ACH
 *
 * When editing: if you need CC-only changes, edit inside the "CC-specific" block.
 * If you need ACH-only changes, edit inside the "ACH-specific" block.
 * Shared styles go at the top; theme-level color variables go in :root.
 *
 * Changes in Rev 2.2.1 (2026-04-15):
 * - Behavior: .container grid-template-rows — changed the two `1fr` tracks (row 2 =
 *   invoice/amount, row 7 = billing-address) to `auto`. `1fr` resolves as
 *   minmax(auto, 1fr), so the two tracks were coupled: when CC tab expanded the
 *   billing-address track, the invoice/amount track grew to match, visibly
 *   stretching the Transaction Information card and spreading its internal rows.
 *   With `auto`, both tracks size to content and don't interact.
 */

/*** MAIN THEME COLOR VARIABLES BEGIN ***/
/* Applies the global font and background color to the body */
:root {
    --e-global-color-primary: #17161A;
    --e-global-color-secondary: #54595F;
    --e-global-color-lightgrey: #7A7A7A;
    --e-global-color-accent: #D22730;
    --e-global-color-white: #FFFFFF;
    --e-global-color-dedede: #DEDEDE;
    --e-global-color-efefef: #EFEFEF;
    --e-global-color-fafafa: #FAFAFA;
    --e-global-color-f0f0f0: #F0F0F0;
}


/*** GENERAL TEXT AND HEADER STYLING BEGIN ***/
body {
    font-family: "Roboto";
    color: var(--e-global-color-primary);
    background: var(--e-global-color-f0f0f0);
    overflow: hidden;
}

/* Standalone/local browser mode: keep iframe behavior untouched, but allow page scroll */
body.standalone-page {
    overflow-x: hidden;
    overflow-y: auto;
}

.payment-brand-banner {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem 0;
}

.payment-brand-card {
    display: none;
    align-items: center;
    gap: 1rem;
    width: min(100%, 760px);
    padding: 1rem 1.25rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 30px rgba(23, 22, 26, 0.08);
    border-top: 4px solid var(--e-global-color-accent);
}

.payment-brand-mark {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--e-global-color-white);
    background: linear-gradient(135deg, #17161A 0%, var(--e-global-color-accent) 100%);
    box-shadow: 0 8px 18px rgba(210, 39, 48, 0.2);
}

.payment-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.payment-brand-wordmark {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.payment-brand-subtitle {
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--e-global-color-secondary);
}

body.payment-theme-mht .payment-brand-card--mht,
body:not(.payment-theme-hydronica) .payment-brand-card--mht {
    display: flex;
}

h1 {
    font-size: 3.25rem;
    font-weight: 500;
    letter-spacing: -.045em;
    text-align: center;
    margin: 0;
}

h2 {
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: -.045em;
    text-align: center;
    margin: 2.5rem auto 0;
}

p {
    font-size: 1.2rem;
    margin: 0;
}

#first-title-wrapper {
    position: relative;
    height: 2.5rem;
    margin-bottom: 2rem;
}

#preparing-your-transaction {
/*    display: block;*/
    margin: 1rem 0 2rem 0;
}

#transaction-information {
/*    display: none;*/
    margin: 0 0 2rem 0;
}

.heading-detail {
    text-align: center;
    font-weight: 300;
}

.tran-type {
    font-size: 1.5rem;
    font-weight: 500;
}

.tran-project {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    display: block;
}

.tran-id {
    font-size: 1.5rem;
    font-weight: 500;
}

.transaction-success {
    padding: 2px 4px;
    font-size: 1rem;
    color: #0a0;
    background-color: #0a01;
    border-radius: 4px;
}

.transaction-error {
    padding: 2px 4px;
    font-size: 1rem;
    color: #d22730;
    background-color: #d2273011;
    border-radius: 4px;
}

.no-balance-due {
    color: #0a0;
/*    padding: 2px 4px;
    font-size: 1rem;
    color: #0a0;
    background-color: #0a01;
    border-radius: 4px;*/
}

.balance-due {
    color: #d22730;
/*    padding: 2px 4px;
    font-size: 1rem;
    background-color: #d2273011;
    border-radius: 4px;*/
}

.verification-pending {
    color: orange;
}


/*** GENERAL TEXT AND HEADER STYLING END ***/


/*** HIDDEN AND SHOWED FIELDS BEGIN ***/
/* Class for hide or show elements with animation */
.hide {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Show state for elements */
.show {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.hidden {
    display: none !important;
}
/*** HIDDEN AND SHOWED FIELDS END ***/


/*** MAIN GRID LAYOUT BEGIN ***/

/* Container for the main grid layout */
/*.mht-main-wrapper {
    margin: 0 20rem;
    /* Define the page width and adds margin around the grid container
}*/

/* Opening container layout */
/* Applied while a payment is in flight — blocks all form interaction */
.payment-processing {
    pointer-events: none;
    cursor: wait;
}
.payment-processing * {
    pointer-events: none;
    cursor: wait;
}

.opening-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 3rem 4rem;
    grid-auto-flow: row;
    grid-template-areas:
        "invoice-wrapper invoice-wrapper amount-wrapper amount-wrapper";
}

.status-message-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    gap: 3rem 4rem;
    grid-auto-flow: row;
    grid-template-areas:
        "status-message status-message status-message status-message";
}

.container {
    margin: 0 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1rem auto auto auto auto auto auto auto auto;
    gap: 3rem 4rem;
    grid-auto-flow: row;
    grid-template-areas:
        "transaction-information-heading transaction-information-heading transaction-information-heading transaction-information-heading"
        "invoice-wrapper invoice-wrapper amount-wrapper amount-wrapper"
        "status-message status-message status-message status-message"
        "payment-method-heading payment-method-heading payment-method-heading payment-method-heading"
        "payment payment payment payment"
        "ach-pay-section ach-pay-section ach-pay-section ach-pay-section"
        "billing-address-heading billing-address-heading billing-address-heading billing-address-heading"
        "billing-address billing-address billing-address billing-address"
        "pay-section pay-section pay-section pay-section";
}

/* New layout on exit early due to no balance */
.transaction-success-container, .no-balance-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1rem 1fr auto;
    gap: 3rem 4rem;
    grid-auto-flow: row;
    grid-template-areas:
        "transaction-information-heading transaction-information-heading transaction-information-heading transaction-information-heading"
        "invoice-wrapper invoice-wrapper amount-wrapper amount-wrapper"
        "status-message  status-message  status-message status-message";
    margin-bottom: 15px;
}

/* Grid Responsive Design Begin */
@media (max-width: 768px) {
    h2 { font-size: 2.25rem; }

    .container {
        grid-template-columns: auto;
        grid-template-rows: auto;
        gap: 2rem 4rem;
        grid-template-areas:
            "transaction-information-heading"
            "invoice-wrapper"
            "amount-wrapper"
            "status-message"
            "payment-method-heading"
            "payment"
            "ach-pay-section"
            "billing-address-heading"
            "billing-address"
            "pay-section";
    }

    .transaction-success-container, .no-balance-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        gap: 3rem 4rem;
        grid-auto-flow: row;
        grid-template-areas:
            "invoice-wrapper"
            "amount-wrapper"
            "status-message";
        margin-bottom: 15px;
    }

    .invoice-wrapper {
/*        width: 330px;*/
        gap: 3rem;
        padding: 1.5rem !important;
    }

    .amount-wrapper {
/*        width: 330px;*/
        padding: 1.5rem !important;
    }

    .payment {
        padding: 1.5rem 0.75rem !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: 8.5rem auto !important;
        grid-template-areas:
            "payment-method-selector"
            "payment-method" !important;
    }

    .payment-method-selector {
        flex-direction: column;
        height: 8.5rem !important;
        margin: 0.5rem;
    }

    .cc-payment {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 3rem 3rem 3rem 3rem 3rem !important;
        margin: 1rem 0 !important;
    }

    /* ACH uses flex column (defined above, no grid overrides needed on mobile) */
    .ach-payment {
        margin: 1rem 0 !important;
    }

    .cc-payment {
        grid-template-areas:
            "cc-payment-amount cc-payment-amount cc-fee cc-fee"
            "cc-payment-amount-with-fees cc-payment-amount-with-fees cc-payment-amount-with-fees cc-payment-amount-with-fees"
            "cardholder-name cardholder-name cardholder-name cardholder-name"
            "card-number card-number card-number card-number"
            "expiration-date cvv cc-postal-code cc-postal-code" !important;
        grid-area: payment-method;
    }

    .billing-address {
        padding: 0.75rem !important;
        grid-template-rows: auto;
        grid-template-areas:
            "phone phone phone phone"
            "email email email email"
            "firstname firstname firstname firstname"
            "lastname lastname lastname lastname"
            "address address address address"
            "city city city city"
            "state state zip zip"
            "country country country country" !important;
    }

    .selector-button, .selector-button-activated  {
        color: var(--e-global-color-primary);
        width: unset !important;
        min-height: 3rem !important;
    }

    .heading-detail {
        margin: 0 3rem;
    }

    .input-label {
        top: -14px !important;
        left: 2px !important;
    }

    label {
        font-size: 0.75rem !important;
    }

    .mht-field-text {
        padding: 0 0.5rem !important
    }

    .mht-field-select {
        padding: 0 0.4rem !important
    }

    .warning-text {
        font-size: 0.6rem !important;
    }

    #cardholder-name, .card-number, .expiration-date, .cvv, #cc-postal-code {
        padding: 0 0.5rem !important;
    }

    .hosted-field--label {
        left: 0px !important;
        top: -16px !important;
    }

    .tran-project {
        white-space: normal;
    }


    /*.checkbox-description {
        font-size: 0.65rem !important;
        line-height: 1.1rem !important;
    }*/
}
/* Grid Responsive Design End */

.transaction-information-heading {
    grid-area: transaction-information-heading;
}

.transaction-information-heading h2 {
    margin: 0 auto;
}

.invoice-wrapper {
    grid-area: invoice-wrapper;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--e-global-color-white);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    border-radius: 2rem;
    padding: 2rem;
    min-height: 10rem;
}

.popup-hidden {
    visibility: hidden;
}

.amount-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "tran-amount tran-amount"
        "tran-tl tran-tr"
        "tran-bl tran-br";
    grid-area: amount-wrapper;
    background-color: var(--e-global-color-white);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    border-radius: 2rem;
    padding: 2rem;
}

.tran-amount {
    grid-area: tran-amount;
    font-size: 3rem;
    font-weight: 700;
    text-align: right;
}

.tran-tl {
    grid-area: tran-tl;
    align-self: end;
}

.tran-tr {
    grid-area: tran-tr;
    align-self: end;
    text-align: right;
}

.tran-bl {
    grid-area: tran-bl;
    align-self: end;
}

.tran-br {
    grid-area: tran-br;
    align-self: end;
    text-align: right;
}

.status-message {
    display: grid;
    grid-area: status-message;
    background-color: var(--e-global-color-white);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    border-radius: 1.5rem;
    padding: 2rem;
    text-align: center;
    min-height: 19px;
    position: relative;
}

/* Close button — only shown on dismissable (inline error) messages */
.status-message-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}
.status-message-close:hover {
    color: #333;
    background: rgba(0, 0, 0, 0.05);
}

.payment-method-heading {
    grid-area: payment-method-heading;
}

.payment {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 4.5rem auto;
    gap: 0.5rem 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "payment-method-selector payment-method-selector payment-method-selector payment-method-selector"
        "payment-method payment-method payment-method payment-method";
    grid-area: payment;
    background: var(--e-global-color-white);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    border-radius: 2rem;
    padding: 2rem;
    position: relative;
}

.payment-method-selector {
    grid-area: payment-method-selector;
    width: auto;
    height: 4rem;
    background: var(--e-global-color-efefef);
    border-radius: 0.75rem;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0.5rem;
}

/* Initially hide both sections ACH and Card */
.ach-payment,
.cc-payment {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 3rem 3rem 3rem;
    gap: 2rem 0px;
    grid-auto-flow: row;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 1; /* Use a high z-index to control stacking order */
    pointer-events: none; /* Ensure hidden sections are not interactable */
    margin-bottom: 1rem;

}

/* Show the active section */
.ach-payment.active, .cc-payment.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; /* Make sure active section is interactable */
}

/* Ensure inactive section is hidden and doesn't occupy space */
.ach-payment.inactive, .cc-payment.inactive {
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none; /* Ensure hidden section does not interfere with interaction */
}

/* ──────────────────────────────────────────────────────────────────────────
   ACH-specific layout and styling.
   ACH lives on the white card inside #ach-payment — needs styling distinct
   from the CC flow (which uses the grid below and has its own pay-section).
   ────────────────────────────────────────────────────────────────────────── */

.ach-payment {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    grid-template-columns: none;
    grid-template-rows: none;
    grid-template-areas: none;
    grid-area: payment-method;
    padding: 0 0.75rem;
}

.ach-payment .ach-payment-amount {
    grid-area: auto;
    width: 100%;
}

/* First row of the ACH section: Email (left) + Amount (right) */
.ach-payment .ach-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Stack vertically on narrow viewports */
@media (max-width: 600px) {
    .ach-payment .ach-top-row {
        grid-template-columns: 1fr;
    }
}

/* Terms block on the ACH card — clear, readable, full-width */
.ach-payment .ach-terms {
    font-size: 0.85rem;
    color: #333;
    padding: 0.25rem 0;
}

.ach-payment .ach-terms .checkbox.path {
    align-items: flex-start;
    gap: 0.5rem;
}

.ach-payment .ach-terms .checkbox-description {
    color: #333 !important;
    line-height: 1.4;
}

/* ACH checkbox inherits the generic .checkbox styling (same look as CC). */

.ach-payment #ach-pay-button {
    width: 100%;
    margin: 0.5rem 0 0;
}

/* Disabled state — dark faded button, clearly visible on white card */
.ach-payment #ach-pay-button.pay-button:not(.active):not(.pay-button-sending) {
    opacity: 0.4;
    background: #1e2235;
    color: #fff;
    cursor: not-allowed;
}

/* ──────────────────────────────────────────────────────────────────────────
   CC-specific layout and styling (MHT).
   CC lives inside #cc-payment (card form) + #pay-section (terms + pay button
   below the billing address).
   Scoped explicitly so ACH changes above can never affect CC and vice versa.
   ────────────────────────────────────────────────────────────────────────── */

/* CC pay button — black with white text (MHT convention). Inside #pay-section
   which has its own dark-styled backdrop. */
#pay-section #cc-pay-button {
    background: var(--e-global-color-primary);  /* near-black #17161A */
    color: var(--e-global-color-white);
}

/* CC terms checkbox — stays with default MHT styling (checkbox.path) */
#pay-section .cc-terms .checkbox-description {
    color: var(--e-global-color-primary);
}

.ownership-type {
    grid-area: ownership-type;
}

.account-type {
    grid-area: account-type;
}

.ach-payment-amount {
    grid-area: ach-payment-amount;
}

.ach-first-name {
    grid-area: ach-first-name;
}

.ach-last-name {
    grid-area: ach-last-name;
}

.company-name {
    grid-area: company-name;
}

.account-number {
    grid-area: account-number;
}

.routing-number {
    grid-area: routing-number;
}

.cc-payment {
    grid-template-areas:
        "cc-payment-amount cc-fee cc-payment-amount-with-fees cc-payment-amount-with-fees"
        "cardholder-name cardholder-name card-number card-number"
        "expiration-date cvv cc-postal-code .";
    grid-area: payment-method;
}

.cc-payment-amount {
    grid-area: cc-payment-amount;
}

.cc-fee,
.cc-formatted-fee-amount {
    grid-area: cc-fee;
}

.cc-payment-amount-with-fees {
    grid-area: cc-payment-amount-with-fees;
}

.cardholder-name {
    grid-area: cardholder-name;
}

.card-number {
    grid-area: card-number;
}

.expiration-date {
    grid-area: expiration-date;
}

.cvv {
    grid-area: cvv;
}

.cc-postal-code {
    grid-area: cc-postal-code;
}

.billing-address-heading {
    grid-area: billing-address-heading;
}

.billing-address {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "phone phone email email"
        "firstname firstname lastname lastname"
        "address address city city"
        "state zip country country";
    grid-area: billing-address;
    background: var(--e-global-color-white);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    border-radius: 2rem;
    padding: 2rem;
}

.phone {
    grid-area: phone;
}

.email {
    grid-area: email;
}

.firstname {
    grid-area: firstname;
}

.lastname {
    grid-area: lastname;
}

.address {
    grid-area: address;
}

.city {
    grid-area: city;
}

.state {
    grid-area: state;
}

.zip {
    grid-area: zip;
}

.country {
    grid-area: country;
}   

.ach-pay-section {
    grid-area: ach-pay-section;
}

.pay-section {
    grid-area: pay-section;
}

.ach-terms, .cc-terms {
    font-size: 0.85rem;
    font-weight: 400;
}

/* Show the active section */
.ach-terms.active, .cc-terms.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; /* Make sure active section is interactable */
}

/* Ensure inactive section is hidden and doesn't overlap */
.ach-terms.inactive, .cc-terms.inactive {
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none; /* Ensure hidden section does not interfere with interaction */
}

.ach-method-disabled {
    position: absolute;
    left: -1rem;
    right: -1rem;
    top: -1rem;
    bottom: -3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    background: rgba(255,255,255,0.2);
    backdrop-filter: saturate(180%) blur(15px);
    -webkit-backdrop-filter: saturate(180%) blur(50px);
    text-align: center;
    font-size: 1.5rem;
    border-radius: 1rem;
/*    opacity: 0; /* Initial opacity */
/*    transition: opacity 0.5s ease-in-out; /* Duration and type of transition */
}

/* Class to make the element visible */
/*.ach-method-disabled.visible {
    opacity: 1;
}*/

/* ACH country notice — shown below payment selector when non-US country */
.ach-country-notice {
    text-align: center;
    font-size: 0.875rem;
    color: #666;
    padding: 0.5rem 1rem;
    margin: -0.25rem 0 0.25rem;
}

/* Disabled ACH tab — greyed out, no hover */
.selector-button-disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Default transition setup for elements */
#payment-method-heading,
#payment,
#billing-address-heading,
#billing-address,
#ach-pay-section,
#pay-section {
    transition: opacity 0.5s ease, transform 0.5s ease;
}
/*** MAIN GRID LAYOUT END ***/


/*** LABELS BEGIN ***/
.label-field-wrapper {
    display: block;
    margin: 1rem 10px;
    position: relative;
    outline: none;
/*    width: 100%; */
}

.label-field-wrapper.focused label {
    transition: all .2s linear;
    top: -21px;
    font-size: 1rem;
/*    top: -16px;
    font-size: 0.75rem;*/
} 

label + * {
    margin-top: 0 !important;
}

label {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    cursor: text;
    font-size: 1rem;
    font-weight: 300;
    color: #635e6f;
    position: absolute;
    /*top: 6px;
    left: 4px;*/
    top: 3px;
    left: 5px;
    display: inline-block;
    background: #fff;
    margin: 8px 0;
    /*margin: 8px 5px;
    line-height: 1.4em;
    padding: 0 10px;*/
    padding: 0.2rem 0.5rem;
    transition: all .2s linear;
    /*text-transform: capitalize;*/
    z-index: 1;
}

.label {
    font-size: 0.85rem;
    display: block;
    font-weight: 300;
}

.label-left {
    font-size: 0.85rem;
    display: block;
    font-weight: 300;
    text-align: left;
    margin-bottom: 0.25rem;
}

.label-right {
    font-size: 0.85rem;
    display: block;
    font-weight: 300;
    text-align: right;
    margin-bottom: 0.25rem;
}

.input-label {
    position: absolute;
    top: -16px;
    left: 10px;
    background: #fff;
    padding: 0 0.5rem;
    /*font-size: 0.9rem;*/
}
/*
.input-label-hosted-fields {
    position: absolute;
    top: -18px;
    left: 8px;
    background: #fff;
    padding: 0 0.5rem;
    /*font-size: 0.9rem;*/
/*}
/*** LABELS END ***/


/*** LINKS BEGIN ***/
/* Styling for black links begin */
a.mht-link-black {
    color: var(--e-global-color-primary) !important;
    line-height: 1.4;
    font-weight: 400;
    text-decoration: none; /* Remove default underline */
    position: relative; /* Add this property to position the background image relative to the link */
}

/* Pseudo-element for creating the underline with fade-in effect */
a.mht-link-black::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-image: linear-gradient(currentColor 0px, currentColor 100%);
    opacity: 0; /* Initially set opacity to 0 to hide the underline */
    transition: opacity 0.2s ease-in-out; /* Add a transition for the opacity to create the fade-in effect */
}

/* On hover, change the opacity to 1 to reveal the underline with fade-in effect */
a.mht-link-black:hover::after {
    opacity: 1;
}
/* Styling for black links end */


/* Styling for red links begin */
a.mht-link-red {
    color: var(--e-global-color-accent) !important;
    line-height: 1.4;
    font-weight: 400;
    text-decoration: none; /* Remove default underline */
    position: relative; /* Add this property to position the background image relative to the link */
}

/* Pseudo-element for creating the underline with fade-in effect */
a.mht-link-red::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-image: linear-gradient(currentColor 0px, currentColor 100%);
    opacity: 0; /* Initially set opacity to 0 to hide the underline */
    transition: opacity 0.2s ease-in-out; /* Add a transition for the opacity to create the fade-in effect */
}

/* On hover, change the opacity to 1 to reveal the underline with fade-in effect */
a.mht-link-red:hover::after {
    opacity: 1;
}
/* Styling for red links end */
/*** LINKS END ***/


/* BUTTONS STYLES BEGIN */
.selector-button {
    width: 50%;
    background: transparent;
    border: 2px solid #dedede;
    /*border: none;*/
    /*margin: 0.75rem;*/
    margin: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 0.5rem;
    display: flex; /* Use flexbox layout */
    align-items: center; /* Vertically align items */
    justify-content: center; /* Horizontally center items */
    gap: 0.25rem; /* Space between text and icons */
    text-align: center; /* Center text within the button */
    padding: 0.5em; /* Optional: Add some padding for better spacing */
}

.selector-button:hover {
    background-color: rgba(255,255,255,0.5);
/*    background-color: var(--e-global-color-white);*/
    cursor: pointer;
    /*box-shadow: 0 2px 4px rgba(0,0,0,0.15);*/
}

.selector-button-activated {
    width: 50%;
    background-color: var(--e-global-color-white);
    border: none;
    /*margin: 0.75rem;*/
    margin: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 0.5rem;
    display: flex; /* Use flexbox layout */
    align-items: center; /* Vertically align items */
    justify-content: center; /* Horizontally center items */
    gap: 0.25rem; /* Space between text and icons */
    text-align: center; /* Center text within the button */
    padding: 0.5em; /* Optional: Add some padding for better spacing */ 
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.pay-button {
    width: 100%;
    height: 3rem;
    color: var(--e-global-color-white);
    background: var(--e-global-color-primary);
    border: none;
    margin: 2rem auto;
    font-size: 1.2rem;
    font-weight: 500;
    border-radius: 0.5rem;
    opacity: 0.25;
    cursor: not-allowed;
    transition: opacity 0.3s ease, background 0.3s ease, cursor 0.3s ease;
}

.pay-button.active {
    display: block;
    opacity: 1;
    cursor: pointer;
}

.pay-button.active:hover {
    background: #444;
}

.pay-button.inactive {
    display: none;
    opacity: 0;
    cursor: pointer;
}

.pay-button-sending {
    width: 100%;
    height: 3rem;
    color: var(--e-global-color-white);
    background: var(--e-global-color-primary);
    border: none;
    margin: 2rem auto;
    font-size: 1.2rem;
    font-weight: 500;
    border-radius: 0.5rem;
    cursor: not-allowed;
    transition: opacity 0.3s ease, background 0.3s ease, cursor 0.3s ease;
}

.finish-button {
    width: 30%;
    height: 2.5rem;
    color: var(--e-global-color-white);
    background: var(--e-global-color-primary);
    border: none;
    margin: 1rem auto;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: opacity 0.3s ease, background 0.3s ease, cursor 0.3s ease;
}

.finish-button:hover {
    background: #444;
}
/* BUTTONS STYLES END */


/*** TOOLTIPS AND ERROR MESSAGES BEGIN ***/
.mht-message-tooltip-top {
	display: none;
	width: 100%;
	color: var(--e-global-color-primary);
	font-size: 14px;
	text-align: center;
	/*margin-top: 5px;*/
	border: 2px solid #000000;
	border-radius: 0.75rem;
	padding: 0.5rem;
	position: absolute;
	top: -100%;
	background: rgba(255,255,255,0.7);
	/*-webkit-box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
	box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);*/
	-webkit-box-shadow: 0 0 0 4px rgb(0 0 0 / 10%);
	box-shadow: 0 0 0 4px rgb(0 0 0 / 10%);
	backdrop-filter: saturate(180%) blur(40px);
	-webkit-backdrop-filter: saturate(180%) blur(40px);
	animation: fadeInOpacity 0.5s, tooltip-pulse 2s infinite; /* Opacity and pulse animaton */
	z-index: 10;
}

.mht-message-tooltip-top:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	/*margin-left: -10px;*/
	border-width: 7px;
	border-style: solid;
	border-color: black transparent transparent transparent;
}

.mht-message-tooltip-red-top {
	/*display: none;*/
	width: max-content;
	color: var(--e-global-color-primary);
	font-size: 14px;
	text-align: center;
	/*margin-top: 5px;*/
	border: 2px solid #D22730 !important;
	/*border: 2px solid rgba(210, 39, 48, 0.4) !important;*/
	/*border: 2px solid #000000;*/
	border-radius: 0.75rem;
	padding: 0.5rem;
	position: absolute;
    left: 72px;
	/*top: -100%;*/
	background: rgba(255,255,255,0.7);
	-webkit-box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
	box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
	/*-webkit-box-shadow: 0 0 0 4px rgb(0 0 0 / 10%);
	box-shadow: 0 0 0 4px rgb(0 0 0 / 10%);*/
	backdrop-filter: saturate(180%) blur(40px);
	-webkit-backdrop-filter: saturate(180%) blur(40px);
	animation: fadeInOpacity 0.5s, tooltip-pulse-red 2s infinite; /* Opacity and pulse animaton */
	z-index: 10;
}

.mht-message-tooltip-red-top:after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	/*margin-left: -10px;*/
	border-width: 7px;
	border-style: solid;
	border-color: #D22730 transparent transparent transparent;
}

.ach-payment-method-tooltip {
	/*display: none;*/
	width: max-content;
	color: var(--e-global-color-primary);
	font-size: 14px;
	text-align: center;
	/*margin-top: 5px;*/
	border: 2px solid #D22730 !important;
	/*border: 2px solid rgba(210, 39, 48, 0.4) !important;*/
	/*border: 2px solid #000000;*/
	border-radius: 0.75rem;
	padding: 0.5rem;
	position: absolute;
    top: -4.75rem;
    left: 0;
    /*left: -0.25rem;*/
    /*left: 72px;*/
	/*top: -100%;*/
	background: rgba(255,255,255,0.7);
	-webkit-box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
	box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
	/*-webkit-box-shadow: 0 0 0 4px rgb(0 0 0 / 10%);
	box-shadow: 0 0 0 4px rgb(0 0 0 / 10%);*/
	backdrop-filter: saturate(180%) blur(40px);
	-webkit-backdrop-filter: saturate(180%) blur(40px);
	animation: fadeInOpacity 0.5s, tooltip-pulse-red 2s infinite; /* Opacity and pulse animaton */
	z-index: 10;
}

.ach-payment-method-tooltip:after {
	content: "";
	position: absolute;
	top: 100%;
    left: 3px;
	/*left: 2.5%;*/
	/*margin-left: -10px;*/
	border-width: 7px;
	border-style: solid;
	border-color: #D22730 transparent transparent transparent;
}

.mht-message-tooltip-bottom {
	display: none;
	width: 100%;
	color: var(--e-global-color-primary);
	font-size: 14px;
	text-align: center;
	/*margin-top: 5px;*/
	border: 2px solid #000000;
	border-radius: 0.75rem;
	padding: 0.5rem;
	position: absolute;
	top: -100%;
	background: rgba(255,255,255,0.7);
	/*-webkit-box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
	box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);*/
	-webkit-box-shadow: 0 0 0 4px rgb(0 0 0 / 10%);
	box-shadow: 0 0 0 4px rgb(0 0 0 / 10%);
	backdrop-filter: saturate(180%) blur(40px);
	-webkit-backdrop-filter: saturate(180%) blur(40px);
	animation: fadeInOpacity 0.5s, tooltip-pulse 2s infinite; /* Opacity and pulse animaton */
	z-index: 10;
}

.mht-message-tooltip-bottom:after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	margin-top: -14px;
	border-width: 7px;
	border-style: solid;
	border-color: transparent transparent black transparent;
}

@keyframes fadeInOpacity {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@-webkit-keyframes tooltip-pulse {
	0% { -webkit-box-shadow: 0 0 0 0 rgba(150, 144, 162, 0.4); }
	70% { -webkit-box-shadow: 0 0 0 10px rgba(150, 144, 162, 0); }
	100% { -webkit-box-shadow: 0 0 0 0 rgba(150, 144, 162, 0); }
}
@keyframes tooltip-pulse {
	0% {
		-moz-box-shadow: 0 0 0 0 rgba(150, 144, 162, 0.4);
		box-shadow: 0 0 0 0 rgba(150, 144, 162, 0.4);
	}
	70% {
		-moz-box-shadow: 0 0 0 10px rgba(150, 144, 162, 0);
		box-shadow: 0 0 0 10px rgba(150, 144, 162, 0);
	}
	100% {
		-moz-box-shadow: 0 0 0 0 rgba(150, 144, 162, 0);
		box-shadow: 0 0 0 0 rgba(150, 144, 162, 0);
	}
}

.contact-us-tooltip {
	color: #ff0000 !important;
}

.contact-us-tooltip:hover {
	text-decoration: underline;
}
/*** TOOLTIPS AND ERROR MESSAGES END ***/


/*** TOOLTIP PULSE ANIMATION BEGIN ***/
@-webkit-keyframes tooltip-pulse {
	0% { -webkit-box-shadow: 0 0 0 0 rgba(150, 144, 162, 0.4); }
	70% { -webkit-box-shadow: 0 0 0 10px rgba(150, 144, 162, 0); }
	100% { -webkit-box-shadow: 0 0 0 0 rgba(150, 144, 162, 0); }
}
@keyframes tooltip-pulse {
	0% {
		-moz-box-shadow: 0 0 0 0 rgba(150, 144, 162, 0.4);
		box-shadow: 0 0 0 0 rgba(150, 144, 162, 0.4);
	}
	70% {
		-moz-box-shadow: 0 0 0 10px rgba(150, 144, 162, 0);
		box-shadow: 0 0 0 10px rgba(150, 144, 162, 0);
	}
	100% {
		-moz-box-shadow: 0 0 0 0 rgba(150, 144, 162, 0);
		box-shadow: 0 0 0 0 rgba(150, 144, 162, 0);
	}
}

@-webkit-keyframes tooltip-pulse-red {
	0% { -webkit-box-shadow: 0 0 0 0 rgba(210, 39, 48, 0.4); }
	70% { -webkit-box-shadow: 0 0 0 10px rgba(210, 39, 48, 0); }
	100% { -webkit-box-shadow: 0 0 0 0 rgba(210, 39, 48, 0); }
}
@keyframes tooltip-pulse-red {
	0% {
		-moz-box-shadow: 0 0 0 0 rgba(210, 39, 48, 0.4);
		box-shadow: 0 0 0 0 rgba(210, 39, 48, 0.4);
	}
	70% {
		-moz-box-shadow: 0 0 0 10px rgba(210, 39, 48, 0);
		box-shadow: 0 0 0 10px rgba(210, 39, 48, 0);
	}
	100% {
		-moz-box-shadow: 0 0 0 0 rgba(210, 39, 48, 0);
		box-shadow: 0 0 0 0 rgba(210, 39, 48, 0);
	}
}
/*** TOOLTIP PULSE ANIMATION END ***/



/* HOSTED FIELDS STYLING CLASSES BEGIN */
.hosted-fields-container {
    display: contents;
}

/* Plain text inputs inside hosted field containers (Cardholder Name, Zip).
   The container div provides the border and background — the input is borderless. */
.hosted-plain-input {
    width: 100%;
    height: 100%;
    min-height: 2.75rem;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    color: #17161a;
    padding: 0;
    box-sizing: border-box;
}

.hosted-plain-input:focus {
    outline: none;
}

/* When the plain input is focused, give the container the same ring as a focused Stripe element */
#cardholder-name:focus-within,
#cc-postal-code:focus-within {
    border: 2px solid rgba(210, 39, 48, 0.4);
    box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
    -webkit-box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
}


#cardholder-name, .card-number, .expiration-date, .cvv, #cc-postal-code {
    position: relative; /* required so .hosted-field--label (position:absolute; top:-18px) anchors to this container */
    padding: 0 1rem;
    background-color: var(--e-global-color-white);
    border: 2px solid #dedede;
    border-radius: 0.75rem;
    box-sizing: border-box;
    transition: border 0.3s ease, box-shadow 0.3s ease;
    margin: 0 0.65rem;
    outline: none;
    translate: 0 1rem;
    /* Match the height of our plain HTML inputs (2.75rem = 44px) for visual alignment
       with Cardholder Name and Zip fields. Use flex to vertically center Stripe iframes,
       which are ~17px tall and would otherwise sit near the top of the wrapper. */
    height: 2.75rem;
    display: flex;
    align-items: center;
}

/* Stripe.js injects the .StripeElement class on mount and adds its own padding.
   ID-based selectors for maximum specificity — beats Stripe's injected stylesheet. */
#card-number.StripeElement,
#expiration-date.StripeElement,
#cvv.StripeElement {
    /* Extra left padding so iframe text indent matches native input text indent.
       Native inputs render text at padding-left; Stripe iframe has 0 internal padding
       but font metrics shift the visible glyph edge slightly left — compensate here. */
    padding: 0 !important;
    height: 2.75rem !important;
    min-height: 2.75rem !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* The iframe inside needs to fill the flex container horizontally.
   Stripe's __PrivateStripeElement span wraps the iframe — it must stretch. */
#card-number .__PrivateStripeElement,
#expiration-date .__PrivateStripeElement,
#cvv .__PrivateStripeElement {
    width: 100% !important;
    height: auto !important;
}

#card-number iframe,
#expiration-date iframe,
#cvv iframe {
    width: 100% !important;
}

/*
#cardholder-name.braintree-hosted-fields-focused,
#card-number.braintree-hosted-fields-focused,
#expiration-date.braintree-hosted-fields-focused,
#cvv.braintree-hosted-fields-focused,
#cc-postal-code.braintree-hosted-fields-focused {
*/
.braintree-hosted-fields-focused {
    background-color: var(--e-global-color-white);
    border: 2px solid rgba(210, 39, 48, 0.4) !important;
    box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
    -webkit-box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
}
  
/*.braintree-hosted-fields-focused.is-invalid {
    font-family: roboto, verdana, sans-serif;
    font-size: 1rem;
    font-weight: 400;
/*    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);*/
/*}*/











/*.braintree-hosted-fields-focused {
    border-bottom: 2px solid $blue;
    transition: all 200ms ease;
}*/
  



.braintree-hosted-fields-invalid {
    height: 3rem !important;
    border: 2px solid #dedede !important;
    border-radius: 0.75rem !important;
    background-color: rgba(255,0,0,0.02);
    color: var(--e-global-color-primary) !important;
    font-size: 1rem;
    font-weight: 400;
    padding: 0 1rem !important;
    border: 2px solid rgba(255, 0, 0, 1) !important;
    -webkit-box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
    box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
    outline: none;
    transition: none;
    box-sizing: border-box;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}


.mht-cc-field-invalid {
    height: 3rem !important;
    border: 2px solid #dedede !important;
    border-radius: 0.75rem !important;
    background-color: rgba(255,0,0,0.02) !important;
    color: var(--e-global-color-primary) !important;
    font-size: 1rem;
    font-weight: 400;
    padding: 0 1rem !important;
    border: 2px solid rgba(255, 0, 0, 1) !important;
    -webkit-box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
    box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
    outline: none;
    transition: none;
    box-sizing: border-box;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

/*
.hosted-field--label {
    position: absolute;
    top: -18px;
    left: 8px;
    background: #fff;
    padding: 0 0.5rem;

    &.label-float {
        text-overflow: ellipsis;
        color: #2196F3;
        transition: all .15s ease-out;
    }

    &.filled,
    &.label-float {
        color: var(--e-global-color-primary);
    }

    &.invalid,
    &.label-float {
        color: var(--e-global-color-accent);
    }
}
*/

/* Inner div where Stripe Elements mount.
   Stripe replaces the div's children with an iframe.
   padding-top creates space below the floating label so iframe text doesn't overlap it. */
#card-number,
#expiration-date,
#cvv {
    width: 100%;
    height: 2.75rem;
    padding-top: 0.4rem;
}

.hosted-field--label {
    position: absolute;
    top: -18px;
    left: 8px;
    background: #fff;
    padding: 0 0.5rem;
}
  
.hosted-field--label.label-float {
    text-overflow: ellipsis;
    color: #2196F3;
    transition: all .15s ease-out;
}
  
.hosted-field--label.filled,
.hosted-field--label.label-float {
    color: var(--e-global-color-primary);
}
  
.hosted-field--label.invalid,
.hosted-field--label.label-float {
    color: var(--e-global-color-accent);
}

/* ACH instruction text (Financial Connections) */
.ach-instruction-text {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    padding: 0.5rem 0;
    margin: 0.5rem 0;
}

















/*.cardholder-name::before {
    content: "";
    display: block;
    margin-top: 0.5rem;
}*/

/*#cc-form > *:first-child {
    margin-top: 1rem;
}*/

/*
#card-image {
    position: absolute;
    top: 2em;
    right: 1em;
    width: 44px;
    height: 28px;
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/346994/card_sprite.png);
    background-size: 86px 458px;
    border-radius: $radius;
    background-position: -100px 0;
    background-repeat: no-repeat;
    margin-bottom: 1em;
    &.visa {
      background-position: 0 -398px;
    }
    &.master-card {
      background-position: 0 -281px;
    }
    &.american-express {
      background-position: 0 -370px;
    }
    &.discover {
      background-position: 0 -163px;
    }
    &.maestro {
      background-position: 0 -251px;
    }
    &.jcb {
      background-position: 0 -221px;
    }
    &.diners-club {
      background-position: 0 -133px;
    }
}*/

/* MHT Button Card Icons Begin */
.mht-card-icons {
    display: flex; /* Arrange icons in a row */
    align-items: center; /* Vertically center the icons */
    gap: 0.5em; /* Space between icons */
/*    margin-left: 1rem;*/
}

.mht-card-image {
    width: 44px; /* Width of each icon */
    height: 28px; /* Height of each icon */
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/346994/card_sprite.png); /* Sprite background image */
    background-size: 86px 458px; /* Size of the sprite sheet */
    background-repeat: no-repeat; /* Prevent background image from repeating */
    border-radius: 4px; /* Optional: Add rounded corners */
}

.mht-visa {
    width: 44px;
    height: 28px;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iVmlzYSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTM0IDg0Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiAjMTQzNGNiOwogICAgICB9CgogICAgICAuY2xzLTIgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxyZWN0IGNsYXNzPSJjbHMtMiIgd2lkdGg9IjEzNCIgaGVpZ2h0PSI4NCIgcng9IjgiIHJ5PSI4Ii8+CiAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNTYuNTcsMjguNDlsLTExLjM1LDI3LjA4aC03LjQxbC01LjU5LTIxLjYxYy0uMzQtMS4zMy0uNjMtMS44Mi0xLjY3LTIuMzgtMS42OC0uOTEtNC40Ni0xLjc3LTYuOTEtMi4zbC4xNy0uNzloMTEuOTJjMS41MiwwLDIuODksMS4wMSwzLjIzLDIuNzZsMi45NSwxNS42Nyw3LjI5LTE4LjQzaDcuMzZaTTg1LjU4LDQ2LjczYy4wMy03LjE1LTkuODgtNy41NC05LjgyLTEwLjczLjAyLS45Ny45NS0yLDIuOTctMi4yNywxLS4xMywzLjc3LS4yMyw2LjkxLDEuMjFsMS4yMy01Ljc0Yy0xLjY5LS42MS0zLjg1LTEuMi02LjU1LTEuMi02LjkyLDAtMTEuOCwzLjY4LTExLjg0LDguOTUtLjA0LDMuOSwzLjQ4LDYuMDcsNi4xMyw3LjM3LDIuNzMsMS4zMywzLjY1LDIuMTgsMy42NCwzLjM3LS4wMiwxLjgyLTIuMTgsMi42Mi00LjE5LDIuNjUtMy41Mi4wNS01LjU2LS45NS03LjE5LTEuNzFsLTEuMjcsNS45M2MxLjY0Ljc1LDQuNjYsMS40MSw3Ljc5LDEuNDQsNy4zNiwwLDEyLjE3LTMuNjQsMTIuMi05LjI3TTEwMy44Nyw1NS41OGg2LjQ4bC01LjY2LTI3LjA4aC01Ljk4Yy0xLjM0LDAtMi40OC43OC0yLjk4LDEuOTlsLTEwLjUxLDI1LjA5aDcuMzZsMS40Ni00LjA1aDguOTlsLjg1LDQuMDVaTTk2LjA1LDQ1Ljk4bDMuNjktMTAuMTcsMi4xMiwxMC4xN2gtNS44MVpNNjYuNTgsMjguNDlsLTUuNzksMjcuMDhoLTcuMDFsNS44LTI3LjA4aDdaIi8+Cjwvc3ZnPg==");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.mht-master-card {
    width: 44px;
    height: 28px;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTWFzdGVyY2FyZF9jb3B5IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMzQgODQiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGw6ICNmNzllMWI7CiAgICAgIH0KCiAgICAgIC5jbHMtMiB7CiAgICAgICAgZmlsbDogI2ZmNWEwMDsKICAgICAgfQoKICAgICAgLmNscy0zIHsKICAgICAgICBmaWxsOiAjZmZmOwogICAgICB9CgogICAgICAuY2xzLTQgewogICAgICAgIGZpbGw6ICNlYjAwMWI7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9kZWZzPgogIDxyZWN0IGNsYXNzPSJjbHMtMyIgd2lkdGg9IjEzNCIgaGVpZ2h0PSI4NCIgcng9IjgiIHJ5PSI4Ii8+CiAgPGc+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik05NS4yNCw1My40OHYtLjZoLjI0di0uMTJoLS42MXYuMTJoLjI0di42aC4xM1pNOTYuNDMsNTMuNDh2LS43MmgtLjE5bC0uMjIuNS0uMjItLjVoLS4xOXYuNzJoLjEzdi0uNTRsLjIuNDdoLjE0bC4yLS40N3YuNTRoLjEzWiIvPgogICAgPGc+CiAgICAgIDxyZWN0IGlkPSJyZWN0MTkiIGNsYXNzPSJjbHMtMiIgeD0iNTguODgiIHk9IjI3LjQxIiB3aWR0aD0iMTYuMjQiIGhlaWdodD0iMjkuMTciLz4KICAgICAgPHBhdGggY2xhc3M9ImNscy00IiBkPSJNNTkuOTYsNDJjMC01LjkzLDIuNzktMTEuMTksNy4wNi0xNC41OS0zLjE1LTIuNDctNy4xMi0zLjk3LTExLjQ1LTMuOTctMTAuMjYsMC0xOC41NSw4LjMtMTguNTUsMTguNTVzOC4zLDE4LjU1LDE4LjU1LDE4LjU1YzQuMzMsMCw4LjMtMS41LDExLjQ1LTMuOTctNC4yOC0zLjM1LTcuMDYtOC42Ni03LjA2LTE0LjU5WiIvPgogICAgICA8cGF0aCBpZD0icGF0aDIyIiBjbGFzcz0iY2xzLTEiIGQ9Ik05Ny4wMiw0MmMwLDEwLjI2LTguMywxOC41NS0xOC41NSwxOC41NS00LjMzLDAtOC4zLTEuNS0xMS40NS0zLjk3LDQuMzMtMy40LDcuMDYtOC42Niw3LjA2LTE0LjU5cy0yLjc5LTExLjE5LTcuMDYtMTQuNTljMy4xNC0yLjQ3LDcuMTEtMy45NywxMS40NC0zLjk3LDEwLjI2LDAsMTguNTYsOC4zNSwxOC41NiwxOC41NVoiLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPg==");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.mht-american-express {
    width: 44px;
    height: 28px;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iQW1lcmljYW5fRXhwcmVzcyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTM0IDg0Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xLCAuY2xzLTIgewogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsKICAgICAgfQoKICAgICAgLmNscy0xLCAuY2xzLTMgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KCiAgICAgIC5jbHMtMiB7CiAgICAgICAgZmlsbDogIzAxNmZkMDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPHJlY3QgY2xhc3M9ImNscy0zIiB3aWR0aD0iMTM0IiBoZWlnaHQ9Ijg0IiByeD0iOCIgcnk9IjgiLz4KICA8Zz4KICAgIDxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSI0NC41IDE5LjUgODkuNSAxOS41IDg5LjUgNjQuNSA0NC41IDY0LjUgNDQuNSAxOS41IDQ0LjUgMTkuNSIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNjIuNzIsNTUuNjF2LTEyLjU4aDEwLjY3djIuOWgtNy4yMXYxLjk3aDcuMDR2Mi44NWgtNy4wNHYxLjkzaDcuMjF2Mi45M2gtMTAuNjdaTTczLjMzLDU1LjYxaDQuNDRsMy42My00LjAzLDMuNjcsNC4wM2g0LjQydi0uMThsLTUuNzgtNi4xMiw1Ljc4LTYuMTh2LS4xaC00LjM3bC0zLjYyLDMuOTktMy42MS0zLjk5aC00LjU3bDUuOSw2LjI4LTUuOSw2LjNoMFpNODkuNSw0MS4yOGgwdi0xNC4zNGgtNi41MmwtMS40OCw0LjEzLTEuNDctNC4xM2gtOC41NHY1LjUybC0yLjQzLTUuNTJoLTYuOTJsLTcuMSwxNi4xMmg1Ljc3djE0LjMxbDE3Ljc5LjA0LDIuNzktMy4xMiwyLjgxLDMuMTFoNS4zdi00LjU1bC0zLjMyLTMuNTgsMy4zMi0zLjU0di00LjQ1Wk02My40NSwyOC43aDQuNDJsNS41NiwxMi41N2gtMy45MmwtMS4wNS0yLjUyaC01LjcxbC0xLjA1LDIuNTJoLTMuODNsNS41OC0xMi41N2gwWk02My45MywzNS45M2gzLjM1bC0xLjY3LTQtMS42Nyw0aDBaTTczLjM4LDQxLjI2aDMuMzlzMC04LjY0LDAtOC42NGwzLjIxLDguNjRoMy4wNGwzLjE1LTguNjF2OC42NGwzLjMzLS4wM3YtMTIuNTdoLTUuMThsLTIuNzksNy43NS0yLjc3LTcuNzMtNS4zOC0uMDJ2MTIuNTdoMFoiLz4KICA8L2c+Cjwvc3ZnPg==");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.mht-discover {
    width: 44px;
    height: 28px;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iRGlzY292ZXIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAxMzQgODQiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuY2xzLTEgewogICAgICAgIGZpbGw6ICMyMzFmMjA7CiAgICAgIH0KCiAgICAgIC5jbHMtMiB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQpOwogICAgICB9CgogICAgICAuY2xzLTMgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KCiAgICAgIC5jbHMtNCB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtMik7CiAgICAgICAgaXNvbGF0aW9uOiBpc29sYXRlOwogICAgICAgIG9wYWNpdHk6IC42NTsKICAgICAgfQogICAgPC9zdHlsZT4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50IiB4MT0iNzUuNjciIHkxPSI2MzAuMiIgeDI9IjY4LjU5IiB5Mj0iNjE5LjExIiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDY3Mi43OCAtMTI4LjM3KSByb3RhdGUoODAuNjcpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2Y4OWYyMCIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii4yNSIgc3RvcC1jb2xvcj0iI2Y3OWEyMCIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii41MyIgc3RvcC1jb2xvcj0iI2Y2OGQyMCIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii42MiIgc3RvcC1jb2xvcj0iI2Y1ODcyMCIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii43MiIgc3RvcC1jb2xvcj0iI2Y0ODEyMCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmMzc1MjEiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC0yIiB4MT0iNzQuNTUiIHkxPSI2MzAuMDUiIHgyPSI2NC4yIiB5Mj0iNjA5LjgxIiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDY3Mi43OCAtMTI4LjM3KSByb3RhdGUoODAuNjcpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2Y1ODcyMCIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii4zNiIgc3RvcC1jb2xvcj0iI2UxNmYyNyIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii43IiBzdG9wLWNvbG9yPSIjZDQ2MDJjIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjk4IiBzdG9wLWNvbG9yPSIjZDA1YjJlIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8cmVjdCBjbGFzcz0iY2xzLTMiIHdpZHRoPSIxMzQiIGhlaWdodD0iODQiIHJ4PSI4IiByeT0iOCIvPgogIDxnPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTcuMTYsMzMuMTZoLTUuMDF2MTcuNTZoNS4wMWMyLjY1LDAsNC41Ni0uNjQsNi4yNi0yLjAxLDIuMDEtMS42NiwzLjE5LTQuMTUsMy4xOS02Ljc0LS4wMy01LjItMy44OS04LjgxLTkuNDUtOC44MVpNMjEuMTksNDYuMzdjLTEuMDkuOTYtMi40NiwxLjQtNC42OSwxLjRoLS45M3YtMTEuNjJoLjkzYzIuMiwwLDMuNTQuMzgsNC42OSwxLjQsMS4xOCwxLjA1LDEuODgsMi42OCwxLjg4LDQuMzcsMCwxLjY5LS43LDMuMzgtMS44OCw0LjQ0Wk0yOC4xOCwzMy4xNmgzLjQydjE3LjU2aC0zLjQydi0xNy41NlpNNDQuOTcsNDUuNDVjMCwzLjQyLTIuNTIsNS43OC02LjA2LDUuNzgtMi41OSwwLTQuNS0xLjAyLTYuMDYtMy4zNWwyLjItMi4xNGMuOCwxLjUsMi4xMSwyLjMzLDMuNzMsMi4zMywxLjUzLDAsMi42NS0xLjA1LDIuNjUtMi40OSwwLS43My0uMzUtMS4zNy0xLjAyLTEuODItLjM1LS4xOS0xLjAyLS41MS0yLjM2LS45OS0zLjE5LTEuMTUtNC4zMS0yLjM5LTQuMzEtNC44MiwwLTIuODcsMi4zOS01LjA0LDUuNDktNS4wNCwxLjk1LDAsMy43LjY3LDUuMTcsMS45NWwtMS43OSwyLjMzYy0uODYtMS4wMi0xLjcyLTEuNDQtMi43NS0xLjQ0LTEuNDcsMC0yLjU1LjgzLTIuNTUsMS45NSwwLC45My42MSwxLjQ0LDIuNjUsMi4yLDMuODksMS40NCw1LjA4LDIuNzEsNS4wMSw1LjU1Wk01NS40LDMyLjc3YzEuNDcsMCwyLjcxLjMyLDQuMjEsMS4wOXY0LjAyYy0xLjQtMS40LTIuNjUtMS45OC00LjI4LTEuOTgtMy4yMiwwLTUuNzUsMi42NS01Ljc1LDYuMDMsMCwzLjU4LDIuNDYsNi4wNiw1LjkxLDYuMDYsMS41MywwLDIuNzUtLjU0LDQuMTItMS45MnY0LjAyYy0xLjUzLjczLTIuODEsMS4wMi00LjI4LDEuMDItNS4yLDAtOS4yNi0zLjk5LTkuMjYtOS4xNnM0LjE4LTkuMTksOS4zMi05LjE5Wk05MS41NCwzMy4xNmgzLjdsLTcuNTcsMThoLTEuODVsLTcuNDQtMThoMy43M2w0LjY5LDExLjgxLDQuNzItMTEuODFaTTk2LjgsMzMuMTZoOS43djNoLTYuMjl2My44OWg2LjA2djIuOTdoLTYuMDZ2NC43Mmg2LjI5djIuOTdoLTkuN3YtMTcuNTZaTTEyMC4wNywzOC4zNmMwLTMuMjktMi4yNy01LjE3LTYuMjItNS4xN2gtNS4wOHYxNy41NmgzLjQydi03LjA1aC40NWw0LjcyLDcuMDVoNC4yMWwtNS41Mi03LjQxYzIuNTktLjU0LDQuMDItMi4zLDQuMDItNC45OFpNMTEzLjE4LDQxLjI3aC0uOTl2LTUuMzNoMS4wNWMyLjE0LDAsMy4yOS44OSwzLjI5LDIuNjJzLTEuMTUsMi43MS0zLjM1LDIuNzFaIi8+CiAgICA8Y2lyY2xlIGNsYXNzPSJjbHMtMiIgY3g9IjcwLjQzIiBjeT0iNDIiIHI9IjEwLjI1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNy41NyAxMDQuNjkpIHJvdGF0ZSgtODAuNjcpIi8+CiAgICA8Y2lyY2xlIGNsYXNzPSJjbHMtNCIgY3g9IjcwLjQzIiBjeT0iNDIiIHI9IjEwLjI1IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNy41NyAxMDQuNjkpIHJvdGF0ZSgtODAuNjcpIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMjcuNTYsMzMuMDRjMC0uMzUtLjI0LS41Mi0uNjMtLjUyaC0uNTZ2MS42OGguNDJ2LS42NmwuNDkuNjZoLjQ5bC0uNTYtLjdjLjIxLS4wMy4zNS0uMjEuMzUtLjQ1Wk0xMjYuODYsMzMuMjloLS4wN3YtLjQ1aC4wN2MuMjEsMCwuMzEuMDcuMzEuMjEsMCwuMTctLjEuMjQtLjMxLjI0Wk0xMjcsMzEuODljLS44LDAtMS40Ny42Ni0xLjQ3LDEuNDdzLjY2LDEuNDcsMS40NywxLjQ3LDEuNDctLjY2LDEuNDctMS40Ny0uNjYtMS40Ny0xLjQ3LTEuNDdaTTEyNywzNC41OGMtLjYzLDAtMS4xOS0uNTItMS4xOS0xLjIycy41Mi0xLjIyLDEuMTktMS4yMmMuNjMsMCwxLjE1LjU2LDEuMTUsMS4yMiwwLC42Ni0uNTIsMS4yMi0xLjE1LDEuMjJaIi8+CiAgPC9nPgo8L3N2Zz4=");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.mht-jcb {
    width: 44px;
    height: 28px;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iRGlzY292ZXJfY29weSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEzNCA4NCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtNSk7CiAgICAgIH0KCiAgICAgIC5jbHMtMiB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtNCk7CiAgICAgIH0KCiAgICAgIC5jbHMtMyB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtMyk7CiAgICAgIH0KCiAgICAgIC5jbHMtNCB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQtMik7CiAgICAgIH0KCiAgICAgIC5jbHMtNSB7CiAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQpOwogICAgICB9CgogICAgICAuY2xzLTYgewogICAgICAgIGZpbGw6ICNmZmY7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudCIgeDE9Ii02MDEuODQiIHkxPSI0NjAuMTciIHgyPSItNjAxLjY1IiB5Mj0iNDYwLjE3IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKDQyMzk1LjU5IDIwMDg1LjMyKSBzY2FsZSg3MC4zMiAtNDMuNTUpIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzAwNzk0MCIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii4yMyIgc3RvcC1jb2xvcj0iIzAwODczZiIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii43NCIgc3RvcC1jb2xvcj0iIzQwYTczNyIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM1Y2I1MzEiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC0yIiB4MT0iLTYwMS44NCIgeTE9IjQ1OS4zNSIgeDI9Ii02MDEuNjUiIHkyPSI0NTkuMzUiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDIzNjAuNDEgNzg0NjEuMTEpIHNjYWxlKDcwLjI2IC0xNzAuNzIpIiB4bGluazpocmVmPSIjbGluZWFyLWdyYWRpZW50Ii8+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC0zIiB4MT0iLTYwMS44NCIgeTE9IjQ1OS43NSIgeDI9Ii02MDEuNjUiIHkyPSI0NTkuNzUiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDIzOTcuMjMgMjAwNzUuMDEpIHNjYWxlKDcwLjMyIC00My41OCkiIHhsaW5rOmhyZWY9IiNsaW5lYXItZ3JhZGllbnQiLz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTQiIHgxPSItNjAwLjE1IiB5MT0iNDU5LjM0IiB4Mj0iLTU5OS45NiIgeTI9IjQ1OS4zNCIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSg0Mjg5OS4yOSA3OTY2Ny41Nikgc2NhbGUoNzEuNDEgLTE3My4zNSkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMWYyODZmIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjQ4IiBzdG9wLWNvbG9yPSIjMDA0ZTk0Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjgzIiBzdG9wLWNvbG9yPSIjMDA2NmIxIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzAwNmZiYyIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTUiIHgxPSItNjAwLjg1IiB5MT0iNDU5LjM1IiB4Mj0iLTYwMC42NSIgeTI9IjQ1OS4zNSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSg0MTczMCA3NzUyMC4xKSBzY2FsZSg2OS4zNSAtMTY4LjY3KSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM2YzJjMmYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIuMTciIHN0b3AtY29sb3I9IiM4ODI3MzAiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIuNTciIHN0b3AtY29sb3I9IiNiZTE4MzMiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIuODYiIHN0b3AtY29sb3I9IiNkYzA0MzYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZTYwMDM5Ii8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8cmVjdCBjbGFzcz0iY2xzLTYiIHdpZHRoPSIxMzQiIGhlaWdodD0iODQiIHJ4PSI4IiByeT0iOCIvPgogIDxnPgogICAgPHBhdGggY2xhc3M9ImNscy02IiBkPSJNOTIsNTMuNDljMCw0LjI3LTMuNDgsNy43Ny03Ljc3LDcuNzdoLTQyLjIzdi0zMC43NWMwLTQuMjcsMy40OC03Ljc3LDcuNzctNy43N2g0Mi4yM3YzMC43NVoiLz4KICAgIDxwYXRoIGNsYXNzPSJjbHMtNSIgZD0iTTc4LjI1LDQ1LjZoMy4yMWMuMSwwLC4zLS4wMy40LS4wMy42Mi0uMTIsMS4xNC0uNjcsMS4xNC0xLjQ0cy0uNTItMS4yOS0xLjE0LTEuNDRjLS4xLS4wMy0uMjctLjAzLS40LS4wM2gtMy4yMXYyLjkzWiIvPgogICAgPHBhdGggY2xhc3M9ImNscy00IiBkPSJNODEuMSwyNS4zNGMtMy4wNSwwLTUuNTYsMi40OC01LjU2LDUuNTZ2NS43OGg3Ljg1Yy4xOCwwLC40LDAsLjU1LjAzLDEuNzcuMSwzLjA4LDEuMDEsMy4wOCwyLjYsMCwxLjI1LS44OSwyLjMzLTIuNTMsMi41M3YuMDVjMS44MS4xMiwzLjE4LDEuMTQsMy4xOCwyLjY4LDAsMS42OC0xLjUzLDIuNzgtMy41NSwyLjc4aC04LjYydjExLjNoOC4xNmMzLjA1LDAsNS41Ni0yLjQ4LDUuNTYtNS41NnYtMjcuNzdoLTguMTJaIi8+CiAgICA8cGF0aCBjbGFzcz0iY2xzLTMiIGQ9Ik04Mi41OSwzOS42N2MwLS43NC0uNTItMS4yMi0xLjE0LTEuMzItLjA1LDAtLjIyLS4wMy0uMy0uMDNoLTIuOXYyLjY4aDIuOWMuMSwwLC4yNywwLC4zLS4wMy42Mi0uMDgsMS4xNC0uNTgsMS4xNC0xLjMyWiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNTAuMzQsMjUuMzRjLTMuMDUsMC01LjU2LDIuNDgtNS41Niw1LjU2djEzLjczYzEuNTYuNzcsMy4xOCwxLjI1LDQuNzksMS4yNSwxLjkzLDAsMi45Ni0xLjE2LDIuOTYtMi43NXYtNi40N2g0Ljc3djYuNDRjMCwyLjUxLTEuNTYsNC41NS02Ljg1LDQuNTUtMy4yMSwwLTUuNzEtLjctNS43MS0uN3YxMS43aDguMTZjMy4wNSwwLDUuNTYtMi40OCw1LjU2LTUuNTZ2LTI3Ljc0aC04LjEyWiIvPgogICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNjUuNzEsMjUuMzRjLTMuMDUsMC01LjU2LDIuNDgtNS41Niw1LjU2djcuMjdjMS40MS0xLjE5LDMuODUtMS45Niw3Ljc5LTEuNzcsMi4xMS4xLDQuMzcuNjcsNC4zNy42N3YyLjM2Yy0xLjE0LS41OC0yLjQ4LTEuMS00LjIyLTEuMjItMy0uMjItNC43OSwxLjI1LTQuNzksMy44MnMxLjgxLDQuMDcsNC43OSwzLjgyYzEuNzQtLjEyLDMuMDgtLjY3LDQuMjItMS4yMnYyLjM2cy0yLjIzLjU4LTQuMzcuNjdjLTMuOTUuMTgtNi4zOC0uNTgtNy43OS0xLjc3djEyLjgxaDguMTZjMy4wNSwwLDUuNTYtMi40OCw1LjU2LTUuNTZ2LTI3LjgxaC04LjE2WiIvPgogIDwvZz4KPC9zdmc+");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/*
    &.mht-visa {
      background-position: 0 -398px;
    }
    &.mht-master-card {
      background-position: 0 -281px;
    }
    &.mht-american-express {
      background-position: 0 -370px;
    }
    &.discover {
      background-position: 0 -163px;
    }
    &.maestro {
      background-position: 0 -251px;
    }
    &.jcb {
      background-position: 0 -221px;
    }
    &.diners-club {
      background-position: 0 -133px;
    }
}
*/






/* BRAINTREE HOSTED FIELDS STYLING CLASSES BEGIN */


/*** INPUT FIELDS BEGIN ***/
.mht-capitalize {
    text-transform: capitalize;
}

.mht-field-text {
    width: 100%;
    height: 3rem !important;
    border: 2px solid #dedede !important;
    border-radius: 0.75rem !important;
    background-color: var(--e-global-color-whites);
    color: var(--e-global-color-primary) !important;
    font-size: 1rem;
    font-weight: 400;
    padding: 0 1rem;
    /*padding: 0 1.15rem !important;*/
    transition: none;
    box-sizing: border-box;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

.mht-field-text:focus {
    /*border: 2px solid #005fcc !important;*/
    border: 2px solid rgba(210, 39, 48, 0.4) !important;
    -webkit-box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
    box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
    outline: none;
}

.mht-field-text-invalid {
    width: 100%;
    height: 3rem !important;
    border: 2px solid #dedede !important;
    border-radius: 0.75rem !important;
    background-color: rgba(255,0,0,0.02);
/*    background-color: var(--e-global-color-whites);*/
    color: var(--e-global-color-primary) !important;
    font-size: 1rem;
    font-weight: 400;
    padding: 0 1rem !important;
    border: 2px solid rgba(255, 0, 0, 1) !important;
    -webkit-box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
    box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
    outline: none;
    transition: none;
    box-sizing: border-box;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

.mht-field-text-disallow {
    -webkit-text-fill-color: var(--e-global-color-primary);
    opacity: 1; /* required on iOS */
    background: linear-gradient(45deg, #fafafa 12.5%, #ffffff 12.5%, #ffffff 37.5%, #fafafa 37.5%, #fafafa 62.5%, #ffffff 62.5%, #ffffff 87.5%, #fafafa 87.5%);
/*    background-size: 100px 100px;
    background-position: 50px 50px;*/
    background-size: 40px 40px;
    background-position: 20px 20px;
}

.mht-field-select {
    width: 100%;
    height: 3rem !important;
    border: 2px solid #dedede;
    border-radius: 0.75rem !important;
    background-color: var(--e-global-color-whites);
    color: var(--e-global-color-primary) !important;
    font-size: 1rem;
    font-weight: 400;
    padding: 0 1rem;
    /*padding: 0 0.75rem;*/
    /*padding: 0 1.15rem !important;*/
    transition: none;
    box-sizing: border-box;
    transition: border 0.3s ease, box-shadow 0.3s ease;

    /* Safari custom settings begin */
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
    appearance: none;
    -webkit-appearance: none;
    /* Safari custom settings end */
}

.mht-field-select:focus {
    /*border: 2px solid #005fcc !important;*/
    border: 2px solid rgba(210, 39, 48, 0.4) !important;
    -webkit-box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
    box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
    outline: none;
}

.mht-field-email {
    width: 100%;
    height: 3rem !important;
    border: 2px solid #dedede !important;
    border-radius: 0.75rem !important;
    background-color: #fff !important;
    color: var(--e-global-color-primary);
    font-size: 1rem !important;
    font-weight: 400;
    padding: 0 0.625rem !important;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

.mht-field-email:focus {
    /*border: 2px solid #005fcc !important;*/
    border: 2px solid rgba(210, 39, 48, 0.4) !important;
    -webkit-box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
    box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
}

.mht-field-email-warning {
    width: 100%;
    height: 3rem !important;
    border: 2px solid #dedede !important;
    border-radius: 0.75rem !important;
    background-color: #fff !important;
    color: var(--e-global-color-primary);
    font-size: 1rem !important;
    font-weight: 400;
    padding: 0 0.625rem !important;
/*    border: 2px solid rgba(210,39,48,0.8) !important;
    -webkit-box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
    box-shadow: 0 0 0 4px rgb(210 39 48 / 10%), inset 0 0 10px 4px rgb(210 39 48 / 10%);*/
}

.mht-field-email-warning:focus {
    /* border: 2px solid #005fcc !important; */
    border: 2px solid rgba(210, 39, 48, 0.8) !important;
    -webkit-box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
    box-shadow: 0 0 0 4px rgb(210 39 48 / 10%), inset 0 0 10px 4px rgb(210 39 48 / 10%);
}

.mht-field-textarea {
    width: 100%;
    height: 15rem;
    border: 2px solid #dedede !important;
    border-radius: 0.75rem !important;
    background-color: #fff !important;
    color: var(--e-global-color-primary);
    font-size: 1rem !important;
    font-weight: 400;
    padding: 0.625rem !important;
    resize: none;
    left: 0;
}

.mht-field-textarea:focus {
/*    border: 2px solid #005fcc !important;*/
    border: 2px solid rgba(210, 39, 48, 0.4) !important;
    -webkit-box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
    box-shadow: 0 0 0 4px rgb(210 39 48 / 10%);
}
/*** INPUT FIELDS END ***/






/*** STATES BEGIN ***/
/*.mht-hide-state-select {
    visibility: hidden;
    display: none !important;
}

.mht-show-state-select {
    visibility: visible;
    display: block !important;
}*/
/*** STATES END ***/


/*** SELECT HIDE BEGIN ***/


/* Animated Transition Versions Begin */
.mht-hide-element,
.mht-show-element {
    visibility: visible;
    opacity: 1;
    display: block !important;
    transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out;
}

.mht-hide-element {
    opacity: 0;
    height: 0;
    overflow: hidden;
}

.mht-show-element {
    opacity: 1;
    height: auto;
}
/* Animated Transition Versions End */
/*** SELECT HIDE END ***/




.field-help {
    color: var(--e-global-color-primary);
    font-size: 1rem;
    position: relative;
    margin-left: 0.2rem;
}

.field-required {
    color: #d22730;
    font-size: 0.5rem;
    position: relative;
    top: -4px;
}

::placeholder {
    color: #635e6f !important;
    font-size: 1rem !important;
    font-weight: 300;
}

textarea::placeholder {
    color: #635e6f !important;
    font-size: 1rem !important;
    font-weight: 300;
}

select.mht-field-text:invalid {
    color: #635e6f;
    font-size: 1rem !important;
    font-weight: 300;
}

/*select:required:invalid {*/
/*select:invalid {*/
/*select:disabled {
    color: #f00;
/*    color: #635e6f;*/
/*    font-size: 1rem !important;
    font-weight: 300;
}*/

option[value=""][disabled] {
    display: none;
}

option {
    color: var(--e-global-color-primary);
}
/*** INPUT FIELDS END ***/








/*** CHECKBOX STYLING BEGIN ***/
/*
input[type=checkbox] + label:before {
    color: var(--e-global-color-primary) !important;
    font-size: 1.25rem !important;
    top: 2px !important;
    position: relative !important;
    font-family: FontAwesome;
    display: inline-block;
    cursor: pointer;
}
*/

/*.mht-checkbox input[type=checkbox] + label:before { content: "\f096"; } /* unchecked icon */
/*.mht-checkbox input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */

/*.mht-checkbox input[type=checkbox]:checked + label:before { content: "\f046"; } /* checked icon */
/*.mht-checkbox input[type=checkbox]:checked + label:before { letter-spacing: 10px; } /* allow space for check mark */

/* Clear radio theme styles */
input[type="radio"],
input[type="radio"]:checked,
input[type="radio"]:focus,
input[type="radio"]:active {
    background-color: #fff !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 var(--s, 2px) var(--b, var(--border));
}

/* Clear checkbox theme styles */
input[type="checkbox"],
input[type="checkbox"]:checked,
input[type="checkbox"]:focus,
input[type="checkbox"]:active {
    background-color: #fff !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 var(--s, 2px) var(--b, var(--border));
}

.checkbox {
    --background: #fff;
    /*    --border: #d1d6ee;*/
    --border: #dedede;
    /*    --border-hover: #bbc1e1;*/
    --border-hover: #cecece;
    --border-active: #1e2235;
    --tick: #fff;
    font-weight: 400;
    display: inline-flex;
    position: relative;
}

.checkbox-description {
    margin-left: 1rem;
    font-size: 0.9rem;
    line-height: 1.1rem;
    position: relative;
    top: 0;
}

/*.checkbox label {
    color: #f00 !important;
    font-size: 18px;
    text-align: left;
    color: #b2b2b2;
    text-align: left;
    line-height: normal;
    padding-left: 10px;
}*/

.checkbox input,
.checkbox svg {
    width: 21px;
    min-width: 21px;
    height: 21px;
    display: block;
}

.checkbox input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    outline: none;
    background: var(--background);
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 4px;
    transition: box-shadow 0.3s;
    box-shadow: inset 0 0 0 var(--s, 2px) var(--b, var(--border));
}

.checkbox input:hover {
    --s: 2px;
    --b: var(--border-hover);
}

.checkbox input:checked {
    --b: var(--border-active);
}

.checkbox svg {
    pointer-events: none;
    fill: none;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: var(--stroke, var(--border-active));
    position: absolute;
    top: 0;
    left: 0;
    width: 21px;
    height: 21px;
    transform: scale(var(--scale, 1)) translateZ(0);
}

.checkbox.path input:checked {
    --s: 2px;
    transition-delay: 0.4s;
}

.checkbox.path input:checked + svg {
    --a: 16.1 86.12;
    --o: 102.22;
}

.checkbox.path svg {
    stroke-dasharray: var(--a, 86.12);
    stroke-dashoffset: var(--o, 86.12);
    transition: stroke-dasharray 0.6s, stroke-dashoffset 0.6s;
}

.checkbox.bounce {
    --stroke: var(--tick);
}

.checkbox.bounce input:checked {
    --s: 11px;
}

.checkbox.bounce input:checked + svg {
    -webkit-animation: bounce 0.4s linear forwards 0.2s;
    animation: bounce 0.4s linear forwards 0.2s;
}

.checkbox.bounce svg {
    --scale: 0;
}

@-webkit-keyframes bounce {
    50% { transform: scale(1.2); }
    75% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

@keyframes bounce {
    50% { transform: scale(1.2); }
    75% { transform: scale(0.9); }
    100% { transform: scale(1); }
}
/*** CHECKBOX STYLING BEGIN ***/


/*** INPUT NUMBER STYLING BEGIN ***/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield; /* Firefox */
}
/*** INPUT NUMBER STYLING END ***/











/*** LOADING PHASE BEGIN ***/
/* Full-height flex wrapper shown while transaction data loads.
   Gives the page real in-flow height so iframe-resizer reports a
   non-trivial scrollHeight and the spinner renders below the heading. */
#loading-phase {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 2rem;
}

/* While spinner sits inside #loading-phase it is in-flow, not fixed. */
#loading-phase .loader-spinner-wrapper {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
}
/*** LOADING PHASE END ***/

/*** SPINNER BEGIN ***/
.loader-spinner-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0,0,0,0.05);
    border-bottom-color: #000000;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotationanimation 1.5s linear infinite;
}

.mht-loader-wrapper {
    text-align: center;
}

.mht-loader-rotate {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0,0,0,0.05);
    border-bottom-color: #000000;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotationanimation 1.5s linear infinite;
}

@keyframes rotationanimation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.mht-loader-ripple {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
}

.mht-loader-ripple::after,
.mht-loader-ripple::before {
    content: '';  
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid rgba(0,0,0,0.25);
    position: absolute;
    left: 0;
    top: 0;
    animation: rippleanimation 2s linear infinite;
    opacity: 0;
    transform: scale(0);
}
.mht-loader-ripple::after {
    animation-delay: 1s;
}

@keyframes rippleanimation {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.pay-spinner {
    width: 32px;
    height: 32px;
    border: 4px solid rgba(255,255,255,0.1);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    border-bottom-color: var(--e-global-color-white);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotationanimation 1.5s linear infinite;
    margin: 7px auto;
  }

@keyframes rotationanimation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/*** SPINNER END ***/

/*** EMAIL VALIDATION BEGIN ***/
.email-input {
    /*--icon: #a6accd; /* Gray icon color by default */
    --icon: #cccccc; /* Gray icon color by default */
    --icon-focus: #646b8c; /* Dark gray icon color when focused */
    --icon-invalid: red; /* Red icon color for invalid email */
/*    --icon-invalid: #f04949; /* Red icon color for invalid email */
    --icon-valid: #16bf78; /* Green icon color for valid email */
    position: relative;
}

.email-input input {
    padding-left: 2.5rem !important;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.email-input input::-moz-placeholder {
    color: var(--text-placeholder);
}

.email-input input:-ms-input-placeholder {
  color: var(--text-placeholder);
}

.email-input input::placeholder {
  color: var(--text-placeholder);
}

.email-input .validation-icon {
    width: 18px;
    height: 18px;
    top: 16px;
    left: 1rem;
    display: block;
    position: absolute;
    fill: none;
    /*stroke: var(--icon);*/
    stroke: var(--i, var(--icon));
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
    transition: stroke 0.3s;
}

.email-input .validation-icon path {
    stroke-dasharray: 80;
    stroke-dashoffset: var(--path, 170);
    transition: stroke-dashoffset 0.5s ease var(--path-delay, 0.3s);
}

.email-input .validation-icon polyline {
    stroke-dasharray: 12;
    stroke-dashoffset: var(--tick, 12);
    transition: stroke-dashoffset 0.45s ease var(--tick-delay, 0s);
}

.email-input:hover {
    --bc: var(--border-hover);
}

.email-input:focus-within {
    --bc: var(--border-focus);
    --i: var(--icon-focus);
}

/*.email-input:focus-within input {
    box-shadow: 0 1px 6px -1px var(--shadow-focus);
}*/

/*.email-input:not(.valid) input:not(:-moz-placeholder-shown) {
    border-color: #f00 !important; /* Not Valid Red Border 
}*/

/*.email-input:not(.valid) input:not(:-ms-input-placeholder) {
    border-color: #f00 !important; /* Not Valid Red Border
}*/

/*.email-input:not(.valid) input:not(:placeholder-shown) {
    border-color: #f00 !important; /* Not Valid Red Border
}*/

.email-input:not(.valid) input:not(:-moz-placeholder-shown):not(:focus) + svg {
    --i: var(--icon-invalid);
}

.email-input:not(.valid) input:not(:-ms-input-placeholder):not(:focus) + svg {
    --i: var(--icon-invalid);
}

.email-input:not(.valid) input:not(:placeholder-shown) + svg {
    --i: var(--icon-invalid);
}

.email-input:not(.valid) input:not(:placeholder-shown):not(:focus) + svg {
    --i: var(--icon-invalid);
}


/* MHT CUSTOM INPUT BEGIN */
/* Stile quando l'input ha il focus ma non ha alcun valore di input */
.email-input:not(.valid) input:not(:placeholder-shown) + svg {
    --i: var(--icon-invalid);
}
/* MHT CUSTOM INPUT END */

.email-input.valid {
    --i: var(--icon-valid);
    --path: 132;
    --path-delay: 0s;
    --tick: 0;
    --tick-delay: .3s;
}


/*** WARNING TEXT BEGIN ***/
.warning-text {
/*    color: var(--e-global-color-accent);*/
/*   color: #d90429;*/
    color: red;
    font-size: 0.85rem;
    position: absolute;
    left: 10px;
    bottom: -20px;
}
/*** WARNING TEXT END ***/
/*** EMAIL VALIDATION END ***/