.alert-custom{
  background-color: #ECF4F9;
  color: #076D9C;
}

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

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

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

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

.paymentez-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_paymentez] .paymentez-form .cvc-container, [enabled_installments_paymentez] .paymentez-form .expiry-container, [enabled_installments_paymentez] .paymentez-form .installments-wrapper {
  width: 33%
}

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

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

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

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

.paymentez-form .cellphone-wrapper:focus {
  outline: -webkit-focus-ring-color auto 0px;
  box-shadow: none !important;
}


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

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

.paymentez-form input:focus {
  box-shadow: none !important;
  border: 1px solid #016D38 !important;
}

/* .paymentez-form input:focus::-webkit-input-placeholder {
  font-size: .75em;
  position: relative;
  display: block;
  top: -23px;
  transition: 0.2s ease-out;
  color: #016D38;
  background-color: white;
  z-index:900;
} */

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

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

.paymentez_dialog_error, .paymentez_dialog_info, .paymentez_dialog_success, .paymentez_dialog_warning {
  margin: 10px 0;
  padding: 6px;
  font-size: 14px
}

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

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

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

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

.paymentez_dialog_error i, .paymentez_dialog_info i, .paymentez_dialog_success i, .paymentez_dialog_warning i {
  margin: 2px 2px;
  font-size: 1em;
  vertical-align: middle
}

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

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

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

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

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

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

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

.paymentez-form .expiry-wrapper .expiry {
  width: 100%;
  padding-left: 10px;
  height: 60px !important;
}

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

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

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

.paymentez-form .icon {
  position: absolute;
  display: none;
  color: #016D38;
  width: 24px;
  height: 17px;
  left: 8px;
  top: 10px;
  pointer-events: none
}

.paymentez-form .icon::before {
  content: attr(placeholder);
}

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

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

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

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

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

.paymentez-form .card-number-wrapper, .paymentez-form .cellphone-wrapper, .paymentez-form .cvc-wrapper, .paymentez-form .email-wrapper, .paymentez-form .expiry-wrapper, .paymentez-form .fiscal-number-wrapper, .paymentez-form .installments-wrapper, .paymentez-form .name-wrapper, .paymentez-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
}

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

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

.paymentez-form input, .paymentez-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
}

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

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

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

.paymentez-form input:focus, .paymentez-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)
}

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

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

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

.paymentez-form input.card-number, .paymentez-form input.cellphone, .paymentez-form input.cvc, .paymentez-form input.email, .paymentez-form input.fiscal-number, .paymentez-form input.name, .paymentez-form input.nip, .paymentez-form input.validation-option {
  padding-left: 10px;
  padding-right: 5px;
  width: 100%;
  font-family: 'Roboto Condensed';
  font-weight: normal;
  height: 60px !important;
}

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

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

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

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

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

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

@media screen and (max-width: 600px) {
  .paymentez-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
}

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

[paymentez_version_1] hr {
  display: none
}

[paymentez_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
}

[paymentez_version_1] .paymentez-button-popup.cancel {
  display: none
}

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

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

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

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

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

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

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

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

[paymentez_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)
}

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

[paymentez_version_2] .header-company-name, [paymentez_version_2] .header-description, [paymentez_version_2] .logo-comercio-paymentez, [paymentez_version_2] .paymentez-form .icon, [paymentez_version_2] .paymentez_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: "*"
}