@charset "UTF-8";
@import url('https://fonts.googleapis.com/earlyaccess/cwtexyen.css');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,400');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');


::selection {
  color: #fff;
  background-color: #295b55;
}
html {
  /*background-color: black;*/
}
body {
  background-color: #000;
  font-family: 'Century Gothic' , 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  font-weight: 400;
  scroll-behavior: smooth;
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
}

body.modal-open {
  overflow: visible!important;
  padding-right: 0!important;
}

body.body-fixed {
  width: 100%;
  position: fixed;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url(../images/mobile/bg.jpg);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  background-color: #323232;
}

@media (min-width: 992px) {
  .bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(../images/bg.jpg);
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #323232;
  }
}

.wheel-outer {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5));
  /*margin-bottom: 1%;*/
  width: 100%;
  max-width: 85%;
  overflow: clip;
}
@media (min-width: 992px) {
  .wheel-outer {
    max-width: 400px;
  }
}
@media (min-width: 1900px) {
  .wheel-outer {
    max-width: 480px;
  }
}
@media (min-width: 2500px) {
  .wheel-outer {
    max-width: 600px;
  }
}

.wheel-outer:before {
  content: '';
  display: block;
  position: absolute;
  width: 88%;
  height: 88%;
  top: 6%;
  left: 6%;
  transform: translateX(0%) translateY(0%) rotate(0deg);
  background-image: url(../images/wheel-inner.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
  animation: wheelInnerInfinite 30s linear infinite;
}
@keyframes wheelInnerInfinite {
  from {
    transform: translateX(0%) translateY(0%) rotate(0deg);
  }
  to {
    transform: translateX(0%) translateY(0%) rotate(360deg);
  }
}


.spin-wheel {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5));
  margin-bottom: 1%;
  animation-play-state: paused;
}
.spin-wheel.start {
  animation-play-state: running;
}
@media (min-width: 992px) {
  .spin-wheel {
    max-width: 400px;
  }
}
@media (min-width: 1900px) {
  .spin-wheel {
    max-width: 480px;
  }
}
@media (min-width: 2500px) {
  .spin-wheel {
    max-width: 600px;
  }
}

.spin-wheel:before {
  content: '';
  display: block;
  position: absolute;
  width: 88%;
  height: 88%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  background-image: url(../images/wheel-inner.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
  /*animation: wheelInnerInfinite 30s linear infinite;*/
}
body.prize-300 .spin-wheel.start:before {
  animation: wheel300 10s ease forwards;
}
@keyframes wheel300 {
  from {
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateX(-50%) translateY(-50%) rotate(3608deg);
  }
}

body.prize-200 .spin-wheel.start:before {
  animation: wheel200 10s ease forwards;
}
@keyframes wheel200 {
  from {
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateX(-50%) translateY(-50%) rotate(3672deg);
  }
}

body.prize-100 .spin-wheel.start:before {
  animation: wheel100 10s ease forwards;
}
@keyframes wheel100 {
  from {
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateX(-50%) translateY(-50%) rotate(3620deg);
  }
}



#prizeTitle, #prizeValue {
  color: #fff;
}

#prizeTransition {
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background-color: rgba(0,0,0,0.85);
  pointer-events: none;
  user-select: none;
}

.glow-back, .glow-front, .coin, .stocking {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#gameModal .modal-content {
  /*background-color: transparent;*/
}

#gameModal .modal-body {
  background-color: #4d0909;
  border: 5px solid #bba062;
}

#prizeModal .modal-content {
  background-color: transparent;
  border: 0px solid transparent;
}
#prizeModal .modal-body {
  height: 500px;
  filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5));
}
#prizeModal .modal-body > div {
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}
#prizeModal .modal-body h1 {
  font-size: 3rem;
}
#prizeModal.prize-100 .modal-body {
  background-image: url(../images/prize-100.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
#prizeModal.prize-200 .modal-body {
  background-image: url(../images/prize-200.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
#prizeModal.prize-300 .modal-body {
  background-image: url(../images/prize-300.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}



#gameModal .col.shaking {
  animation: shaking 1s ease-in;
}
@keyframes shaking {
  0% {
    transform: translateX(0px);
  }
  5% {
    transform: translateX(5px);
  }
  10% {
    transform: translateX(-5px);
  }
  20% {
    transform: translateX(5px);
  }
  30% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  70% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0px);
  }
}

