/* SPORT PREDICTOR POPUP */
#divAppSportPredictor
{
    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;
}

#divAppSportPredictor.show
{
	animation:showSportPredictorPopup 0.25s;
	display:block;
	opacity:1;
}

#divAppSportPredictor #divSportPredictorPopup
{
    background-image:url('../images/backgrounds/sportField.webp');
    background-position:center;
    background-size:cover;
    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:670px;
    left:50%;
    opacity:0;
	overflow:hidden;
	position:absolute;
	top:50%;
	transform:translate(-50%, -50%);
	width:580px;
}

#divAppSportPredictor.show #divSportPredictorPopup
{
	animation:showSportPredictorPopup 0.25s;
	opacity:1;
}

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

#divAppSportPredictor .divPopupHeader
{
	background-image:url('../images/promotions/sportPredictor/sportPredictorHeader.webp');
	background-position:center top;
	background-repeat:no-repeat;
	background-size:68%;
	filter:drop-shadow(0px 0px 5px #ffffff);
	height:100%;
    left:0px;
    pointer-events:none;
	position:absolute;
	top:0px;
	width:100%;
}

#divAppSportPredictor #btnInfo
{
	color:#ffffff;
    cursor:pointer;
	font-size:26px;
    height:40px;
    left:10px;
    line-height:40px;
	position:absolute;
	text-align:center;
	text-shadow:0px 0px 5px #00ff00;
    top:10px;
	width:40px;
	z-index:1;
}

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

#divAppSportPredictor #btnClosePopup:before
{
	background-color:#ffffff;
	box-shadow:0px 0px 5px #00ff00;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(45deg);
	width:24px;
}

#divAppSportPredictor #btnClosePopup:after
{
	background-color:#ffffff;
	box-shadow:0px 0px 5px #00ff00;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(-45deg);
	width:24px;
}

#divAppSportPredictor #divMatchTile
{
    background-color:rgba(0, 0, 0, 0.75);
    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);
    height:380px;
	left:calc(50% - 210px);
    position:absolute;
	top:175px;
    width:420px;
}

#divAppSportPredictor .divHomeTeam
{
    color:#ffffff;
    font-size:36px;
    left:0px;
    position:absolute;
    right:0px;
    top:10px;
    text-align:center;
}

#divAppSportPredictor .divHomeTeamScore
{
    color:#ffffff;
    font-size:40px;
    left:0px;
    position:absolute;
    right:0px;
    top:25px;
    text-align:center;
}

#divAppSportPredictor .divHomeTeamScore:after
{
    background-color:#ffffff;
    box-shadow:0px 0px 5px 0px #ffffff;
    content:"";
    display:block;
    height:1px;
    left:calc(50% - 75px);
    position:absolute;
    top:70px;
    width:150px;
}

#divAppSportPredictor .divAwayTeamScore
{
    color:#ffffff;
    font-size:36px;
    left:0px;
    position:absolute;
    right:0px;
    top:105px;
    text-align:center;
}

#divAppSportPredictor .divAwayTeam
{
    color:#ffffff;
    font-size:36px;
    left:0px;
    position:absolute;
    right:0px;
    top:175px;
    text-align:center;
}

#divAppSportPredictor .divYourPick
{
    color:#ffffff;
    font-size:24px;
    left:0px;
    position:absolute;
    right:0px;
    text-align:center;
    text-shadow:0px 0px 5px #ffffff;
    top:185px;
}

#divAppSportPredictor .divYourPick:before
{
	background-color:#ffffff;
	box-shadow:0px 0px 5px #ffffff;
	content:"";
	display:block;
	height:2px;
	left:30px;
	position:absolute;
	top:18px;
	width:15%;
}

#divAppSportPredictor .divYourPick:after
{
	background-color:#ffffff;
	box-shadow:0px 0px 5px #ffffff;
	content:"";
	display:block;
	height:2px;
	position:absolute;
	top:18px;
	right:30px;
	width:15%;
}

#divAppSportPredictor .divYourPickValue
{
    color:#ffffff;
    font-size:36px;
	font-weight:600;
    left:0px;
    position:absolute;
    right:0px;
    text-align:center;
	text-shadow:0px 0px 5px #edc967;
    top:230px;
}

#divAppSportPredictor .divYourPickValue.didNotPick
{
	font-size:36px;
	text-shadow:0px 0px 5px #ff0000;
}

#divAppSportPredictor .divYourPickValue span
{
	font-size:32px;
	text-shadow:none;
}

#divAppSportPredictor .divHomeScorePicker
{
	border:2px solid #ffffff;
    border-radius:10px;
    box-shadow:inset 0px 0px 5px 0px #ffffff, 0px 0px 5px 0px #ffffff;
    height:90px;
    left:calc(50% - 125px);
    position:absolute;
    top:75px;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    width:120px;
}

