.modal {
  font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif; }

.modal__overlay {
  position: fixed;
  z-index: 9999999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(https://cdn.fedapay.com/img/logo-finance-white-animated.svg) no-repeat center rgba(0, 0, 0, 0.6);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }

.modal__container {
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

.modal__close {
  position: absolute;
  right: -15px;
  top: -15px;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  background: #fff;
  font-size: 1rem;
  border-radius: 50rem;
  height: 2rem;
  width: 2rem;
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
          box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  text-align: center;
  line-height: 1; }

.modal__close:before {
  content: "\\2715"; }

.modal__iframe {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%; }

.x-fedapay-checkout-button {
  color: #ffffff;
  font-family: SFProText, Arial, "Helvetica Neue", sans-serif;
  font-size: .9rem;
  line-height: 1.5;
  font-weight: bold;
  background: #1084fe;
  overflow: hidden;
  display: inline-block;
  visibility: visible !important;
  -webkit-font-smoothing: antialiased;
  border: 2px solid #1084fe;
  padding: .375rem .75rem;
  text-decoration: none;
  border-radius: .25rem;
  -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
  -ms-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
  -o-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
  -webkit-appearance: button;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  cursor: pointer; }

.x-fedapay-checkout-button:hover {
  color: #fff;
  background-color: #0171e7;
  border-color: #016bda; }

.x-fedapay-checkout-button:active {
  color: #fff;
  background-color: #016bda;
  border-color: #0165cd; }

/**************************\
Demo Animation Style
\**************************/
@-webkit-keyframes mmfadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@-o-keyframes mmfadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes mmfadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes mmfadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@-o-keyframes mmfadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes mmfadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@-webkit-keyframes mmslideIn {
  from {
    -webkit-transform: translateY(15%);
            transform: translateY(15%); }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0); } }

@-o-keyframes mmslideIn {
  from {
    -o-transform: translateY(15%);
       transform: translateY(15%); }
  to {
    -o-transform: translateY(0);
       transform: translateY(0); } }

@keyframes mmslideIn {
  from {
    -webkit-transform: translateY(15%);
         -o-transform: translateY(15%);
            transform: translateY(15%); }
  to {
    -webkit-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0); } }

@-webkit-keyframes mmslideOut {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  to {
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%); } }

@-o-keyframes mmslideOut {
  from {
    -o-transform: translateY(0);
       transform: translateY(0); }
  to {
    -o-transform: translateY(-10%);
       transform: translateY(-10%); } }

@keyframes mmslideOut {
  from {
    -webkit-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0); }
  to {
    -webkit-transform: translateY(-10%);
         -o-transform: translateY(-10%);
            transform: translateY(-10%); } }

.micromodal-slide {
  display: none; }

.micromodal-slide.is-open {
  display: block; }

.micromodal-slide[aria-hidden="false"] .modal__overlay {
  -webkit-animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
       -o-animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1); }

.micromodal-slide[aria-hidden="false"] .modal__container {
  -webkit-animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
       -o-animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1); }

.micromodal-slide[aria-hidden="true"] .modal__overlay {
  -webkit-animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
       -o-animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1); }

.micromodal-slide[aria-hidden="true"] .modal__container {
  -webkit-animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
       -o-animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
          animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1); }

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform; }