.styled-file-input{
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
/**
 * Extracted from: SweetAlert
 * Modified by: Istiak Tridip
 */
.success-checkmark {
  width: 80px;
  height: 115px;
  margin: 0 auto;
}
.success-checkmark .check-icon {
  width: 80px;
  height: 80px;
  position: relative;
  border-radius: 50%;
  box-sizing: content-box;
  border: 4px solid #4CAF50;
}
.success-checkmark .check-icon::before {
  top: 3px;
  left: -2px;
  width: 30px;
  transform-origin: 100% 50%;
  border-radius: 100px 0 0 100px;
}
.success-checkmark .check-icon::after {
  top: 0;
  left: 30px;
  width: 60px;
  transform-origin: 0 50%;
  border-radius: 0 100px 100px 0;
  animation: rotate-circle 4.25s ease-in;
}
.success-checkmark .check-icon::before, .success-checkmark .check-icon::after {
  content: "";
  height: 100px;
  position: absolute;
  /*background: #FFFFFF;*/
  transform: rotate(-45deg);
}
.success-checkmark .check-icon .icon-line {
  height: 5px;
  background-color: #4CAF50;
  display: block;
  border-radius: 2px;
  position: absolute;
  z-index: 10;
}
.success-checkmark .check-icon .icon-line.line-tip {
  top: 46px;
  left: 14px;
  width: 25px;
  transform: rotate(45deg);
  animation: icon-line-tip 0.75s;
}
.success-checkmark .check-icon .icon-line.line-long {
  top: 38px;
  right: 8px;
  width: 47px;
  transform: rotate(-45deg);
  animation: icon-line-long 0.75s;
}
.success-checkmark .check-icon .icon-circle {
  top: -4px;
  left: -4px;
  z-index: 10;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: absolute;
  box-sizing: content-box;
  border: 4px solid rgba(76, 175, 80, 0.5);
}
.success-checkmark .check-icon .icon-fix {
  top: 8px;
  width: 5px;
  left: 26px;
  z-index: 1;
  height: 85px;
  position: absolute;
  transform: rotate(-45deg);
  /*background-color: #FFFFFF;*/
}

@keyframes rotate-circle {
  0% {
    transform: rotate(-45deg);
  }
  5% {
    transform: rotate(-45deg);
  }
  12% {
    transform: rotate(-405deg);
  }
  100% {
    transform: rotate(-405deg);
  }
}
@keyframes icon-line-tip {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }
  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }
  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}
@keyframes icon-line-long {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }
  84% {
    width: 55px;
    right: 0px;
    top: 35px;
  }
  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}

.rsv-loader {
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-right-color: inherit;
  animation: l15 1s infinite linear;
}
.rsv-loader::before,
.rsv-loader::after {    
  content: "";
  grid-area: 1/1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
  animation: l15 2s infinite;
}
.rsv-loader::after {
  margin: 8px;
  animation-duration: 3s;
}
@keyframes l15{ 
  100%{transform: rotate(1turn)}
}

