/* HEADER PROFILE */
#divAppHeader #divHeaderProfile
{
    cursor:pointer;
    float:right;
    height:50px;
    margin-right:50px;
    position:relative;
    transition:margin 0.25s;
    user-select:none;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    width:220px;
}

#divHeaderProfile #divHeaderUserIcon
{
    background-image:url('../images/loyaltyRewards/bronze.png');
    background-position:center;
    background-size:cover;
    height:62px;
    width:62px;
}

#divHeaderProfile #divHeaderUserIcon.Silver
{
    background-image:url('../images/loyaltyRewards/silver.png');
}

#divHeaderProfile #divHeaderUserIcon.Gold
{
    background-image:url('../images/loyaltyRewards/gold.png');
}

#divHeaderProfile #divHeaderUserIcon.Platinum
{
    background-image:url('../images/loyaltyRewards/platinum.png');
}

#divHeaderProfile #divHeaderUserIcon.Diamond
{
    background-image:url('../images/loyaltyRewards/diamond.png');
}

#divHeaderProfile #divHeaderUserName
{
    color:#ffffff;
    left:70px;
    line-height:20px;
    overflow:hidden;
    padding-right:10px;
    position:absolute;
    right:0px;
    text-overflow:ellipsis;
    top:10px;
	white-space:nowrap;
}

#divHeaderProfile #divHeaderUserName:after
{
    color:#888b90;
    content:">";
    font-size:14px;
    position:absolute;
    right:0px;
    transform:rotate(90deg);
    transition:color 0.25s, transform 0.25s, text-shadow 0.25s;
}

#divHeaderProfile:hover #divHeaderUserName:after, #divHeaderProfile:focus #divHeaderUserName:after
{
    color:#cffdff;
    text-shadow:0px 0px 5px #01eff9;
    transform:rotate(450deg);
}

#divHeaderProfile .divHeaderLoyaltyBar
{
    background-color:#292a2f;
    border-radius:4px;
    height:8px;
    left:70px;
    overflow:hidden;
    position:absolute;
    right:0px;
    top:40px;
}

