.daily-reward-container{
	padding-bottom:70px;
	padding: 1% 12%
}

.daily-reward-container .bg-img img{
	position:absolute;
	height: 300px;
	width: 100%;
}

.daily-reward-title{
	text-align: center;
    pointer-events: none;
    font-size: 18px;
    padding: 12px 3px 3px 3px;
    font-weight: 900;
    position: relative;
}


.dailyLoginReward{
	display: flex;
    flex-direction: row;
    overflow-x: auto;
    cursor: grab;
    position: relative;
    padding: 40px 0px 20px 0;
	margin: 0 10px;
	flex-wrap: nowrap;
	gap:15px;
}



.reward-frame{
	position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
/*     margin: 0.2rem 0.5rem 0rem 0.5rem; */
/*     padding: 1rem 0.5rem; */
    border-radius: 30px;
   padding:0 !important;
}

.reward-details-wrap{
	position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    margin: 24px 8px 0;
/*     padding: 1rem 0.5rem; */
    width: 100%;
	padding: 0 8px;
    border-radius: 12px;
    height:300px;
}

.spinWheel{
/* 	height: 75px; */
	    margin-top: -25%;
    width: 80%;
}

.freeCredit{
/* 	height: 75px; */
	    margin-top: -25%;
    width: 70%;
}

.check-in-day{
	font-size: 1.5rem;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase
}

.daily-reward-separator{
	margin:0; 
	position:absolute; 
	top:70%; 
	width: 100%; 
	background-color: var(--daily-reward-separator); 
	box-sizing: border-box; 
	border-width:1px;
	border-style:solid; 
	border-color: var(--daily-reward-saparator-border);
	margin-top: 1%;
}
.claimButton{
	display: flex;
    justify-content: center;
    padding: 12px 0;
    width:100%;
}

.reward-check-in-button{
	font-family: 'Heebo-Bold', sans-serif !important;
	font-size:  16px;
    font-weight: 600;
    padding: 8px;
    border-radius: 12px;
    width:100%;
    height: 40px;
    min-width: 96px;
    transition: all 0.2s linear;
    cursor: pointer;
    text-align: center;
    border:0;
}

.reward-amount{
    font-size: 14px;
    font-weight: 600;
    font-family: 'Heebo-Bold', sans-serif !important;
    height: 36px;
    padding:20px 0 0 0;
    text-align: center;
    width:100%;
/*     border-top: 1px solid #575757; */
	}
/* @media (max-width: 768px) { */
/* 	.reward-frame{ */
/*     min-height: 115px; */
/*     min-width: 112px; */
/* 	} */
/* 	.check-in-day{ */
/* 	font-size: .8rem; */
/*     text-align: end; */
/*     font-weight: bold; */
/*     text-align:end; */
/*     width:100%; */
/*     margin-right: 20px; */
/*     margin-top: -25px; */
/* 	} */
/* 	.reward-details-wrap{ */
/* 		width: 112px; */
/* 	} */
/* } */

/* @media (max-width: 959px) { */
/* 	.reward-frame{ */
/*     	width:100% */
/* 	} */
/* 	.reward-details-wrap{ */
/* 		width:100% */
/* 	} */
/* 	.reward-img{ */
/* 		height: 80%; */
/* 		margin-top: -19%; */
/* 	    width: 50%; */
/* 	} */
/* } */

/* Styling for iPads (portrait and landscape sizes, commonly 768px to 1024px) */
@media (max-width: 959px) {
 	.reward-frame{
    	padding:0 !important;
    	    min-width: 24dvw;
	}
	
	.spinWheel{
		height: 130px;
        margin-top: -12%;
        width: auto;
	}
	.freeCredit{
		height: 130px;
        margin-top: -12%;
        width: auto;
	}
	.daily-reward-separator{
		top:75%; 
		width: 100%; 
	}
	.reward-details-wrap{
    	height:auto;
    	    
	}
}