#prizeModal .modal-body {
  color: #fff;
}



.landing-border {
  border: 5px solid #e2cdc0;
  position: absolute;
  top: 40px;
  right: 40px;
  left: 40px;
  /*height: 40%;*/
  /*padding-top: 540px;*/
  padding-top: 80%;
  z-index: 1;
}

.landing-border::before {
  content: '';
  display: block;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 35px;
  height: 35px;
  z-index: 2;
  background-image: url(../images/landing-border-top-left.png);
  background-size: contain;
}
.landing-border::after {
  content: '';
  display: block;
  position: absolute;
  top: -5px;
  right: -5px;
  width: 35px;
  height: 35px;
  z-index: 2;
  background-image: url(../images/landing-border-top-right.png);
  background-size: contain;
}
@media (min-width: 992px) {
  .landing-border {
    border: 10px solid #e2cdc0;
    position: absolute;
    top: 130px;
    right: 130px;
    left: 130px;
    /*height: 40%;*/
    /*padding-top: 540px;*/
    padding-top: 28%;
    z-index: 1;
  }
  .landing-border::before {
    content: '';
    display: block;
    position: absolute;
    top: -10px;
    left: -10px;
    width: 73px;
    height: 73px;
    z-index: 2;
    background-image: url(../images/landing-border-top-left.png);
  }
  .landing-border::after {
    content: '';
    display: block;
    position: absolute;
    top: -10px;
    right: -10px;
    width: 73px;
    height: 73px;
    z-index: 2;
    background-image: url(../images/landing-border-top-right.png);
  }
}
.landing-border-left {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: repeating-linear-gradient(
    45deg,
    #519ca0,
    #519ca0 5px,
    #e2cdc0 5px, 
    #e2cdc0 10px
  );
}
.landing-border-right {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 1;
  background: repeating-linear-gradient(
    135deg,
    #519ca0,
    #519ca0 5px,
    #e2cdc0 5px, 
    #e2cdc0 10px
  );
}

@media (min-width: 992px) {
  .landing-border-left {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: repeating-linear-gradient(
      45deg,
      #519ca0,
      #519ca0 10px,
      #e2cdc0 10px, 
      #e2cdc0 20px
    );
  }
  .landing-border-right {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 1;
    background: repeating-linear-gradient(
      135deg,
      #519ca0,
      #519ca0 10px,
      #e2cdc0 10px, 
      #e2cdc0 20px
    );
  }
}

.landing-round-plate {
  position: absolute;
  /*width: 665px;*/
  width: 100%;
  /*height: 665px;*/
  /*top: -50px;*/
  top: 50%;
  left: 50%;
  /*margin-left: -20%;*/
  transform:  translate(-50%, -50%);
  z-index: 2;
  perspective: 1000px;
}
@media (min-width: 992px) {
  .landing-round-plate {
    position: absolute;
    /*width: 665px;*/
    width: 40%;
    /*height: 665px;*/
    /*top: -50px;*/
    top: 50%;
    left: 50%;
    /*margin-left: -20%;*/
    transform:  translate(-50%, -50%);
    z-index: 2;
  }  
}

.landing-radial-beam {
  position: absolute;
  /*width: 564px;*/
  /*width: 33.97%;*/
  width: 84%;
  /*height: 564px;*/
  top: 50%;
  left: 50%;
  margin-top: -42%;
  margin-left: -42%;
  z-index: 2;
  animation: landingRadialBeam 30s linear infinite;
}
@keyframes landingRadialBeam {
  from {
    /*transform: rotate3d(0,0,1, 0deg);*/
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
    /*transform: rotate3d(0,0,1, 360deg);*/
  }
}
.landing-clock {
  position: absolute;
  /*width: 389px;*/
  width: 23.43%;
  width: 58.49%;
  /*height: 530px;*/
  top: 50%;
  left: 50%;
  margin-top: -40%;
  margin-left: -29.245%;
  z-index: 2;
  animation: landingClock 3s ease infinite;
}

