/* Fix Paybox Firefox */
@-moz-document url-prefix() {
  .btn-api {
      background: url(../img/pagar-hover.png?v1) no-repeat center center;
      background-size: auto;
      color: #fff;
      height: 96px;
      width: 215px;
      border: solid 1px #00000000;
      font-size: 15px;
      border-radius: 0px;
      cursor: pointer;
      background-size: contain;
      outline: 0;
  }
}

@media(max-width: 600px) {
  .demo-close {
      margin-top: 1em !important;
  }
  .btn-api {
    zoom: 80% !important;
}
}
.language_es {
  background: url(../img/pagar-hover.png?v1) no-repeat center center;
  height: 96px;
  width: 215px;
  border: none;
  cursor: pointer;
  background-size: contain;
  outline: 0;
}

.language_us {
  background: url(../img/pagar-hover_us.png) no-repeat center center;
  height: 96px;
  width: 215px;
  border: none;
  cursor: pointer;
  background-size: contain;
  outline: 0;
}

.language_es:hover {
  background: url(../img/pagar.png?v1) no-repeat center center !important;
  height: 96px;
  width: 215px;
  border: none;
  cursor: pointer;
  background-size: contain !important;
  outline: 0;
}

.language_us:hover {
  background: url(../img/pagar_us.png) no-repeat center center !important;
  height: 96px;
  width: 215px;
  border: none;
  cursor: pointer;
  background-size: contain !important;
  outline: 0;
}

#paybox_modal .modal-content {
  text-align: center;
  width: 660px;
  height: 700px;
}
.embed-responsive {
  height: 680px;
}

#paybox_modal #iframePaybox {
  height: 100vh;
  max-height: 750px;
  width: 570px;
  max-width: 100%;
  min-height: 752px;
  background: #ffffff !important;
  /* border-radius: 6px !important; */
  /* box-shadow: 1px 1px 1px #666; */
  box-shadow: -1px 1px 40px rgba(47, 52, 68, 0.14);
  border-radius: 20px;
  border: 1px solid #DADADA;
  /* height: 100vh; */
  margin-top: 1em;
}

#paybox_modal .modal-header {
  border-bottom: 0px !important;
  min-height: 0px !important;
  padding-bottom: 0px;
}

#paybox_modal .modal-body {
  max-height: 700px;
  padding: 15px;
  outline: 0px;
  padding-left: 50px;
  padding-right: 50px;
}

/*
Device = Laptops, Desktops
Screen = B/w 1025px to 1280px
*/

@media (max-width: 1280px) {

  .btn-api {
      zoom:100% !important;
  }
  .modal {
      zoom:80%;
  }
  .input-group {
      zoom: 120%;
  }
}

@media (max-width: 320px) {
.btn-api {
    zoom: 60% !important;
}
}
@media  (min-width: 525px) {
#iframePaybox {
  height: 100vh !important;
  min-height: 752px !important;
}
}

@media (max-width: 480px) {
  .demo-close {
    top: 1em !important;
    right:  1em !important;
    /* margin-top: 7em !important; */
  }

#iframePaybox {
  /* height: 750px !important; */
  /* margin-top: 7em !important; */
}
}

@media (min-width: 1280px) {
  .demo-close {
    top: 1em !important;
    right:  1em !important;
  }

#iframePaybox {
  height: 750px !important;
  /* margin-top: 4em !important; */
}
}

/* @media (min-width: 480px) { */
  /* .demo-close {
    top: 1em !important;
    right:  1em !important;
  } */

/* #iframePaybox {
  margin-top: 4em !important;
}
} */

@media  (max-width: 360px) {
  .demo-close {
    top: 0em !important;
    right: 0em !important;
    /* margin-top: 3em !important; */
  }
#iframePaybox {
  /* margin-top: 0em; */

  /* height: 750px !important; */
}
#paybox_modal #iframePaybox {
  /* margin-top: 3em !important; */

}

#paybox_modal #iframePaybox {
  /* margin-top: 0em; */
}
}
@media (max-width: 540px) {


  @-moz-document url-prefix() {
    .paybox_modal__content {
        padding-left: 1.0rem;
        background: #fff;
        background-clip: padding-box;
        border-radius: 8px;
        padding-right: 1.0rem;
        padding-top: 1.0rem;
        padding-bottom: 1.0rem;
        position: fixed !important;
        top: 0%;
        left: 0%;
        transform: translate(0%, 5%);
        margin: 0 auto;
    }
  }
  .demo-close {
    top: 0em !important;
    right: 0em !important;
  }
}


.paybox_modal {
  will-change: visibility, opacity;
  display: flex;
  /* align-items: center; */
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 99999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  /* transition-delay: $modal-delay; */
}
.paybox_modal--active {
  
  visibility: visible;
  opacity: 1;
}
.paybox_modal--align-top {
  align-items: flex-start;
}
.paybox_modal__bg {
  background: rgba(33, 33, 33, 0.3);
}

.paybox_modal__content {
  position: relative !important;
  padding: 0px !important;
  background: transparent;
  background-clip: padding-box !important;
  border-radius: 6px !important;
  padding-top: 0rem !important;
  padding-bottom: .0rem !important;
  /* box-shadow: 2px 2px 2px #666; */
  }
.paybox_modal__close {
  z-index: 1100;
  cursor: pointer;
}

#paybox_modal__temp {
  display: none !important;
}


@media (max-width: 640px) {
  .demo-btns .paybox_modal__trigger {
    margin-bottom: 0.8rem;
  }
}
.demo-close {
  position: absolute;
  top: 1em;
  right: 1em;
  margin: 0.5rem;
  padding: 0.5rem;
  margin-top: 1em;
  text-decoration: none;
}
.demo-close svg {
  width: 15px;
  fill: black;
  pointer-events: none;
  vertical-align: top;
  padding-top: 2px;
}
.paybox_modal__close demo-close {
  width: 5%;
  float: right;
  z-index: 99999;
}

iframe#iframePaybox {
margin-bottom: 0px !important;
}


#iv-container {
z-index: 999999 !important;
}

.paybox-button-card{
    width:210px;
    padding:0;
    border:none;
    background:transparent;
    cursor:pointer;
}

.paybox-button-top{
    height:52px;
    border:2px solid #1976F3;
    border-radius:4px;
    background:#1976F3;
    display:flex;
    align-items:center;
    padding:0 18px;
    gap:10px;
}

.paybox-logo{
    width:34px;
    height:34px;
    margin-left:1px;
    margin-top:2px;
    background:url(../img/logo-icon1.png) center/contain no-repeat;
    flex:0 0 55px;
}

.paybox-text::before{
    content: attr(data-text);
    color:#ffffff;
    font-size:16px;
    font-weight:600;
    font-family:Arial,sans-serif;
}

.paybox-cards{
    display:block;
    margin-top:5px;
    width:100%;
    height:24px;
    background:url(../img/v-m.png) center/contain no-repeat;
}

.paybox-button-card:hover .paybox-button-top{
    background:#ffffff;
}

.paybox-button-card:hover .paybox-logo{
    width:47px;
    height:47px;
    background:url(../img/logo.png) center/contain no-repeat;
}

.paybox-button-card:hover .paybox-text::before{
    color:#1976F3;
}