.payment-button-popup {
    background-color: #71767b;
    border-radius: 4px;
    height: 38px;
    color: #fff;
    padding: 0 15px;
    border: 1px solid #ced4da;
    margin: 0 5px;
    cursor: pointer
}

.payment-button-popup:first-child {
    margin-left: 0
}

.payment-button-popup:last-child {
    margin-right: 0
}

.payment-button-popup.sucess {
    background-color: #00bf84
}

.payment-button-popup.hidden {
    display: none
}

.button-popup {
    text-align: right;
    margin-bottom: -5px;
    margin-top: 15px
}

/* body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}

h1,
h2 {
    margin: 0;
    text-align: center
}

hr {
    height: 1px;
    color: #5b5b65;
    background-color: #5b5b65;
    border: none
} */

.recaptcha-google {
    width: 100%;
    margin-left: -7px
}

.header-company-name {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    color: #222;
    padding-bottom: 6px;
    text-shadow: 0 1px 0 #fff
}

.header-description {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    color: #5b5b65;
    text-shadow: 0 1px 0 #fff
}

.panel {
    margin: 0 auto;
    max-width: 450px;
    background-color: #f5f5f7;
    border: 1px solid #ddd;
    padding: 20px;
    display: block;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

/* .btn:hover {
    cursor: pointer
}

.btn:disabled,
.btn[disabled] {
    opacity: .65;
    cursor: not-allowed
} */

[enabled_installments_payment] .payment-form .cvc-container,
[enabled_installments_payment] .payment-form .expiry-container,
[enabled_installments_payment] .payment-form .installments-wrapper {
    width: 33%
}

.payment-form input.card-number {
    padding-right: 48px
}

.payment-form .card-number-wrapper .card-type-icon {
    height: 21px;
    width: 32px;
    position: absolute;
    display: block;
    right: 8px;
    top: 7px;
    pointer-events: none;
    background-position-x: center;
    background-repeat: no-repeat
}

.payment-form .cellphone-container {
    width: 50%;
    float: right
}

.payment-form .cellphone-wrapper {
    box-sizing: border-box;
    margin-left: 5px
}

.payment-form .cellphone-wrapper .cellphone {
    display: block;
    width: 100%
}

.payment-form .cvc-container {
    width: 50%;
    float: right
}

.payment-form .cvc-wrapper {
    box-sizing: border-box;
    margin-left: 5px
}

.payment-form .cvc-wrapper .cvc {
    display: block;
    width: 100%
}

.payment_dialog_error,
.payment_dialog_info,
.payment_dialog_success,
.payment_dialog_warning {
    margin: 10px 0;
    padding: 6px;
    font-size: 14px
}

.payment_dialog_info {
    color: #00529b;
    background-color: #bde5f8
}

.payment_dialog_success {
    color: #4f8a10;
    background-color: #dff2bf
}

.payment_dialog_warning {
    color: #9f6000;
    background-color: #feefb3
}

.payment_dialog_error {
    color: #d8000c;
    background-color: #ffd2d2
}

.payment_dialog_error i,
.payment_dialog_info i,
.payment_dialog_success i,
.payment_dialog_warning i {
    margin: 2px 2px;
    font-size: 1em;
    vertical-align: middle
}

.payment-form .validation-message,
.payment-form .warning-message {
    text-align: center;
    display: inline-block;
    width: 100%
}

.payment-form .email-container {
    width: 50%;
    float: left
}

.payment-form .email-wrapper {
    box-sizing: border-box;
    margin-right: 5px
}

.payment-form .email-wrapper .email {
    display: block;
    width: 100%
}

.payment-form .expiry-container {
    width: 50%;
    float: left
}

.payment-form .expiry-wrapper {
    box-sizing: border-box;
    margin-right: 5px
}

.payment-form .expiry-wrapper .expiry {
    display: block;
    width: 100%
}

.payment-form .expiry-wrapper .expiry {
    width: 100%;
    padding-left: 38px
}

.payment-form .expiry-wrapper .expiry-month,
.payment-form .expiry-wrapper .expiry-year {
    border-radius: 4px;
    display: inline-block;
    width: 48%;
    text-align-last: center
}

.payment-form .expiry-wrapper .expiry-month {
    padding-left: 38px
}

.payment-form .expiry-wrapper .expiry-year {
    margin-left: 4%
}

.payment-form .icon {
    position: absolute;
    display: block;
    width: 24px;
    height: 17px;
    left: 8px;
    top: 10px;
    pointer-events: none
}

.payment-form .icon.right {
    right: 8px;
    left: auto
}

.payment-form .icon.popup {
    cursor: pointer;
    pointer-events: auto
}

.payment-form .icon .svg {
    fill: #888
}

.payment-form .icon.popup .svg {
    fill: #aaa!important
}

.payment-form .card-number-wrapper,
.payment-form .cvc-wrapper,
.payment-form .email-container,
.payment-form .fiscal-number-wrapper,
.payment-form .installments-wrapper,
.payment-form .name-wrapper,
.payment-form .nip-wrapper {
    margin-bottom: 10px
}

.payment-form .card-number-wrapper,
.payment-form .cellphone-wrapper,
.payment-form .cvc-wrapper,
.payment-form .email-wrapper,
.payment-form .expiry-wrapper,
.payment-form .fiscal-number-wrapper,
.payment-form .installments-wrapper,
.payment-form .name-wrapper,
.payment-form .nip-wrapper {
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .7);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .7);
    -ms-box-shadow: 0 1px 0 rgba(255, 255, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .7);
    -o-box-shadow: 0 1px 0 rgba(255, 255, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .7);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .7);
    position: relative
}

