:root {
	--border:	rgb(200,200,200);
	--grback:	rgb(240,240,240);

	--fade1:	rgb(255,255,255);
	--fade2:	rgb(220,220,220);

	--col_color:	rgb(50,50,50);
	--col_order:	rgb(255,225,125);

	--txtbk:	rgb(255,255,230);

	--rowbk:	rgb(245,245,245);
	--hover:	rgb(235,255,235);

	--blue:		rgb( 25,100,250);

	--fontsize:	calc(15px);

	--colssize:	calc( 9px + .2vw);
	--gridsize:	calc( 9px + .2vw);
}

*	{ box-sizing: border-box; font-family:arial,helvetica,sans-serif; }
body 	{ margin:0px; overflow-Y:scroll; background:white; }

/* Loading Div */
.loading { position:absolute; left:50%; top:50%; margin:-50px auto auto -50px; width:100px; height:100px; opacity:.50; }

/* Navigation */
#nav		{ width:100%; height:50px; color:white; background-image:linear-gradient(#1188FF, #0033CC); }
#nav td		{ padding:10px; border-left:1px solid #003366; border-right:1px solid white; cursor:pointer; }
#nav td:hov	{ padding:10px; border-left:1px solid #003366; border-right:1px solid white; cursor:pointer; background-image:linear-gradient(#0033CC, #1188FF); }
#nav a		{ font-size:18px; color:white; text-decoration:none; font-weight:bold; text-shadow: 1px 1px 1px #000; }

/* Headings */
h1	{ font-size:calc(20px + .2vw); font-weight:normal; margin:5px 0 5px 0; }
h1 a	{ font-size:calc(20px + .2vw); font-weight:normal; margin:5px 0 5px 0; text-decoration:none; color:black; }
.h1	{ font-size:calc(20px + .2vw); font-weight:normal; margin:5px 0 5px 0; text-decoration:none; color:black; }
h2	{ font-size:calc(18px + .2vw); font-weight:normal; margin:5px 0 5px 0; }
h3	{ font-size:calc(16px + .2vw); font-weight:normal; margin:5px 0 5px 0; }

#copy,#copy * { font-size:11px; color:white; width:100%; padding:0px; text-align:center; margin:10px 0 100px 0; color:#666; }

.Dadd	{ display:inline-block; position:absolute; block; margin:0px auto auto 15px; }
.Aadd	{ font-size:13px; color: blue; text-decoration:none; }
.adds	{ display:inline-block; position:absolute; padding:7px 0 0 7px; font-size:13px; text-decoration:none; }

/* Main Div */
#main	{ width:100%; margin:auto auto; padding:15px 50px 100px 50px; }

textarea		{ width:100%; height:32px; padding: 5px; border:1px solid var(--border); border-radius:7px; }
input[type='text']	{ width:100%; height:32px; padding: 5px; border:1px solid var(--border); border-radius:7px; }
input[type='date']	{ width:100%; height:32px; padding: 5px; border:1px solid var(--border); border-radius:7px; }
input[type='file']	{ width:100%; height:32px; padding: 5px; border:1px solid var(--border); border-radius:7px; }
select			{ width:100%; height:32px; padding: 5px; border:1px solid var(--border); border-radius:7px; }
input[type='password']	{ width:100%; height:32px; padding: 5px; border:1px solid var(--border); border-radius:7px; }
input[type='submit']	{ width:100%; border-radius:7px; color:#FFFFFF; font-size:14px; font-weight:bold; padding:10px; text-align:center; cursor:pointer; background-image:linear-gradient(#3399FF, #0033CC); border:1px solid #0033CC; }
#delete			{ width:100%; border-radius:7px; color:#FFFFFF; font-size:14px; font-weight:bold; padding:10px; text-align:center; cursor:pointer; background-image:linear-gradient(#FF0000, #CC0000); border:1px solid #CC0000; }
#filtermsg		{ width:100%; border-radius:7px; color:#FFFFFF; font-size:14px; font-weight:bold; padding:10px; text-align:center; cursor:pointer; background-image:linear-gradient(#66CC66, #339933); border:1px solid #339933; }


/* Panels */
.panel	  		{ float:left; width:100%; margin:0 0 15px 0; padding:10px; background:var(--grback); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
#panel1-2		{ float:left; min-width:250px; width:49.5%; margin:0 1% 10px 0; padding:10px; background:var(--grback); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
#panel2-2		{ float:left; min-width:250px; width:49.5%; margin:0 0% 10px 0; padding:10px; background:var(--grback); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
@media (max-width: 900px) { #panel1-2,#panel2-2 { width:100%; margin:0 0 10px 0; } }


/* Grid & Pagination */
#clear_search, #clear_search a	{ color:blue; font-size:12px; text-decoration:none; }

#pagination			{ font-size:calc(8px + .4vw); white-space:nowrap; background:white; }
.grid_pages			{ font-size:calc(8px + .4vw); display:inline-block; heigth:100%; border:1px solid var(--border); background:white ; text-align:center; }
.grid_page			{ font-size:calc(8px + .4vw); display:inline-block; heigth:100%; padding:2px 4px 2px 4px; cursor:pointer; text-align:center; }
.grid_page_on			{ font-size:calc(8px + .4vw); display:inline-block; heigth:100%; padding:2px 4px 2px 4px; cursor:pointer; color:white; text-align:center; background:var(--blue); border:1px solid white; }
@media (min-width:1000px)	{ #pagination, .grid_pages, .grid_page, .grid_page_on { font-size:12px; } }

/* Grid Stuff */
#gcont	{ width:100%; 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; text-overflow:ellipsis; padding:calc(4px + .05vw); font-size:var(--colssize);
		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;			font-size:var(--gridsize); }
.grid_search_txt		{ width:100%; background:var(--txtbk); border:0; outline:none; padding:calc(3px + .05vw);	font-size:var(--gridsize); }
.grid_cell			{ white-space:nowrap; text-align:left; color:#000; overflow:hidden; padding:calc(4px + .05vw);	font-size:var(--gridsize); }

.grid_row			{ display:contents; position:absolute; }
.grid_row_new			{ display:contents; position:absolute; font-weight:bold; }

.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; }