*		{ box-sizing:border-box; }
html		{ font-family:sans-serif; font-size:calc(8px + .3vw); }
body		{ overflow-Y:scroll; font-family:sans-serif; font-size:calc(8px + .3vw); margin:10px 20px 50px 20px; }

#clear		{ position:absolute; width:120px; top:36px; margin-left:calc(50% - 60px); cursor:pointer;
		  font-size:12px; font-family:sans-serif; text-align:center; color:blue; }

#count		{ position:absolute; width:120px; top:36px; right:20px; text-align:right;
		  font-size:12px; font-family:sans-serif; }

h1, h1 a 	{ font-size:18px; color:blue; text-decoration:none; margin-bottom:5px; }

#grid		{ width:100%; cursor:pointer; background:#EEE; border-left:1px solid #CCC; }
#grid .cols	{ display:grid; }
#grid .search	{ display:grid; }

#grid .col	{ padding:4px; font-size:calc(7px + .3vw); color:#333; border:1px solid #CCC; border-left:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#grid .col:hover{ color:black; background:rgb(250,240,200); }
#grid .col_on	{ padding:4px; background:rgb(255,220,120); font-size:calc(7px + .3vw); color:#333; border:1px solid #CCC; border-left:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#grid .cols img { width:calc(5px + .3vw); height:auto; margin:-2px 3px 0 3px; }
#grid .arrow	{ display:inline-block; }

#grid .search > div	{ padding:0px; font-size:calc(7px + .3vw); color:#333; border:1px solid #CCC; border-left:0; border-top:0px; background:#FFFFCC; overflow:hidden; }
#grid .search input	{ padding:4px; font-size:calc(7px + .3vw); border:0; background:#FFFFCC; outline:none; }

#grid #results	{ display:contents; }

#grid .rows	{ display:grid; }
#grid .rows > div { padding:4px; font-size:calc(7px + .3vw); color:#333; border:1px solid #CCC; border-left:0; border-top:0; white-space:nowrap; overflow:hidden; }
#grid .rows:nth-child(odd)  > div { background: #F5F5F5; }
#grid .rows:nth-child(even) > div { background: #FFFFFF; }
#grid .rows:hover	    > div { background: #EEFFEE; }