@charset "utf-8";

/* count down */
.countdown {
	--gap:			8px;
	--box-size: 	70px;
	--font-size:	33px;
	--font-pad-top: 22px;
	--font2-size:	11px;
	--font2-pad-top:8px;
}
.countdown {
	display:flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	gap:var(--gap);
	
	margin:10px auto;
	padding:1px 0;
	line-height:100%;
	text-align:center;
}
.countdown .time-box {
	display:block;
	background:#0D417B;
	min-width:var(--box-size);
	height:var(--box-size);
	border-radius:calc(var(--box-size) / 2);
}
/*.countdown .time-val:before {
	content:"";
	position:absolute;
	top:0; left:0; width:100%; height:100%;
	background:#000; opacity:0.2;
}*/
.countdown .time-val 	{ display:block; color:#FFF; font-weight:700; font-size:var(--font-size);  padding-top:var(--font-pad-top); }
.countdown .time-desc 	{ display:block; color:#FFF; font-weight:400; font-size:var(--font2-size); padding-top:var(--font2-pad-top); }
.countdown .spacer { 
	display:block;
	color:#0D417B;
	padding-top:calc(var(--font-pad-top) + 3px);
	font-size:var(--font-size);
	font-weight:700;
}


/* My Account - Latest Result */
#games {}
#games .countdown 			{ margin: 0.75em auto; }
#games .countdown .time-box { background:none; }
#games .countdown .time-box:before {
	content:"";
	position:absolute;
	top:0; left:0; width:100%; height:100%;
	background:#000; opacity:0.2;
	border-radius:calc(var(--box-size) / 2);
}
#games .countdown .time-val,
#games .countdown .time-desc,
#games .countdown .spacer 	{ color:#FFF; }
#games .countdown {
	--gap:			7px;
	--box-size: 	60px;
	--font-size:	27px;
	--font-pad-top: 18px;
	--font2-size:	10px;
	--font2-pad-top:3px;
}
@media only screen and (min-width: 901px) and (max-width: 1100px) {
	#games .countdown {
		--gap:			7px;
		--box-size: 	60px;
		--font-size:	26px;
		--font-pad-top: 18px;
		--font2-size:	10px;
		--font2-pad-top:4px;
	}
}
@media only screen and (min-width: 601px) and (max-width: 900px) {
	#games .countdown {
		--gap:			7px;
		--box-size: 	54px;
		--font-size:	24px;
		--font-pad-top: 15px;
		--font2-size:	10px;
		--font2-pad-top:4px;
	}
}
@media only screen and (min-width: 601px) and (max-width: 750px) {
	#games .countdown {
		--gap:			5px;
		--box-size: 	44px;
		--font-size:	20px;
		--font-pad-top: 11px;
		--font2-size:	8px;
		--font2-pad-top:1px;
	}
}
/*@media only screen and (min-width: 501px) and (max-width: 600px) {
	#games .countdown {
		--gap:			7px;
		--box-size: 	54px;
		--font-size:	24px;
		--font-pad-top: 15px;
		--font2-size:	10px;
		--font2-pad-top:4px;
	}
}*/
@media only screen and (max-width: 500px) {
	#games .countdown {
		--gap:			7px;
		--box-size: 	60px;
		--font-size:	26px;
		--font-pad-top: 18px;
		--font2-size:	10px;
		--font2-pad-top:4px;
	}
}
@media only screen and (max-width: 450px) {
	#games .countdown {
		--gap:			7px;
		--box-size: 	54px;
		--font-size:	24px;
		--font-pad-top: 15px;
		--font2-size:	10px;
		--font2-pad-top:4px;
	}
}
@media only screen and (max-width: 410px) {
	#games .countdown {
		--gap:			7px;
		--box-size: 	50px;
		--font-size:	22px;
		--font-pad-top: 14px;
		--font2-size:	9px;
		--font2-pad-top:3px;
	}
}
@media only screen and (max-width: 370px) {
	#games .countdown {
		--gap:			5px;
		--box-size: 	44px;
		--font-size:	20px;
		--font-pad-top: 11px;
		--font2-size:	8px;
		--font2-pad-top:1px;
	}
}
@media only screen and (max-width: 320px) {
	#games .countdown {
		--gap:			5px;
		--box-size: 	40px;
		--font-size:	18px;
		--font-pad-top: 11px;
		--font2-size:	7px;
		--font2-pad-top:1px;
	}
}