/* Times Table */
div#container main.table {background-color:white; max-width:100%; overflow:auto; padding:.625rem; border-radius:var(--cornersize); box-shadow:var(--boxshadow);}
div#container main.table {position:relative; --blacksheet:#0006;}
div#container main.table div.msg {display:none; padding:.25rem .5rem;}
div#container main.table div.msg div.content {display:flex; flex-direction:column; align-items:center; gap:1em;}
div#container main.table div.msg div.content div.frame {display:flex; flex-direction:row; align-items:center; gap:1em;}
div#container main.table div.msg div.content div.frame svg.icon {font-size:2em;}
div#container main.table div.msg div.content span.caption {font-size:.875rem;}
/* Times Table (w/ open modal display) */
/* div#container main.table::after {background-color:var(--blacksheet); content:''; cursor:pointer;}
div#container main.table::after {position:fixed; inset:0; z-index:10;}
div#container main.table::after {visibility:hidden; opacity:0; transition:0.2s ease;}
div#container main.table.display::after {visibility:visible; opacity:1;} */


/* Times Table Grid */
div#container main.table ul.tablegrid {list-style:none; padding:0; margin:0;}
div#container main.table ul.tablegrid {display:grid; gap:.25rem; width:fit-content; /* min-width:max-content; */}
div#container main.table ul.tablegrid {--currenttablesize:18; --framedgridsize:calc( var(--currenttablesize) + 1 );}
div#container main.table ul.tablegrid {grid-template-columns:repeat( var(--gridsize) , 1fr );}
div#container main.table ul.tablegrid {--gridsize:var(--currenttablesize);}
/* Times Table Grid Cell */
/* div#container main.table ul.tablegrid li.gridcell {} */
div#container main.table ul.tablegrid li.gridcell.gone {display:none;}
/* div#container main.table ul.tablegrid li.gridcell.table {} */
div#container main.table ul.tablegrid li.gridcell.frame {display:none;}


/* Times Table Grid (framed) */
/* div#container main.table.fr {} */
div#container main.table.fr ul.tablegrid {--gridsize:var(--framedgridsize);}
/* Times Table Grid (framed) Cell */
/* div#container main.table.fr ul.tablegrid li.gridcell {} */
/* div#container main.table.fr ul.tablegrid li.gridcell.table {} */
div#container main.table.fr ul.tablegrid li.gridcell.frame {display:block;}
div#container main.table.fr ul.tablegrid li.gridcell.frame.gone {display:none;}


/* Times Table Grid Cell Box */
div#container main.table ul.tablegrid li.gridcell.frame div.box {background-color:var(--yellow);}
div#container main.table ul.tablegrid li.gridcell.frame div.box {background-color:#345; color:white;}
div#container main.table ul.tablegrid li.gridcell div.box {background-color:var(--white); overflow:auto; border-radius:.375rem; border:1px solid var(--offwhite);}
div#container main.table ul.tablegrid li.gridcell div.box {position:relative; cursor:pointer; transition:scale 0.2s ease;}
div#container main.table ul.tablegrid li.gridcell div.box {--cellsize:3.75rem; height:var(--cellsize); width:var(--cellsize);}
div#container main.table ul.tablegrid li.gridcell div.box > * {position:absolute; font-size:1.125rem;}
/* Times Table Grid Cell Label */
div#container main.table ul.tablegrid li.gridcell div.box label.celllabel {top:0; right:0;}
div#container main.table ul.tablegrid li.gridcell div.box label.celllabel {pointer-events:none; user-select:none; z-index:30;}
div#container main.table ul.tablegrid li.gridcell div.box label.celllabel {font-size:.5rem; opacity:.375; padding:.25em .5em;}
/* Times Table Grid Cell Input */
div#container main.table ul.tablegrid li.gridcell div.box input.cellinput {background-color:transparent; text-align:center; border:0 none; outline:none;}
/* div#container main.table ul.tablegrid li.gridcell div.box input.cellinput {display:none; visibility:hidden;} */
div#container main.table ul.tablegrid li.gridcell div.box input.cellinput {opacity:0; pointer-events:none; z-index:20;}
div#container main.table ul.tablegrid li.gridcell div.box input.cellinput {inset:0; height:100%; width:100%;}
/* Times Table Grid Cell Display */
div#container main.table ul.tablegrid li.gridcell div.box span.celldisplay {inset:0; height:100%; width:100%;}
div#container main.table ul.tablegrid li.gridcell div.box span.celldisplay {display:flex; align-items:center; justify-content:center; z-index:10;}
div#container main.table ul.tablegrid li.gridcell div.box span.celldisplay {cursor:pointer;}
/* Times Table Grid Cell Clear Button */
div#container main.table ul.tablegrid li.gridcell div.box div.clearbtn {display:none;}
div#container main.table ul.tablegrid li.gridcell div.box div.clearbtn {bottom:0; left:50%; transform:translateX(-50%); z-index:30;}
div#container main.table ul.tablegrid li.gridcell div.box div.clearbtn {font-size:.75rem; opacity:.25; cursor:pointer; user-select:none; padding:0 .375em; border-radius:.25rem;}
/* div#container main.table ul.tablegrid li.gridcell div.box div.clearbtn {background-color:black; color:white; margin:.25em;} */
div#container main.table ul.tablegrid li.gridcell div.box div.clearbtn svg.icon {display:block;}
div#container main.table ul.tablegrid li.gridcell div.box div.clearbtn span.caption {display:none;}
div#container main.table ul.tablegrid li.gridcell div.box div.clearbtn span.caption {position:absolute; bottom:100%; left:50%; transform:translateX(-50%);}
div#container main.table ul.tablegrid li.gridcell div.box div.clearbtn span.caption {background-color:#333; color:white;}