@media (max-width: 499px) {
   .reward-details-wrap{
        height: 115px;
        justify-content: space-evenly;
    }
    .spinWheel{
	    height: 75px;
	    width: 80%;
	    margin-top: -24px;
    }
    .freeCredit{
	    height: 75px;
	    width: 88%;
	    margin-top: -24px;
    }
	.daily-reward-separator {
        top: 70%;
        width: 100%;
    }
         
}

@media screen and (min-width: 960px) and (max-width: 1300px) {
    .reward-details-wrap{
        height: 115px;
    }
    .reward-frame{
    	    padding:0 6px;
	}
	.spinWheel{
		    margin-top: -15%;
	}
	.freeCredit{
		    margin-top: -15%;
	}
	.daily-reward-separator{
		top:63%
	}
	.reward-amount{
		padding:10px 0 0 0;
	}
}

@media screen and (min-width: 1301px) and (max-width: 1999px) {
     .reward-details-wrap{
        height: 180px;
    }
    .reward-frame{
    	    padding:0 6px;
	}
	 .spinWheel{
	    width: 86%;
	    margin-top: -30%;
    }
    .freeCredit{
	    width: 80%;
	    max-height: 137px;
	    margin-top: -30%;
    }
    .daily-reward-separator{
    	border-width:1px;
    }
}

@media screen and (min-width: 2000px) and (max-width: 2500px) {
    .reward-details-wrap{
        height: 250px;
    }
    .reward-frame{
    	    padding:0 !important;
	}
	.reward-amount{
   
    height: 41px;

	}
	
	 .spinWheel{
	    width: 80%;
	    max-height: 65%;
/* 	    margin-top: -30%; */
    }
    .freeCredit{
	    width: 80%;
	    max-height: 65%;
/* 	    margin-top: -30%; */
    }
}


/* .reward-details-wrap::before{ */
/* 	content: ""; */
/* 	position: absolute; */
/* 	border-radius: 12px; */
/* 	top: 0; */
/*   	left: 0; */
/*   	right: 0; */
/*   	bottom: 0; */
/* /*  	border: 4px solid transparent; */ 
/*   	-webkit-mask: */
/*     linear-gradient(#fff 0 0) padding-box,  */
/*     linear-gradient(#fff 0 0); */
/*   	-webkit-mask-composite: destination-out; */
/*   	pointer-events: none; */
/*   	width:112px; */
/*   	height:115px; */
/* } */



/*     text-transform: uppercase; */




.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: 340px;
    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 LOGIN REWARD */

/* DAILY LOGIN REWARD COLOURED*/

@keyframes lights {
  0% {
    color: #cf8477;
    text-shadow: 0 0 1em #dcb3ac82, 
    	0 0 0.125em rgb(230 191 187 / 67%), 
    	-1em -0.125em 0.5em hsl(40deg 100% 60% / 0%), 
    	1em 0.125em 0.5em hsl(200deg 100% 60% / 0%);
  }
  
  30% { 
    color: #cf8477;
    text-shadow: 0 0 1em #dcb3acba, 
    	0 0 0.125em #dcb3ac91, 
    	-0.5em -0.125em 0.25em hsl(0deg 100% 60% / 20%), 
    	0.5em 0.125em 0.25em #dcb3acbd;
  }
  
  40% { 
    color: hsl(63deg 6% 76%);
    text-shadow: 0 0 1em hsl(0deg 51% 71% / 50%), 
    0 0 0.125em hsl(320deg 100% 90% / 50%), 
    -0.25em -0.125em 0.125em hsl(0deg 100% 60% / 20%), 
    0.25em 0.125em 0.125em hsl(0deg 44% 65% / 40%);
  }
  
  70% {
    color: #cf8477;
    text-shadow: 0 0 1em hsl(0deg 51% 65% / 50%), 
    0 0 0.125em hsl(0deg 55% 73% / 50%), 
    0.5em -0.125em 0.25em hsl(0deg 91% 78% / 20%), 
    -0.5em 0.125em 0.25em hsl(0deg 48% 65% / 40%);
  }
  
  100% {
    color: #cf8477;
    text-shadow: 0 0 1em hsl(0deg 46% 61% / 20%), 
    0 0 0.125em hsl(0deg 52% 63% / 30%), 
    1em -0.125em 0.5em hsl(0deg 100% 60% / 0%), 
    -1em 0.125em 0.5em hsl(0deg 100% 60% / 0%);
  }
  
}