@keyframes landingClock {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  5%,
  10% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  15%,
  25%,
  35%,
  45% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  20%,
  30%,
  40% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  50% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.landing-event-name-banner {
  position: absolute;
  /*width: 624px;*/
  width: 100%;
  /*height: 153px;*/
  bottom: 5%;
  left: 50%;
  /*margin-left: -312px;*/
  margin-left: -50%;
  z-index: 3;
}
.landing-red-ribbon {
  position: absolute;
  /*width: 899px;*/
  width: 100%;
  /*height: 261px;*/
  top: -10%;
  left: 50%;
  /*margin-left: -450px;*/
  margin-left: -50%;
  z-index: 5;
}
@media (min-width: 992px) {
  .landing-event-name-banner {
    position: absolute;
    /*width: 624px;*/
    width: 37.59%;
    /*height: 153px;*/
    bottom: 0;
    left: 50%;
    /*margin-left: -312px;*/
    margin-left: -18.79%;
    z-index: 3;
  }
  .landing-red-ribbon {
    position: absolute;
    /*width: 899px;*/
    width: 54.15%;
    /*height: 261px;*/
    top: -100px;
    left: 50%;
    /*margin-left: -450px;*/
    margin-left: -27.07%;
    z-index: 2;
  }
}

#mainWrapper {
  padding-top: 2rem;
  position: relative;
  width: 100%;
  overflow-x: clip;
  /*padding-top: 800px;*/
  /*padding-top: 95%;*/
}
@media (min-width: 992px) {
  #mainWrapper {
    /*padding-top: 800px;*/
    /*padding-top: 41.66%;*/
  }  
}
.landing-left-hand {
  position: absolute;
  /*width: 643px;*/
  width: 50%;
  /*height: 368px;*/
  top: 4%;
  left: -15%;
  z-index: 3;
  animation: landingLeftHand 10s ease infinite;
  filter: drop-shadow(15px 15px 25px rgba(0,0,0,0.25));
}
@keyframes landingLeftHand {
  0% {
    transform: translate3d(0,10px,0);
  }
  50% {
    transform: translate3d(0,-10px,0);
  }
  100% {
    transform: translate3d(0,10px,0);
  }
}
@media (min-width: 992px) {
  .landing-left-hand {
    position: absolute;
    /*width: 643px;*/
    width: 37.16%;
    /*height: 368px;*/
    top: 4%;
    left: 0;
    z-index: 3;
    animation: landingLeftHand 10s ease infinite;
    filter: drop-shadow(15px 15px 25px rgba(0,0,0,0.25));
  }

  @keyframes landingLeftHand {
    0% {
      transform: translate3d(0,30px,0);
    }
    50% {
      transform: translate3d(0,-30px,0);
    }
    100% {
      transform: translate3d(0,30px,0);
    }
  }
}
.landing-right-hand {
  position: absolute;
  max-width: 654px;
  width: 50%;
  /*height: 502px;*/
  /*top: 240px;*/
  top: 6%;
  right: -15%;
  z-index: 3;
  animation: landingRightHand 10s ease infinite;
  filter: drop-shadow(-15px 15px 25px rgba(0,0,0,0.25));
}
@keyframes landingRightHand {
  0% {
    transform: translate3d(0,-10px,0);
  }
  50% {
    transform: translate3d(0,10px,0);
  }
  100% {
    transform: translate3d(0,-10px,0);
  }
}
@media (min-width: 992px) {
  .landing-right-hand {
    position: absolute;
    width: 654px;
    width: 37.8%;
    /*height: 502px;*/
    /*top: 240px;*/
    top: 8%;
    right: 0;
    z-index: 3;
    animation: landingRightHand 10s ease infinite;
    filter: drop-shadow(-15px 15px 25px rgba(0,0,0,0.25));
  }

  @keyframes landingRightHand {
    0% {
      transform: translate3d(0,-30px,0);
    }
    50% {
      transform: translate3d(0,30px,0);
    }
    100% {
      transform: translate3d(0,-30px,0);
    }
  }
}