.payment-form .card-number-wrapper,
.payment-form .cellphone-container,
.payment-form .cvc-container,
.payment-form .email-container,
.payment-form .expiry-container,
.payment-form .fiscal-number-wrapper,
.payment-form .installments-wrapper,
.payment-form .name-wrapper,
.payment-form .nip-wrapper,
.payment-form .otp-wrapper {
    display: inline-block
}

.payment-form::after {
    content: ' ';
    display: table;
    clear: both
}

.payment-form input,
.payment-form select {
    color: #676767;
    font-size: 15px;
    font-weight: 300;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    height: 36px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    box-shadow: none;
    background-color: #fdfdfd;
    box-sizing: border-box;
    padding: 0;
    -webkit-transition: border-color .15s linear, box-shadow .15s linear;
    -moz-transition: border-color .15s linear, box-shadow .15s linear;
    -ms-transition: border-color .15s linear, box-shadow .15s linear;
    -o-transition: border-color .15s linear, box-shadow .15s linear;
    transition: border-color .15s linear, box-shadow .15s linear
}

.payment-form select {
    -moz-appearance: none;
    -webkit-appearance: none;
    text-indent: .01px;
    padding-right: 5px;
    text-overflow: '';
    width: 100%
}

.payment-form input[disabled],
.payment-form select[disabled] {
    background-color: #eee;
    color: #555
}

.payment-form select option[hidden] {
    color: #aba9a9
}

.payment-form input:focus,
.payment-form select:focus {
    background-color: #fff;
    outline: 0;
    border-color: #66afe9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
}

.payment-form input[readonly=readonly]:not([disabled]),
.payment-form input[readonly]:not([disabled]) {
    background-color: #fff;
    cursor: pointer
}

.payment-form .has-error input,
.payment-form .has-error input:focus,
.payment-form .has-error select,
.payment-form .has-error select:focus {
    border-color: #f64b2f!important;
    box-shadow: none
}

.payment-form .card-number-wrapper,
.payment-form .fiscal-number-wrapper,
.payment-form .installments-wrapper,
.payment-form .name-wrapper {
    width: 100%
}

.payment-form input.card-number,
.payment-form input.cellphone,
.payment-form input.cvc,
.payment-form input.email,
.payment-form input.fiscal-number,
.payment-form input.name,
.payment-form input.nip,
.payment-form input.validation-option {
    padding-left: 38px;
    padding-right: 5px;
    width: 100%
}

.payment-form .nip-wrapper {
    width: 50%
}

.payment-form .nip-wrapper .nip {
    display: block;
    width: 100%;
    -webkit-text-security: disc
}

.payment-form .nip-wrapper .nip:read-only {
    background-color: #eee!important
}

.payment-form .nip-wrapper .nip:-moz-read-only {
    background-color: #eee!important
}

@media screen and (max-width:600px) {
    .payment-form .nip-wrapper {
        width: 100%
    }
}

.payment-form .otp-wrapper {
    width: 50%
}

@media screen and (max-width:600px) {
    .payment-form .otp-wrapper {
        width: 100%
    }
}

