/* DAILY LOGIN REWARD */

.dailyreward-container {
	max-width: var(--daily1_CONTAINER_MAX_WIDTH);
	margin: var(--daily1_CONTAINER_MARGIN);
	padding: var(--daily1_CONTAINER_PADDING)
}

.daily-reward-section {
	padding-top: 3rem;
    padding-bottom: 2rem;
}

.daily-reward-container,
.member-daily-reward-container{
	max-width: 1300px;
    margin:auto;
    width: 100%;
}

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


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

.daily-step {
	margin-left: 5rem;
}

.daily-progress {
	display: flex;
    justify-content: center;
    align-items: center;
    width: 180%;
}

.daily-progress .switch-label {
	cursor: pointer;
    width: 2rem;
    height: 2rem;
    transition: .3s;
    border-radius: 50%;
}

.daily-progress .progressBar {
    transition: .3s;
    width: 80%;
    height: 4px;
}

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

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

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

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

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

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

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

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


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

.dailyRewardPop-wrapper {
	width: 500px;
}

.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: 18px 25px;
    font-size: 30px;
}

.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: 45px;
	width: 25%;
	margin-top: 20px;
}

.reward-box:last-child .daily-step .daily-progress {
	width: max-content;
}

.reward-box:last-child .daily-step .daily-progress .progressBar {
	width: fit-content;
}

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

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

/* 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:var(--daily1_REWARD_FRAME_BG);
	color:var(--daily1_REWARD_FRAME_COLOR);
}

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

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

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

.daily-reward-container,
.member-daily-reward-container{
	border: 2px solid var(--daily1_REWARD_CONTAINER_BORDER);
    border-radius: 15px;
    background: var(--daily1_REWARD_CONTAINER_BG);
}

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

.reward-check-in-button{
	background: var(--daily1_REWARD_CHECK_IN_BG);
    color: var(--daily1_REWARD_CHECK_IN_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_CLAIMED_NEXT_DISABLED_BG);
  	color: var(--daily1_CLAIMED_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_COLOR);
}

.dailyRewardContent-wrapper .reward-pop .description-content .success-icon i{
	color: var(--daily1_REWARD_POP_DESC_CONTENT_SUCCESS_ICON_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 .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);
}

.daily-progress .switch-label {
    background: var(--daily1_DAILY_PROGRESS_SWITCH_LABEL_BG);
    color: var(--daily1_DAILY_PROGRESS_SWITCH_LABEL_COLOR);
}

.daily-progress .switch-label.active {
    background: var(--daily1_DAILY_PROGRESS_SWITCH_LABEL_ACTIVE_BG);
    color: var(--daily1_DAILY_PROGRESS_SWITCH_LABEL_ACTIVE_COLOR);
}

.daily-progress .progressBar {
	background: var(--daily1_DAILY_PROGRESS_PROGRESS_BAR_BG);
}

.daily-progress .progressBar.active {
	background: var(--daily1_DAILY_PROGRESS_PROGRESS_BAR_ACTIVE_BG);
}

#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 */