.loadingPage{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: url(../img/logo.jpg) center center no-repeat;
  background-color: #FFF;
  z-index: 100;
  text-align: center;
}
.loadingPage p{
  display: inline-block;
  position: absolute;
  top: 56%;
  left: auto;
  color: #333;
}
.bottomAds{
  margin-top: 80px;
}
.mobileNav{
  display: none;
  height: 20px;
  text-align: center;
  padding: 1px 10px 0px 10px;

}
.mobileNav .siteIcon{
  width: 20px;
  height: 20px;
}
.mobilemenu .iconArrow{
  display: none;
}
.mobilemenu.mobilemenu-theme .mobilemenu--inner{
  background: url(../img/background.png) right bottom no-repeat;
  background-size: 130px;
  background-color: #FCFAF5;
}
.mobilemenu.mobilemenu-theme .dropdown>a{
  color: #CEA84D;
  border-bottom: 0px;
}
.mobilemenu.mobilemenu-theme ul li a{
  border-bottom: 0px;
}
.topNav .userNav{
  padding-left: 0px;
}
.userWrapper{
  padding: 120px 0px;
}
.userNav>ul{
  list-style: none;
  padding: 0px;
  margin: 0px;
}
.userNav>ul>li a{
  display: inline-block;
  color: #CEA84D;
  font-size: 1.75rem;
  padding: 10px 20px;
}
.userNav>ul>li>ul{
  list-style: none;
  padding: 0px;
  margin: 0px;
}
.userNav>ul>li>ul{
  height: 1px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 200ms, visibility 600ms;
  transition: opacity 200ms, visibility 600ms;
}
.userNav>ul>li>ul>li a{
  display: inline-block;
  color: #8A8D8F;
  font-size: 1.25rem;
  padding: 5px 20px;
}
.userNav>ul>li>ul>li a.active{
  background-color: #F1F2F5;
  color: #101820;
}
.userNav>ul>li .siteIcon{
   margin-left: 5px;
}
.userNav>ul>li.active>ul{
  height: auto;
  visibility: visible;
  opacity: 1;
} 
.userNav>ul>li.active .iconArrow{
  transform: rotate(180deg);
}
.searchNav .dropdown-toggle::after{
  display: none;
}
.searchNav .dropdown-toggle .siteIcon{
  width: 12px;
  height: 12px;
  margin-left: 30px;
}
.searchNav .dropdown-menu{
  width: 100%;
  border: 1px solid #CEA84D;
}
.searchNav .searchBtn{
  background-color: transparent;
  border: 0px;
}
.searchNav .dropdown-menu .dropdown-item:hover{
  background-color: #9C8F691A;
}
.searchNav .searchBtn .iconSearchPrimary{
  position: relative;
  top: 3px;
  width: 25px;
  height: 25px;
}
.searchNav .dateGroup{
  position: relative;
  margin-bottom: 35px;
}
.searchNav .dateGroup .siteIcon{
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 20px;
  top: 10px;
}
.searchNav .labels{
  width: 100%;
  padding: 10px 0px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: #989898;
}
.searchNav .primaryBtn{
  width: 47%;
  margin-right: 2%;
}
.searchNav .grayBtn{
  width: 47%;
}

.searchNav .dateGroup .form-control:focus + .siteIcon{
  background-image: url(../img/icon_cal_active.svg);
}

.searchNav .form-control{
  border: 1px solid #D9D9D9;
  color: #8A8D8F;
  font-size: 1.125rem;
  padding: 10px 20px;
  border-radius: 5px;
}
.searchNav .form-control:focus{
  border: 1px solid #CEA84D;
  color: #CEA84D;
}
.userMessages{
  position: relative;
  font-size: 1.75rem;
  font-weight: 700;
  color: #CEA84D;
  padding: 10px 0px;
  border-bottom: 2px solid #CEA84D;
  margin-bottom: 35px;
}
.userMessages .remarkBtn{
  cursor: pointer;
  display: inline-block;
  position: absolute;
  right: 0px;
  top: 20px;
}
.userMessages .remarkBtn .siteIcon{
  width: 30px;
  height: 30px;
}
.cardWrapper .cardItem{
  position: relative;
  border-radius: 5px;
  background: #19152F;
  margin-bottom: 5px;
}
.cardWrapper .cardItem.national{
  background: url(../img/demo/card4.jpg) center  bottom no-repeat;
  background-color: #19152F;
  background-size: cover;
  min-height: 330px;
}
.cardWrapper .cardItem.national .barcode{
  text-align: center;
  margin-bottom: 35px;
}
.cardWrapper .cardItem .from{
  width: 100%;
  position: absolute;
  bottom: 10px;
  text-align: center;
  color: #FFF;
  font-size: 1rem;
  font-weight: 700;
  margin: 20px 0px 0px 0px;
}
.cardWrapper .cardItem.gift{
  background: url(../img/demo/card2.png) right top no-repeat;
  background-color: #01092F;
  background-size: 100%;
}
.cardWrapper .cardItem.honor{
  background: url(../img/demo/card3.png) center top no-repeat;
  background-color: #040000;
  background-size: 100%;
}
.cardWrapper .cardItem.other{
  background: url(../img/background.png) right top no-repeat;
  background-color: #FCFAF5;
  background-size: 100px;
}
.cardWrapper .cardItem.other .info{
  border-top: 1px solid #8A8D8F;
  color: #8A8D8F;
}
.cardWrapper .cardItem.other .info h2{
  color: #8A8D8F;
}

