/*** Rev 2.1.1
/*** MHT STYLES CUSTOMIZATION ***/

/*** 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;
}

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: 0 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 */
.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 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1rem 1fr auto 5rem auto 5rem 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"
        "payment-method-heading payment-method-heading payment-method-heading payment-method-heading"
        "payment payment payment payment"
        "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"
            "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;
    }

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

    .ach-payment {
        grid-template-areas:
            "ownership-type ownership-type account-type account-type"
            "ach-payment-amount ach-payment-amount ach-payment-amount ach-payment-amount"
            "ach-first-name ach-first-name ach-last-name ach-last-name"
            "company-name company-name company-name company-name"
            "account-number account-number routing-number routing-number" !important;
        grid-area: payment-method;
    }

    .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;
}

.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;
}

.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 overlap */
.ach-payment.inactive, .cc-payment.inactive {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none; /* Ensure hidden section does not interfere with interaction */
}

.ach-payment {
    grid-template-areas:
        "ownership-type account-type ach-payment-amount ach-payment-amount"
        "ach-first-name ach-last-name company-name company-name"
        "account-number account-number routing-number routing-number";
    grid-area: payment-method;
}

.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 {
    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;
}   

.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;
}*/

/* Default transition setup for elements */
#payment-method-heading,
#payment,
#billing-address-heading,
#billing-address,
#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: 15%;
    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 ***/



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


#cardholder-name, #card-number, #expiration-date, #cvv, #cc-postal-code {
    /*color: var(--e-global-color-primary);
    font-family: roboto, verdana, sans-serif;
    font-size: 1rem;
    font-weight: 400;*/
    padding: 0 1rem;
    background-color: var(--e-global-color-white);
    border: 2px solid #dedede;
    border-radius: 0.75rem;
    transition: none;
    box-sizing: border-box;
    transition: border 0.3s ease, box-shadow 0.3s ease;
    margin: 0 0.65rem;
    outline: none;
    translate: 0 1rem;
}

/*
#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);
    }
}
*/

.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);
}





















/*.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 ***/











/*** 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 ***/