/* pop box */
.pop-box {
	top: 0;
    z-index: -2;
    background: rgba(0,0,0,.6);
    opacity: 0;
    transition: .3s;
    position:fixed;
}

.pop-box.fade {
	opacity: 1;
    z-index: 999;
    transition: .3s
}

.pop-box .pop-inner {
    overflow: hidden;
    margin: 6% auto;
    padding: 20px
}

.pop-box .pop-inner .popBtn-wrap {
    float: right;
    font-size: 25px
}

.pop-box .pop-inner .popBtn-wrap button {
    border: none;
    cursor: pointer
}

.pop-box .pop-inner .popTitle-wrap {
    margin-bottom: 20px;
    padding: 20px 0;
    font-weight: bold
}

.pop-box .pop-inner .popTitle-wrap .flag {
    width: 10px;
    height: 10px;
    transform: rotateZ(45deg)
}

.pop-box .pop-inner .popTitle-wrap .popTitle-item {
    padding-left: 15px;
    line-height: 10px;
}
/* pop box */

/* DAILY LOGIN REWARD */

.member-daily-reward-container{
	max-width: 1180px;
    margin: 1.5rem auto;
}

.daily-reward-container{
	max-width: 1280px;
    margin: 1.5rem auto;
    width: 100%;
}

.daily-reward-title{
	font-family: sans-serif;
	text-align: center;
    pointer-events: none;
    font-size: 40px;
    padding: 1.5rem 3px 3px 3px;
    font-weight: 900;
    position: relative;
}


.dailyLoginReward{
	display: flex;
    flex-direction: row;
    overflow-x: auto;
    cursor: grab;
    position: relative;
    scrollbar-width: none;
    padding: 20px;
}

.dailyLoginReward::-webkit-scrollbar{
	width:0px;
	height:0px;
}

.reward-frame{
	position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-width:169px;
    max-width:169px;
    margin: 1.5rem 1rem;
    padding: 1rem 0.5rem;
    gap: 1rem;
    border-radius: 15px;
}