.landing-bag-1,
.landing-bag-2 {
  display: none;
}
.landing-coin-1 {
  position: absolute;
  width: 28%;
  bottom: 15%;
  left: -6%;
  z-index: 2;
}
.landing-coin-2 {
  position: absolute;
  width: 33%;
  top: 60%;
  right: -3%;
  z-index: 2;
}
@media (min-width: 992px) {
  .landing-bag-1,
  .landing-coin-1,
  .landing-bag-2,
  .landing-coin-2 {
    display: block;
  }
  .landing-bag-1 {
    position: absolute;
    /*width: 334px;*/
    width: 20.12%;
    /*height: 290px;*/
    /*top: 300px;
    left: 60px;*/
    bottom: 0;
    left: 2%;
    z-index: 2;
  }
  .landing-coin-1 {
    position: absolute;
    /*width: 231px;*/
    width: 13.91%;
    /*height: 214px;*/
    /*top: 400px;
    left: 200px;*/
    bottom: -5%;
    left: 10%;
    z-index: 2;
  }
  .landing-bag-2 {
    position: absolute;
    /*width: 273px;*/
    width: 16.44%;
    /*height: 352px;*/
    top: 5%;
    right: 5%;
    z-index: 2;
  }
  .landing-coin-2 {
    position: absolute;
    width: 274px;
    width: 16.5%;
    /*height: 235px;*/
    top: 33%;
    right: 10%;
    z-index: 2;
  }
}


/*.event-btn-group {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate3d(-50%,50%,0);
}*/

.event-btn {
  filter: drop-shadow(0 5px 5px rgba(0,0,0,0.8));
}

@media (min-width: 992px) {
  .event-btn {
    transition: all .2s ease;
  }
  .event-btn:hover {
    transform: translateY(-5px);
    transition: all .2s ease;
  }
}

#eventLogo {
  width: 100%;
  transition: all .3s linear;
  animation-delay: 1s;
  animation-duration: 2s;
}
#eventLogo a {
  cursor: initial;
}

.landing-glow {
  mix-blend-mode: screen;
}
#btnGroup {
  width: 80%;
  max-width: 240px;
  position: relative;
  transform: translateY(0%);
  transition: all 5s ease-in;
}

body.loaded #btnGroup {
  transform: translateY(0%);
}





@media (min-width: 992px) {
  #btnGroup {
    transform: translateY(0%);
  }
  body.loaded #btnGroup {
    transform: translateY(0%);
  }
}

@media (min-width: 1600px) {
  
  #eventLogo {
    max-width: 100%;
  }
  #btnGroup {
    max-width: 260px;
  }
}
@media (min-width: 2560px) {
  
  #mainWrapper {
    /*padding-right: 30%;*/
  }
}

#btnGroup a {
  display: block;
  position: relative;
  outline: none;
}



#btnPlay,
#btnHome,
#btnViVa {
  display: none;
}

#msgDone,
#msgFull {
  display: none;
}



#loginLoading,
#loginSuccess,
#checkInSuccess {
  z-index: 200;
  background-color: #000;
}

.event-board {
  position: relative;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0 5%;
}
.event-rule,
.event-precaution {
  position: relative;
  max-width: 900px;
  width: 90%;
  /*border-top: 5px dotted #e2cdc0;*/
  font-size: 1rem;
  /*background-color: rgba(56,30,9,.85);*/
  /*background-image: linear-gradient(0deg, #951d22, #e12e3b, #951d22);*/
  /*background-image: url(../images/section-pattern-orange.png);
  border: 2px solid #e4b146;*/
  margin-bottom: 3rem;
  /*border-radius: 1rem;*/
  color: #fff;
  background-color: #9e1514;
  /*text-shadow: 0 2px 1px rgba(0,0,0,0.5);*/
  filter: drop-shadow(0 5px 8px rgba(77, 10, 10, 0.8));
}
.event-rule .col > .p-xl-5,
.event-precaution .col > .p-xl-5 {
  background-color: #9e1514;
  background-image: url(../images/pattern.jpg);
  /*border-radius: 2rem;*/
  box-shadow: 0 0 3px rgba(0,0,0,0.5);
  border: 1px solid #dcb76e;
}
.event-rule h1 img,
.event-precaution h1 img {
  /*max-width: 200px;*/
  /*margin-top: -3rem;*/
}
.event-precaution {
  /*margin-bottom: 10%;*/
}
@media (min-width: 992px) {
  .event-board {
    position: relative;
    margin-bottom: 3rem;
    padding: 0;
  }
  .event-board::before {
    content: '';
    display: block;
    position: absolute;
    width: 25%;
    padding-top: 25%;
    left: -10%;
    bottom: -30%;
    /*background-image: url(../images/coin-2.png);
    background-size: contain;
    background-repeat: no-repeat;*/

  }
  .event-board::after {
    content: '';
    display: block;
    position: absolute;
    width: 20%;
    padding-top: 20%;
    right: -5%;
    bottom: -20%;
    /*background-image: url(../images/coin-1.png);
    background-size: contain;
    background-repeat: no-repeat;*/

  }
  .event-rule,
  .event-precaution {
    position: relative;
    max-width: 900px;
    width: 100%;
    
    /*border-top: 5px dotted #e2cdc0;*/
    font-size: 1.5rem;
    /*background-color: rgba(56,30,9,.85);*/
    /*background-image: linear-gradient(0deg, #951d22, #e12e3b, #951d22);*/
    /*background-image: url(../images/section-pattern-orange.png);*/
    /*border: 5px solid #e4b146;*/
    margin-bottom: 5rem;
    /*border-radius: 2rem;*/
    filter: drop-shadow(0 5px 8px rgba(77, 10, 10, 0.8));
  }
  .event-rule h1 img,
  .event-precaution h1 img {
    /*max-width: 200px;*/
    /*margin-top: -10rem;*/
  }
  .event-precaution {
    /*margin-bottom: 200px;*/
  }
}


