/* #################### THEMES ######################## */

/* band Themes */
div.band.DigitalInstant > div:first-child,
div.band.ScratchOff > div:first-child,
div.band.DrawGame > div:first-child,
div.band.FastPlay > div:first-child {  } /* max-width:960px; */

/* box Themes */
.box.Pick3 {		background:linear-gradient(-135deg, var(--Pick3Green) 1.5rem, transparent 0) bottom left no-repeat; border-radius:inherit; }
.box.Pick4 {		background:linear-gradient(-135deg, var(--Pick4Blue) 1.5rem, transparent 0) bottom left no-repeat; border-radius:inherit; }
.box.Cash5 {		background:linear-gradient(-135deg, var(--Cash5Plum) 1.5rem, transparent 0) bottom left no-repeat; border-radius:inherit; }
.box.CashPop {		background:linear-gradient(-135deg, var(--CashPopPink) 1.5rem, transparent 0) bottom left no-repeat; border-radius:inherit; }
.box.LuckyForLife {	background:linear-gradient(-135deg, var(--LuckyGreen) 1.5rem, transparent 0) bottom left no-repeat; border-radius:inherit; }
.box.MillionaireForLife {	background:linear-gradient(-135deg, var(--MillionaireGreen) 1.5rem, transparent 0) bottom left no-repeat; border-radius:inherit; }
.box.MegaMillions {	background:linear-gradient(-135deg, var(--MegaBlue) 1.5rem, transparent 0) bottom left no-repeat; border-radius:inherit; }
.box.Powerball {	background:linear-gradient(-135deg, var(--PowerRed) 1.5rem, transparent 0) bottom left no-repeat; border-radius:inherit; }
.box.ScratchOff {	background:linear-gradient(-135deg, var(--GraySlate) 1.5rem, transparent 0) bottom left no-repeat; border-radius:inherit; }
.box.Keno {			background:linear-gradient(-135deg, var(--KenoRed) 1.5rem, transparent 0) bottom left no-repeat; border-radius:inherit; }
.box.FastPlay {		background:linear-gradient(-135deg, var(--FastPlayGreen) 1.5rem, transparent 0) bottom left no-repeat; border-radius:inherit; }
.box.DigitalInstant{background:linear-gradient(-135deg, var(--GraySlate) 1.5rem, transparent 0) bottom left no-repeat; border-radius:inherit; }


/* NCEL brand directive classes for any div block element : box, box-group, & band */
div.blue { position:relative; z-index:1; background-color:var(--BlueOcean); color:white; background-image:linear-gradient(to bottom, transparent 10%, rgba(0,0,0,0.2) 80%); background-blend-mode: overlay; background-repeat:no-repeat;}
div.green { position:relative; z-index:1; background-color:var(--GreenMtn); color:white; background-image:linear-gradient(to bottom, transparent 10%, rgba(0,0,0,0.2) 80%); background-blend-mode: overlay; background-repeat:no-repeat;}
div.midnight { position: relative;z-index: 1;background-color: var(--BlueMidnight);color: white; background-image:linear-gradient(to bottom, transparent 10%, rgba(0,0,0,0.25) 80%); background-blend-mode: overlay; background-repeat:no-repeat;}
div.slate { position:relative; z-index:1; background-color:var(--GraySlate); color:white; background-image:linear-gradient(to bottom, transparent 10%, rgba(0,0,0,0.3) 80%); background-blend-mode: overlay; background-repeat:no-repeat;}
div.yellow,
div.GoldenSky {position: relative;z-index: 1; background-color: var(--GoldenSky); background-image:linear-gradient(to bottom, transparent 10%, rgba(0,0,0,0.3) 80%); background-blend-mode: overlay;}
span.yellow,
span.GoldenSky { color: var(--GoldenSky);}

