/* LOYALTY REWARDS POPUP */
#divAppLoyaltyRewards
{
    background-color:rgba(0, 0, 0, 0.75);
    display:none;
    height:100%;
    left:0%;
    opacity:0;
    position:fixed;
    top:0%;
    width:100%;
    z-index:20;
}

#divAppLoyaltyRewards.show
{
	animation-duration:0.25s;
	animation-name:showLoyaltyRewards;
	display:block;
	opacity:1;
}

#divAppLoyaltyRewards #divLoyaltyRewardsPopup
{
    background-color:#1b1c20;
    background:linear-gradient(120deg, #7262f2 0%, #464088 15%, #292a46 70%, #1b1c20 100%);
    border-radius:10px;
    box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 50px #000000;
	height:780px;
    left:50%;
    opacity:0;
	overflow:hidden;
	position:absolute;
	top:50%;
	transform:translate(-50%, -50%);
	width:780px;
}

#divAppLoyaltyRewards.show #divLoyaltyRewardsPopup
{
    animation-duration:0.25s;
	animation-name:showLoyaltyRewards;
	opacity:1;
}

#divAppLoyaltyRewards #divLoyaltyRewardsPopup:before
{
    background-color:#01eff9;
    border-radius:50%;
    box-shadow:0px 0px 150px 75px #01eff9;
    content:"";
    height:0px;
    left:25%;
    position:absolute;
    top:30%;
    width:0px;
    z-index:-1;
}

#divAppLoyaltyRewards #divLoyaltyRewardsPopup:after
{
	animation-name:slowPulse;
    background-color:#7262f2;
    border-radius:50%;
    bottom:30%;
    box-shadow:0px 0px 150px 75px #7262f2;
    content:"";
    height:0px;
    position:absolute;
    right:20%;
    width:0px;
    z-index:-1;
}

#divAppLoyaltyRewards .divBackgroundBase
{
    background-image:url('../images/backgrounds/base.webp');
    background-position:center top;
    background-repeat:no-repeat;
    background-size:100%;
    height:150px;
    left:50%;
    position:absolute;
    top:580px;
    transform:translateX(-50%);
    width:700px;
}

#divAppLoyaltyRewards #divHollowGlitter
{
    height:660px;
    left:15%;
    position:absolute;
    right:15%;
    top:0px;
}

#divAppLoyaltyRewards .divHeading
{
    animation:neonTextFlicker 5s linear 0s infinite;
    color:#ffffff;
    display:none;
    font-family:"Bayshore", sans-serif;
    font-size:80px;
    margin-top:15px;
    text-align:center;
}

#divAppLoyaltyRewards #btnInfo
{
	color:#888b90;
    cursor:pointer;
	font-size:26px;
    height:40px;
    left:20px;
    line-height:40px;
	position:absolute;
	text-align:center;
    top:20px;
    transition:color 0.25s, text-shadow 0.25s;
	width:40px;
}

#divAppLoyaltyRewards #btnInfo:hover, #divAppLoyaltyRewards #btnInfo:focus
{
    color:#fbd3ff;
    text-shadow:0px 0px 5px #e600ff;
}

#divAppLoyaltyRewards #btnClosePopup
{
	cursor:pointer;
	height:40px;
	position:absolute;
	right:20px;
	top:20px;
	width:40px;
}

#divAppLoyaltyRewards #btnClosePopup:before
{
	background-color:#3f4656;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(45deg);
    transition:background-color 0.25s, box-shadow 0.25s;
	width:24px;
}

#divAppLoyaltyRewards #btnClosePopup:after
{
	background-color:#3f4656;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(-45deg);
    transition:background-color 0.25s, box-shadow 0.25s;
	width:24px;
}

#divAppLoyaltyRewards #btnClosePopup:hover:before, #divAppLoyaltyRewards #btnClosePopup:focus:before, #divAppLoyaltyRewards #btnClosePopup:hover:after, #divAppLoyaltyRewards #btnClosePopup:focus:after
{
    background-color:#fbd3ff;
    box-shadow:0px 0px 5px #e600ff;
}

/* LOYALTY TIER SELECTION */
#divAppLoyaltyRewards .divLoyaltyTiers
{
    background-color:rgba(0, 0, 0, 0.25);
    border-radius:10px;
    box-shadow:inset 0px 20px 5px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 5px -20px rgba(0, 0, 0, 0.75);
	height:90px;
    left:75px;
    padding:0px 30px;
    position:absolute;
    right:75px;
    top:30px;
    user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    z-index:2;
}

#divAppLoyaltyRewards #btnBronzeTier, #divAppLoyaltyRewards #btnSilverTier, #divAppLoyaltyRewards #btnGoldTier, #divAppLoyaltyRewards #btnPlatinumTier, #divAppLoyaltyRewards #btnDiamondTier
{
    border-right:1px solid rgba(0, 0, 0, 0.25);
    cursor:pointer;
    float:left;
    height:100%;
    position:relative;
    text-align:center;
    width:calc(20% - 1px);
}

#divAppLoyaltyRewards .divTierSpins
{
    background-color:#ee0000;
    border-radius:50%;
    color:#ffffff;
    content:"";
    font-size:9px;
    height:14px;
    line-height:14px;
    position:absolute;
    right:30%;
    text-align:center;
    top:15px;
    transition:top 0.25s;
    width:14px;
    z-index:1;
}

#divAppLoyaltyRewards .Bronze #btnBronzeTier .divTierSpins, #divAppLoyaltyRewards .Silver #btnSilverTier .divTierSpins, #divAppLoyaltyRewards .Gold #btnGoldTier .divTierSpins, #divAppLoyaltyRewards .Platinum #btnPlatinumTier .divTierSpins, #divAppLoyaltyRewards .Diamond #btnDiamondTier .divTierSpins
{
    top:7px;
}

#divAppLoyaltyRewards #btnDiamondTier
{
    border-right:none;
    width:20%;
}

#divAppLoyaltyRewards .imgTierIcon
{
    filter:grayscale(100%);
    margin-top:10px;
    opacity:0.5;
    position:relative;
    transition:filter 0.25s, opacity 0.25s, transform 0.25s;
    width:60%;
    z-index:1;
}

#divAppLoyaltyRewards #btnBronzeTier .imgTierIcon
{
    width:65%;
}

#divAppLoyaltyRewards .Bronze #btnBronzeTier .imgTierIcon, #divAppLoyaltyRewards .Silver #btnSilverTier .imgTierIcon, #divAppLoyaltyRewards .Gold #btnGoldTier .imgTierIcon, #divAppLoyaltyRewards .Platinum #btnPlatinumTier .imgTierIcon, #divAppLoyaltyRewards .Diamond #btnDiamondTier .imgTierIcon
{
    filter:grayscale(0%);
    opacity:1;
    transform:translateY(-8px);
}

#divAppLoyaltyRewards .divSelectedTier
{
    background-color:#37383d;
	border-radius:10px;
	box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 10px rgba(0, 0, 0, 0.5);
	cursor:pointer;
    left:20px;
    height:100%;
    padding:5px 10px;
    position:absolute;
    top:-5px;
    transition:transform 0.25s;
    width:calc((100% - 60px) / 5);
}

#divAppLoyaltyRewards .Silver .divSelectedTier
{
    transform:translateX(calc(100% - 20px));
}

#divAppLoyaltyRewards .Gold .divSelectedTier
{
    transform:translateX(calc(200% - 40px));
}

#divAppLoyaltyRewards .Platinum .divSelectedTier
{
    transform:translateX(calc(300% - 60px));
}

#divAppLoyaltyRewards .Diamond .divSelectedTier
{
    transform:translateX(calc(400% - 80px));
}

#divAppLoyaltyRewards #divTierSpinCount
{
    color:#ffffff;
    bottom:20px;
    font-size:10px;
    left:10px;
    position:absolute;
}

#divAppLoyaltyRewards #divTierSpinCount:after
{
    content:"/10";
}

#divAppLoyaltyRewards #divTierName
{
    color:#ffffff;
    bottom:20px;
    font-size:10px;
    position:absolute;
    right:10px;
}

#divAppLoyaltyRewards .divTierProgressBar
{
    background-color:#1b1c20;
    border-radius:4px;
    bottom:10px;
    height:8px;
    left:10px;
    overflow:hidden;
    position:absolute;
    right:10px;
}

#divAppLoyaltyRewards #divTierProgress
{
    background:#ae7a3d;
	background:linear-gradient(270deg, #deac6b 0%, #5f3516 50%, #ae7a3d 100%);
    border-radius:8px;
    height:100%;
    left:0px;
    position:absolute;
    top:0px;
    width:0px;
}

#divAppLoyaltyRewards .Silver #divTierProgress
{
    background:#d0d0d0;
	background:linear-gradient(270deg, #eeeeee 0%, #8e8d8d 50%, #d0d0d0 100%);
}

#divAppLoyaltyRewards .Gold #divTierProgress
{
    background:#edc967;
	background:linear-gradient(270deg, #ebde7a 0%, #b5933e 50%, #edc967 100%);
}

#divAppLoyaltyRewards .Platinum #divTierProgress
{
    background:#e5e9f2;
	background:linear-gradient(270deg, #e5e9f2 0%, #5b7596 50%, #e5e9f2 100%);
}

#divAppLoyaltyRewards .Diamond #divTierProgress
{
    background:#6b42de;
	background:linear-gradient(270deg, #01eff9 0%, #e600ff 100%);
}

#divAppLoyaltyRewards #divTierPercentage
{
    color:#ffffff;
    font-size:8px;
    height:8px;
    line-height:8px;
    left:0px;
    position:absolute;
    right:0px;
    text-align:center;
    top:0px;
}

#divAppLoyaltyRewards #divMultiplier
{
    position:absolute;
    left:80px;
    top:250px;
}

#divAppLoyaltyRewards .particle-outer-container .particle-container .particle {
    animation: none;
}

#divAppLoyaltyRewards.show .particle-outer-container.smoke .particle-container .particle {
    animation: rise var(--smokeDuration) ease-in infinite;
}

#divAppLoyaltyRewards.show .particle-outer-container.fire .particle-container .particle {
    animation: rise var(--fireDuration) ease-in infinite;
}

#divAppLoyaltyRewards #divLoyaltyWheel
{
    left:50%;
    position:absolute;
    top:145px;
    transform:translateX(-50%);
    width:480px;
    z-index:1;
}

#divAppLoyaltyRewards .Bronze .prizeWheel .divWheelSliceLabel:after
{
	background-color:#ae7a3d;
    background:linear-gradient(270deg, #deac6b 0%, #5f3516 50%, #ae7a3d 100%);
}

#divAppLoyaltyRewards .Silver .prizeWheel .divWheelSliceLabel:after
{
	background-color:#d0d0d0;
    background:linear-gradient(270deg, #eeeeee 0%, #8e8d8d 50%, #d0d0d0 100%);
}

#divAppLoyaltyRewards .Gold .prizeWheel .divWheelSliceLabel:after
{
	background-color:#edc967;
    background:linear-gradient(270deg, #ebde7a 0%, #b5933e 50%, #edc967 100%);
}

#divAppLoyaltyRewards .Platinum .prizeWheel .divWheelSliceLabel:after
{
	background-color:#e5e9f2;
    background:linear-gradient(270deg, #e5e9f2 0%, #5b7596 50%, #e5e9f2 100%);
}

#divAppLoyaltyRewards .Diamond .prizeWheel .divWheelSliceLabel:after
{
	background-color:#6b42de;
    background:linear-gradient(270deg, #01eff9 0%, #e600ff 100%);
}

/* TIER INFO FOOTER */
#divAppLoyaltyRewards #divAvailableSpins
{
    background-color:#37383d;
    border-radius:10px 10px 0px 0px;
    box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75);
    color:#01eff9;
    font-size:20px;
    font-weight:600;
    left:50%;
    line-height:30px;
    padding:10px 15px;
    position:absolute;
    top:655px;
    transform:translateX(-50%);
    white-space:nowrap;
}

#divAppLoyaltyRewards #divAvailableSpins:before
{
    color:#ffffff;
    content:"AVAILABLE SPINS:";
    margin-right:5px;
    text-shadow:none;
}

#divAppLoyaltyRewards .divTierInfo
{
    background-color:#1b1c20;
    border-radius:10px 10px 0px 0px;
    box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 10px 5px #e600ff;
    height:75px;
    left:0px;
    overflow:hidden;
    position:absolute;
    right:0px;
    top:705px;
}

#divAppLoyaltyRewards #imgCurrentTier
{
    height:50px;
    left:15px;
    position:absolute;
    top:15px;
    width:50px;
}

#divAppLoyaltyRewards #divCurrentTier
{
    color:#01eff9;
    font-size:26px;
    margin:18px 0px 0px 80px;
}

#divAppLoyaltyRewards #divCurrentTier:before
{
    color:#888b90;
    content:"YOUR LOYALTY TIER:";
    font-size:20px;
    margin-right:5px;
}

/* LOYALTY INFO POPUP */
#divAppLoyaltyRewards #divLoyaltyInfo
{
    background-color:rgba(0, 0, 0, 0.75);
    display:none;
    height:100%;
    left:0%;
    opacity:0;
    position:fixed;
    top:0%;
    width:100%;
    z-index:2;
}

#divAppLoyaltyRewards #divLoyaltyInfo.show
{
    animation-duration:0.25s;
	animation-name:showLoyaltyRewards;
	display:block;
	opacity:1;
}

#divAppLoyaltyRewards .divLoyaltyInfoPopup
{
    background-color:#1b1c20;
    border-radius:10px;
	box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 50px #000000;
    left:50%;
    opacity:0;
	overflow:hidden;
	padding:30px;
	position:absolute;
	top:50%;
	transform:translate(-50%, -50%);
	width:420px;
}

#divAppLoyaltyRewards #divLoyaltyInfo.show .divLoyaltyInfoPopup
{
    animation-duration:0.25s;
	animation-name:showLoyaltyRewards;
	opacity:1;
}

#divAppLoyaltyRewards .divYouWon
{
    color:#fbd3ff;
    font-size:22px;
    margin-bottom:5px;
    text-align:center;
    text-shadow:0px 0px 5px #e600ff;
}

#divAppLoyaltyRewards #divInfoPrize
{
    color:#cffdff;
    font-size:40px;
    font-weight:700;
    margin-bottom:15px;
    text-align:center;
    text-shadow:0px 0px 5px #01eff9;
}

#divAppLoyaltyRewards #divInfoMessage
{
    margin-bottom:30px;
}

#divAppLoyaltyRewards #divInfoButtons
{
    text-align:center;
}

#divAppLoyaltyRewards #divInfoButtons button
{
    margin-right:10px;
}

#divAppLoyaltyRewards #divInfoButtons button:last-child
{
    margin-right:0px;
}

/* ANIMATION KEY FRAMES */
@keyframes showLoyaltyRewards
{
	0%   {opacity:0;}
	1%   {opacity:0;}
	100% {opacity:1;}
}

@keyframes neonTextFlicker
{
	0%   {text-shadow:none;}
	1%   {text-shadow:0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    5%   {text-shadow:0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    6%   {text-shadow:none;}
    9%   {text-shadow:none;}
    10%  {text-shadow:0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    16%  {text-shadow:0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    17%  {text-shadow:none;}
    20%  {text-shadow:none;}
    21%  {text-shadow:0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    59%  {text-shadow:0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    60%  {text-shadow:none;}
    64%  {text-shadow:none;}
	65%  {text-shadow:0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
    100% {text-shadow:0px 0px 5px #01eff9, 0px 0px 10px #01eff9;}
}

/* MEDIA QUERIES */
@media (max-height: 820px)
{
    /* LOYALTY REWARDS POPUP */
    #divAppLoyaltyRewards #divLoyaltyRewardsPopup
    {
        height:calc(100% - 40px);
        overflow-y:auto;
        top:20px;
		transform:translate(-50%, 0%);
    }
}

@media (max-width: 780px)
{
    /* LOYALTY REWARDS POPUP */
    #divAppLoyaltyRewards #divLoyaltyRewardsPopup
    {
        border-radius:0px;
        height:100%;
        left:0px;
        overflow-y:auto;
        top:0px;
        transform:translate(0%, 0%);
        width:100%;
    }
}

@media (max-width: 700px)
{
    /* LOYALTY REWARDS POPUP */
    #divAppLoyaltyRewards .divBackgroundBase
    {
        top:675px;
        width:100%;
    }

    #divAppLoyaltyRewards #divHollowGlitter
    {
        height:745px;
    }

    #divAppLoyaltyRewards .divHeading
    {
        display:block;
    }

    /* LOYALTY TIER SELECTION */
    #divAppLoyaltyRewards .divLoyaltyTiers
    {
        left:30px;
        right:30px;
        top:125px;
    }

    #divAppLoyaltyRewards #divMultiplier
    {
        left:50px;
        top:320px;
    }

    #divAppLoyaltyRewards #divLoyaltyWheel
    {
        top:240px;
    }

    /* TIER INFO FOOTER */
    #divAppLoyaltyRewards #divAvailableSpins
    {
        top:750px;
    }

    #divAppLoyaltyRewards .divTierInfo
    {
        bottom:0px;
        height:auto;
        min-height:75px;
        top:800px;
    }
}

@media (max-width: 500px)
{
    /* LOYALTY REWARDS POPUP */
    #divAppLoyaltyRewards .divBackgroundBase
    {
        top:600px;
        width:110%;
    }

    #divAppLoyaltyRewards #divHollowGlitter
    {
        height:650px;
    }

    #divAppLoyaltyRewards .divHeading
    {
        font-size:60px;
    }

    #divAppLoyaltyRewards #btnInfo
    {
        left:10px;
        top:10px;
    }

    #divAppLoyaltyRewards #btnInfo
    {
        color:#fbd3ff;
        text-shadow:0px 0px 5px #e600ff;
    }

    #divAppLoyaltyRewards #btnClosePopup
    {
        right:10px;
        top:10px;
    }

    #divAppLoyaltyRewards #btnClosePopup:before, #divAppLoyaltyRewards #btnClosePopup:after
    {
        background-color:#fbd3ff;
        box-shadow:0px 0px 5px #e600ff;
    }

    /* LOYALTY TIER SELECTION */
    #divAppLoyaltyRewards .divLoyaltyTiers
    {
        height:60px;
        left:15px;
        padding:0px 10px;
        right:15px;
    }

    #divAppLoyaltyRewards .divTierSpins
    {
        top:12px;
    }

    #divAppLoyaltyRewards .Bronze #btnBronzeTier .divTierSpins, #divAppLoyaltyRewards .Silver #btnSilverTier .divTierSpins, #divAppLoyaltyRewards .Gold #btnGoldTier .divTierSpins, #divAppLoyaltyRewards .Platinum #btnPlatinumTier .divTierSpins, #divAppLoyaltyRewards .Diamond #btnDiamondTier .divTierSpins
    {
        top:-10px;
    }

    #divAppLoyaltyRewards .imgTierIcon
    {
        width:40px;
    }

    #divAppLoyaltyRewards #btnBronzeTier .imgTierIcon
    {
        width:45px;
    }

    #divAppLoyaltyRewards .Bronze #btnBronzeTier .imgTierIcon, #divAppLoyaltyRewards .Silver #btnSilverTier .imgTierIcon, #divAppLoyaltyRewards .Gold #btnGoldTier .imgTierIcon, #divAppLoyaltyRewards .Platinum #btnPlatinumTier .imgTierIcon, #divAppLoyaltyRewards .Diamond #btnDiamondTier .imgTierIcon
    {
        transform:translateY(-22px);
    }

    #divAppLoyaltyRewards .divSelectedTier
    {
        height:calc(100% + 20px);
        left:5px;
        padding:5px;
        top:-25px;
        width:calc((100% - 20px) / 5);
    }

    #divAppLoyaltyRewards .Silver .divSelectedTier
    {
        transform:translateX(calc(100% - 10px));
    }

    #divAppLoyaltyRewards .Gold .divSelectedTier
    {
        transform:translateX(calc(200% - 20px));
    }

    #divAppLoyaltyRewards .Platinum .divSelectedTier
    {
        transform:translateX(calc(300% - 30px));
    }

    #divAppLoyaltyRewards .Diamond .divSelectedTier
    {
        transform:translateX(calc(400% - 40px));
    }

    #divAppLoyaltyRewards #divTierSpinCount, #divAppLoyaltyRewards #divTierName
    {
        font-size:9px;
        bottom:21px;
    }

    #divAppLoyaltyRewards #divLoyaltyWheel
    {
        top:220px;
        width:380px;
    }

    #divAppLoyaltyRewards #divMultiplier
    {
        left:30px;
        top:280px;
    }

    #divAppLoyaltyRewards #divMultiplier:after
    {
        font-size:9px;
        height:15px;
        line-height:15px;
    }

    /* TIER INFO FOOTER */
    #divAppLoyaltyRewards #divAvailableSpins
    {
        font-size:16px;
        top:650px;
    }

    #divAppLoyaltyRewards .divTierInfo
    {
        min-height:60px;
        top:700px;
    }

    #divAppLoyaltyRewards #imgCurrentTier
    {
        left:10px;
        top:10px;
    }

    #divAppLoyaltyRewards #divCurrentTier
    {
        font-size:20px;
        line-height:20px;
        margin:10px 0px 0px 65px;
    }

    #divAppLoyaltyRewards #divCurrentTier:before
    {
        content:"YOUR LOYALTY TIER:\A";
        font-size:16px;
        margin-right:3px;
        white-space:pre-wrap;
    }

    /* LOYALTY INFO POPUP */
    #divAppLoyaltyRewards .divLoyaltyInfoPopup
    {
        max-height:calc(100% - 80px);
        overflow-y:auto;
        width:calc(100% - 80px);
    }

    #divAppLoyaltyRewards #divInfoPrize
    {
        font-size:36px;
    }
}

@media (max-width: 400px)
{
    /* LOYALTY REWARDS POPUP */
    #divAppLoyaltyRewards .divBackgroundBase
    {
        top:580px;
    }

    #divAppLoyaltyRewards #divHollowGlitter
    {
        height:620px;
    }

    /* LOYALTY TIER SELECTION */
    #divAppLoyaltyRewards #divTierSpinCount, #divAppLoyaltyRewards #divTierName
    {
        font-size:8px;
    }

    #divAppLoyaltyRewards #divLoyaltyWheel
    {
        top:250px;
        width:340px;
    }

    #divAppLoyaltyRewards #divMultiplier
    {
        top:260px;
    }

    /* TIER INFO FOOTER */
    #divAppLoyaltyRewards #divAvailableSpins
    {
        top:620px;
    }

    #divAppLoyaltyRewards .divTierInfo
    {
        top:670px;
    }

    /* LOYALTY INFO POPUP */
    #divAppLoyaltyRewards .divLoyaltyInfoPopup
    {
        max-height:calc(100% - 50px);
        padding:15px;
        width:calc(100% - 50px);
    }

    #divAppLoyaltyRewards #divInfoPrize
    {
        font-size:32px;
    }
}