*	{ font-family:arial,helvetica; box-sizing:border-box; -webkit-text-size-adjust:100%; }
body	{ font-size:1.0rem; margin:0px; overflow-Y:scroll; font-family:arial,helvetica; }

#top	{ position:sticky; z-Index:100; clear:both; top:0; width:100%; background:black; }
#toptbl { width:100%; background:white; max-width:1200px; }
.toptd	{ background:black; cursor:pointer; text-align:center; padding:15px 0 15px 0; border-right:1px solid white; }
.toptd:first-child { border-left:1px solid white; }
#top a	{ color:white; text-decoration:none; }
#topsel	{ background:black; width:auto; height:auto; font-size:.9rem; color:white; padding:0; border:0; }

#notice	{ position:fixed; z-Index:200; left:0; top:0px; width:100%; font-size:.8rem; padding:14px; text-align:center; }
.alert	{ background:#99FF99; color:#006600; }
.error	{ background:#FF0000; color:#FFFFFF; }

.main	{ padding:10px 15px 10px 15px; margin:auto auto; max-width:1200px; color:white; font-size:.8rem; }
#main	{ padding:20px 70px 150px 70px; margin:auto auto; max-width:1200px; }
@media (max-width: 500px) { #main { padding:20px 25px 150px 25px; margin:auto auto; max-width:1200px; } }

#bottom	  { clear:both; z-index:100; position:fixed; left:0; bottom:0; z-Index:100; display:grid; width:100%; overflow:hidden; text-align:center; font-size:.65rem; 
		grid-gap:3px; background:rgb(225,225,225); cursor:pointer; border-top:1px solid rgb(180,180,180); grid-template-columns: repeat(5, 1fr); }
.bottom	   { opacity:.5; padding:10px 0 20px 0; cursor:pointer; }
.icons	   { width:100%; min-width:40px; max-width:45px; aspect-ratio:1; border:0px; margin:0 0 2px 0; }
.bottom_on { opacity:1; }

#copy	{ font-size:70%; clear:both; width:100%; margin:25px 0 10px 0; color:#666; text-align:center; }

#club	{ float:right; width:60%; height:auto; border:1px solid black; }
#club img { width:100%; height:auto; border:0; }

h1, h1 a  { font-size:1.4rem; font-weight:normal; margin:0 0 10px 0; text-decoration:none; color: black; }
h2, h2 a  { font-size:1.3rem; font-weight:normal; margin:0 0 10px 0; }
h3, h3 a  { font-size:1.2rem; font-weight:normal; margin:0 0 10px 0; }
.h3,.h3 a { font-size:1.2rem; font-weight:normal; margin:0 0 10px 0; }

#qrhires { position:absolute; left:5%; top:130px; width:90%; height:200%; background:white; }

#post	{ display:none; position:absolute; z-Index:89999; left:0px; top:0px; width:100%; min-height:150%; background:#FFF; overflow-X:hidden; margin-bottom:100px; background:white; }

#index	{ position:absolute; left:50%; top:90px; margin:0 0 0 -125px; width:250px; color:#FFF; }

#update,#submit,.update,.submit	{ font-size:1.1rem; -webkit-appearance:none; text-align:center; color:white; cursor:pointer; background-Color:#3366FF; border:0; border-radius:7px; padding:8px 25px 8px 25px; }
#delete				{ font-size:1.1rem; -webkit-appearance:none; text-align:center; color:white; cursor:pointer; background-Color:#EE0000; border:0; border-radius:7px; padding:8px 25px 8px 25px; }

input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="tel"],
input[type="password"], select, .input { font-size:1.0rem; width:100%; height:35px; border-radius:7px; padding:7px; border:1px solid #999; outline:none; background:white; color:black; }

.freeL { float:left; width:110px; height:35px; line-height:35px; white-space:nowrap; clear:both; }
.freeR { float:left; height:35px; width:250px; margin-bottom:10px; }
@media (max-width: 500px) {
	.freeL { height:auto; line-height:1rem; clear:both; margin:0; }
	.freeR { height:auto; width:100%; clear:both; }
}

#login { z-index:3; float:right; margin:0px 0 20px 20px; width:190px; background:#FFFFCC; border:1px solid #CCCC99; border-radius:10px; padding:15px; }
.login { font-size:.9rem; padding-top:10px; } 
@media (max-width: 410px) { #login { width:100%; } }

#loading { display:none; width:100%; padding:5px; opacity:.50; text-align:center; }

#side	{ position:absolute; z-Index:9; left:-100%; top:0px; width:100%; min-height:100%; padding:100px 50px 50px 50px; background:#333; }
.side1	{ cursor:pointer; color:white; padding:0 0 3px 0; text-decoration:underline; }
.side2	{ cursor:pointer; padding:0 0 10px 0; color:#CCC; }

.menu1	{ float:left; clear:both; cursor:pointer; color:blue;  padding:0 0 3px 0; text-decoration:underline; }
.menu2	{ float:left; clear:both; cursor:pointer; color:black; padding:0 0 15px 0; }

#subs		{ margin-bottom:10px; }
.gtftitle	{ width:100%; padding:0; margin:15px 0 5px 0; }

#subtitle	{ width:100%; margin:-1px 0 0 0; padding:9px; cursor:pointer; border:1px solid #00CC00; border-radius:10px 10px 10px 10px; }
.subtitle	{ padding:9px; cursor:pointer; border:1px solid #00CC00; border-top:0px; display:none; margin:0 7px 0 7px; }
.subtitle:last-child { border-radius:0 0 10px 10px; }
#subtitle:hover	{ background:#EEFFEE; }
.subtitle:hover	{ background:#EEFFEE; }

.panelH3-1	{ color:black; cursor:pointer; }
.panelH3-1 span { color:black; cursor:pointer; }
.panelH3-2	{ color:black; cursor:pointer; }

.panel  { width:100%; padding:10px; margin:0 auto 2% auto; background:#EEE; border:1px solid #CCC; border-radius:10px; overflow:hidden; text-align:left; }
.panel1 { float:left;  width:49%; margin-bottom:2%; padding:10px; background:#EEE; border:1px solid #CCC; border-radius:10px; }
.panel2 { float:right; width:49%; margin-bottom:2%; padding:10px; background:#EEE; border:1px solid #CCC; border-radius:10px; }
@media (max-width: 565px) { .panel1, .panel2 { width:100%; margin:0 0 2% 0; } }

.setting_panel { width:100%; padding:10px; margin:0 0 10px auto; background:#EEE; border:1px solid #CCC; border-radius:10px; overflow:hidden; text-align:left; }

#verfiy		{ width:220px; background:#3366FF; border:1px solid blue; border-radius:10px; padding:10px; margin-top:3vw; cursor:pointer; }
#order_ver_tbl	{ font-size:1.2rem; width:100%; background:#3366FF; color:white; }
#order_ver_cost	{ font-size:1.8rem; font-weight:normal; color:white; padding:0 10px 0 10px 0; }

#notes	{ width:100%; max-width:1200px; text-align:left; }
.note	{ border-bottom:1px solid #CCC; padding:5px 0 5px 0; }
.note:last-child { border:0; }

.flag_cells { border:0; overflow:hidden; padding:0 5px 0 5px; }

.flags	{ width:15.66%; margin:0 1% 1% 0; float:left; border:1px solid #CCC; padding:3px; border-radius:5px; background:white; cursor:pointer; overflow:hidden; }
#f6	{ width:16.7%; margin:0 0 1% 0; }

@media (max-width: 730px) {
	.flags,#f6	{ width:33.33%; margin:0 0 1% 0; float:left; border:1px solid #CCC; padding:3px; border-radius:5px; cursor:pointer; overflow:hidden; }
	#f2,#f5		{ width:31.33%; margin:0 1% 1% 1%; }
}
@media (max-width: 319px) {
	#f1,#f3,#f5	{ width:49.5%; margin:0 .5% 1% 0; float:left; border:1px solid #CCC; padding:3px; border-radius:5px; cursor:pointer; overflow:hidden; }
	#f2,#f4,#f6	{ width:49.5%; margin:0 0 1% .5%; }
}


/* GRID STUFF */
:root {
	--fade1:	rgb(255,255,255);
	--fade2:	rgb(220,220,220);
	--border:	rgb(200,200,200);
	--blue:		rgb( 25,100,250);
	--rowbk:	rgb(245,245,245);
	--grback:	rgb(240,240,240);
	--col_color:	rgb(50,50,50);
	--col_order:	rgb(255,225,125);
	--txtbk:	rgb(255,255,230);
	--hover:	rgb(255,255,150);
}

/* Pagination */
#grid_page_tbl		{ border:1px solid #CCC; border-radius:5px; padding:1px; }
#grid_page_tbl	td	{ height:100%; padding:3px 5px 3px 5px; cursor:pointer; text-align:left; border:0px;  }
.grid_page		{ height:100%; padding:3px 5px 3px 5px; cursor:pointer; text-align:center; color:black; }
.grid_page_on		{ height:100%; padding:3px 5px 3px 5px; cursor:pointer; text-align:center; color:white; text-align:center; background:var(--blue); border-radius:5px; }
#grid_page_cell1 a	{ padding:0; text-decoration:none; color:blue; }
#grid_page_cell2	{ padding:0; }

#gcont	{ width:100%; gtf-min-width:470px; padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--rowbk); }
.grid	{
	width:100%;
	display: grid;
	overflow:hidden;
	text-align: left;
	background: var(--grback);
	grid-gap:1px;
	cursor:pointer;
	border:1px solid var(--border);
	margin-top:-1px;
}

.grid_cols {	white-space:nowrap; text-align:left; background:white; color:var(--col_color); overflow:hidden; gtf-text-overflow:ellipsis; padding:calc(4px + .05vw);
		background: var(--grback) ;
		background: -moz-linear-gradient(top,    var(--fade1) 0%, var(--fade2) 100%);
		background: -webkit-linear-gradient(top, var(--fade1) 0%, var(--fade2) 100%);
		background: linear-gradient(to bottom,   var(--fade1) 0%, var(--fade2) 100%); }

.grid_col_order { background: var(--col_order); }

.grid_search_cell	{ white-space:nowrap; overflow:hidden; padding:0; border:0; background:white;		}
.grid_search_txt	{ width:100%; background:var(--txtbk); border:0; outline:none;		padding:4px 0 4px 4px; }
.grid_cell		{ white-space:nowrap; text-align:left; color:#000; overflow:hidden;	padding:4px; }

.grid_row_User	{ display:contents; position:absolute; }
.grid_row_Admin	{ display:contents; position:absolute; }
.grid_row_Owner	{ display:contents; position:absolute; }
.grid_row_Owner	> div { background-color:rgb(255,255,152); }

.grid_row_User:nth-child(odd)  > div { background-color:rgb(255,255,255); }
.grid_row_User:nth-child(even) > div { background-color:rgb(255,255,255); }

.grid_row_Admin:nth-child(odd)  > div { background-color:rgb(225,255,225); }
.grid_row_Admin:nth-child(even) > div { background-color:rgb(225,255,225); }

.grid_row	{ display:contents; position:absolute; }
.grid_row_new	{ display:contents; position:absolute; }

.grid_row:nth-child(odd)  > div { background-color: #FFFFFF; }
.grid_row:nth-child(even) > div { background-color: var(--rowbk); }

.grid_row:hover		  > div { background-color: var(--hover); }

.grid_row_new:nth-child(odd)	> div { background-color: #FFFFFF; }
.grid_row_new:nth-child(even)	> div { background-color: var(--rowbk); }
.grid_row_new:hover		> div { background-color: var(--hover); }

.grid_delete_cell		{ text-align:center; color:red; background:#FFF; padding:2px 2px 0 0; }