/* branded div */
div.KenoOrange { position:relative; z-index:1; background-color:var(--KenoOrange); color:white; background-image:linear-gradient(to bottom, transparent 10%, rgba(0,0,0,0.3) 80%); background-blend-mode: overlay; background-repeat:no-repeat;}
span.KenoOrange { color:var(--KenoOrange); }
div.KenoRed { position:relative; z-index:1; background-color:var(--KenoRed); color:white; background-image:linear-gradient(to bottom, transparent 10%, rgba(0,0,0,0.3) 80%); background-blend-mode: overlay; background-repeat:no-repeat;}
span.KenoRed { color:var(--KenoRed); }
div.Cash5Purple { position:relative; z-index:1; background-color:var(--Cash5Plum); color:white; background-image:radial-gradient(ellipse at 80% 20%, transparent 10%, rgba(0,0,0,0.2) 80%); background-blend-mode: overlay; background-repeat:no-repeat;}
span.Cash5Purple { color:var(--Cash5Plum); }
div.CashPopPink { position:relative; z-index:1; background-color:var(--CashPopPinkDark); color:white; background-image:radial-gradient(ellipse at 80% 20%, transparent 10%, rgba(0,0,0,0.2) 80%); background-blend-mode: overlay; background-repeat:no-repeat;}
span.CashPopPink { color:var(--CashPopPinkDark); }
div.PowerRed { position:relative; z-index:1; background-color:var(--PowerRed); color:white; background-image:linear-gradient(to bottom, transparent 10%, rgba(0,0,0,0.75) 80%); background-blend-mode: overlay; background-repeat:no-repeat;}
span.PowerRed { color:var(--PowerRed); }
div.MegaBlue { position:relative; z-index:1; background-color:var(--MegaBlue); color:white; background-image:linear-gradient(to bottom, transparent 10%, rgba(0,0,0,0.2) 80%); background-blend-mode: overlay; background-repeat:no-repeat;}
span.MegaBlue { color:var(--MegaBlue); }
div.LuckyGreen { position:relative; z-index:1; background-color:var(--LuckyGreen); color:white; background-image:linear-gradient(to bottom, transparent 10%, rgba(0,0,0,0.2) 80%); background-blend-mode: overlay; background-repeat:no-repeat;}
span.LuckyGreen { color:var(--LuckyGreen); }
div.MillionaireGreen { position:relative; z-index:1; background-color:var(--MillionaireGreen); color:white; background-image:linear-gradient(to bottom, transparent 10%, rgba(0,0,0,0.2) 80%); background-blend-mode: overlay; background-repeat:no-repeat;}
span.MillionaireGreen { color:var(--MillionaireGreen); }
div.Pick3Green { position:relative; z-index:1; background-color:var(--Pick3Green); color:white; background-image:linear-gradient(to bottom, transparent 10%, rgba(0,0,0,0.2) 80%); background-blend-mode: overlay; background-repeat:no-repeat;}
span.Pick3Green { color:var(--Pick3Green); }
div.Pick4Blue { position:relative; z-index:1; background-color:var(--Pick4Blue); color:white; background-image:linear-gradient(to bottom, transparent 10%, rgba(0,0,0,0.2) 80%); background-blend-mode: overlay; background-repeat:no-repeat;}
span.Pick4Blue { color:var(--Pick4Blue); }


/* re-iterate cloud since it may appear within another color */
div.cloud {		background-color: var(--WhiteCloud); color: var(--GraySlate);}
div.cloudfx {	background-color:white; box-shadow: var(--CloudSlate) 0px 0px 20px inset; color:var(--GraySlate);}

