main,#header,#content{
  box-sizing:border-box
}
main{
  text-align:center;
  padding:max(env(safe-area-inset-top, 0), 1.375rem) 1.375rem max(env(safe-area-inset-top, 0), 1.375rem);
  height:100%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  background-color: #F5F7F7;
  background-image:url("../images/bg/bg-main.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:50% 50%
}
main #header{
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  max-height:223px
}
main #header .header-vertical-gap-top{
  flex:12
}
main #header .header-vertical-gap-bottom{
  flex:11
}
main #header .header-logo{
  width:24.533vw;
  height: 23.066vw;
}
main #content{
  height:70vh;
  background: var(--background);
  border-radius:1.125rem;
  padding:0.625rem 0;
  display:flex;
  flex-direction:column;
  position: relative;
}
main #content .grid-payment-app{
  overflow-x:hidden;
  overflow-y:auto;
  padding:0.625rem 1.25rem 1.25rem;
  height:calc(100% - 4.25rem);
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:space-between;
  row-gap:0.625rem;
}
main #content .grid-payment-app .tappable-payment-app{
  display:block;
  width:23vw;
  color:var(--text-dimmed);
  font-size:0.75rem;
  font-weight:500;
  box-sizing:border-box;
  position:relative;
  overflow:hidden;
  padding:2px 2px calc(2px + 0.3125rem)
}
main #content .grid-payment-app .tappable-payment-app:hover,main #content .grid-payment-app .tappable-payment-app:active{
  text-decoration:none;
}
main #content .grid-payment-app .tappable-payment-app>img{
  width:87.5%;
  display:block;
  margin:0 auto;
}
main #content .grid-payment-app .tappable-payment-app .app-label{
  padding:0 0.125rem
}
main #content .grid-payment-app .tappable-payment-app.selected{
  color:var(--primary-color);
  border:2px var(--primary-color) solid;
  border-radius:0.875rem;
  padding:0 0 0.3125rem
}
main #content .grid-payment-app .tappable-payment-app.selected>img{
  width:87.5%
}
main #content .grid-payment-app .tappable-payment-app.selected:before{
  content:"";
  display:block;
  width:1.0625rem;
  height:1.0625rem;
  background-color:var(--primary-color);
  position:absolute;
  top:0;
  right:0;
  border-top-right-radius:0.625rem;
  border-bottom-left-radius:0.625rem;
  z-index: 7;
}
main #content .grid-payment-app .tappable-payment-app.selected:after{
  content:"";
  display:block;
  width:0.4875rem;
  height:0.3125rem;
  box-sizing:border-box;
  background-color:transparent;
  border-left:0.10625rem var(--text-on-primary) solid;
  border-bottom:0.10625rem var(--text-on-primary) solid;
  position:absolute;
  top:0.2083rem;
  right:0.24375rem;
  transform:rotate(-45deg);
  z-index: 8;
}
.grid-payment-app .tappable-payment-app .loading-cover {
  width:87.5%;
  height: calc(23vw * 87.5 / 100);
  display:block;
  margin:0 auto;
}
.grid-payment-app .tappable-payment-app .loading-cover .cover-wrapper {
  height: calc(23vw * 87.5 / 100);
  width: calc(23vw * 87.5 / 100);
  position: absolute;
  top: 0; left: calc(23vw * 6.25 / 100);
}
.grid-payment-app .tappable-payment-app .loading-cover .cover-wrapper .cover-blocker {
  display: block;
  width: 100%; height: 100%;
  top: calc(50% - 6.5vw); left: calc(50% - 6.5vw);
}
.grid-payment-app .tappable-payment-app .loading-cover img.payment-app {
  width: 100%;
}
main #content .control-bar{
  margin:0 0.625rem
}
a.button{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  height:4.25rem;
  background-color:var(--button-bg-disabled);
  color:var(--text-dimmed);
  column-gap:0.625rem;
  border-radius:1.125rem;
  pointer-events:none;
  transition: all 0.2s ease-in-out;
}
a.button:hover, a.button:active {
  text-decoration:none;
}
a.button .button-label{
  display:flex;
  flex-direction:column;
  font-size:0.875rem
}
a.button .button-arrow {
  position: relative;
}
a.button .button-arrow>img{
  opacity:0.34;
}
a.button .button-arrow:after {
  display: block;
  content: '';
  opacity:0;
  background-image: url('../images/g/icon-arrow-active.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  top: 0; left: 0;
}

a.button .button-arrow>img, a.button .button-arrow:after {
  width:1rem;
  height:1.0625rem;
  transition: all 0.3s ease-in-out;
}

a.button.active{
  pointer-events:auto;
  cursor:pointer;
  background-color:var(--primary-color);
  color:var(--text-on-primary)
}
a.button.active .button-arrow>img{
  opacity:0;
}
a.button.active .button-arrow:after {
  opacity: 1;
}
.text-primary{
  color:var(--primary-color) !important
}
.text-size-medium{
  font-size:1.25rem !important
}
.modal-content{
  min-height:14rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center
}
.modal-content p{
  font-size:0.875rem;
  font-weight:500;
  line-height:145%
}
.modal-content p~p{
  margin-top:0
}
.modal-content p.flex-column{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  column-gap:0.3125rem
}
.modal-content .loader-warpper{
  position:relative;
  margin-top:0.875rem
}
.modal-content .loader-warpper img{
  width:3.75rem;
  height:3.75rem;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%)
}
.loader{
  font-size:10px;
  margin:0 auto;
  text-indent:-9999em;
  border-radius:50%;
  overflow:hidden;
  position:relative;
  -webkit-animation:loading-spinning 1.4s infinite linear;
  animation:loading-spinning 1.4s infinite linear;
  -webkit-transform:translateZ(0);
  -ms-transform:translateZ(0);
  transform:translateZ(0)
}
.loader.loader-modal {
  width:6.875rem;
  height:6.875rem;
  background:#ffffff;
  background:-moz-linear-gradient(left, #0663AB 10%, #eaf1ff 42%);
  background:-webkit-linear-gradient(left, #0663AB 10%, #eaf1ff 42%);
  background:-o-linear-gradient(left, #0663AB 10%, #eaf1ff 42%);
  background:-ms-linear-gradient(left, #0663AB 10%, #eaf1ff 42%);
  background:linear-gradient(to right, #0663AB 10%, #eaf1ff 42%);
}
.loader.cover-blocker {
  background:var(--background) !important;
  background:-moz-linear-gradient(left, #a0a5b1 10%, #d4dae6 42%) !important;
  background:-webkit-linear-gradient(left, #a0a5b1 10%, #d4dae6 42%) !important;
  background:-o-linear-gradient(left, #a0a5b1 10%, #d4dae6 42%) !important;
  background:-ms-linear-gradient(left, #a0a5b1 10%, #d4dae6 42%) !important;
  background:linear-gradient(to right, #a0a5b1 10%, #d4dae6 42%) !important;
}
.header-logo .loader.cover-blocker {
  width: 22vw !important;
  height: 22vw !important;
}
.grid-payment-app .loader.cover-blocker {
  width: 13vw !important;
  height: 13vw !important;
}
.loader:before{
  width:50%;
  height:50%;
  border-radius:100% 0 0 0;
  position:absolute;
  top:0;
  left:0;
  content:""
}
.loader.loader-modal:before{
  background:#0663AB;
}
.loader.cover-blocker:before{
  background:#a0a5b1;
}
.loader:after{
  border-radius:50%;
  content:"";
  margin:auto;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0
}
.loader.loader-modal:after{
  background:#FFFFFF;
  width:90%;
  height:90%;
}
.loader.cover-blocker:after{
  background:rgba(243, 244, 245, 1);
}
.header-logo .loader.cover-blocker:after{
  width:86%;
  height:86%;
}
.grid-payment-app .loader.cover-blocker:after{
  width:80%;
  height:80%;
}
@-webkit-keyframes loading-spinning{
  0%{
      -webkit-transform:rotate(0deg);
      transform:rotate(0deg)
  }
  100%{
      -webkit-transform:rotate(360deg);
      transform:rotate(360deg)
  }
}
@keyframes loading-spinning{
  0%{
      -webkit-transform:rotate(0deg);
      transform:rotate(0deg)
  }
  100%{
      -webkit-transform:rotate(360deg);
      transform:rotate(360deg)
  }
}
@media(min-width: 640px){
  main{
      max-width:none
  }
}
.loading-cover .cover-wrapper {
  position: relative; overflow: hidden;
  width: 100%; height: 100%;
  background: rgba(243, 244, 245, 1);
  transition: background 800ms ease-out;
}
.loading-cover .cover-wrapper .cover-blocker {
  width: 100%;
  /* background-color: white; */
  z-index: 5;
}
.loading-cover .cover-wrapper .cover-blocker,
.loading-cover img.main,.loading-cover canvas.main{
  object-position:center;
  position:absolute;
  width:100%;
  will-change:opacity
}
.loading-cover .cover-wrapper .cover-blocker {
  top: calc((100% - 22vw) / 2);
  left: calc((100% - 22vw) / 2);
}
.loading-cover img.main,.loading-cover canvas.main {
  top: 0;
  left: 0;
}
.blur.loading-cover{
  filter:blur(15px);
  transition:opacity 800ms
}
.loading-cover .placeholder,
.loading-cover .cover-wrapper .cover-blocker {
  opacity:1;
  transition:opacity 800ms ease-out;
  transition-delay:0s
}
.loading-cover .placeholder{
  width:100%;
  height:100%;
}
.loading-cover img.main{
  opacity:0;
  transition:opacity 800ms ease-out;
  transition-delay:0.2s
}
.loaded.loading-cover .cover-wrapper {
  background: rgb(243, 244, 245, 0);
}
.loaded.loading-cover .placeholder,
.loaded.loading-cover .cover-wrapper .cover-blocker {
  opacity:0
}
.loaded.loading-cover img.main {
  opacity:1
}
#header > .header-logo > .wrapper{
  display:block
}
div.modal{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  justify-content:center;
  align-items:center;
  opacity:0;
  z-index: 10;
}
div.modal.modal-reveal {
  display:flex;
  -webkit-animation:reveal 0.3s ease-in-out 0.05s 1;
  animation:reveal 0.3s ease-in-out 0.05s 1;
  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}
div.modal.modal-reveal.modal-conceal, div.modal.modal-conceal {
  display:flex;
  -webkit-animation:conceal 0.3s ease-in-out 0.05s 1;
  animation:conceal 0.3s ease-in-out 0.05s 1;
  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}
div.modal > div.backdrop{
  position:absolute;
  width:100%;
  height:100%;
  background-color:rgba(24, 79, 121, 0.88)
}
div.modal > div.content-wrapper{
  z-index:10;
  min-width:16.875rem;
  max-width:80vw;
  border-radius:1.125rem;
  background-color:#FFFFFF;
  overflow:hidden;
  padding:0.625rem 1.375rem
}
div.modal > div.content-wrapper > div.content{
  max-height:50vh;
  overflow:auto
}
div#modal-init.modal {
  display: flex;
  opacity: 1;
}

@-webkit-keyframes reveal{
  0%{
      opacity:0
  }
  100%{
      opacity:1
  }
}
@keyframes reveal{
  0%{
      opacity:0
  }
  100%{
      opacity:1
  }
}
@-webkit-keyframes conceal{
  0%{
      opacity:1
  }
  100%{
      opacity:0
  }
}
@keyframes conceal{
  0%{
      opacity:1
  }
  100%{
      opacity:0
  }
}
#grid-payment-app:before,
#grid-payment-app:after {
  content: '';
  display: block;
  width: calc(100vw - 3.375rem);
  height: 1.375rem;
  position: absolute;
  /* background: #00000034; */
  background: rgb(242,245,247);
  left: 0;
  z-index: 6;
}
#grid-payment-app:before {
  top: 0.625rem;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
  z-index: 9;
}
#grid-payment-app:after {
  bottom: 4.875rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%);
  z-index: 9;
}