.cardWrapper .cardItem .content{
  padding: 20px 20px 30px 20px;
}
.cardWrapper .cardItem.national .content{
  padding: 10px 0px 0px 30%;
}
.cardWrapper .cardItem h1{
  font-size: 1.875rem;
  font-weight: 600;
  color: #CEA84D;
  text-align: center;
  margin: 20px 0px 20px 0px;
}
.cardWrapper .cardItem .label{
  font-size: 1.25rem;
  font-weight: 400;
  color: #CEA84D;
  text-align: center;
  margin: 0px 0px 10px 0px;
}
.cardWrapper .cardItem .points{
  font-family: "FS Lucas Pro";
  font-size: 3.125rem;
  font-weight: 700;
  color: #CEA84D;
  text-align: center;
  margin: 0px 0px 10px 0px;
}
.cardWrapper .cardItem .toggle{
  cursor: pointer;
  text-align: center;
  height: 30px;
  
}
.cardWrapper .cardItem .toggle.active .siteIcon{
  transform: rotate(180deg);
}

.cardWrapper .cardItem .info{
  margin-top: 0px;
  padding: 20px 0px;
  border-top: 1px solid #8A8D8F;
}
.cardWrapper .cardItem .info h2{
  font-size: 0.9375rem;
  font-weight: 700;
  color: #FFF;
}
.cardWrapper .cardItem .info{
  display: none;
  font-size: 0.9375rem;
  font-weight: 400;
  color: #FFF;
}
.cardWrapper .cardItem .info .barcode{
  margin-top: 20px;
  width: 100%;
  text-align: center;
}
.cardWrapper .cardItem .info .barcode img{
  width: 300px;
}
.msgModal .modal-dialog{
  top: 25%;
}
.msgModal .modal-body{
  padding: 40px 0px;
}
.msgModal .modal-body p{
  font-size: 1.1875rem;
  font-weight: 700;
  color: #CEA84D;
  text-align: center;
}
.remarkModal .modal-header{
  border: 0px;
  padding: 0px;
}
.remarkModal .modal-header .btn-close{
  background-image: url(../img/icon_close.svg);
  background-size: contain;
}
.remarkModal .modal-header .modal-title{
  font-size: 1.1875;
  color: #CEA84D;
  font-weight: 700;
}
.remarkModal .modal-content{
  padding: 30px 50px;
}
.remarkModal .modal-dialog{
  top: 0%;
}
.remarkModal .modal-body{
  padding: 40px 0px;
  overflow: scroll;
}
.remarkModal .modal-body {
  font-size: 1rem;
  font-weight: 400;
  color: #8A8D8F;
  text-align: left;
}

.tableWrapper{
  width: 100%;
  font-size: 0.975rem;
}


.tableWrapper .tableHeader{
  color: #FFF;
  background-color: #CEA84D;

}

.tableWrapper .tw-1{
  padding: 10px 1px;
  display: inline-flex;
  align-items: center;
  width: 8%;
}
.tableWrapper .tw-2{
  padding: 10px 10px;
  display: inline-flex;
  align-items: center;
  width: 15.66%;
}
.tableWrapper .tw-4{
  padding: 10px 10px;
  display: inline-flex;
  align-items: center;
  width: 30.32%;
}
.tableWrapper .hiddenRows{
  display: none;
  background-color: #FCFAF5;
  border-bottom: 1px solid #CEA84D;
}
.tableWrapper .active .hiddenRows{
  display: block;
}
.tableWrapper .hiddenRows .rowsHeader{
  color: #CEA84D;
}
.tableWrapper .toggleBtn{
  cursor: pointer;
  width: 25px;
  height: 20px;
  text-align: center;
}
.tableWrapper .active .toggleBtn{
   transform: rotate(180deg);
}
.prizeWrapper{
  margin-top: 30px;

}
.singlePrizeItem{
  background-color: #FCFAF5;
  padding: 25px 20px;
  border-radius: 5px;
  margin-bottom: 35px;
}