@keyframes glowing {
  0% {
	box-shadow: 0 0 5px var(--dailyReward_glowing_color);
    background: var(--dailyReward_glowing_color);
  }
  50% {
  	box-shadow: 0 0 20px var(--dailyReward_glowing_color);
    background: var(--dailyReward_glowing_color);
  }
  100% {
	box-shadow: 0 0 5px var(--dailyReward_glowing_color);
    background: var(--dailyReward_glowing_color);
  }
}

.reward-details-wrap{
	background-color:var(--reward-details-wrap);
	color:white;
}

.reward-details-wrap::before{
	background-color:  var(--reward-details-wrap);
}

.daily-reward-title{
	animation: lights 5s 750ms linear infinite;
}

.check-in-day{
	color: var(--color2);
}



/* .reward-check-in-button{ */
/* 	font-family: 'Heebo-Bold', sans-serif !important; */
/* 	font-size: .85rem; */
/*     font-weight: 600; */
/*     padding: 8px; */
/*     border-radius: 12px; */
/*     width:100%; */
/*     height: 40px; */
/*     min-width: 96px; */
/*     transition: all 0.2s linear; */
/*     cursor: pointer; */
/*     text-align: center; */
/*     border:0; */
/* } */

.claimed-btn:disabled{
 	background-color: var(--claimed-btn-disabled);
    color:  var(--claim-next-disabled-text-color) !important;
/*     border: 2px solid #6a718e; */
}

.claim-next:disabled{
	background-color: var(--claim-next-disabled);
    color:  var(--claim-next-disabled-text-color) !important;
/*     border: 2px solid #666666; */
}

.claim-today{
	color: var(--dailyReward-claim-today-color);
    border: 2px solid;	
}

.dailyRewardContent-wrapper{
    border: 1px solid transparent;
}

.dailyRewardContent-wrapper .reward-pop .description-content .success-icon i,
.dailyRewardContent-wrapper .reward-pop .description-content .please-login-icon i{
	color: var(--dailyRewardContent-wrapper-please-login-icon);
}

.dailyRewardContent-wrapper .reward-pop .dailyRewardPop-btn button{
	border: none;
    color: var(--color1);
    background: var(--daily-reward-login-button-color);
}

.dailyRewardContent-wrapper .reward-pop .dailyRewardPop-btn button:hover{
	background: var(--color2);
	color: var(--dailyRewardPop-btn-button-hover-text-color);
	border: 1px solid var(--dailyRewardPop-btn-button-hover-text-color);
}

#dailyRewardLaterBtn{
	background: var(--dailyRewardLaterBtn-bg-color);
}

#dailyRewardLaterBtn:hover{
	background: var(--color2);
}

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .description-content .text a{
	color: var(--dailyRewardPop-btn-button-hover-text-color);
}

.dailyRewardPop-box .dailyRewardContent-wrapper .reward-pop .description-content .text a:hover{
	border-bottom: 2px solid var(--dailyRewardPop-btn-button-hover-text-color);
}


/* DAILY LOGIN REWARD COLOURED*/
.dailyLoginReward::-webkit-scrollbar {
    height: 10px; /* Horizontal scrollbar height */
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    border-radius: 10px;
}

.dailyLoginReward::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--scroll-thumb);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);
}



.dailyLoginReward::-webkit-scrollbar-track {
       -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    border-radius: 10px;
}