#btnFinish {
  display: none;
}


.sub-btn-group {
  padding: 0 5%;
  margin-bottom: 3.5rem;
}

.text-golden {
  color: #e4b146;
}

.btn-golden,
.btn-golden:hover {
  background-color: #f0d9bb;
  color: #222;
}

.btn-brown,
.btn-brown:hover {
  background-color: #f71e1e;
  color: #fff;
}

.border-golden {
  border: 1px solid #e5ba89;
  background-color: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: .25rem;
}

@media (min-width: 992px) {
  .border-golden {
    border-radius: .5rem;
  }
  .sub-btn-group {
    padding: 0;
    margin-bottom: 5rem;
    max-width: 450px;
  }
}




#itemBox {
  max-width: 820px;
}

@media (min-width: 992px) {
  #totalDaysWrapper {
    border-right: 3px solid #fff;
  }
}

#totalDays,
#totalCoins {
  font-family: 'Orbitron', sans-serif;
  font-size: 36px;
  color: #ffd200;
}

#totalDays:after {
  content: '天';
  font-size: 12px;
  padding-left: .25rem;
  color: #fff;
  font-family: 'Century Gothic' , 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}
#totalCoins:after {
  content: '元';
  font-size: 12px;
  padding-left: .25rem;
  color: #fff;
  font-family: 'Century Gothic' , 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}


#infoBox {
  border: 3px solid #fff;
  border-top-width: 0;
  background-color: rgba(0, 0, 0, 0.75);
}



.outer-glow {
  box-shadow: 0 0 15px rgba(0, 255, 249, 0.8);
}





#itemGroup {
  border: 3px solid #fff;
  
}

#itemGroup > .col > div.d-flex {
  transform: translateZ(20px);
}

#isLogin {
  display: none;
}
body.login-true #isLogin {
  display: block;
}

.item-check-in {
  border: 1px solid #fff;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
}
.item-check-in:last-child {
  border-right: 2px solid #fff;
}
.item-check-in.item-checked {
  background: rgba(0, 63, 119, 0.8);
}
.item-check-in.item-not-checked {
  background: rgba(142, 0, 0, 0.75);
}
.item-check-in.item-incoming {
  opacity: 0.75;
}
.item-check-in.item-today {
  opacity: 1;
  box-shadow: 0 0 20px rgba(0, 255, 249, 1);
  z-index: 9;
}
.item-check-in.item-today.item-checked {
  opacity: 1;
  background: rgba(0, 63, 119, 0.8);
  box-shadow: 0 0 0 rgba(0, 255, 249, 1);
}


.text-warning {
  color: #ffe400!important;
}

.modal-backdrop {
  /*background-color: transparent!important;*/
  background-color: rgba(0,0,0,0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: all .2s linear;
}
.modal-backdrop.show {
  opacity: 1;
}

@media (min-width: 992px) and (max-width: 1400px) {
  #modalSuccess .modal-dialog {
    max-width: 300px;
  }
}

