html,body {height:100%; box-sizing:border-box; margin:0; position:relative; background-color:#1e90ff44; overflow-x:hidden;}

div#container {/*text-align:center;*/ max-width:800px; margin:0 auto; height:100%;}
div#container div#numLine {position:relative; border:.5px solid #0008; width:100%; box-sizing:border-box; margin:20vh 0;}
div#container div#numLine div.item {position:absolute; top:50%; transform:translate(-50%,-50%);}
div#container div#numLine div.item {height:1rem; width:1rem; height:.75rem; width:.75rem;}
div#container div#numLine div.item {border-radius:.25rem; box-sizing:border-box; background-color:#FFF8; color:#0000; font-size:.75rem; z-index:10; transition:color 1s;}
div#container div#numLine div.item:hover {color:#000;}
div#container div#numLine div.item.centroid {border:.2rem solid #000;}
div#container div#numLine div.marker {position:absolute; top:50%; transform:translate(-50%,-50%);}
div#container div#numLine div.marker {height:2rem; width:0; background-color:#000; border:.1px solid #0008; font-size:.65rem; z-index:1;}
div#container div#numLine div.marker div.x {position:absolute; top:calc(100% + .25rem); left:50%; transform:translateX(-50%);}

div#container table {width:100%;}
div#container td {padding:.25rem; /*border:1px dotted #000;*/}
div#container td.name {padding-right:.5rem;}
div#container td input,
div#container td button {padding:.25rem .5rem; border-radius:.5rem; font-size:1rem; opacity:.5;}
div#container td input {width:3rem;}
div#container td button {width:100%;}
div#container td button.primary {opacity:1;}
div#container td.large {height:100%; /*display:none;*/}
div#container td.large button {width:100%; height:100%;}


div#legend {box-sizing:border-box; background-color:#fff4; border-radius:.5rem; font-size:.65rem; margin:2rem 0 1rem; transition:.1s; overflow:hidden;}
div#legend {border:1px solid #0008; box-shadow:0 1px 4px #0004;}
div#legend:hover {background-color:#fff8;}
div#legend div.in {height:100%; padding:1rem; overflow-y:auto;}
div#legend div.in:empty {display:none;}
div#legend div.in table {width:100%;}
div#legend div.in table tr.var {display:flex;}
div#legend div.in table tr.var.seed {font-weight:bold;}
div#legend div.in table tr.var td {display:inline-block; padding:0 .5rem}
div#legend div.in table tr.var td.name {flex:0 0 auto;}
div#legend div.in table tr.var td.value {flex:1 0 auto; text-align:right;}

@media screen and (max-width:767px) {}
@media screen and (min-width:768px){
	div#legend {position:fixed; bottom:.5rem; right:1.5rem; height:40vh;}
}