/* DAILY LOGIN REWARD */
.daily-reward-container {
    width: 100%;
}

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

.daily-reward-title{
	position:relative;
	text-align: center;
    pointer-events: none;
    font-size: 28px;
    padding: 30px 3px 3px 3px;
    font-weight: 900;
}


.dailyLoginReward{
    display: flex;
   /*  flex-wrap: wrap; */
    overflow-x: auto;
    cursor: grab;
    position: relative;
    scrollbar-width: none;
    padding: 10px;
    /* justify-content: center; */

}

.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:100px;
    min-height:130px;
    margin: 10px 5px;
    padding: 1rem 0.5rem;
    border-radius: 15px;
}

.reward-frame::before{
	content: "";
	position: absolute;
	border-radius: 15px;
	top: 0;
  	left: 0;
  	right: 0;
  	bottom: 0;
  	border-radius: 15px; 
 	border: 5px 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-frame.active .correct-icon {
	text-align: center;
    opacity: 0.5;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) skewY(-10deg);
    font-size: 55px;
}

.reward-img{
	height: 75px;
	width: 75px;
}

.reward-amount {
	text-align: center;
}

.check-in-day{
	font-size: 14px;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

.reward-check-in-button{
	font-size: 14px;
    font-weight: 600;
    padding: 8px;
    border-radius: 100px;
    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: auto;
	padding: 8px;
}

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


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

.dailyRewardPop-wrapper {
	width: 350px;
}

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

.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;
}

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

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

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

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

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

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

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

.daily-button-box {
	text-align: center;
}

.daily-button-box .reward-check-in-button {
	position:relative;
	margin-bottom: 25px;
	width: 50%;
	margin-top: 15px;
}

.dailyRewardModal .modal-dialog .modal-content .modal-header{
	padding: 25px;
}

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

/* DAILY LOGIN REWARD */

/* DAILY LOGIN REWARD */

@keyframes lights {
  0% {
    color: var(--daily1_KEYFRAME_LIGHTS_COLOR_0);
    text-shadow: var(--daily1_KEYFRAME_LIGHTS_TEXT_SHADOW_0_FIRST), 
    	var(--daily1_KEYFRAME_LIGHTS_TEXT_SHADOW_0_SECOND), 
    	var(--daily1_KEYFRAME_LIGHTS_TEXT_SHADOW_0_THIRD), 
    	var(--daily1_KEYFRAME_LIGHTS_TEXT_SHADOW_0_FOURTH);
  }
  
  30% { 
    color: var(--daily1_KEYFRAME_LIGHTS_COLOR_30);
    text-shadow:  var(--daily1_KEYFRAME_LIGHTS_TEXT_SHADOW_30_FIRST),
     	var(--daily1_KEYFRAME_LIGHTS_TEXT_SHADOW_30_SECOND),
     	var(--daily1_KEYFRAME_LIGHTS_TEXT_SHADOW_30_THIRD),
     	var(--daily1_KEYFRAME_LIGHTS_TEXT_SHADOW_30_FOURTH);
  }
  
  40% { 
    color: var(--daily1_KEYFRAME_LIGHTS_COLOR_40);
    text-shadow: var(--daily1_KEYFRAME_LIGHTS_TEXT_SHADOW_40_FIRST), 
    	var(--daily1_KEYFRAME_LIGHTS_TEXT_SHADOW_40_SECOND), 
    	var(--daily1_KEYFRAME_LIGHTS_TEXT_SHADOW_40_THIRD), 
    	var(--daily1_KEYFRAME_LIGHTS_TEXT_SHADOW_40_FOURTH);
  }
  
  70% {
    color: var(--daily1_KEYFRAME_LIGHTS_COLOR_70);
    text-shadow: var(--daily1_KEYFRAME_LIGHTS_TEXT_SHADOW_70_FIRST), 
    	var(--daily1_KEYFRAME_LIGHTS_TEXT_SHADOW_70_SECOND), 
    	var(--daily1_KEYFRAME_LIGHTS_TEXT_SHADOW_70_THIRD), 
    	var(--daily1_KEYFRAME_LIGHTS_TEXT_SHADOW_70_FOURTH);
  }
  
  100% {
    color: var(--daily1_KEYFRAME_LIGHTS_COLOR_100);
    text-shadow: var(--daily1_KEYFRAME_LIGHTS_TEXT_SHADOW_100_FIRST), 
    	var(--daily1_KEYFRAME_LIGHTS_TEXT_SHADOW_100_SECOND), 
    	var(--daily1_KEYFRAME_LIGHTS_TEXT_SHADOW_100_THIRD), 
    	var(--daily1_KEYFRAME_LIGHTS_TEXT_SHADOW_100_FOURTH);
  }
  
}

