/* pop box */
.pop-box {
	top: 0;
	z-index: -2;
	opacity: 0;
	position:fixed;
}

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

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

.pop-box .pop-inner .popBtn-wrap {
	float: right
}

.pop-box .pop-inner .popBtn-wrap button {
	border: none;
	cursor: pointer
}
	
.pop-box .pop-inner .popTitle-wrap {
	padding: 10px 0;
	font-weight: var(--MED_FONT_WEIGHT)
}
	
.pop-box .pop-inner .popTitle-wrap .flag {
	width: 7px;
	height: 7px;
	transform: rotateZ(45deg)
}
	
.pop-box .pop-inner .popTitle-wrap .popTitle-item {
	padding-left: 15px;
	line-height: 10px
}
/* pop box */

/* DAILY LOGIN REWARD */
.daily-reward-container,
.member-daily-reward-container{
    margin: 1.5rem 0 1.5rem 0;
    width: 100%;
}

.daily-reward-title{
	text-align: center;
    pointer-events: none;
    font-size: var(--SECTION_HEADER_LARGE_FONT_SIZE);
    padding: 33px 3px 3px 3px;
    font-weight: var(--BOLD_FONT_WEIGHT);
    font-family: var(--SECONDARY_FONT_FAMILY);
	letter-spacing: 1px;
    position:relative;
    color: #fff;
}

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

.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: 125px;
    margin: 0.5rem 0.5rem;
    padding: 1rem 0.5rem;
    gap: 0.7rem;
    border-radius: 15px;
}

.reward-frame::before{
	content: "";
	position: absolute;
	top: 0;
  	left: 0;
  	right: 0;
  	bottom: 0;
  	border-radius: 15px; 
 	border: 2px 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: 100px;
	width: 100px;
    margin-top: -35px;
}

.check-in-day-wrap{
	position: relative;
    width: 74px;
    height: 35px;
    top: -30px;
    border-radius: 20px;
}

/* .check-in-day-wrap:before{
	content: '';
    position: absolute;
    top: 0;
    left: -24px;
    width: 0px;
    height: 0px;
}

.check-in-day-wrap:after{
	content: '';
    position: absolute;
    top: 0;
    right: -24px;
    width: 0px;
    height: 0px;
} */

.check-in-day{
	padding-top: 10px;
    font-size: var(--SUBHEADER_FONT_SIZE);
    text-align: center;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    font-weight: var(--REG_FONT_WEIGHT);
    /* text-transform: uppercase; */
    font-family: var(--SECONDARY_FONT_FAMILY);
	letter-spacing: 1px;
}

.reward-amount {
	font-family: var(--SECONDARY_FONT_FAMILY);
	letter-spacing: 1px;
	font-size: var(--SUBHEADER_FONT_SIZE);
	font-weight: var(--REG_FONT_WEIGHT);
	color: #E4E6EA
}

.reward-check-in-button{
	font-size: var(--BUTTON_MED_FONT_SIZE);
    font-weight: var(--REG_FONT_WEIGHT);
    padding: 7px 16px;
    border-radius: 5px;
    min-width: 88px;
    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;
}

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

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

/* .dailyRewardPop-box .dailyRewardPop-wrapper {
	width: 350px;
} */

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

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop {
    width: 100%;
    height: 330px;
    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: var(--SECTION_HEADER_LARGE_FONT_SIZE);
    font-weight: var(--REG_FONT_WEIGHT);
    text-transform: uppercase;
    text-align: center;
}

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

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .description-content .success-icon {
	font-size: var(--DAILY_REWARD_ICON_FONT_SIZE);
    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: var(--DAILY_REWARD_ICON_FONT_SIZE);
    margin-bottom: 30px;
}

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

.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: var(--BUTTON_LARGE_FONT_SIZE);
    margin: 0 10px;
}

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

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

/* DAILY LOGIN REWARD */

/*COLORED */

.pop-box .pop-inner {
	color:#000;
}

@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: transparent;
	color: #fff;
}

.reward-frame::before{
	background: var(--color5) border-box;
}

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

.daily-reward-container .bg-img img{
	position:absolute;
	height: 326px;
	width: 100%;
}

.check-in-day-wrap{
    background: var(--color5);
}

/* .check-in-day-wrap:before{
    border-right: 25px solid var(--color5);
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
}

.check-in-day-wrap:after{
    border-left: 25px solid var(--color5);
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
} */

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

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

.reward-check-in-button{
	background: var(--color4);
    color: #000;
}

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

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

.claim-today{
	color: var(--color1);
	border: none;
}

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


.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .description-content .success-icon i,
.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .description-content .please-login-icon i{
	color: var(--color5);
}

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

#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;
}
/*COLORED */