.reward-frame::before{
	content: "";
	position: absolute;
	top: 0;
  	left: 0;
  	right: 0;
  	bottom: 0;
  	border-radius: 15px; 
 	border: 3px solid transparent;
  	-webkit-mask:
    linear-gradient(#fff 0 0) padding-box, 
    linear-gradient(#fff 0 0);
  	-webkit-mask-composite: destination-out;
  	pointer-events: none;
}

.reward-img{
	height: 140px;
	margin-top: -20px;
	max-width:100%;
}

.check-in-day-wrap{
	position: relative;
    width: 70px;
    height: 50px;
    background: rgba(252,185,19,1);
    top: -30px;
}

.check-in-day-wrap:before{
	content: '';
    position: absolute;
    top: 0;
    left: -29.5px;
    width: 0px;
    height: 0px;
    border-right: 30px solid rgba(252,185,19,1);
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
}

.check-in-day-wrap:after{
	 content: '';
     position: absolute;
     top: 0;
     right: -29.5px;
     width: 0px;
     height: 0px;
     border-left: 30px solid rgba(252,185,19,1);
     border-top: 25px solid transparent;
     border-bottom: 25px solid transparent;
}

.check-in-day{
	padding-top: 15px;
    font-size: 18px;
    text-align: center;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    font-weight: bold;
    text-transform: uppercase;
}


.reward-check-in-button{
	font-size: 15px;
    font-weight: 600;
    padding: 10px 35px;
    border-radius: 10px;
    min-width: 96px;
    transition: all 0.2s linear;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.reward-check-in-button:hover{
	cursor: pointer;
}

.claimed-btn:disabled{
	cursor: not-allowed;
	padding: 8px 25px;
}

.claim-next:disabled{
	cursor: not-allowed;
}


.claim-today{
	animation: glowing 1300ms infinite;
}

.dailyRewardPop-box .dailyRewardPop-wrapper {
	width: 500px;
}

.dailyRewardPop-box .dailyRewardContent-wrapper{
	background: #00000080;
}

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop {
    width: 100%;
    height: 340px;
    border-radius: 10px;
}

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .description-title{
	margin-top: 40px;
}

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .description-title .text {
    padding: 2px 0;
    margin: 0 auto;
    font-size: 25px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    color: #000;
}

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .description-content{
	text-align: center;
    margin-top: 30px;
    color: #000;
}

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .description-content .success-icon{
	font-size: 30px;
    margin-bottom: 30px;
}

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .description-content .success-icon i{
	border: solid 4px;
    border-radius: 50%;
    padding: 10px;
}

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .description-content .please-login-icon{
	font-size: 30px;
    margin-bottom: 30px;
}

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .description-content .please-login-icon i{
	border: solid 4px;
    border-radius: 50%;
    padding: 18px 20px;
    font-size: 30px;
}

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .dailyRewardPop-btn{
	text-align: center;
    margin-top: 30px;
}

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .dailyRewardPop-btn button{
	padding: 9px 40px;
    border-radius: 5px;
    font-size: 15px;
    margin: 0 10px;
    cursor: pointer;
}

.check-in-day.en-streak{
	padding-top: 6px;
	white-space: pre-line;
}

.check-in-day.zh-streak{
	padding-top: 3px;
	white-space: pre-line;
}
/* DAILY LOGIN REWARD */

/* DAILY LOGIN REWARD */

@keyframes lights {
  0% {
    color: rgb(212 175 55);
    text-shadow: 0 0 1em hsl(69deg 100% 50% / 20%), 
    	0 0 0.125em hsl(320deg 100% 60% / 30%), 
    	-1em -0.125em 0.5em hsl(40deg 100% 60% / 0%), 
    	1em 0.125em 0.5em hsl(200deg 100% 60% / 0%);
  }
  
  30% { 
    color: rgb(212 175 55);
    text-shadow: 0 0 1em hsl(64deg 100% 50% / 50%),
     	0 0 0.125em hsl(68deg 100% 60% / 50%),
     	-0.5em -0.125em 0.25em hsl(40deg 100% 60% / 20%),
     	0.5em 0.125em 0.25em hsl(82deg 100% 60% / 40%);
  }
  
  40% { 
    color: hsl(63deg 100% 95%);
    text-shadow: 0 0 1em hsl(51deg 100% 50% / 50%), 
    	0 0 0.125em hsl(320deg 100% 90% / 50%), 
    	-0.25em -0.125em 0.125em hsl(40deg 100% 60% / 20%), 
    	0.25em 0.125em 0.125em hsl(69deg 100% 60% / 40%);
  }
  
  70% {
    color: rgb(212 175 55);
    text-shadow: 0 0 1em hsl(71deg 100% 50% / 50%), 
    	0 0 0.125em hsl(50deg 100% 60% / 50%), 
    	0.5em -0.125em 0.25em hsl(40deg 100% 60% / 20%), 
    	-0.5em 0.125em 0.25em hsl(66deg 100% 60% / 40%);
  }
  
  100% {
    color: rgb(212 175 55);
    text-shadow: 0 0 1em hsl(66deg 100% 50% / 20%), 
    	0 0 0.125em hsl(75deg 100% 60% / 30%), 
    	1em -0.125em 0.5em hsl(40deg 100% 60% / 0%), 
    	-1em 0.125em 0.5em hsl(200deg 100% 60% / 0%);
  }
  
}

@keyframes glowing {
  0% {
	box-shadow: 0 0 5px #284bf7;
    background: rgb(5 86 174);
  }
  50% {
  	box-shadow: 0 0 20px #19ade8;
    background: rgb(2 69 142);
  }
  100% {
	box-shadow: 0 0 5px #05a5a8;
    background: rgba(1,59,122,1);
  }
}

.reward-frame{
	background-color:#2c2c2c;
	color:#fff;
}

.reward-frame::before{
	background: linear-gradient(120deg, #F1C840, #9D6B00, #D4AF37) border-box;
}

.reward-frame-today{
	box-shadow: 0 0 1rem 0 #f9ff00;
}

.member-daily-reward-container{
	/* background-image: url('/images/templates/Template 2/dailyCheckInReward/DT_DMM_BG_T2_Desktop.png'); */
    background-size: 1180px 460px;
    background-repeat: no-repeat;
}

.daily-reward-container .bg-img img{
	position:absolute;
	width: 1280px;
	height: 478px;
}

.check-in-day-wrap{
    background: rgba(252,185,19,1);
}

.check-in-day-wrap:before{
    border-right: 30px solid rgba(252,185,19,1);
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
}

.check-in-day-wrap:after{
     border-left: 30px solid rgba(252,185,19,1);
     border-top: 25px solid transparent;
     border-bottom: 25px solid transparent;
}

.check-in-day{
	color:#000;
}

.daily-reward-title{
	animation: lights 5s 750ms linear infinite;
}

.reward-check-in-button{
	background: rgba(249,18,18,1);
    color: #fff;
}

.claimed-btn:disabled{
 	background-color: #69739b7d;
    color: #ffffff;
}

.claim-next:disabled{
	background-color: #cccccc;
  	color: #666666;
}

.claim-today{
	color: #fff;
	border: none;
	
}

.dailyRewardPop-box .dailyRewardContent-wrapper{
	background: linear-gradient(136deg, #f6f4f4, #dddddf);
    border: 1px solid transparent;
}

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .description-content .success-icon i,
.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .description-content .please-login-icon i{
	color: rgba(252,185,19,1);
}

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .dailyRewardPop-btn button{
	border: none;
	color: #fff;
	background: rgb(255 182 0);
}

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .dailyRewardPop-btn button:hover{
	background: #8e6d00;
}

#dailyRewardLaterBtn{
	background: #013b7a;
}

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .description-content .text a{
	color: #013b7a;
}

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .description-content .text a:hover{
	border-bottom: 2px solid #013b7a;
}
/* DAILY LOGIN REWARD */