.bar-loader {
  margin: 100px auto;
  width: 200px;
  height: 100px;
  text-align: center;
  font-size: 10px;
}
.bar-loader > div {
  background-color: rgba(178,158,118,0.6);
  background-color: rgba(255,255,255,0.5);
  height: 100%;
  width: 18px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.bar-loader .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.bar-loader .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.bar-loader .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.bar-loader .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

.dynamic-file:not(.loading-file) .rsv-loader{
    display:none;
}
.dynamic-file.loading-file span, .dynamic-file.loading-file i{
    display:none;
}
.bg-hero, .bg-full{
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.bg-hero{
  position:relative;
}
.logo{
    vertical-align: middle;
    max-width: 50%;
    max-height: 30vh;
    display: inline-block;
    transition: all .5s;
}
/*
.bg-wallet-hero::before{
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.1);
  backdrop-filter: blur(1px);

}*/

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400&display=swap");
/** Theme **/
/** Dimensions **/
/** Font Sizes **/
/** mixins **/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.app{
  /*margin-bottom: 80px!important;*/
}
.modal{
  backdrop-filter: blur(3px) brightness(60%);
}
.modal-dialog-end{
  display: flex;
  min-height: 100%;
  align-items: end;
  margin: 0;
}
.modal-dialog-end .modal-content{
  border-width: 0;
  border-radius: 0;
}
.modal-dialog-end .modal-header{
  justify-content: center;
}
.bg-hero{
  position: relative;
  z-index: -1;
}
.bg-hero::before{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  content: " ";
  z-index: 0;
  background-image: linear-gradient(to bottom,rgba(0,0,0,0) 0, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0.8) 100%);
}
.wallet-container, .coupons-container{
  width: 100vw;
  height: 100lvh;
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  flex-direction: column;
}
.coupons-wrapper{
  width: calc(100% - (2 * 0.8rem));
  height: calc(100% - 35px - (2 * .8rem));
  -ms-overflow-style: none;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  --bs-gutter-y: 1rem;
}
#coupon-expanded-container .coupon-details{
  /*width:66.67%;*/
}
#coupon-expanded-container .coupon-details + div{
  /*width:33.33%;*/
}
@media screen and (max-width: 720px) {
  #coupon-expanded-container + #coupons-container .coupon-wrapper{
    min-width: 250px;
  }
  .coupon-expanded{
    max-width: 80vw;
    margin-left: auto;
    margin-right: auto;
  }
  #coupon-expanded-container + #coupons-container{
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 80vw;
    flex-direction: row;
  }
}
/*#coupon-expanded-container + #coupons-container::before{
  content: "Otros cupones ";
}*/
#coupon-expanded-container + #coupons-container .coupon-wrapper{
  /*margin-right: 0.5em;*/
}
#coupon-expanded-container + #coupons-container .coupon-wrapper .coupon-campaign-name, #coupon-expanded-container + #coupons-container .coupon-wrapper .coupon-code{
  display:none!important;
}

#coupon-expanded-container + #coupons-container .coupon-layout{
  flex-flow: column;
  flex-wrap: nowrap;
  -webkit-mask-image: radial-gradient(circle at 1em 50%, transparent 1em, red 10.5px);
  -webkit-mask-position: -1em;
  aspect-ratio: 3 / 2;
}
#coupon-expanded-container + #coupons-container .coupon-details{
  width:100%;
  order: 2;
  height: 50%;
}
#coupon-expanded-container + #coupons-container .coupon-details + div{
  width:100%;
  flex-grow: 1;
  order: 1;
  height: 50%;
}

.wallet, #coupons-container{
  max-width:500px;
}

.wallet, .coupons {
  position: relative;
  width: 100%;
  /*height: 100%;
  border-radius: 0.7rem;
  box-shadow: 5px 5px 9px 3px rgba(0, 0, 0, 0.1), -5px 0 9px 3px rgba(0, 0, 0, 0.05);
  background-color: #f7f7f7;*/
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}
.wallet .cards {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0.7rem;
  padding: 0.8rem;
}