.singlePrizeItem .duration{
  font-size: 0.875rem;
  color: #CEA84D;
  margin-bottom: 15px;
}

.singlePrizeItem .date,.singlePrizeItem .remark{
  font-family: "Noto Sans TC";
  font-size: 0.975rem;
  color: #101820;
  margin-bottom: 5px;
  text-align: center;
}

.singlePrizeItem .no{
  font-family: "Noto Sans TC";
  font-size: 1.4375rem;
  font-weight: 700;
  color: #CEA84D;
  margin-bottom: 5px;
  text-align: center;
}

.singlePrizeItem .amount{
  font-family: "Noto Sans TC";
  font-size: 1.0625rem;
  font-weight: 500;
  color: #101820;
  margin-bottom: 15px;
  text-align: center;
}

.singlePrizeItem .prizeInfo{
  font-family: "Noto Sans TC";
  font-size: 1.5rem;
  font-weight: 500;
  color: #CEA84D;
  margin-bottom: 15px;
  padding: 15px 0px;
  text-align: center;
  border-top: 1px solid #CEA84D;
  border-bottom: 1px solid #CEA84D;
}
.singlePrizeItem .expired{
  font-family: "Noto Sans TC";
  font-size: 0.975rem;
  font-size: 400;
  color: #101820;
  margin-bottom: 10px;
  text-align: center;
}

