#divAppBonuses
{
    display:none;
    height:100%;
    left:0%;
    opacity:0;
    position:fixed;
    top:0%;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    width:100%;
    z-index:5;
}

#divAppBonuses.show
{
    animation:showBonuses 0.25s;
    display:block;
    opacity:1;
}

#divAppBonuses #divBonusesOverlay
{
    background-color:rgba(0, 0, 0, 0.75);
    height:100%;
    left:0%;
    position:absolute;
    top:0%;
    width:100%;
}

#divAppBonuses #divBonusesPopup
{
    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%);
    transition:height 0.25s, padding 0.25s;
    width:560px;
}

#divAppBonuses.show #divBonusesPopup
{
    animation:showBonuses 0.25s;
    opacity:1;
}

#divAppBonuses .h3PopupHeading
{
    height:40px;
    line-height:40px;
    margin-bottom:15px;
}

#divAppBonuses .h3PopupHeading:before
{
    background-image:url('../images/icons/bonuses.svg');
    background-position:center left;
    background-repeat:no-repeat;
    background-size:80%;
    content:"";
    float:left;
    height:40px;
    line-height:40px;
    margin-right:5px;
    opacity:0.5;
    width:40px;
}

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

#divAppBonuses #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;
}

#divAppBonuses #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;
}

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

/* BALANCE SECTION */
#divAppBonuses .divBalanceSection
{
    background-color:#292a2f;
    border-radius:10px;
    height:30px;
    margin-top:10px;
    overflow:hidden;
    padding:15px;
    position:relative;
}

#divAppBonuses .divBalanceLabel
{
    color:#ffffff;
    float:left;
    font-size:18px;
    line-height:30px;
    width:72px;
}

#divAppBonuses #divNormalBalance, #divAppBonuses #divBonusBalance
{
    color:#01eff9;
    float:left;
    font-size:18px;
    font-weight:700;
    line-height:30px;
    width:calc(50% - 95px);
}

#divAppBonuses #divNormalBalance
{
    margin-right:20px;
}

#divAppBonuses #divNormalBalance:before, #divAppBonuses #divBonusBalance:before
{
    content:"R";
    margin-right:5px;
}

#divAppBonuses #btnBalanceInfo
{
    color:#888b90;
    cursor:pointer;
    font-size:22px;
    height:30px;
    line-height:30px;
    position:absolute;
    right:10px;
    text-align:center;
    top:15px;
    transition:color 0.25s, text-shadow 0.25s;
    width:30px;
}

#divAppBonuses #btnBalanceInfo:hover, #divAppBonuses #btnBalanceInfo:focus
{
    color:#ffffff;
    text-shadow:0px 0px 5px #e600ff;
}

/* REDEEM CODE SECTION */
#divAppBonuses .divRedeemSection
{
    position:relative;
}

#divAppBonuses.pendingCoupon .divRedeemSection
{
	display:none;
}

#divAppBonuses #btnRedeemCode
{
    height:50px;
	position:absolute;
    right:0px;
    top:20px;
}

/* PENDING COUPON SECTION */
#divAppBonuses .divPendingCouponSection
{
	display:none;
	padding-top:15px;
}

#divAppBonuses.pendingCoupon .divPendingCouponSection
{
	display:block;
}

#divAppBonuses .divPendingCouponSection:after
{
	clear:both;
	content:"";
	display:block;
}

#divAppBonuses #divPendingCouponName
{
	color:#ffffff;
	text-shadow:0px 0px 5px #e600ff;
}

#divAppBonuses #divPendingCouponName:after
{
	content:"- Pending Deposit";
	margin-left:5px;
}

#divAppBonuses #divPendingCouponInfo
{
	font-size:14px;
}

#divAppBonuses #divPendingCouponInfo:before
{
	color:#ffffff;
	content:"Please note:";
	margin-right:5px;
}

#divAppBonuses #btnCancelPendingCoupon
{
	float:right;
	margin-top:10px;
}

#divAppBonuses #btnDepositNow
{
	animation:pulsateButton 3s linear 0s infinite;
	float:right;
	margin:10px 10px 0px 0px;
}

/* MY BONUSES SECTION */
#divAppBonuses .divMyBonusesSection
{
	margin-top:20px;
}