/* Times Table Grid Cell Box (null answer) */
div#container main.table ul.tablegrid li.gridcell div.box.empty {background-color:var(--whiteblue); border-color:var(--offwhite);}
/* Times Table Grid Cell Box (wrong answer) */
div#container main.table ul.tablegrid li.gridcell div.box.no {background-color:var(--whitered); border-color:red; border-color:var(--lightred);}
div#container main.table ul.tablegrid li.gridcell div.box.no {animation:noshake .375s ease;}
/* div#container main.table ul.tablegrid li.gridcell div.box.no input.cellinput {} */
/* div#container main.table ul.tablegrid li.gridcell div.box.no span.celldisplay {} */
/* Times Table Grid Cell Box (right answer) */
div#container main.table ul.tablegrid li.gridcell div.box.yes {background-color:var(--whitegreen); cursor:initial; user-select:none; border-color:green; border-color:var(--lightgreen);}
div#container main.table ul.tablegrid li.gridcell div.box.yes {animation:yesglow .875s ease; --glowcolor:#78dc78e6;}
/* div#container main.table ul.tablegrid li.gridcell div.box.yes input.cellinput {} */
/* div#container main.table ul.tablegrid li.gridcell div.box.yes span.celldisplay {} */


/* Times Table Grid Cell (open) */
/* div#container main.table ul.tablegrid li.gridcell.open {} */
/* Times Table Grid Cell Box (open) */
/* div#container main.table ul.tablegrid li.gridcell.open div.box {position:absolute; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:90;} */
/* div#container main.table ul.tablegrid li.gridcell.open div.box {background-color:var(--whiteblue); border-color:var(--offwhite);} */
/* div#container main.table ul.tablegrid li.gridcell.open div.box {scale:2.5; transition:none;} */
/* Times Table Grid Cell Label (open) */
/* div#container main.table ul.tablegrid li.gridcell.open div.box label.celllabel {} */
/* Times Table Grid Cell Input */
/* div#container main.table ul.tablegrid li.gridcell.open div.box input.cellinput {display:block; visibility:visible;} */
div#container main.table ul.tablegrid li.gridcell.open div.box input.cellinput {opacity:1; pointer-events:inherit;}
/* Times Table Grid Cell Display */
div#container main.table ul.tablegrid li.gridcell.open div.box span.celldisplay {/* display:none; */ visibility:hidden;}
/* Times Table Grid Cell Clear Button */
div#container main.table ul.tablegrid li.gridcell.open div.box div.clearbtn {display:block;}

/* Times Table Grid Cell Box (open) */
/* div#container main.table ul.tablegrid li.gridcell div.box:focus, */
/* div#container main.table ul.tablegrid li.gridcell div.box:focus-within, */
/* div#container main.table ul.tablegrid li.gridcell.open div.box {background-color:gold;} */
/* div#container main.table ul.tablegrid li.gridcell div.box:focus, */
/* div#container main.table ul.tablegrid li.gridcell div.box:focus-within, */
/* div#container main.table ul.tablegrid li.gridcell.open div.box {position:absolute; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale( var(--opencellscale) ); z-index:40;} */



/* Times Table (new) */
/* div#container main.table.new {} */
div#container main.table.new div.msg {display:block;}

/* Times Table Grid (new) */
div#container main.table.new ul.tablegrid {display:none;}
/* Times Table Grid Cell (new) */
/* div#container main.table.new ul.tablegrid li.gridcell {} */





@keyframes noshake {
	0% {transform:translateX(0);}
	20% {transform:translateX(-.125rem);}
	40% {transform:translateX(.125rem);}
	60% {transform:translateX(-.125rem);}
	80% {transform:translateX(.125rem);}
	100% {transform:translateX(0);}
}

@keyframes yesglow {
	0% {box-shadow:0 0 0 transparent;}
	50% {box-shadow:0 0 .875rem var(--glowcolor);}
	100% {box-shadow:0 0 0 transparent;}
}





/* Tablet Screen */
@media screen and (max-width:64rem) {

	/* Times Table */
	/* div#container main.table {} */
	/* div#container main.table ul.tablegrid {} */
	/* Times Table Grid Cell */
	/* div#container main.table ul.tablegrid li.gridcell {} */
	/* Times Table Grid Cell Box */
	/* div#container main.table ul.tablegrid li.gridcell div.box {} */
}

/* Big Smartphone Screen */
@media screen and (max-width:48rem) {

	/* Times Table */
	/* div#container main.table {} */
	/* div#container main.table ul.tablegrid {} */
	/* Times Table Grid Cell */
	/* div#container main.table ul.tablegrid li.gridcell {} */
	/* Times Table Grid Cell Box */
	div#container main.table ul.tablegrid li.gridcell div.box {--cellsize:3.125rem; font-size:.875rem;}
}

/* Small Smartphone Screen */
@media screen and (max-width:32rem) {

	/* Times Table */
	/* div#container main.table {} */
	/* div#container main.table ul.tablegrid {} */
	/* Times Table Grid Cell */
	/* div#container main.table ul.tablegrid li.gridcell {} */
	/* Times Table Grid Cell Box */
	/* div#container main.table ul.tablegrid li.gridcell div.box {} */
}