: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(11px + .5vw);
	--fontsize:	'14px';
	--colssize:	calc( 9px + .2vw);
	--gridsize:	calc( 9px + .2vw);

	--navlite:	'#1188FF';
	--navdark:	'#0033CC';
}

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');

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

/* Background Image */
#back	{ position:fixed; z-Index:-1; left:0; top:0; right:0; bottom:0; background:blue; }

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

#error { position:fixed; left:0; top:0; width:100%; height:70px; padding:25px 0 0 0 ; background:#FF0000; color:#FFFFFF; font-weight:bold; text-align:center; }
#alert { position:fixed; left:0; top:0; width:100%; height:70px; padding:25px 0 0 0 ; background:#CCFFCC; color:#006600; font-weight:bold; text-align:center; }

/* Navigation */
#nav			{ position:fixed; z-index:5; top:0; left:0; width:100%; color:white; background-image:linear-gradient(#333,#000); }
#nav td			{ padding:1%; 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; }
#nav td:hover		{ background-image:linear-gradient(#666633, #444411); }
#nav a			{ font-size:calc(8px + 1vw); color:white; text-decoration:none; font-weight:bold; text-shadow: 1px 1px 1px #000; }

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

#copy	{ font-size:10px; color:white; width:260px; left:calc(50% - 130px); border:0px solid red; color:#666; text-align:center; }

/* Main Div */
#main	{ width:80%; height:auto; margin:70px auto auto auto; padding:25px 25px 15px 25px; background:#FAF1D9; opacity:.95; border-radius:7px;  }

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

/* Items */
.items		{ display:none; }
.ipanel		{ width:100%; height:100%; padding:15px; border:1px solid #CCC; border-radius:10px; background:#F5F5F5; overflow: hidden; }
.sqimg		{ width:19%; height:auto; margin:1% 1% 0 0; opacity:.7; border:1px solid #999; border-radius:5px; }
.sqimg:hover	{ opacity:1; cursor:pointer; }
.main_imgs	{ width:100%; height:auto; border:1px solid #999; border-radius:7px; cursor:pointer; }

/* Gallery */
#gallery	{ position:fixed; z-index:7; top:0; left:0; width:100%; height:100%; background:#333; }

/* Panels */
#panel, .panel, .pnl	{ 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:24%; 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:24%; 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:24%; 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:25%; 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; }


/* Content Manager Site Map */		
.tree ul { margin:0px 0px 0px -15px; list-style:none; line-height:18px; font-size:11px; }
.tree ul li { position:relative; color: }
.tree ul li:before { position:absolute; left:-15px; top:0px; content:''; display:block; border-left:1px solid #999; border-bottom:1px solid #999; width:10px; height:9px; }
.tree ul li:after { position:absolute; left:-15px; bottom:-7px; content:''; display:block; border-left:1px solid #999; height:100%; }
.tree ul li.root { margin:0px 0px 0px -20px; }
.tree ul li.root:before { display:none; }
.tree ul li.root:after { display:none; }
.tree ul li:last-child:after { display:none; }
.treeY { text-decoration:none; color:#000000; border:1px solid #FFF; }
.treeN { text-decoration:none; color:#666666; border:1px solid #FFF; }
.treeY:hover { border:1px solid #CCC; background-Color:#FFFFCC; }
.treeN:hover { border:1px solid #CCC; background-Color:#FFFFCC; }


/* Grid & Pagination */
#clear_search			{ color:blue; font-size:11px; }
#clear_search a			{ text-decoration:none; color:blue; }
#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; }
.add_record			{ padding:0 0 5px 10px; }
.add_record a			{ font-size:calc(8px + .5vw); text-decoration:none; color:#0033CC; }

#tbl            	{ background:#CCCCCC; }
#tbl tr         	{ background:#FFFFFF; }
#tbl tr:nth-child(odd)	{ background-color:#F5F5F5; }
#tbl tr:hover   	{ background:#DDEEFF; cursor:pointer; }
#tbl th         	{ font-size:13px; padding:6px 10px 6px 10px; background:#EEE; font-weight:normal; text-align:left; color:#333; }
#tbl td         	{ font-size:13px; }
.tb1cell        	{ font-size:13px; width:100%; height:15px; white-space:nowrap; text-overflow:ellipsis; }