.singleInvoiceItem{
  background-color: #FCFAF5;
  padding: 15px 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.singleInvoiceItem>div{
  font-size: 0.875rem;
  color: #101820;
  margin-bottom: 3px;
}


.singleInvoiceItem .no{
  font-family: "Noto Sans TC";
  font-size: 1.4375rem;
  font-weight: 700;
  color: #CEA84D;
  margin-bottom: 5px;
  margin-top: 5px;
  text-align: center;
}

.singleInvoiceItem .amount{
  font-family: "Noto Sans TC";
  font-size: 1.0625rem;
  font-weight: 500;
  color: #101820;
  margin-bottom: 15px;
  text-align: center;
}
.singleInvoiceItem .info{
  display: none;
  border-top: 1px solid #8A8D8F;
  padding-top: 15px;
}
.singleInvoiceItem .info h2{
  font-family: "Noto Sans TC";
  font-size: 1.5rem;
  font-weight: 500;
  color: #CEA84D;
  margin-bottom: 15px;
  padding: 15px 0px;
  text-align: center;
  border-top: 1px solid #CEA84D;
  border-bottom: 1px solid #CEA84D;
}
.singleInvoiceItem .toggle{
  text-align: center;
}
.singleInvoiceItem .toggle .siteIcon{
  transform: rotate(180deg);
}
.singleInvoiceItem .toggle.active .siteIcon{
  transform: rotate(0deg);
}
.singlePrizeItem .info > div{
  font-family: "Noto Sans TC";
  font-size: 0.975rem;
  font-size: 400;
  color: #101820;
  margin-bottom: 10px;
  text-align: center;
}

.singleCardItem{
  background-color: #FCFAF5;
  padding: 25px 20%;
  border-radius: 5px;
  margin-bottom: 35px;
  text-align: center;
  margin-right: 30px;
}

.singleCardItem h1{
  font-size: 1.675rem;
  font-weight: 600;
  color: #CEA84D;
  margin-bottom: 8px;
}

.singleCardItem .label{
  font-size: 1.2rem;
  font-weight: 400;
  color: #CEA84D;
  margin-bottom: 3px;
}

.singleCardItem .no{
  font-size: 1.675rem;
  font-weight: 600;
  color: #CEA84D;
  margin-bottom: 5px;
}

.singleCardItem .btnBlock{

}


.singleCouponItem{
  background-color: #FCFAF5;
  padding: 25px 10px;
  border-radius: 5px;
  margin-bottom: 35px;
  text-align: center;
  margin-right: 30px;
}

.singleCouponItem h1{
  font-size: 1.4375rem;
  font-weight: 700;
  color: #CEA84D;
  margin-bottom: 8px;
}

.singleCouponItem .expired,.singleCouponItem .duration{
  font-size: 0.8rem;
  font-weight: 400;
  color: #101820;
  margin-bottom: 0px;
}


.singleCouponItem .btnBlock{
  text-align: center;
}

.singleCouponItem .btnBlock>button{
  border: 0px;
  background-color: transparent;
}

.singleCouponItem .info{
  margin-top: 0px;
  padding: 20px 0px;
  border-top: 1px solid #8A8D8F;
  font-size: 0.9375rem;
  font-weight: 400;
  color: #8A8D8F;
  text-align: left;
}
.singleCouponItem .info h2{
  font-size: 0.9375rem;
  font-weight: 700;
  color: #8A8D8F;
}

.singleCouponItem .info .barcode{
  margin-bottom: 20px;
  width: 100%;
  text-align: center;
}
.singleCouponItem .info .barcode img{
  width: 80%;
}
.singleCouponItem .toggle{
  cursor: pointer;
  text-align: center;
  height: 30px;
  margin-top: 8px;
}
.singleCouponItem .toggle .siteIcon{
  transform: rotate(180deg);
}
.singleCouponItem .toggle.active .siteIcon{
  transform: rotate(0deg);
}
.singleCouponItem .brandLogo{
  margin: 5px 30px;
}

.noData{
  padding: 150px 0px;
  text-align: center;
  color: #989898;
  font-size: 1.125rem;
  font-weight: 400;
}
.noData img{
  width: 150px;
}
.tableStyle1{
  width: 100%;
  border: 0px;
}
.tableStyle1 thead th{
  padding: 10px 20px;
  border-top: 1px solid #9C8F69;
  border-bottom: 1px solid #9C8F69;
  color: #9C8F69;
  font-size: 0,975rem;
  white-space: nowrap;
}
.tableStyle1 tbody tr td{
  padding: 10px 20px;
  color: #8A8D8F;
  font-size: 0,975rem;
}
.tableStyle1 tbody tr:nth-child(even) td{
  padding: 10px 20px;
  color: #9C8F69;
  background: #9C8F691A;
  font-size: 0,975rem;
}

.tableStyle1 .noWrap{
  white-space: nowrap;
}

.paginateBlock{
  margin-top: 35px;
}
.pagination{
  justify-content: center;
}

.pagination a.page-link{
  color: #8A8D8F;
  border: 0px;
  padding: 10px 10px;
  margin-right: 10px;
}

.pagination a.page-link.active,.pagination a.page-link:hover{
  background-color: #FBFBFB;
  border-radius: 5px;
}


.barcode>div{
  margin: auto;
}


@media (min-width: 601px) and (max-width: 1199px) {
  html{
    font-size: 14px;
  }
  body.dollar{
    background-size: 140px;
  }
  .mobileNav{
    display: inline-block;
  }
  .userWrapper {
      padding: 70px 0px;
  }
  .primaryBtn{
    font-size: 1rem;
  }
  .grayBtn{
    font-size: 1rem;
  }
  .singleCouponItem{
    margin-right: 10px;
  }
  .msgModal .modal-body{
    padding: 30px 0px 0px 0px;
  }
  .cardWrapper .cardItem.national{
    min-height: 240px;
  }
  .cardWrapper .cardItem.national .content{
        padding: 10px 20px 0px 30%;
  }
}


@media (max-width: 600px) {
  html{
    font-size: 12px;
  }
  body.dollar{
    background-size: 120px;
  }
  .mobileNav{
    display: inline-block;
  }
  .userWrapper {
      padding: 90px 0px;
  }
  .userMessages{
    margin-bottom: 15px;
  }
  .cardWrapper .cardItem.national{
    background: url(../img/demo/card5.jpg) center  bottom no-repeat;
    background-color: #19152F;
    background-size: cover;
    min-height: 300px;
  }
  .cardWrapper .cardItem.national .content{
     padding: 5px 0px 60px 30%;
  }
  .msgModal .modal-body{
    padding: 30px 0px;
  }
  .userMessages .remarkBtn{
    top: 13px;
  }
  .remarkTitle{
    font-size: 1rem;
  }
  .searchNav{
    margin-bottom: 10px;
  }
  .searchNav .dateGroup{
    margin-bottom: 10px;
  }
  .searchNav .labels{
    padding: 0px 0px 10px 0px;
  }
  .searchNav .primaryLineBtn{
    margin-bottom: 10px;
  }
  .prizeWrapper{
    margin-top: 10px;
  }
  .singlePrizeItem{
    margin-bottom: 10px;
  }
  .singleCardItem{
    margin-bottom: 10px;
  }
  .singleCouponItem{
    padding: 10px;
    margin-right: 0px;
    margin-bottom: 10px;
  }
  .remarkModal .modal-content{
    padding: 30px;
  }
  .remarkModal .modal-body{
    padding: 20px 0px;
  }
  .paginateBlock{
    margin-top: 10px;
  }
  .remarkModal .modal-body{
    overflow-x: scroll;
  }
  .tableStyle1 tbody tr td{
    padding: 5px 10px;
  }
  .tableStyle1 tbody tr:nth-child(even) td{
    padding: 5px 5px;
  }
  .tableStyle1 thead th{
    padding: 5px 5px;
  }
  .bottomAds{
    margin-top: 10px;
  }


}