/* microWeb CSS preprocessor v.1.21 (2025120301) */
.braintree-form-container { display: flex; background-color: #fff; justify-content: center; align-items: center; height: 100%; flex-direction: column; border: 1em solid #fff; box-sizing: border-box; position: relative; }
.cardinfo-wrapper { display: flex; justify-content: space-around; }
.card-shape { border-radius: 6px; padding: 2em 2em 1em; }
#braintree-form { background-color: #FFF; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12); padding: 3em 2em; width: 20em; margin-bottom: 2em; transition: all 600ms cubic-bezier(.20, 1.3, .7, 1); animation: cardIntro 500ms cubic-bezier(.20, 1.3, .7, 1); z-index: 1; }
#braintree-form:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06); }
#braintree-form.visa {  border-radius: 6px; padding: 2em 2em 1em;  padding: 2em 1.5em 1em;  color: #fff; background-color: #0D4AA2; }
#braintree-form.master-card {  border-radius: 6px; padding: 2em 2em 1em;  padding: 2em 1.5em 1em;  color: #fff; background-color: #363636; background: linear-gradient(115deg,#d82332, #d82332 50%, #f1ad3d 50%, #f1ad3d); }
#braintree-form.maestro {  border-radius: 6px; padding: 2em 2em 1em;  padding: 2em 1.5em 1em;  color: #fff; background-color: #363636; background: linear-gradient(115deg,#009ddd, #009ddd 50%, #ed1c2e 50%, #ed1c2e); }
#braintree-form.american-express {  border-radius: 6px; padding: 2em 2em 1em;  padding: 2em 1.5em 1em;  color: #fff; background-color: #007CC3; }
#braintree-form.discover {  border-radius: 6px; padding: 2em 2em 1em;  padding: 2em 1.5em 1em;  color: #fff; background-color: #ff6000; background: linear-gradient(#d14310, #f7961e); }
#braintree-form.unionpay,#braintree-form.jcb,#braintree-form.diners-club {  border-radius: 6px; padding: 2em 2em 1em;  padding: 2em 1.5em 1em;  color: #fff; background-color: #363636; }
.cardinfo-label { display: block; font-size: 12px; margin-bottom: 0.5em; text-transform: uppercase; }
.cardinfo-exp-date { margin-right: 1em; width: 100%; }
.cardinfo-card-holder { width: 100%; }
.cardinfo-card-holder input { color: #282c37; font-size:16px; transition: color 0.1s; line-height: 2; width: 100%; }
.cardinfo-cvv { width: 100%; }
#btpay_button { cursor: pointer; width: 16em; font-size: 15px; border: 0; padding: 1.2em 1em; color: #fff; background: #282c37; border-radius: 4px; z-index: 0; transform: translateY(-25px); transition: all 500ms cubic-bezier(.20, 1.3, .7, 1); opacity: 0; -webkit-appearance: none; width: 100%; }
#btpay_button:hover { background: #303442; }
#btpay_button:active { animation: cardIntro 200ms cubic-bezier(.20, 1.3, .7, 1); }
#btpay_button.show-button { transform: translateY(0); opacity: 1; }
.cardinfo-card-number { position: relative; }
#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: 4px; background-position: -100px 0; background-repeat: no-repeat; margin-bottom: 1em; }
#card-image.visa { background-position: 0 -398px; }
#card-image.master-card { background-position: 0 -281px; }
#card-image.american-express { background-position: 0 -370px; }
#card-image.discover { background-position: 0 -163px; }
#card-image.maestro { background-position: 0 -251px; }
#card-image.jcb { background-position: 0 -221px; }
#card-image.diners-club { background-position: 0 -133px; }
.input-wrapper { border-radius: 2px; background: rgba(255, 255, 255, 0.86); height: 2.75em; border: 1px solid #eee; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06); padding: 5px 10px; margin-bottom: 1em; }
.cardinfo-card-holder,
.cardinfo-card-number,
.cardinfo-exp-date,
.cardinfo-cvv { transition: transform 0.3s; }
.braintree-hosted-fields-focused { border-color: #5db6e8; }
.braintree-hosted-fields-invalid { border-color: #E53A40; animation: shake 500ms cubic-bezier(.20, 1.3, .7, 1) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; }
@media only screen and (max-width:767px) {
.braintree-form-container { border: none; }
.card-shape { padding: 2em 1.5em 1em; }
#braintree-form { box-sizing: border-box; padding: 2em 2em; width: 100%; }
}
@keyframes cardIntro {
    0% {
        transform: scale(0.8) translate(0, 0);
        opacity: 0;
    }
    100% {
        transform: scale(1) translate(0, 0);
        opacity: 1;
    }
}
@keyframes shake {
    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%,
    80% {
        transform: translate3d(1px, 0, 0);
    }
    30%,
    50%,
    70% {
        transform: translate3d(-3px, 0, 0);
    }
    40%,
    60% {
        transform: translate3d(3px, 0, 0);
    }
}