#divAppSportPredictor .divHomeScorePicker.expand
{
	background-color:#000000;
	height:200px;
	top:20px;
	width:250px;
	z-index:1;
}

#divAppSportPredictor .divAwayScorePicker
{
	border:2px solid #ffffff;
    border-radius:10px;
    box-shadow:inset 0px 0px 5px 0px #ffffff, 0px 0px 5px 0px #ffffff;
    height:90px;
    left:calc(50% + 5px);
    position:absolute;
    top:75px;
	user-select:none;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    width:120px;
}

#divAppSportPredictor .divAwayScorePicker.expand
{
	background-color:#000000;
	left:calc(50% - 125px);
	height:200px;
	top:20px;
	width:250px;
}

#divAppSportPredictor .divHomeScorePicker:before
{
    background:linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
	content:"";
    display:block;
    height:30px;
    left:0px;
    pointer-events:none;
    position:absolute;
    right:0px;
    top:0px;
    z-index:1;
}

#divAppSportPredictor .divHomeScorePicker:after
{
    background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
	bottom:0px;
	content:"";
    display:block;
    height:30px;
    left:0px;
    pointer-events:none;
    position:absolute;
    right:0px;
    z-index:1;
}

#divAppSportPredictor .divScorePickerIndicator
{
	background:linear-gradient(180deg, #ac78e4 0%, #7262f2 100%);
	border-radius:10px;
	height:30px;
	left:10px;
	position:absolute;
	right:10px;
	top:30px;
}

#divAppSportPredictor .expand .divScorePickerIndicator
{
	display:none;
}

#divAppSportPredictor .divScorePicker
{
    height:100%;
    left:0px;
    overflow-x:hidden;
	overflow-y:scroll;
    position:absolute;
	-webkit-overflow-scrolling:touch;
    top:0px;
    width:100%;
}

#divAppSportPredictor .divScore
{
    color:#ffffff;
    cursor:pointer;
    font-size:20px;
	font-weight:600;
    height:30px;
    line-height:30px;
    text-align:center;
	text-shadow:0px 0px 1px #000000;
}

#divAppSportPredictor .divMatchStartTimer
{
    left:0px;
    position:absolute;
    right:0px;
    top:225px;
}

#divAppSportPredictor #divTotalPicks
{
	font-size:16px;
    left:0px;
	position:absolute;
	right:0px;
	text-align:center;
	top:530px;
}

#divAppSportPredictor #divTotalPicks:before
{
	content:"Total Picks:";
	margin-right:3px;
}

#divAppSportPredictor #btnSavePicks
{
	font-size:16px;
    left:50%;
	position:absolute;
	top:580px;
	transform:translateX(-50%);
    width:230px;
}

#divAppSportPredictor #btnSavePicks:after
{
	content:"";
	display:block;
	height:1px;
	position:relative;
	top:20px;
}

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

/* MEDIA QUERIES */
@media (max-height: 710px)
{
    /* SPORT PREDICTOR POPUP */
    #divAppSportPredictor #divSportPredictorPopup
    {
        height:calc(100% - 40px);
        overflow-y:auto;
        top:20px;
		transform:translate(-50%, 0%);
    }
}

@media (max-width: 580px)
{
    /* SPORT PREDICTOR POPUP */
    #divAppSportPredictor #divSportPredictorPopup
    {
        border-radius:0px;
        height:100%;
        left:0px;
        overflow-y:auto;
        top:0px;
        transform:translate(0%, 0%);
        width:100%;
    }

    #divAppSportPredictor #divHollowGlitter
    {
        height:585px;
    }

	#divAppSportPredictor .divPopupHeader
	{
		background-size:80%;
		left:calc(50% - 250px);
		width:500px;
	}
}

@media (max-width: 500px)
{
    /* SPORT PREDICTOR POPUP */
    #divAppSportPredictor #divHollowGlitter
    {
        height:615px;
    }

	#divAppSportPredictor .divPopupHeader
	{
		background-position:center top 10px;
		left:calc(50% - 210px);
		width:420px;
	}

	#divAppSportPredictor #divMatchTile
	{
		left:calc(50% - 190px);
		width:380px;
	}
}

@media (max-width: 420px)
{
    /* SPORT PREDICTOR POPUP */
    #divAppSportPredictor #divHollowGlitter
    {
        height:620px;
    }

	#divAppSportPredictor .divPopupHeader
	{
		background-position:center top 30px;
		background-size:90%;
		left:calc(50% - 180px);
		width:360px;
	}

	#divAppSportPredictor #divMatchTile
	{
		left:calc(50% - 170px);
		width:340px;
	}
}