@keyframes glowing {
  0% {
	box-shadow: 0 0 5px var(--daily1_KEYFRAME_GLOWING_BOX_SHADOW_0);
    background: var(--daily1_KEYFRAME_GLOWING_BG_0);
  }
  50% {
  	box-shadow: 0 0 20px var(--daily1_KEYFRAME_GLOWING_BOX_SHADOW_50);
    background: var(--daily1_KEYFRAME_GLOWING_BG_50);
  }
  100% {
	box-shadow: 0 0 5px var(--daily1_KEYFRAME_GLOWING_BOX_SHADOW_100);
    background: var(--daily1_KEYFRAME_GLOWING_BG_100);
  }
}

.reward-frame{
	background-color: rgb(255 255 255 / 90%);
    color: #000;
}

.reward-frame.active{
	background-color: var(--daily1_REWARD_FRAME_BG);
	color: var(--daily1_REWARD_FRAME_COLOR);
}

.reward-frame::before{
	border: 4px solid var(--daily1_REWARD_FRAME_BEFORE_BORDER);
}

.reward-frame.active .correct-icon {
    color: var(--daily1_REWARD_FRAME_ACTIVE_CORRECT_ICON_COLOR);
}

.daily-reward-container,
.member-daily-reward-container{
/* 	border: 2px solid var(--daily1_DAILY_REWARD_CONTAINER_BORDER); */
    border-radius: 15px;
/*     background: var(--daily1_DAILY_REWARD_CONTAINER_BG); */
}

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

.reward-check-in-button{
	background: var(--daily1_REWARD_CHECK_IN_BTN_BG);
    color: var(--daily1_REWARD_CHECK_IN_BTN_COLOR);
}

.claimed-btn:disabled{
 	background-color: var(--daily1_CLAIMED_BTN_DISABLED_BG);
    color: var(--daily1_CLAIMED_BTN_DISABLED_COLOR);
    border: none;
}

.claim-next:disabled{
	background-color: var(--daily1_CLAIM_NEXT_DISABLED_BG);
  	color: var(--daily1_CLAIM_NEXT_DISABLED_COLOR);
}

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

.dailyRewardContent-wrapper{
    border: 1px solid var(--daily1_DAILY_REWARD_CONTENT_WRAPPER_BORDER);
}

.dailyRewardContent-wrapper .reward-pop{
	color:var(--daily1_DAILY_REWARD_CONTENT_WRAPPER_REWARD_POP_COLOR);
}

.dailyRewardContent-wrapper .reward-pop .description-content .please-login-icon i{
	color: var(--daily1_REWARD_POP_DESC_CONTENT_LOGIN_ICON_COLOR);
}

.dailyRewardContent-wrapper .reward-pop .description-content .success-icon i{
	color: var(--daily1_REWARD_POP_DESC_CONTENT_SUCCESS_ICON_COLOR);
}

.dailyRewardContent-wrapper .reward-pop .dailyRewardPop-btn button{
	border: none;
    color: var(--daily1_REWARD_POP_DAILY_REWARD_POP_BTN_COLOR);
    background: var(--daily1_REWARD_POP_DAILY_REWARD_POP_BTN_BG);
}

.dailyRewardContent-wrapper .reward-pop .dailyRewardPop-btn button:hover{
	background: var(--daily1_REWARD_POP_DAILY_REWARD_POP_BTN_HOVER_BG);
	color:var(--daily1_REWARD_POP_DAILY_REWARD_POP_BTN_HOVER_COLOR);
	border: 2px solid var(--daily1_REWARD_POP_DAILY_REWARD_POP_BTN_HOVER_BORDER);
}

#dailyRewardLaterBtn{
	background: var(--daily1_DAILY_REWARD_LATER_BTN_BG);
}

#dailyRewardLaterBtn:hover{
	background: var(--daily1_DAILY_REWARD_LATER_BTN_HOVER_BG);
}

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .description-content .text a{
	color: var(--daily1_DAILY_REWARD_POP_BOX_REWARD_POP_DESC_CONTENT_TEXT_A_COLOR);
}

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .description-content .text a:hover{
	border-bottom: 2px solid var(--daily1_DAILY_REWARD_POP_BOX_REWARD_POP_DESC_CONTENT_TEXT_A_HOVER_BORDER_BTM);
}

.daily-reward-box{
	border: 2px solid var(--daily1_DAILY_REWARD_BOX);
    border-radius: 10px;
}

/* DAILY LOGIN REWARD */