@font-face {
  font-family: PoppinsSemiBold;
  src: url(/assets/fonts/PoppinsSemiBold.ttf);
}

@font-face {
  font-family: PoppinsBold;
  src: url(/assets/fonts/PoppinsBold.ttf);
}

@font-face {
  font-family: PoppinsMedium;
  src: url(/assets/fonts/PoppinsMedium.ttf);
}

body {
  position: relative;

  background: url("/assets/images/bg.png") center center / auto 100% no-repeat ; 
  height: 100vh;
}
.top-image {
    width: 100%; /* Adjust width as needed */
    z-index: 1000; /* Ensures it stays above other elements */
}

.bottomButton {
  background-image: url("/assets/images/whiteBG.png");
  background-size: 100% 100%;
  position: absolute;
  bottom: 0;
}

.gray-box {
    background-color: #f2f2f2;
    border-radius: 20px;
    padding: 20px;
}

input[type="checkbox"] {
    margin-right: 10px;
}

label {
  color: #ff0000;
  font-family: 'PoppinsMedium';
  font-size: 1rem;
}

ul.no-dot {
  list-style-type: none;
}

.celebration {
  width: 100px;
}

.errorOTPImage {
  max-width: 300px;
}

.qrTitle {
  max-width: 300px;
}
.errorOTPImageDiv {
  padding-top: 20px;
  padding-bottom: 20px;
}

.h2formatted {
  color: #ff0000;
  font-family: PoppinsMedium;
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 30px;
}

.btn-purple {
  background: #F7F7F9 !important;
  background-color: #F7F7F9 !important;
}

.back-button {
  max-width: 150px
}

.errorBox {
  padding: 10px;
}

.container {
  max-width: 600px;
}

.qrRedeemedBox  {
  padding: 20px;
  background-color: #ff0000;
  border: 3px solid green;
  border-radius: 15px;
}

.colorBlack {
  color:#fff;
  font-weight: 800;
  font-family: LataBold;
}

.showDiv {
 display: block !important;
}

.hideDiv {
  display: none !important;
}

.errorTNCimage {
  max-width: 350px;
  margin-top: 20px;
}

.errorTNC {
  display:none;
  visibility:hidden;
}

.errorSelectOne {
  display:none;
  max-width: 150px;
  margin: auto;
  margin-top: 20px;
}

.privacy-policy-box {
  width: 100%;
    height: 300px;
    overflow: auto;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    margin-top: 20px;
}

.reminder {
  text-align: center;
    margin-top: 15px;
    color: red;
}

.unicom-logo {
  display: block;
  margin:0 auto;
  padding-top: 1%;
  max-width: 400px;
}
.tncBox {
  margin-top: 100px;
}

.idole-logo {
  display: block;
  margin:0 auto;
  padding-top: 4%;
  max-width: 200px;
}
.oneTimeLabel {
  display: block;
  margin:0 auto;
  padding-top: 10%;
  max-width: 300px;
}
.otp-group {
  padding-top: 20%;
}
.otp {
  display: block;
  margin:0 auto;
  max-width: 300px;
  font-size: 3rem !important;
}

.qr-code {
  display: block;
  margin:0 auto;
  max-width: 250px;
  padding-top: 10%;
  padding-bottom: 10%;
}

.page-1 {
  display: block;
  max-width: 400px;
  margin:0 auto;
}
.start-button {
  display: block;
  max-width: 250px;
  padding-top:5%;
  background: transparent;
  border: 0px;
  margin: 0 auto;
}
.submitButton {
  display: block;
  max-width: 250px;
  background: transparent;
  border: 0px;
  margin: 0 auto;
}
.generateOTPbutton {
  display: block;
  max-width: 250px;
  padding-top:5%;
  background: transparent;
  border: 0px;
  margin: 0 auto;
}
.verifyButton {
  display: block;
  max-width: 150px;
  padding-top:5%;
  background: transparent;
  border: 0px;
  margin: 0 auto;
}

.modal-content {
  background: transparent;
  border: 0px solid transparent;
}

.swal-modal {
  background: #00807B;
}

.swal-text {
  text-align: center;
    color: #ff0000;
    font-family: NexaBold;
    font-size: 1.5rem;
}

.swal-footer {
  text-align: center;
}

.swal-button {
  background-color: #95DBDD;
  color:#00807B;
}

#errorName {
   font-family: GothamBold;
    background: #4b6f9d;
    max-width: 90%;
    margin: 0 auto;
    margin-top: 15px;
    color: #ff0000;
    font-size: 0.8rem;
}
.hideCSS {
  display: none;
}

@media only screen and (max-width: 430px) {
  .container {
    max-width: 360px;
  }
  .product-size {
    max-width: 250px;
  }
  .page-1 {
    max-width: 300px;
  }
  .page-2 {
    max-width: 300px;
  }
  .page-2b {
  max-width: 300px;
}
.product {
  width: 50%;
}
  .unicom-logo {
    padding-top: 2%;
    max-width: 70%;
  }
  body {
    position: relative;
    
    background: url("/assets/images/bg.png") center center / auto 100% no-repeat; 
    height: 100vh;
  }
  .lancome-qr-subtitle {
    padding-top: 10%;
    max-width: 100%;
  }
  .otp-group {
  padding-top: 20%;
  }
}


@media only screen and (max-width: 380px) {
  .product {
  width: 25%;
}
}



@media only screen and (min-width: 430px) and (max-width: 800px) {
  .product {
  width: 40%;
}
}