#divHeaderProfile #divHeaderLoyaltyProgress
{
    background:#6b42de;
	background:linear-gradient(270deg, #01eff9 0%, #e600ff 100%);
    border-radius:4px;
    height:100%;
    left:0px;
    position:absolute;
    top:0px;
    transition:width 0.25s;
    width:0px;
}

/* USER PROFILE POPUP */
#divAppUserProfile
{
    height:0px;
    left:0px;
    position:fixed;
    top:0px;
    transition:height 0.25s;
    width:100%;
    z-index:5;
}

#divAppUserProfile.show
{
    height:100%;
}

#divAppUserProfile #divUserProfileOverlay
{
    height:100%;
    left:0px;
    position:absolute;
    top:0px;
    width:100%;
}

#divAppUserProfile .divUserProfilePopup
{
    background-color:#1b1c20;
    border-radius:10px;
	box-shadow:inset 0px 0px 5px #01eff9, 0px 0px 5px #01eff9, 0px 0px 10px rgba(0, 0, 0, 0.5);
    cursor:default;
    height:0px;
    opacity:0;
    overflow:hidden;
    position:absolute;
    right:325px;
	top:110px;
    transition:height 0.25s, opacity 0.25s, top 0.25s;
    user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
	width:340px;
}

#divAppUserProfile.show .divUserProfilePopup
{
    border:2px solid #cffdff;
	height:225px;
    opacity:1;
}

.iosApplication #divAppUserProfile.show .divUserProfilePopup, .progressiveWebApplication #divAppUserProfile.show .divUserProfilePopup
{
	height:155px;
}

.pageScrolled #divAppUserProfile .divUserProfilePopup
{
    top:80px;
}

#divAppUserProfile #divProfileUserIcon
{
    background-image:url('../images/loyaltyRewards/bronze.png');
    background-position:center;
    background-size:cover;
    height:80px;
    left:20px;
    position:absolute;
    top:20px;
    width:80px;
}

#divAppUserProfile #divProfileUserIcon.Silver
{
    background-image:url('../images/loyaltyRewards/silver.png');
}

#divAppUserProfile #divProfileUserIcon.Gold
{
    background-image:url('../images/loyaltyRewards/gold.png');
}

#divAppUserProfile #divProfileUserIcon.Platinum
{
    background-image:url('../images/loyaltyRewards/platinum.png');
}

#divAppUserProfile #divProfileUserIcon.Diamond
{
    background-image:url('../images/loyaltyRewards/diamond.png');
}

#divAppUserProfile #divProfileUserName
{
    color:#ffffff;
    font-size:22px;
    left:105px;
    overflow:hidden;
    position:absolute;
    right:50px;
    text-overflow:ellipsis;
    top:20px;
	white-space:nowrap;
}

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

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

#divAppUserProfile #divProfileUserId
{
    color:#ffffff;
	cursor:pointer;
	font-family:"Jost", sans-serif;
	font-size:14px;
    left:105px;
    overflow:hidden;
    position:absolute;
    right:20px;
    text-overflow:ellipsis;
    top:53px;
	white-space:nowrap;
}

#divAppUserProfile #divProfileUserId.pulsateCopy
{
	animation:pulsateCopyId 2s;
}

#divAppUserProfile #divProfileUserId:before
{
	color:#888b90;
	content:"ID:";
	margin-right:5px;
}

#divAppUserProfile #divProfileUserId:after
{
	color:#888b90;
	content:"\f24d";
	display:inline-block;
	font:normal normal normal 12px/1 FontAwesome;
	margin-left:8px;
	transform:translateY(-2px);
	transition:color 0.25s, text-shadow 0.25s;
}

#divAppUserProfile #divProfileUserId:hover:after, #divAppUserProfile #divProfileUserId:focus:after
{
	color:#ffffff;
	text-shadow:0px 0px 5px #01eff9;
}

#divAppUserProfile #divProfileLoyaltyTier
{
    color:#ffffff;
    left:105px;
    overflow:hidden;
    position:absolute;
    right:20px;
    text-overflow:ellipsis;
    text-shadow:0px 0px 5px #e600ff;
    top:70px;
	white-space:nowrap;
}

#divAppUserProfile #divProfileLoyaltyTier:before
{
    color:#888b90;
    content:"Loyalty Tier:";
    margin-right:5px;
    text-shadow:none;
}

#divAppUserProfile .divProfileLoyaltyBar
{
    background-color:#292a2f;
    border-radius:8px;
    height:16px;
    left:20px;
    overflow:hidden;
    position:absolute;
    right:20px;
    top:105px;
}

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

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

#divAppUserProfile #divProfileLoyaltyPercentage:before
{
    content:"Tier Progress: ";
}

#divAppUserProfile #divProfileLoyaltyPercentage:after
{
    content:"%";
}

#divAppUserProfile #btnInstallAsApplication
{
	left:20px;
	position:absolute;
	right:20px;
	top:160px;
}

.iosApplication #divAppUserProfile #btnInstallAsApplication, .progressiveWebApplication #divAppUserProfile #btnInstallAsApplication
{
	display:none;
}

#divAppUserProfile #btnInstallAsApplication:before
{
    background-color:#888b90;
    content:"";
    height:1px;
    left:0px;
    position:absolute;
    right:0px;
    top:-20px;
}

#divAppUserProfile #divApplicationVersion
{
	bottom:5px;
	font-size:11px;
	left:0px;
	position:absolute;
	right:0px;
	text-align:center;
}

#divAppUserProfile #divApplicationVersion:before
{
	content:"Play.co.za v";
}

/* VIDEO IN ALERT */
.vidInstallPwa
{
	background-color:#000000;
}

/* ANIMATION KEY FRAMES */
@keyframes bounceIndication
{
	0%   { transform: scale(1,1)    translateY(0); }
	5% 	 { transform: scale(1.1,.9) translateY(0); }
	15%  { transform: scale(.9,1.1) translateY(-8px); }
	25%  { transform: scale(1,1)    translateY(0); }
	29%  { transform: scale(1,1)    translateY(-1px); }
	32%  { transform: scale(1,1)    translateY(0); }
	100% { transform: scale(1,1)    translateY(0); }
}

@keyframes pulsateCopyId
{
	0%   {color:#00ff00}
	99%  {color:#ffffff}
	100% {color:inherit}
}

/* MEDIA QUERIES */
@media (max-width: 1600px)
{
    /* HEADER PROFILE */
    #divAppHeader #divHeaderProfile
    {
        margin-right:30px;
    }

    /* USER PROFILE POPUP */
    #divAppUserProfile .divUserProfilePopup
    {
        right:280px;
    }
}

@media (max-width: 1200px)
{
    /* USER PROFILE POPUP */
    #divAppUserProfile .divUserProfilePopup
    {
        right:20px;
    }
}

@media (max-width: 800px)
{
	/* HEADER PROFILE */
    #divAppHeader #divHeaderProfile
    {
        margin-right:20px;
        width:64px;
    }

    #divHeaderProfile #divHeaderUserIcon
    {
        height:44px;
        margin:0px 10px;
        width:44px;
    }

    #divHeaderProfile #divHeaderUserName
    {
        display:none;
    }

    #divHeaderProfile .divHeaderLoyaltyBar
    {
        left:0px;
        height:5px;
        position:absolute;
        top:45px;
        width:100%;
    }
}

@media (max-width: 380px)
{
    /* USER PROFILE POPUP */
    #divAppUserProfile .divUserProfilePopup
    {
        width:320px;
    }
}