#modalEventRule .modal-content,
#modalCheckinRecord .modal-content {
  background: rgba(3, 86, 63, 0.95);
  color: #fff;
  border-radius: 0rem;
}
#modalEventRule h5 {
  color: #ffe726;
}
#modalCheckinRecord h3 span {
  color: #ffe726;
  font-weight: bold;
}
#modalCheckinRecord .absent {
  opacity: .75;
  background-color: rgba(0,0,0,0.3);
}



.input-group-validate {
  min-width: 104px;
  flex-basis: 104px;
}
.input-group-validate img {
  width: 100%;
  height: 100%;
}


.bg-dark {
  --bs-bg-opacity: 0.95;
  background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity)) !important;
}




@keyframes animatedBG {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: 100000px 50%;
  }
}

body.hooked {
}

#canvasLine {
  position: absolute;
  top: -100vh;
  transition: all 1s ease-in-out;
  
}


#canvasLine.cast {
  top: 0;
  animation: moving 2s ease-in-out infinite alternate;
}

@keyframes moving {
  from {
    transform: translateY(0px);
  } 
  to {
    transform: translateY(-10px);
  }
}

#canvasWaterFlow {
  position: absolute;
  top: 0;
}
#canvasFish {
  position: absolute;
  top: 50%;
  animation: swim 5s linear infinite;
  transform: translate3d(0, 0, 0) rotate(0deg);
  transform-origin: 50% 50%;
  transition: all 1s ease-in-out;
  left: 50%;
  margin-left: -99px;

}

@media (min-width: 768px) {
  #canvasFish {
    margin-left: -150px;
  }
}

@keyframes swim {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(20px, 0, 0) rotate(-15deg);
  }
  50% {
    transform: translate3d(0, -20px, 0) rotate(0deg);
  }
  75% {
    transform: translate3d(-20px, 0, 0) rotate(15deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}



.text-shadow {
  text-shadow: 0 2px 2px rgba(0, 0, 0, 1);
}

.progress {
  height: 2rem;
}

#turn {
  display: none;
}

.cursor {
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 50%;
  position: absolute;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  pointer-events: none;
  z-index: 9999;
}

.cursoreffect {
  content: "";
  width: 40px;
  height: 40px;
  border: 1px solid #4deeea;
  box-shadow: 0 0 20px #4deeea, 0 0 40px #4deeea, 0 0 80px #4deeea;
  border-radius: 50%;
  position: absolute;
  animation: cursorPulse 1s;
  pointer-events: none;
}

@keyframes cursorPulse {
  0% {-webkit-transform: scale(1.0); opacity: 1;}
  100% {-webkit-transform: scale(3.0); opacity: 0;}
}

.tap-now {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -60px;
  margin-top: -100px;
  background-image: url(../images/tap-now.png);
  background-size: contain;
  pointer-events: none;
  user-select: none;
  opacity: .95;
}



.viva-logo {
  width: 120px;
  margin-top: 0;
  margin-left: 2rem;
  z-index: 90;
  filter: drop-shadow(0 3px 3px rgba(69, 4, 4, 0.8));
  position: absolute;
}

@media (min-width: 768px) {
  .viva-logo {
    position: fixed;
    width: 200px;
    margin-top: 2rem;
    margin-left: 4rem;
    filter: drop-shadow(0 3px 3px rgba(6, 33, 47, 0.8));
  } 
}

.main-logo {
  margin-top: 2rem;
}
@media (min-width: 992px) {
  .main-logo {
    max-width: 400px;
  }
}
@media (min-width: 1920px) {
  .main-logo {
    max-width: 450px;
  }
}
@media (min-width: 2500px) {
  .main-logo {
    max-width: 600px;
  }
}



@media (min-width: 1200px) {
  .fs-xl-5 {
    font-size: 1.25rem!important;
  }  
}









.bg-transparent {
  background: transparent!important;
}


.us-none {
  user-select: none;
}



.default-top {
  transition: all 0.2s ease-in;
  background-color: transparent;
}
.default-top.notontop {
  background-color: rgba(244, 88, 88, 0.95);
}
.default-footer {
  background-color: rgba(244, 88, 88, 0.95);
}

footer.p-3.bg-dark-theme.text-center.text-white.position-relative {
  display: none!important;
}