#divAppBonuses .divMyBonusesHeadings
{
	height:40px;
	line-height:40px;
}

#divAppBonuses .divMyBonusesHeadings:after
{
	clear:both;
	content:"";
	display:block;
}

#divAppBonuses .divMyBonusesHeadings span
{
	float:left;
	padding-left:15px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

#divAppBonuses .divMyBonusesHeadings span:first-child
{
	width:calc(100% - 250px);
}

#divAppBonuses .divMyBonusesHeadings span:nth-child(2)
{
	width:80px;
}

#divAppBonuses .divMyBonusesHeadings span:nth-child(3)
{
	width:125px;
}

#divAppBonuses #divBonusList
{
	font-size:16px;
	max-height:400px;
	min-height:200px;
    overflow-y:auto;
    position:relative;
    -webkit-overflow-scrolling:touch;
}

#divAppBonuses #divBonusList:before
{
	background-color:#292a2f;
	border-radius:10px;
	color:#ffffff;
	content:"No Active Bonuses";
	display:none;
	height:50px;
	line-height:50px;
	text-align:center;
}

#divAppBonuses #divBonusList.noResults:before
{
	display:block;
}

#divAppBonuses .imgLoaderLogo
{
	animation:rotateLoader 2.5s linear infinite;
	left:calc(50% - 60px);
	height:120px;
	position:absolute;
	top:calc(50% - 90px);
	width:120px;
}

#divAppBonuses .divLoading
{
	color:#cffdff;
	font-size:20px;
	left:50%;
	position:absolute;
	text-shadow:0px 0 5px #01eff9;
	top:calc(50% + 35px);
	transform:translateX(-50%);
}

#divAppBonuses .divBonus
{
	border-radius:10px;
	cursor:pointer;
	position:relative;
}

#divAppBonuses .divBonus:before
{
	color:#ffffff;
	content:"^";
	display:block;
	font-size:24px;
	height:20px;
	line-height:30px;
	position:absolute;
	right:15px;
	text-align:center;
	text-shadow:0px 0px 5px #01eff9;
	top:15px;
	transform:rotate(180deg);
	transition:transform 0.25s;
	width:20px;
}

#divAppBonuses .divBonus.expand:before
{
	transform:rotate(0deg);
}

#divAppBonuses .divBonus:after
{
	clear:both;
	content:"";
	display:block;
}

#divAppBonuses .divBonus:nth-child(odd)
{
	background-color:#292a2f;
}

#divAppBonuses .divBonusRowView
{
	height:50px;
	line-height:50px;
}

#divAppBonuses .expand .divBonusRowView
{
	display:none;
}

#divAppBonuses .divBonusName
{
	color:#ffffff;
	padding-left:15px;
}

#divAppBonuses .casino .divBonusName
{
	text-shadow:0px 0px 5px #01eff9;
}

#divAppBonuses .freeSpins .divBonusName
{
	text-shadow:0px 0px 5px #edc967;
}

#divAppBonuses .sport .divBonusName
{
	text-shadow:0px 0px 5px #e600ff;
}

#divAppBonuses .divBonusRowView .divBonusName
{
	float:left;
	overflow:hidden;
	text-overflow:ellipsis;
	text-shadow:none;
	white-space:nowrap;
	width:calc(100% - 250px);
}

#divAppBonuses .divBonusName:before
{
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	content:"";
	display:inline-block;
	height:20px;
	margin-right:10px;
	transform:translateY(5px);
	width:20px;
}

#divAppBonuses .casino .divBonusName:before
{
	background-image:url('../images/icons/casino.svg');
	filter:drop-shadow(0px 0px 5px #01eff9);
}

#divAppBonuses .freeSpins .divBonusName:before
{
	background-image:url('../images/icons/promotions.svg');
	filter:drop-shadow(0px 0px 5px #edc967);
}

#divAppBonuses .sport .divBonusName:before
{
	background-image:url('../images/icons/sportbook.svg');
	filter:drop-shadow(0px 0px 5px #e600ff);
}

#divAppBonuses .divBonusRowView .divBonusName:before
{
	filter:none;
}

#divAppBonuses .divBonusStatus
{
	float:left;
	overflow:hidden;
	padding-left:15px;
	text-overflow:ellipsis;
	white-space:nowrap;
	width:80px;
}

#divAppBonuses .divBonusType
{
	color:#ffffff;
	float:left;
	overflow:hidden;
	padding-left:15px;
	text-overflow:ellipsis;
	white-space:nowrap;
	width:125px;
}

#divAppBonuses .casino .divBonusType
{
	text-shadow:0px 0px 5px #01eff9;
}

#divAppBonuses .freeSpins .divBonusType
{
	text-shadow:0px 0px 5px #edc967;
}

#divAppBonuses .sport .divBonusType
{
	text-shadow:0px 0px 5px #e600ff;
}

#divAppBonuses .divBonusDescription
{
	font-size:14px;
	line-height:16px;
	padding:10px 15px;
}

#divAppBonuses .divBonusDescription:after
{
	background-color:#555555;
	content:"";
	display:block;
	height:1px;
	margin:15px 0px 0px;
}

#divAppBonuses .divBonusExpandView
{
	display:none;
	padding:10px 0px;
}

#divAppBonuses .expand .divBonusExpandView
{
	display:block;
}

#divAppBonuses .divBonusAmount, #divAppBonuses .divBonusSpinCount, #divAppBonuses .divBonusAvailableFrom, #divAppBonuses .divBonusAvailableFor, #divAppBonuses .divBonusWagering, #divAppBonuses .divBonusMinMax, #divAppBonuses .divBonusAcceptedDate
{
	color:#ffffff;
	padding:0px 15px;
    position:relative;
    text-align:right;
    text-shadow:0px 0px 5px #01eff9;
}

#divAppBonuses .divBonusAmount:before
{
    content:"Amount:";
    float:left;
    text-shadow:none;
}

#divAppBonuses .divBonusSpinCount:before
{
    content:"Number of spins:";
    float:left;
    text-shadow:none;
}

#divAppBonuses .divBonusAvailableFor:before
{
    content:"Available for:";
    float:left;
    text-shadow:none;
}

#divAppBonuses .divBonusAvailableFrom:before
{
    content:"Available from:";
    float:left;
    text-shadow:none;
}

#divAppBonuses .divBonusWagering:before
{
    content:"Wagering:";
    float:left;
    text-shadow:none;
}

#divAppBonuses .divBonusMinMax:before
{
    content:"Min/Max deposit:";
    float:left;
    text-shadow:none;
}

#divAppBonuses .divBonusAcceptedDate:before
{
    content:"Accepted:";
    float:left;
    text-shadow:none;
}

#divAppBonuses .divActiveBonusWagerBar
{
    background-color:rgba(0, 0, 0, 0.25);
    border-radius:8px;
    height:16px;
    margin:10px 15px 0px;
    overflow:hidden;
    position:relative;
}

#divAppBonuses .divActiveBonusProgress
{
    background:#6b42de;
    background:linear-gradient(270deg, #01eff9 0%, #e600ff 100%);
    border-radius:8px;
    height:100%;
    left:0px;
    position:absolute;
    top:0px;
    width:0px;
}

#divAppBonuses .divActiveBonusPercentage
{
    color:#ffffff;
    font-size:12px;
    height:16px;
    line-height:16px;
    left:0px;
    position:absolute;
    right:0px;
    text-align:center;
    top:0px;
}

#divAppBonuses .divActiveBonusWagered
{
    color:#ffffff;
    float:left;
    font-size:14px;
    margin:5px 0px 0px 15px;
}

#divAppBonuses .divActiveBonusWagered:before
{
    color:#888b90;
    content:"Wagered:";
    margin-right:3px;
}

#divAppBonuses .divActiveBonusRemaining
{
    color:#ffffff;
    float:right;
    font-size:14px;
    margin:5px 15px 0px 0px;
}

#divAppBonuses .divActiveBonusRemaining:before
{
    color:#888b90;
    content:"Remaining:";
    margin-right:3px;
}

#divAppBonuses .spnClearFloats
{
	clear:both;
	display:block;
}

#divAppBonuses #btnSpinNow
{
	animation:pulsateButton 3s linear 0s infinite;
	float:right;
	margin:15px;
}

#divAppBonuses #btnActivateNow
{
	animation:pulsateButton 3s linear 0s infinite;
	float:right;
	margin:15px;
}

#divAppBonuses #btnCancelBonus
{
	float:right;
	margin:15px;
}

/* ANIMATION KEY FRAMES */
@keyframes pulsateButton
{
    0%   {border:2px solid #cffdff; box-shadow:inset 0px 0px 5px #01eff9, 0px 0px 5px #01eff9; color:#ffffff; text-shadow:0px 0px 5px #01eff9;}
    25%  {border:2px solid #3f4656; box-shadow:inset 0px 0px 5px rgba(1, 239, 249, 0), 0px 0px 5px rgba(1, 239, 249, 0); color:#888b90; text-shadow:0px 0px 5px rgba(1, 239, 249, 0);}
    50%  {border:2px solid #fbd3ff; box-shadow:inset 0px 0px 5px #e600ff, 0px 0px 5px #e600ff; color:#ffffff; text-shadow:0px 0px 5px #e600ff;}
    75%  {border:2px solid #3f4656; box-shadow:inset 0px 0px 5px rgba(1, 239, 249, 0), 0px 0px 5px rgba(1, 239, 249, 0); color:#888b90; text-shadow:0px 0px 5px rgba(1, 239, 249, 0);}
    100% {border:2px solid #cffdff; box-shadow:inset 0px 0px 5px #01eff9, 0px 0px 5px #01eff9; color:#ffffff; text-shadow:0px 0px 5px #01eff9;}
}

@keyframes showBonuses
{
    0%   {opacity:0;}
    1%   {opacity:0;}
    100% {opacity:1;}
}

/* MEDIA QUERIES */
@media (max-height: 640px)
{
    
}

@media (max-width: 620px)
{
    #divAppBonuses
    {
        display:block;
        opacity:1;
        transform:translate(-100%, 0%);
        transition:transform 0.25s;
    }

    #divAppBonuses.show
    {
        animation:none;
        transform:translate(0%, 0%);
    }

    #divAppBonuses #divBonusesOverlay
    {
        background-color:rgba(0, 0, 0, 0.25);
    }

    #divAppBonuses #divBonusesPopup
    {
        box-shadow:none;
        border-radius:0px;
        height:calc(100% - 120px);
        left:0%;
        opacity:1;
        overflow-y:auto;
        padding:20px 20px 100px;
        top:0%;
        transform:translate(0%, 0%);
        width:calc(100% - 100px);
    }

    #divAppBonuses.show #divBonusesPopup
    {
        animation:none;
    }

    #divAppBonuses #btnClosePopup
    {
        right:15px;
        top:15px;
    }

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

    #divAppBonuses .divBalanceLabel
    {
        font-size:16px;
        width:72px;
    }

    #divAppBonuses #divNormalBalance, #divAppBonuses #divBonusBalance
    {
        font-size:16px;
        width:calc(50% - 85px);
    }

	#divAppBonuses .divMyBonusesHeadings span:first-child, #divAppBonuses .divBonusRowView .divBonusName
	{
		width:calc(100% - 220px);
	}

	#divAppBonuses .divMyBonusesHeadings span:nth-child(2), #divAppBonuses .divBonusStatus
	{
		width:65px;
	}

	#divAppBonuses .divMyBonusesHeadings span:nth-child(3), #divAppBonuses .divBonusType
	{
		width:110px;
	}

	#divAppBonuses #divBonusList
	{
		font-size:14px;
		max-height:none;
	}
}

@media (max-width: 500px)
{
    #divAppBonuses .divBalanceLabel
    {
        font-size:14px;
        width:62px;
    }

    #divAppBonuses #divNormalBalance, #divAppBonuses #divBonusBalance
    {
        font-size:14px;
        width:calc(50% - 75px);
    }

    #divAppBonuses #btnBalanceInfo
    {
        right:5px;
    }
}

@media (max-width: 420px)
{
    #divAppBonuses #divBonusesPopup
    {
        height:calc(100% - 115px);
        padding:15px 15px 100px;
        width:calc(100% - 30px);
    }

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

    #divAppBonuses .divBalanceSection
    {
        padding:15px;
    }

    #divAppBonuses .divBalanceLabel
    {
        font-size:13px;
        width:60px;
    }

    #divAppBonuses #divNormalBalance, #divAppBonuses #divBonusBalance
    {
        font-size:13px;
        width:calc(50% - 70px);
    }
}