/* --- WAVE FX --- */
div.Wave::after { position:absolute; z-index:-1; top:0; left:0; width:100%; height:100%; content:""; box-shadow:inset 0px 0px 0px 0px var(--WhiteCloud); background-position:bottom; background-size:cover; background-repeat:no-repeat; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240px' height='600px' viewBox='0 0 240 600'%3E%3Cpath style='fill:%23F4F4F7;' d='M240,579.2c-13.5-16.3-43.6-25.7-106.5-0.4C72.3,603.4,27,590.7,0,576v24h240V579.2z'/%3E%3C/svg%3E");}


/* text header colors */
/* brand colors */
.slate h1, .slate h3, .slate h5 { color:white;}
.slate h2, .slate h4 { color:white;}
.slate h6 { color:#aebbc5;}

.midnight h1, .midnight h3, .midnight h5 { color:white;}
.midnight h2, .midnight h4 { color:white;}
.midnight h6 { color:#838fa7;}

.blue h1, .blue h3, .blue h5 { color:white;}
.blue h2, .blue h4 { color:white;}
.blue h6 { color:#8dceed;}

.green h1, .green h3, .green h5 { color:white;}
.green h2, .green h4 { color:white;}
.green h6 { color:#acd28a;}

.yellow h1, .yellow h3, .yellow h5 { color:var(--Midnight);}
.yellow h2, .yellow h4 { color:var(--Midnight)}
.yellow h6 { color:#cab346;}
.yellow p { color:var(--GraySlate);}

/* reset as default - must come last */
.cloud h1, .cloud h3 { color:var(--GraySlate);}
.cloud h2, .cloud h4 { color:var(--GraySlate);}
.cloud h5 { color:var(--GraySlate);}
.cloud h6 { color:var(--GraySlate);}

.cloudfx h1, .cloudfx h3 { color:var(--GraySlate);}
.cloudfx h2, .cloudfx h4 { color:var(--GraySlate);}
.cloudfx h5 { color:var(--GraySlate);}
.cloudfx h6 { color:var(--GraySlate);}

span.red { color: var(--PowerRed); }


/* hyperlinks */
/* link/visited */
.GSDkGreen a:link,		.GSDkGreen a:visited,
.KenoOrange a:link,		.KenoOrange a:visited,
.KenoRed a:link,		.KenoRed a:visited,
.PowerRed a:link,		.PowerRed a:visited,
.MegaBlue a:link,		.MegaBlue a:visited,
.LuckyGreen a:link,		.LuckyGreen a:visited,
.MillionaireGreen a:link,	.MillionaireGreen a:visited,
.Pick3Green a:link,		.Pick3Green a:visited,
.Pick4Blue a:link,		.Pick4Blue a:visited,
.Cash5Purple a:link,	.Cash5Purple a:visited,
.CashPopPink a:link,	.CashPopPink a:visited,
.blue a:link,			.blue a:visited,
.green a:link,			.green a:visited,
.midnight a:link,		.midnight a:visited,
.slate a:link,			.slate a:visited { color:var(--GoldenSky); }
 /* reset to default */
.yellow a:link, .yellow a:visited,
.cloud a:link, .cloud a:visited,
.cloudfx a:link, .cloudfx a:visited { color:var(--BlueSea); }

/* hover/active */
.GSDkGreen a:hover,		.GSDkGreen a:active,
.KenoOrange a:hover,	.KenoOrange a:active,
.KenoRed a:hover,		.KenoRed a:active,
.PowerRed a:hover,		.PowerRed a:active,
.MegaBlue a:hover,		.MegaBlue a:active,
.LuckyGreen a:hover,	.LuckyGreen a:active,
.MillionaireGreen a:hover,	.MillionaireGreen a:active,
.Pick3Green a:hover,	.Pick3Green a:active,
.Pick4Blue a:hover,		.Pick4Blue a:active,
.Cash5Purple a:hover,	.Cash5Purple a:active,
.CashPopPink a:hover,	.CashPopPink a:active
.blue a:hover,			.blue a:active,
.green a:hover,			.green a:active,
.midnight a:hover,		.midnight a:active,
.slate a:hover,			.slate a:active {	color:white; text-decoration:underline; }
 /* reset to default */
.yellow a:hover,		.yellow a:active,
.cloud a:hover,			.cloud a:active,
.cloudfx a:hover,		.cloudfx a:active {	color:var(--BlueOcean); text-decoration:underline; }


/* buttons */
/* link/visited */
.GSDkGreen a.button:link, .GSDkGreen a.button:visited,
.KenoOrange a.button:link, .KenoOrange a.button:visited,
.KenoRed a.button:link, .KenoRed a.button:visited,
.PowerRed a.button:link, .PowerRed a.button:visited,
.MegaBlue a.button:link, .MegaBlue a.button:visited,
.LuckyGreen a.button:link, .LuckyGreen a.button:visited,
.MillionaireGreen a.button:link, .MillionaireGreen a.button:visited,
.Pick3Green a.button:link, .Pick3Green a.button:visited,
.Pick4Blue a.button:link, .Pick4Blue a.button:visited,
.Cash5Purple a.button:link, .Cash5Purple a.button:visited,
.CashPopPink a.button:link, .CashPopPink a.button:visited,
.midnight a.button:link, .midnight a.button:visited,
.slate a.button:link, .slate a.button:visited,
.blue a.button:link, .blue a.button:visited,
.green a.button:link, .green a.button:visited {					color: var(--BlueSea);	background-color:white; }
/* reset to default for closer child style */
.yellow a.button:link, .yellow a.button:visited,
.cloud a.button:link, .cloud a.button:visited,
.cloudfx a.button:link, .cloudfx a.button:visited {				color: white;			background-color:var(--BlueSea); }

/* alt */
.GSDkGreen a.button.alt:link, .GSDkGreen a.button.alt:visited,
.KenoOrange a.button.alt:link, .KenoOrange a.button.alt:visited,
.KenoRed a.button.alt:link, .KenoRed a.button.alt:visited,
.PowerRed a.button.alt:link, .PowerRed a.button.alt:visited,
.MegaBlue a.button.alt:link, .MegaBlue a.button.alt:visited,
.LuckyGreen a.button.alt:link, .LuckyGreen a.button.alt:visited,
.MillionaireGreen a.button.alt:link, .MillionaireGreen a.button.alt:visited,
.Pick3Green a.button.alt:link, .Pick3Green a.button.alt:visited,
.Pick4Blue a.button.alt:link, .Pick4Blue a.button.alt:visited,
.Cash5Purple a.button.alt:link, .Cash5Purple a.button.alt:visited,
.CashPopPink a.button.alt:link, .CashPopPink a.button.alt:visited,
.midnight a.button.alt:link, .midnight a.button.alt:visited,
.slate a.button.alt:link, .slate a.button.alt:visited,
.blue a.button.alt:link, .blue a.button.alt:visited,
.green a.button.alt:link, .green a.button.alt:visited {			color: white;			background-color:rgba(0,0,0,0.1); box-shadow: 0 0 0 2px white inset; } /* White-Outline */

.yellow a.button.alt:link, .yellow a.button.alt:visited,
.cloud a.button.alt:link, .cloud a.button.alt:visited,
.cloudfx a.button.alt:link, .cloudfx a.button.alt:visited {		color: var(--BlueSea);	background-color:transparent; box-shadow: 0 0 0 2px var(--BlueSea) inset; } /* Blue-Outline */

/* hover/active */
.GSDkGreen a.button:hover, .GSDkGreen a.button:active,
.KenoOrange a.button:hover, .KenoOrange a.button:active,
.KenoRed a.button:hover, .KenoRed a.button:active,
.PowerRed a.button:hover, .PowerRed a.button:active,
.MegaBlue a.button:hover, .MegaBlue a.button:active,
.LuckyGreen a.button:hover, .LuckyGreen a.button:active,
.MillionaireGreen a.button:hover, .MillionaireGreen a.button:active,
.Pick3Green a.button:hover, .Pick3Green a.button:active,
.Pick4Blue a.button:hover, .Pick4Blue a.button:active,
.Cash5Purple a.button:hover, .Cash5Purple a.button:active,
.CashPopPink a.button:hover, .CashPopPink a.button:active,
.midnight a.button:hover, .midnight a.button:active,
.slate a.button:hover, .slate a.button:active,
.blue a.button:hover, .blue a.button:active,
.green a.button:hover, .green a.button:active {					color: var(--BlueOcean);	background-color:white; box-shadow: 0 0 0 2px var(--BlueSea) inset; }
/* reset to default */
.yellow a.button:hover, .yellow a.button:active,
.cloud a.button:hover, .cloud a.button:active,
.cloudfx a.button:hover, .cloudfx a.button:active {				color: white;				background-color:var(--BlueOcean); box-shadow:none;}
/* alt */
.yellow a.button.alt:hover, .yellow a.button.alt:active,
.cloud a.button.alt:hover, .cloud a.button.alt:active,
.cloudfx a.button.alt:hover, .cloudfx a.button.alt:active {		color: var(--BlueOcean);	background-color:transparent; box-shadow: 0 0 0 2px var(--BlueOcean) inset;} /* Blue-Outline */

/* directly branded */
button.reverse,
a.button.reverse:link,		a.button.reverse:visited {			color:var(--GraySlate); background-color:white; }

/* directly branded hover */
a.button.reverse:hover, a.button.reverse:active {				color:var(--BlueMidnight); background-color:var(--GoldenSky); }

/* pager */
.pager { display:block; clear:left; width:auto; margin:1rem 1rem 0 1rem; font-weight:bold; text-align:center;}
.pager span span { color:white; background-color:transparent; display:inline-block; padding:0.25em 0.5em; border-radius:0.25rem; background-color:var(--BlueOcean);}
.pager > span > a { display:inline-block;  padding:0.25em 0.5em !important;}
.pager > span > a:link,
.pager > span > a:visited {  }
.pager > span > a:active,
.pager > span > a:hover {}
.pager a[disabled="disabled"] { display:none !important; }
.pager span span:only-child { display:none; } /* pager (1) hiding trick */

.blue .pager span span,
.green .pager span span,
.midnight .pager span span,
.slate .pager span span { color:var(--BlueMidnight); background-color:var(--GoldenSky); }


/* Ordered lists - bignumber */
ol.bignumber { position: relative; padding-left: 1.5rem; list-style-type: none; }
ol.bignumber > li { counter-increment: step-counter; margin-bottom:0.5em; line-height:1.75em; }
ol.bignumber > li::before { content: counter(step-counter)"."; position: absolute; left: 0; font:normal 1.33em/1 'odudo', Arial, Sans-serif; }


/* UL lists */
/*  UL in .MID  - SVG Bullet */
main ul,
main ul li { text-align:left; }
main ul li { background-image: var(--SVGStar); background-repeat: no-repeat; background-position: 0 0.25em; background-size: 0.75em; padding-left: 1.25em; padding-bottom: 0.75em;}

.star {	background-image:var(--SVGStar); background-repeat:no-repeat; background-position:left 0.25em; background-size:1em; padding-left:1.25em; display:inline;}


/* New background FX with SVG patterns - to replace the '.grad .dots-dark' styling */
.bg_stars::before,
.bg_dots::before,
.bg_honeycomb::before,
.bg_rings::before,
.bg_matrix::before { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-color: inherit; mask-repeat: repeat; -webkit-mask-repeat: repeat; content: ""; border-radius: inherit; }

	.bg_stars::before { mask-mode:alpha; mask-image: var(--SVGStars); -webkit-mask-image: var(--SVGStars); mask-size: 8rem 8rem; -webkit-mask-size: 8rem 8rem; content: "";}
	.bg_dots::before { mask-image: var(--SVGDots); -webkit-mask-image: var(--SVGDots); mask-size: 81.5rem 2rem; -webkit-mask-size: 1.5rem 2rem; content: "";}
	.bg_honeycomb::before { mask-image: var(--SVGHoneycomb); -webkit-mask-image: var(--SVGHoneycomb); mask-size: 48px 28px; -webkit-mask-size: 48px 28px; content: "";}
	.bg_rings::before { mask-image: var(--SVGRings); -webkit-mask-image: var(--SVGRings); mask-size: 10rem 10rem; -webkit-mask-size: 10rem 10rem; content: "";}
	.bg_matrix::before { mask-image: var(--SVGMatrix); -webkit-mask-image: var(--SVGMatrix); mask-size: 7.5rem 7.5rem; -webkit-mask-size: 7.5rem 7.5rem; content: "";}