: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(12px + .4vw);

	--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; font-size:var(--fontsize); }

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

/* Navigation */
#nav1	{ width:100%; border:0; margin:-5px 0 15px 0; } 
.nav2	{ display:inline-block; width:80%; padding:10px 15px 10px 15px; border:1px solid #CC0000; border-radius:10px; background:red; color:white; cursor:pointer; }
.nav3	{ color:white; text-decoration:none; font-weight:bold; font-size:calc(12px + .5vw); }

#nav		{ width:100%; height:50px; color:white; background-image:linear-gradient(#1188FF, #0033CC); }
#nav td		{ padding:10px; border-left:1px solid #FFF; border-right:1px solid #003366; cursor:pointer; }
#nav td:first-child { border-left:0px; }
#nav td:last-child { border-right:0px; }
#gnav td:hover	{ background-image:linear-gradient(#40B5FF,#2F64FC); }
#nav td:hover	{ background-image:linear-gradient(rgb(10,120,250), rgb(0,40,100)); }
#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 + .5vw); font-weight:normal; margin:5px 0 9px 0; }
.h1	{ font-size:calc(20px + .5vw); font-weight:normal; margin:5px 0 9px 0; text-decoration:none; color:black; }
h2	{ font-size:calc(18px + .5vw); font-weight:normal; margin:5px 0 5px 0; }
h3	{ font-size:calc(16px + .5vw); font-weight:normal; margin:5px 0 5px 0; }

#copy	{ position:absolute; left:0px; font-size:10px; color:white; width:100%; color:#666; text-align:center; border-top:3px solid red; margin-top:10px; padding-top:15px; }

/* 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='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='date']	{ width:100%; height:32px; padding: 5px; border:1px solid var(--border); border-radius:7px; }
input[type='datetime-local']	{ 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:8px; 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:8px; 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:8px; text-align:center; cursor:pointer; background-image:linear-gradient(#66CC66, #339933); border:1px solid #339933; }


/* Panels */
#panel, .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; font-size:var(--fontsize); }
#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: 800px) { #panel1-2,#panel2-2 { width:100%; margin:0 0 10px 0; } }

#panel1-3		{ float:left; min-width:250px; width:32%; margin:0 1% 10px 0; padding:10px; background:var(--grback); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
#panel2-3		{ float:left; min-width:250px; width:32%; margin:0 1% 10px 0; padding:10px; background:var(--grback); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
#panel3-3		{ float:left; min-width:250px; width:34%; 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-3,#panel2-3,#panel3-3 { width:100%; margin:0 0 10px 0; } }


#panel1-4		{ float:left; min-width:200px; width:20%; margin:0 1% 10px 0; padding:10px; background:var(--grback); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
#panel2-4		{ float:left; min-width:200px; width:20%; margin:0 1% 10px 0; padding:10px; background:var(--grback); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
#panel3-4		{ float:left; min-width:200px; width:20%; margin:0 1% 10px 0; padding:10px; background:var(--grback); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
#panel4-4		{ float:left; min-width:200px; width:37%; margin:0  0 10px 0; padding:10px; background:var(--grback); border:1px solid var(--border); border-radius:10px; overflow:hidden; }

@media (max-width: 1250px) {
	#panel1-4, #panel3-4 { width:49%; margin:0 1% 10px 0; }
	#panel2-4, #panel4-4 { width:50%; margin:0  0 10px 0; }
}

@media (max-width: 900px) { #panel1-4, #panel2-4, #panel3-4, #panel4-4 { width:100%; margin:0 0 10px 0; } }


/* Grid & Pagination */
#clear { text-decoration:none; cursor:pointer; color:blue; font-size:calc(8px + .4vw); }

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

./overflow	{ width:100%; height:30px; overflow:hidden; }

#dlcsv	{ float:right; text-align:right; padding:5px; cursor:pointer; color:blue; font-size:calc(8px + .4vw); }
#dlcsv a { cursor:pointer; color:blue; font-size:calc(8px + .4vw); }
#dlcsv img { width:12px; height:auto; margin-bottom:3px; }