.wallet .cards .card-wrapper {
  position: absolute;
  width: calc(100% - (2 * 0.8rem));
  height: calc(100% - 35px - (2 * .8rem));
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.card-size{
    height: auto;
    aspect-ratio: 1.58625 / 1;
}
.wallet .cards .card-wrapper .card, .card-layout {
  position: absolute;
  align-items: flex-end;
  flex-direction: column;
  aspect-ratio: 1.58625 / 1;
  border-radius: 0.5rem;
  font-family: "Source Sans Pro", sans-serif;
}

.wallet .cards .card-wrapper .card, .card-layout, .coupon-layout {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  box-shadow: 3px 3px 6px 0 rgba(10, 0, 10, 0.3);
  background-color: #fff;
}

/*
.wallet .cards .card-wrapper .card:nth-child(2) {
  top: 130px;
}
.wallet .cards .card-wrapper .card:nth-child(3) {
  top: 260px;
}
.wallet .cards .card-wrapper .card:nth-child(4) {
  top: 390px;
}
.wallet .cards .card-wrapper .card:nth-child(5) {
  top: 520px;
}*/
.wallet .cards .card-wrapper .card .logo {
  position: relative;
  width: 2em;
  height: 1em;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.wallet .cards .card-wrapper .card .logo .circle {
  position: absolute;
  width: 1em;
  height: 100%;
  border-radius: 50%;
}
.wallet .cards .card-wrapper .card .logo .circle.yellow {
  background-color: #f19a1a;
}
.wallet .cards .card-wrapper .card .logo .circle.red {
  background-color: #f7030c;
}
.wallet .cards .card-wrapper .card .logo .circle:last-child {
  left: 0.5em;
}
.wallet .cards .card-wrapper .card .card-details {
  width: 100%;
  letter-spacing: 1px;
}
.wallet .cards .card-wrapper .card .card-top+.card-details{
    padding-top: 30%;
}
.wallet .cards .card-wrapper .card .card-details .number {
  color: #fff;
  text-shadow: 2px 2px 2px #000;
  -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, 0.6) 30%, #000 50%, rgba(0, 0, 0, 0.6) 70%);
  -webkit-mask-size: 200%;
  animation: shine 3s linear infinite;
}
.wallet .cards .card-wrapper .card .card-details .bottom {
  align-items: center;
  margin-top: 5px;
}
.card-centered{
    text-align:center;
}
.wallet .cards .card-wrapper .card .card-details .bottom .name,
.wallet .cards .card-wrapper .card .card-details .bottom .expiry {
  color: #f7f7f7;
  font-size: 66%;
}
.wallet .cards .card-wrapper .card .card-details .bottom .expiry {
  margin-left: 10px;
}
.wallet .cards .card-wrapper .card.violet {
  background: radial-gradient(at top left, #e15f81, #644fb1);
}
.wallet .cards .card-wrapper .card.blue {
  background: radial-gradient(at top left, #4a50a0, #2e3154);
}
.wallet .cards .card-wrapper .card.black {
  background: radial-gradient(at top left, #5c5c5c, #000);
}
.wallet .cards .card-wrapper .card.white {
  background: radial-gradient(at top left, #f5f5f5, #fff);
}
.wallet .cards .card-wrapper .card.add{
    border-width: 0.25em;
    border-style: dashed;
    border-color: rgba(var(--bs-body-color-rgb), 0.5);
    background: radial-gradient(at top left, var(--bs-secondary-bg), var(--bs-body-bg));
    

}
.wallet .cards .card-wrapper .card.add .card-middle{
    -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, 0.6) 30%, #000 50%, rgba(0, 0, 0, 0.6) 70%);
    -webkit-mask-size: 200%;
    animation: shine 3s linear infinite;
}

.wallet .cards .card-wrapper .card:hover {
  cursor: pointer;
}
.wallet .cards .card-wrapper.active {
  top: 0;
  height: 100%;
}
.wallet .cards .card-wrapper::-webkit-scrollbar {
  display: none;
}
.wallet .transactions {
  position: absolute;
  top: 100%;
  width: calc(100% - (2 * 0.8rem));
  /*height: calc(100% - 152px);*/
  overflow-y: scroll;
  border-radius: 0.5rem;
  background-color: var(--bs-body-bg);
  opacity: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.wallet .transactions .transaction {
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wallet .transactions .transaction .image-wrapper {
  width: 15%;
}
.wallet .transactions .transaction .image-wrapper img {
  width: 100%;
  height: auto;
}
.wallet .transactions .transaction .vendor-details {
  width: 55%;
}
.wallet .transactions .transaction .vendor-details .title {
  font-size: 12px;
  margin-bottom: 3px;
}
.wallet .transactions .transaction .vendor-details .description {
  color: #5c5c5c;
  font-size: 9px;
}
.wallet .transactions .transaction .transaction-details {
  width: 30%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column;
}
.wallet .transactions .transaction .transaction-details .price {
  font-size: 12px;
  margin-bottom: 3px;
}
.wallet .transactions .transaction .transaction-details .date {
  color: #5c5c5c;
  font-size: 7px;
}
.wallet .transactions .transaction:not(:last-child) {
  border-bottom: 1px solid #ededed;
}
.wallet .transactions::-webkit-scrollbar {
  display: none;
}

.coupons{
  align-items: center;
  justify-content: center;
}

#coupons-container{
  gap: 1em;
}

@media screen and (min-width: 720px){
  .coupon-page{
    flex-direction: row;
  }
  .coupons-wrapper{
    width: auto;
  }
  #coupons-container{
    flex-wrap: wrap;
  }
  #coupon-expanded-container + #coupons-container .coupon-wrapper{
    width: calc(50% - 0.5em);
    max-width: 20vw;
  }
  #coupon-expanded-container + #coupons-container{
    max-width: min-content;
    width: auto;
    max-width: 40vw;
  }
  #coupon-expanded-container{
    width: 50vw;
  }
  
}
.qr-code{
    text-align: center;
    align-items: center !important;
    justify-content:center;
    display: flex;
}

html[data-bs-theme="dark"] .qr-code canvas{
  filter: invert(1);
}

.card-details .qr-code canvas{
    max-width: 30vh !important;
    /*max-height:30vh!important;*/
    width: 80% ;
    margin: 1em auto;
    height: auto !important;
    aspect-ratio: 1;
    padding: 1em;
    background-color: #fff;
}
.coupon .qr-code canvas{
  height: auto !important;
  padding: 1em;
  max-width: 100% !important;
  padding: .2em; !important;
  background-color: #fff;

  aspect-ratio: 1;
}
.coupon .qr-code.active-qr{
  padding: 0.25em !important;
  background-color: white;
  border-left: 8px black dashed;
}

.coupon-wrapper:not(.coupon-expanded){
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
}
.coupon-wrapper:not(.coupon-expanded) .coupon-layout{
  aspect-ratio: 2.6 / 1;
  /*mask-image: radial-gradient(circle at left 66.67% bottom 11px, transparent 11px, red 11.5px);
  mask-position: 0px 11px;*/
    mask-image: radial-gradient(circle at left 66.67% bottom 1em, transparent 1em, red 1.1em);
    mask-position: 0px 1em;
}
.coupon-wrapper .coupon-layout{
  border-radius: 0.5rem;
}
.coupon-wrapper:not(.coupon-expanded) .coupon-conditions{
  display:none;
}
.coupon-wrapper:not(.coupon-expanded) .qr-code{
  position:relative;

}
.coupon-wrapper .bg-img{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.coupon-wrapper:not(.coupon-expanded) .qr-code canvas{
  position:relative;
  opacity:0.2;
}
.coupon-wrapper[data-campaign-img='1']:not(.coupon-expanded) .qr-code canvas{
  opacity: 0;display:none;
}

.coupon-wrapper:not(.coupon-expanded) .qr-code::before{
  /*content: "\f06e";
  position:absolute;
  font-family: "Font Awesome 6 Free";
  font-size: 3em;*/
}
.coupon-wrapper{
  transition: all 0.1s ease-in;
}
.coupon-expanded{
  order: 1!important;
  margin-top:-5vh;
  margin-bottom: 1rem;
}
.coupon-expanded .coupon-expiration{
  display: none;
}
.coupon-expanded .coupon-layout{
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  background-color: transparent;
  box-shadow: none !important;
}
.coupon-expanded .coupon-details{
  order: 2;
  padding:1em;
  text-align: center;
  max-width:400px;
  border:1px solid rgba(0,0,0,0);
  border-top:none!important;
}
.coupon-expanded .qr-code{
  border:1px solid rgba(0,0,0,0)!important;
  border-bottom:none!important;
}
.coupon-expanded .qr-code.active-qr{
  padding: 1em !important;
  order: 1;
  max-width:400px;
}

@keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }
  to {
    -webkit-mask-position: -50%;
  }
}