.otp-wrapper .otp-label {
    display: inline-block;
    color: #28a745;
    cursor: pointer;
    position: relative;
    padding: 5px 15px 5px 20px;
    font-size: 1em;
    border-radius: 5px;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease
}

.otp-wrapper .otp-label:hover {
    background: #d4edda
}

.otp-wrapper .otp-label:before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    position: absolute;
    left: 0;
    background: 0 0;
    border: 2px solid
}

.otp-wrapper .otp,
.otp-wrapper .otp:checked {
    display: none
}

.otp-wrapper .otp:checked+.otp-label,
.otp-wrapper .otp:checked+.otp-label:before {
    color: #28a745;
    content: "x";
    border-bottom: 2px solid #28a745
}

.payment-form {
    font-family: Nunito, sans-serif!important;
    font-size: 15px;
    text-align: center
}

[payment_version_1] hr {
    display: none
}

[payment_version_1] .btn {
    background: #8cc541;
    background: -moz-linear-gradient(top, rgba(140, 197, 65, 1) 0, rgba(20, 167, 81, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(140, 197, 65, 1) 0, rgba(20, 167, 81, 1) 100%);
    background: linear-gradient(to bottom, rgba(140, 197, 65, 1) 0, rgba(20, 167, 81, 1) 100%);
    color: #fff;
    display: block;
    width: 100%;
    border: 1px solid rgba(46, 86, 153, .0980392);
    border-bottom-color: rgba(46, 86, 153, .4);
    border-top: 0;
    border-radius: 4px;
    font-size: 17px;
    text-shadow: rgba(46, 86, 153, .298039) 0 -1px 0;
    line-height: 34px;
    -webkit-font-smoothing: antialiased;
    font-weight: 700;
    display: block;
    margin-top: 20px
}

[payment_version_1] .payment-button-popup.cancel {
    display: none
}

[payment_version_1] .header-credit-card {
    display: none
}

.payment-form.dark .icon .svg {
    fill: rgba(28, 66, 3, .26)
}

.payment-form.rebus {
    font-family: Nunito, sans-serif
}

.payment-form input,
.payment-form select {
    font-family: Nunito, sans-serif
}

[payment_version_2].panel {
    background-color: #fff
}

[payment_version_2] .payment-form .expiry-wrapper .expiry,
[payment_version_2] .payment-form .expiry-wrapper .expiry-month,
[payment_version_2] .payment-form .expiry-wrapper .expiry-year,
[payment_version_2] .payment-form input.card-number,
[payment_version_2] .payment-form input.cellphone,
[payment_version_2] .payment-form input.cvc,
[payment_version_2] .payment-form input.email,
[payment_version_2] .payment-form input.fiscal-number,
[payment_version_2] .payment-form input.name,
[payment_version_2] .payment-form input.nip,
[payment_version_2] .payment-form input.validation-option,
[payment_version_2] .payment-form select {
    text-align-last: left;
    border: 1px solid #ced4da;
    padding-left: 10px;
    padding-right: 10px
}

[payment_version_2] .panel {
    background: #fff;
    border-color: #ced4da
}

[payment_version_2] .total-hr {
    margin-left: -20px;
    margin-right: -20px;
    background-color: #ced4da;
    color: #ced4da;
    display: block!important
}

[payment_version_2] .total-hr--down {
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12)
}

[payment_version_2] .header-credit-card {
    font-size: 1.5rem;
    text-align: left;
    margin-bottom: 20px
}

[payment_version_2] .header-company-name,
[payment_version_2] .header-description,
[payment_version_2] .logo-comercio-payment,
[payment_version_2] .payment-form .icon,
[payment_version_2] .payment_logo_popup_checkout {
    display: none
}

.keyboard-wrapper {
    display: inline-block;
    position: relative;
    width: 80%
}

.key-container {
    display: inline-block;
    position: relative;
    width: 33.3%
}

.clean-container button,
.key-container button {
    font-size: 15px;
    padding: 4px 0
}

.clean-container {
    display: inline-block;
    position: relative;
    width: 66.6%
}

.clean,
.key {
    color: #fff;
    background-color: #17a2b8;
    border-color: #fff;
    border-radius: 4px;
    width: 100%
}

.clean:hover,
.key:hover {
    background-color: #138496
}

.keyboard-wrapper:hover .key span {
    visibility: hidden
}

.keyboard-wrapper:hover .key:after {
    content: "*"
}