/* PUPA DONATE THEME V2
   Loaded AFTER legacy css/style.css so old QR PAYMENT background cannot win.
*/
html,body{
  width:100%!important;
  min-height:100%!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow-x:hidden!important;
}
html body.pupa-donate-page{
  min-height:100vh!important;
  font-family:'Kanit',Tahoma,"Leelawadee UI","Segoe UI",Arial,sans-serif!important;
  color:#123f69!important;
  background-image:
    linear-gradient(180deg,rgba(0,23,58,.04),rgba(0,23,58,.22)),
    url('img/pupa-donate-bg.jpg')!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  background-attachment:fixed!important;
}

/* remove any legacy decorative backgrounds */
body.pupa-donate-page:before,
body.pupa-donate-page:after{
  content:none!important;
  display:none!important;
}

/* Main top navigation */
.pupa-donate-nav{
  position:relative!important;
  z-index:1000!important;
  width:100%!important;
  min-height:82px!important;
  background:linear-gradient(180deg,#03152f,#052b5e)!important;
  border-bottom:3px solid #ffc329!important;
  box-shadow:0 8px 28px rgba(0,22,55,.34)!important;
}
.pupa-donate-nav__inner{
  width:min(1380px,100%)!important;
  margin:0 auto!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
}
.pupa-donate-nav a{
  min-width:0!important;
  min-height:82px!important;
  padding:10px 9px 8px!important;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  grid-template-rows:1fr 18px!important;
  align-items:center!important;
  text-align:center!important;
  text-decoration:none!important;
  color:#fff!important;
  border-left:1px solid rgba(85,180,255,.16)!important;
}
.pupa-donate-nav a:last-child{border-right:1px solid rgba(85,180,255,.16)!important}
.pupa-donate-nav a>span{
  grid-row:1/3!important;
  color:#ffd55d!important;
  font-size:25px!important;
  line-height:1!important;
}
.pupa-donate-nav strong{
  display:block!important;
  color:#fff!important;
  font-size:17px!important;
  line-height:1.15!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.pupa-donate-nav small{
  display:block!important;
  color:#ffc329!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.3px!important;
}
.pupa-donate-nav a:hover,
.pupa-donate-nav a.active{
  background:linear-gradient(180deg,#087de8,#064790)!important;
  box-shadow:inset 0 -4px #ffc329!important;
}

/* Hero/login layout */
.pupa-donate-shell{
  width:min(1180px,calc(100% - 28px))!important;
  min-height:calc(100vh - 85px)!important;
  margin:0 auto!important;
  padding:92px 0 80px!important;
  display:block!important;
}
.pupa-donate-heading{
  max-width:720px!important;
  margin:0 auto 28px!important;
  padding:18px 22px!important;
  text-align:center!important;
  color:#fff!important;
  background:rgba(2,35,77,.82)!important;
  border:1px solid rgba(92,206,255,.55)!important;
  border-radius:18px!important;
  box-shadow:0 15px 36px rgba(0,28,65,.22)!important;
  backdrop-filter:blur(3px);
}
.pupa-donate-heading>span{
  display:inline-block!important;
  padding:7px 20px!important;
  color:#5fe4ff!important;
  background:#062b5d!important;
  border:1px solid #55cfff!important;
  border-radius:999px!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:1.5px!important;
}
.pupa-donate-heading h1{
  margin:10px 0 4px!important;
  color:#fff!important;
  font-size:36px!important;
  line-height:1.2!important;
  font-weight:900!important;
  text-shadow:0 3px 7px rgba(0,0,0,.35)!important;
}
.pupa-donate-heading p{
  margin:0!important;
  color:#e6f8ff!important;
  font-size:14px!important;
}

.pupa-donate-container{max-width:1100px!important;margin:0 auto!important}
.pupa-login-card,.pupa-member-card{
  overflow:hidden!important;
  border:1px solid rgba(111,199,248,.85)!important;
  border-radius:18px!important;
  background:rgba(250,253,255,.98)!important;
  box-shadow:0 24px 60px rgba(0,35,80,.32)!important;
}
.pupa-login-card .card-header,.pupa-member-card .card-header{
  padding:24px 24px 20px!important;
  background:linear-gradient(180deg,#fff,#edf8ff)!important;
  border-bottom:1px solid #cce8f8!important;
}
.pupa-login-card .card-header h5,.pupa-member-card .card-header h5{
  margin:5px 0 2px!important;
  color:#073f7c!important;
  font-size:25px!important;
  font-weight:900!important;
}
.pupa-login-card .card-header h6,.pupa-member-card .card-header h6{
  margin:4px 0!important;
  color:#6486a3!important;
}
.pupa-card-badge{
  display:inline-block!important;
  padding:6px 15px!important;
  color:#087bcf!important;
  background:#e7f7ff!important;
  border:1px solid #a9dcf8!important;
  border-radius:999px!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:1px!important;
}
.pupa-alert{
  margin:13px auto 0!important;
  padding:9px 12px!important;
  color:#b53b35!important;
  background:#fff1f0!important;
  border:1px solid #ffd1ce!important;
  border-radius:9px!important;
  font-size:12px!important;
}
.pupa-login-card .card-body,.pupa-member-card .card-body{
  padding:24px!important;
  background:#fff!important;
}
.pupa-login-card .card-footer,.pupa-member-card .card-footer{
  padding:15px 24px 20px!important;
  background:#f5fbff!important;
  border-top:1px solid #d9edf9!important;
}
.pupa-login-card .input-group{width:100%!important}
.pupa-login-card .input-group-text{
  min-width:48px!important;
  justify-content:center!important;
  color:#086bae!important;
  background:#e9f7ff!important;
  border-color:#85c9f1!important;
}
.pupa-login-card .form-control{
  min-height:47px!important;
  color:#123f69!important;
  background:#fff!important;
  border-color:#85c9f1!important;
  box-shadow:none!important;
}
.pupa-login-card .form-control:focus{
  border-color:#078cff!important;
  box-shadow:0 0 0 3px rgba(7,140,255,.13)!important;
}
.pupa-login-button{
  min-height:48px!important;
  color:#fff!important;
  font-size:17px!important;
  font-weight:900!important;
  background:linear-gradient(180deg,#149dff,#0869c1)!important;
  border:1px solid #0867b8!important;
  border-bottom:4px solid #064a8a!important;
  border-radius:10px!important;
  box-shadow:0 6px 16px rgba(0,103,185,.22)!important;
}

/* Member area */
.pupa-member-shell{padding-top:45px!important}
.pupa-member-nav{
  background:linear-gradient(180deg,#073b79,#052852)!important;
  border-bottom:2px solid #ffc329!important;
}
.pupa-member-nav .nav-link{color:#eaf8ff!important;font-weight:700!important}
.pupa-member-nav .dropdown-menu{
  border:1px solid #9fd5f5!important;
  border-radius:10px!important;
  box-shadow:0 13px 30px rgba(0,37,82,.20)!important;
}
.pupa-member-nav .dropdown-item{color:#164e78!important}
.pupa-member-nav .dropdown-item:hover{background:#eaf7ff!important;color:#0876c7!important}
.pupa-logout-button{
  color:#fff!important;
  border-color:#ff7a70!important;
  background:rgba(220,49,44,.22)!important;
  border-radius:9px!important;
}
.pupa-refill-note{
  color:#9f4038!important;
  background:#fff3f1!important;
  border:1px solid #ffd1cc!important;
  border-radius:10px!important;
}
.table-responsive{overflow-x:auto!important}
.table{width:100%!important;background:#fff!important;color:#174a72!important}
.table thead th{
  color:#fff!important;
  background:linear-gradient(180deg,#1099ef,#0769bb)!important;
  border-color:#5ab8ee!important;
  white-space:nowrap!important;
}
.table td,.table th{vertical-align:middle!important;border-color:#d3e9f7!important}
.table-hover tbody tr:hover{background:#edf8ff!important}

@media(max-width:900px){
  .pupa-donate-nav__inner{grid-template-columns:repeat(3,1fr)!important}
  .pupa-donate-nav a{min-height:68px!important}
  .pupa-donate-shell{padding-top:55px!important}
  html body.pupa-donate-page{background-attachment:scroll!important}
}
@media(max-width:560px){
  .pupa-donate-nav__inner{grid-template-columns:repeat(2,1fr)!important}
  .pupa-donate-nav a{
    min-height:60px!important;
    grid-template-columns:27px 1fr!important;
    padding:7px 5px!important;
  }
  .pupa-donate-nav a>span{font-size:20px!important}
  .pupa-donate-nav strong{font-size:13px!important;white-space:normal!important}
  .pupa-donate-nav small{font-size:8px!important}
  .pupa-donate-shell{width:calc(100% - 18px)!important;padding-top:38px!important}
  .pupa-donate-heading h1{font-size:28px!important}
}