:root {
  --bg-primary: #ffffff;
}

body {
  color: black;
  font-family: Kanit !important;
  position: relative;
}

.bg-body {
  background: white url(../images/bg-body.png) bottom center no-repeat;
  background-size: cover;
}

body a {
  color: black;
  text-decoration: none !important;
}

body * {
  transition: all 0.3s ease 0s;
}

.container {
  max-width: 500px !important;
}

.voucher-left {
  mask-image: radial-gradient(circle at right 0px bottom 1.25rem,
      transparent 1.25rem,
      #fff 1.3rem);
  -webkit-mask-image: radial-gradient(circle at right 0px bottom 1.25rem,
      transparent 1.25rem,
      #fff 1.3rem);
  mask-position: 0 1.25rem;
  -webkit-mask-position: 0 1.25rem;
  position: relative;
  z-index: 1;
}

.voucher-left:after {
  border-right: 4px dashed #fff;
  content: "";
  position: absolute;
  right: -2px;
  top: 0;
  bottom: 0;
  width: 1px;
  z-index: 2;
  /* background-color: transparent !important; */
}

.voucher-right {
  mask-image: radial-gradient(circle at 0px 1.25rem,
      transparent 1.25rem,
      #fff 1.3rem);
  -webkit-mask-image: radial-gradient(circle at 0px 1.25rem,
      transparent 1.25rem,
      #fff 1.3rem);
  mask-position: 0 -1.25rem;
  -webkit-mask-position: 0 -1.25rem;
  position: relative;
  z-index: -1;
}

.bg-top {
  height: 200px;
  content: "";
  position: relative;
  background-color: #b2e5f8;
  background-image: url(../images/cover.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: contain;
}

.bg-body-pic {
  background: white url(../images/bg-body2.png) center top no-repeat;
  background-size: cover;
}

.text-blue {
  color: rgb(32 72 152);
}

.btn-red {
  --bs-btn-color: #fff;
  --bs-btn-bg: #cf242c;
  --bs-btn-border-color: #cf242c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #bb2d3b;
  --bs-btn-hover-border-color: #b02a37;
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #a52834;
  --bs-btn-active-shadow: inset -2px -2px 0px #ac2027;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #dc3545;
  --bs-btn-disabled-border-color: #dc3545;

  box-shadow: var(--bs-btn-active-shadow);
  letter-spacing: 1.5px;
}

.ratio-9x16 {
  --bs-aspect-ratio: 17.77%;
}

.vote:checked~label {
  outline: 5px solid #1e68ad !important;
  outline-offset: -2px;
}

/* .country:not(:checked) ~ label { */
/* outline: 5px solid #1e68ad !important;
    outline-offset: -5px; */
/* filter: grayscale(1); */
/* } */

.bg-dark-blue {
  background-color: #1e68ad;
}

.bg-blue {
  background: #51bbeb url(../images/bg-blue.jpg) repeat;
}

.letter-space-1 {
  letter-spacing: 1px;
}

.input-undeline {
  border: 0;
  border-bottom: 1px solid #c9c9c9;
  border-radius: 0;
}

.input-undeline:focus {
  border: 0;
  border-bottom: 1px solid #000;
  border-radius: 0;
  box-shadow: none;
}

.bg-pink {
  background-color: #ed4c7c;
}

.bg-orange {
  background-color: #ea4627;
}

.text-orange {
  color: #ea4627;
}

.barcode.nav-pills .nav-link {
  background-color: #f9f9fa;
  color: #000;
  border-radius: 0;
}

.barcode.nav-pills .nav-link.active,
.barcode.nav-pills .show>.nav-link {
  color: #000;
  background-color: #d2d0d1;
}

.bottom {
  background: #fff url(../images/bottom.png) bottom center no-repeat;
  background-size: contain;
  content: "";
  position: relative;
  height: 450px;
  width: 100%;
}

.footer {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 150px;
}

.footer::before {
  position: relative;
  display: block;
  content: " ";
  height: 150px;
  width: 100%;
  background: rgb(95, 178, 209);
  background: linear-gradient(0deg, rgba(95, 178, 209, 1) 0%, rgba(202, 230, 240, 1) 50%, rgba(255, 255, 255, 1) 100%);
  z-index: 1;
}

.footer::after {
  display: block;
  content: " ";
  background: url(../images/footer.png) bottom center no-repeat;
  background-size: contain;
  height: 150px;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 2;
}

.btn-enter {
  background: transparent url(../images/enter.png) center center no-repeat;
  width: 230px;
  height: 75px;
  transition: all 0.5s;
}

.btn-enter:hover,
.btn-enter:active {
  background: transparent url(../images/enter-blue.png) center center no-repeat;
}

.btn-confirm {
  background: transparent url(../images/confirm.png) center center no-repeat;
  width: 230px;
  height: 75px;
  transition: all 0.5s;
}

.btn-confirm:hover,
.btn-confirm:active {
  background: transparent url(../images/confirm-blue.png) center center no-repeat;
}

.btn-claim {
  background: transparent url(../images/claimyourvoucher-yellow.png) center center no-repeat;
  width: 230px;
  height: 75px;
  transition: all 0.5s;
}

.btn-claim:hover,
.btn-claim:active {
  background: transparent url(../images/claimyourvoucher-blue.png) center center no-repeat;
}

.btn-location {
  background: transparent url(../images/redeem-location---yellow.png) center center no-repeat;
  width: 230px;
  height: 75px;
  transition: all 0.5s;
}

.btn-location:hover,
.btn-location:active {
  background: transparent url(../images/redeem-location---blue.png) center center no-repeat;
}

.btn-terms {
  background: transparent url(../images/term---yellow.png) center center no-repeat;
  width: 230px;
  height: 75px;
  transition: all 0.5s;
}

.btn-terms:hover,
.btn-terms:active {
  background: transparent url(../images/term---blue.png) center center no-repeat;
}

.btn-register {
  background: transparent url(../images/register.png) center center no-repeat;
  width: 230px;
  height: 75px;
  transition: all 0.5s;
}

.btn-register:hover,
.btn-register:active {
  background: transparent url(../images/register-blue.png) center center no-repeat;
}


div:has(#btn-yes:checked) .btn-no {
  filter: grayscale(100%);
  opacity: 0.3;
}

div:has(#btn-no:checked) .btn-yes {
  filter: grayscale(100%);
  opacity: 0.3;
}

div:has(#btn-vacation:checked) .btn-business {
  filter: grayscale(100%);
  opacity: 0.3;
}

div:has(#btn-business:checked) .btn-vacation {
  filter: grayscale(100%);
  opacity: 0.3;
}

.bg-grey {
  background-color: #cedae6;
}

.form-check-input {
  border-color: #777777;
}


.bg-email {
  background: rgb(254, 182, 18);
  background: linear-gradient(90deg,
      rgba(254, 182, 18, 1) 0%,
      rgba(251, 219, 1, 1) 100%);
  background-size: 100% 100px;
  background-repeat: no-repeat;
  padding-top: 130px;
}

.input-border {
  border-radius: 50px;
  border: 1px solid #f5e06b;
  background-color: #e5e5e5;
}

.input-inner-shadow {
  box-shadow: inset #ccc 3px 3px 0px;
  border: 0px;
  background-color: #e5e5e5;
}

@media (max-width: 1799.99px) {}

@media (max-width: 1599.99px) {}

@media (max-width: 1399.99px) {}

@media (max-width: 1199.99px) {
  .bg-top {
    background-size: cover;
  }

  .bg-body {
    background-size: cover;
  }

  .footer::after {
    background-size: cover;
  }
}

@media (max-width: 991.99px) {}

@media (max-width: 767.99px) {}

@media (max-width: 575.99px) {
  .bg-top {
    height: 160px;
  }
  .footer {
    height: 120px;
  }
  .footer::after {
    height: 120px;
  }
  .bottom {
    background-size: cover;
  }
}

@media print {}