:root {
	--pgback:	rgb(230,230,230);

	--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);

	--ltred:	rgb(240,128,128);
	--red:		rgb(245,  0,  0);
	--dkred:	rgb(112,  0,  0);
	--dkgrn:	rgb(  0,102,  0);
	--dkgry:	rgb(100,100,100);

	--blue:		rgb( 25,100,250);
	--ltblue:	rgb(150,225,250);
	--dkblue:	rgb(  0,  0,102);

	--fontsize:	calc(11px + .2vw);
	--colssize:	calc( 8px + .2vw);
	--gridsize:	calc( 8px + .2vw);
}

*       { box-sizing:border-box; -webkit-text-size-adjust:100%; }
body	{ font-family:verdana,arial,helvetica; font-size:11px; color:333333; margin:0px; background-Color:#EEEEEE; overflow-y:scroll; }

@media (min-width: 1200px) { *,div,table,th,td,input,a { font-size:13px; } }

#alert	{ position:fixed; top:0px; left:0px; z-Index:10; width:100%; text-align:center; font-family: arial,helvetica; font-size:16px; font-weight:bold; color:#FFFFFF; background-Color:rgb(0,170,0); padding:12px; }
#popup	{ position:absolute; z-Index:20; left:0; top:0; width:340px; height:170px; margin-left:calc(50% - 170px); margin-top:200px; background-Color:rgb(200,255,200); padding:20px; box-sizing:border-box; border:1px solid rgb(100,155,100); border-radius:7px; }

/* Login Page */
#login1	{ position:fixed; left:0px; top:0px; width:100%; height:100%; background-Color:#003377; }
#login2	{ position:absolute; left:50%; top:50%; margin:-150px 0px 0px -100px; width:210px; }
#user	{ width:180px; padding-left:38px; height:39px; background-Color:rgb(255,255,255); border:1px solid rgb(190,190,190); background-Image:url('../pics/user.png'); background-repeat:no-repeat; font-family:arial,helvetica; font-size:18px; color:#999999; }
#pass	{ width:180px; padding-left:38px; height:39px; background-Color:rgb(255,255,255); border:1px solid rgb(190,190,190); background-Image:url('../pics/pass.png'); background-repeat:no-repeat; font-family:arial,helvetica; font-size:18px; color:#999999; }

/* Client Edit Page */
#cls	{ display:table; width:98%; margin-bottom:10px; }
#cl1	{ display:table-cell; width:50%; padding-right:20px; }
#cl2	{ display:table-cell; width:50%; }

.td1	{ width:80px; }
.td2	{ width:calc(100% - 80px); }

@media only screen and (max-width:560px) {
	#cls,#cl1,#cl2 { display:block; }
	#cl1,#cl2 { width:100%; }
}

input[type='text'] { width:100%; height:24px; padding:2px 4px 2px 4px; border:1px solid #CCCCCC; border-radius:4px; }

#select	{ width:100%; height:24px; border:1px solid #CCCCCC; border-radius:4px; background-Color:#FFFFFF; text-align:center; }
select	{ width:99%; height:24px; border:1px solid #CCCCC; border-radius:4px; }
.select { width:99%; height:24px; border:0; --webkit-appearance:none; }

#services { width:98%; margin-bottom:10px; overflow:hidden; }
#services .cell { float:left; width:98%; text-overflow:ellipsis; overflow:hidden; padding:2px 0px 2px 0px; }
#services input[type='text'] { width:100%; height:22px; border:0px; }

#notes	{ width:98%; margin-bottom:10px; overflow:hidden; }

.cell-bid	{ width: 1%; }
.cell-date	{ width: 1%; white-space:nowrap; }
.cell-who	{ width: 1%; text-align:center; }
.cell-what	{ width: 1%; }
.cell-item	{ width:93%; }
.cell-cat	{ width: 1%; }
.cell-amount	{ width: 1%; text-align:right; }
.cell-balance	{ width: 1%; text-align:right; }

[class*="cell-"] { display:table-cell; vertical-align:top; }

/* Billing Page */
#bill .row	{ display:inline-block; height:25px; background:#FFFFFF; margin-top:-3px; border-left:1px solid #CCCCCC; }
#bill .bid	{ float:left; width: 60px; height:25px; overflow:hidden; border:1px solid #CCCCCC; border-left:0px; margin:0; padding:4px; white-space:nowrap; clear:both; } 
#bill .date	{ float:left; width: 80px; height:25px; overflow:hidden; border:1px solid #CCCCCC; border-left:0px; margin:0; padding:4px; white-space:nowrap; }
#bill .who	{ float:left; width: 70px; height:25px; overflow:hidden; border:1px solid #CCCCCC; border-left:0px; margin:0; padding:4px; white-space:nowrap; }
#bill .what	{ float:left; width: 70px; height:25px; overflow:hidden; border:1px solid #CCCCCC; border-left:0px; margin:0; padding:4px; white-space:nowrap; }
#bill .item	{ float:left; width:800px; height:25px; overflow:hidden; border:1px solid #CCCCCC; border-left:0px; margin:0; padding:4px; white-space:nowrap; }
#bill .cat	{ float:left; width:100px; height:25px; overflow:hidden; border:1px solid #CCCCCC; border-left:0px; margin:0; padding:4px; white-space:nowrap; text-align:center; }
#bill .amount	{ float:left; width:100px; height:25px; overflow:hidden; border:1px solid #CCCCCC; border-left:0px; margin:0; padding:4px; white-space:nowrap; text-align:right; }
#bill .balance	{ float:left; width:100px; height:25px; overflow:hidden; border:1px solid #CCCCCC; border-left:0px; margin:0; padding:4px; white-space:nowrap; text-align:right; }


*	{ font-family:arial,helvetica,sans-serif; font-size:var(--fontsize); color:#000000; }
#main	{ width:100%; height:auto; padding:15px 50px 50px 50px; }

/* General Stuff */
h1		{ font-family:arial,helvetica; font-size:calc(18px + .3vw); color:black; font-weight:normal; margin:4px 0 9px 0; text-decoration:none; }
h1 > a		{ font-family:arial,helvetica; font-size:calc(18px + .3vw); color:black; font-weight:normal; margin:4px 0 9px 0; text-decoration:none; }
.h1		{ font-family:arial,helvetica; font-size:calc(18px + .3vw); color:black; font-weight:normal; margin:4px 0 9px 0; cursor:pointer; text-decoration:none; }

h2		{ font-family:arial,helvetica; font-size:calc(16px + .3vw); color:black; font-weight:normal; margin:4px 0 9px 0; text-decoration:none; }
h2 > a		{ font-family:arial,helvetica; font-size:calc(16px + .3vw); color:black; font-weight:normal; margin:4px 0 9px 0; text-decoration:none; }
.h2		{ font-family:arial,helvetica; font-size:calc(16px + .3vw); color:black; font-weight:normal; margin:4px 0 9px 0; cursor:pointer; text-decoration:none; }

h3		{ font-family:arial,helvetica; font-size:calc(14px + .3vw); color:black; font-weight:normal; margin:4px 0 9px 0; text-decoration:none; }
h3 > a		{ font-family:arial,helvetica; font-size:calc(14px + .3vw); color:black; font-weight:normal; margin:4px 0 9px 0; text-decoration:none; }
.h3		{ font-family:arial,helvetica; font-size:calc(14px + .3vw); color:black; font-weight:normal; margin:4px 0 9px 0; cursor:pointer; text-decoration:none; }

pre		{ font-family:courier; font-size:13px; }

textarea		{ width:100%;  height:30px; padding: 5px; border:1px solid var(--border); border-radius:7px; }
input[type='text']	{ width:100%;  height:30px; padding: 5px; border:1px solid var(--border); border-radius:7px; }
input[type='date']	{ 	       height:30px; padding: 5px; border:1px solid var(--border); border-radius:7px; }
input[type='file']	{ width:100%;  height:30px; padding: 5px; border:1px solid var(--border); border-radius:7px; }
select			{ width:100%;  height:30px; padding: 5px; border:1px solid var(--border); border-radius:7px; }
input[type='password']	{ width:100%;  height:30px; padding: 5px; border:1px solid var(--border); border-radius:7px; }

#update,#submit,.update,.submit { width:145px; text-align:center; padding:11px; color:rgb(255,255,255); font-weight:bold; cursor:pointer; margin:0 3px 3px 0;
				  background-Color:#3366CC; border:0; border-radius:7px; border:1px solid white; }

#delete, .delete		{ width:145px; text-align:center; padding:8px; color:rgb(255,255,255); font-weight:bold; cursor:pointer; margin:0 3px 3px 0;
				  background-Color:#CC0000; border:0; border-radius:7px; }

#err404		{ position:absolute; left:50%; top:50px; width:300px; margin:0 0 0 -150px; text-align:center; font-size:18px; color:white;
		  text-shadow: 1px 1px 4px #000, -1px -1px 4px #000, -1px 1px 4px #000, 1px -1px 4px #000; } 

/* 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; }
.notes	{ 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: 800px) { #panel1-2,#panel2-2 { width:100%; margin:0 0 10px 0; } }

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

#panel1-4 { float:left; min-width:200px; width:28%; 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:27%; 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:18%; 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:24%; margin:0  0 10px 0; padding:10px; background:var(--grback); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
@media (max-width: 1310px) {	#panel1-4, #panel3-4 { width: 49.5%; margin:0 1% 10px 0; }
				#panel2-4, #panel4-4 { width: 49.5%; margin:0 0% 10px 0; } }
@media (max-width: 900px) { #panel1-4, #panel2-4, #panel3-4, #panel4-4 { width:100%; margin:0 0 10px 0;  } }

.cols1-2	{ float:left; width:59%; margin:0 2% 2% 0; border-right:1px solid #CCC; padding-right:10px; }
.cols2-2	{ float:left; width:39%; margin:0  0  0 0; padding-left:10px; }
@media (max-width: 700px) {
	.cols1-2 { width:100%; border:0px; padding:0; }
	.cols2-2 { width:100%; border:0px; padding:2% 0 4% 0; margin-bottom:2%; border-top:1px solid #CCC; border-bottom:1px solid #CCC; }
	}
	
#delimg  { position:relative; top:20px; right:10px; float:right; border:1px solid red; padding:1px 6px 1px 5px; color:red; cursor:pointer; background:white; text-align:center; }


/* Content Manager Site Map */		
.tree ul { font-size:11px; margin:0px 0px 0px -15px; list-style:none; line-height:18px; }
.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; font-size:calc(10px + .2vw); }
.treeN { text-decoration:none; color:#666666; border:1px solid #FFF; font-size:calc(10px + .2vw); }
.treeY:hover { border:1px solid #CCC; background-Color:#FFFFCC; }
.treeN:hover { border:1px solid #CCC; background-Color:#FFFFCC; }

/* Grid & Pagination */
#clear_search			{ position:absolute; left:45%; top:65px; color:blue; }
#clear_search a			{ text-decoration:none; color:blue; }
@media (min-width:1000px)	{ #clear_search a { font-size:12px; } }

#pagination		{ position:absolute; right:70px; top:57px; font-size:calc(8px + .4vw); white-space:nowrap; padding:0; margin:7px 0 0 0; background:white; float:right; display:table-cell; vertical-align:center;  }
.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: white; }
.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; }

#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:calc(8px + .2vw); padding:6px 10px 6px 10px; background:#EEE; font-weight:normal; text-align:left; color:#333; }
#tbl td		{ font-size:calc(9px + .2vw); padding:7px 10px 7px 10px; vertical-align:top; }
#tbl td	a,b	{ font-size:calc(9px + .2vw); }
.tb1cell	{ width:100%; height:15px; white-space:nowrap; text-overflow:ellipsis; }


/* Ranges */
#rng		{ background:#CCCCCC; border:1px solid #CCC; }
#rng tr		{ background:#FFFFFF; }
#rng tr:nth-child(odd) { background-color:#F5F5F5; }
#rng tr:hover	{ background:#DDEEFF; }
#rng th		{ font-size:calc(8px + .2vw); padding:6px 7px 6px 5px; background:#EEE; font-weight:normal; color:#333; }
#rng td		{ font-size:calc(9px + .2vw); padding:7px 7px 6px 7px; vertical-align:top; padding:5px; cursor:pointer; }
#rng td	a,b	{ font-size:calc(9px + .2vw); }


/* Admin */
#nav td { padding:15px 0 15px 0; cursor:pointer; border-right:1px solid #999; }
#nav a  { color:white; text-decoration:none; font-size:calc(12px + .20vw); }

/* Google Map */

#controls	{ position:relative; z-index:1; max-width:1200px; height: 60px; top:-90px; margin:auto auto; background:#EEE; border:1px solid #999; border-bottom:0; padding:15px; }
#gmap		{ position:relative; z-index:2; max-width:1200px; height:650px; top:-90px; margin:auto auto; background:#FFF; border:1px solid #999; }
@media (max-width:1000px)       { #controls,#gmap { left:0px; width:100%; margin:0; } }

#icondiv	{ position:relative; z-index:5; width:280px; height:auto; min-height:100px; background:white; left:50%; top:40%; margin:-100px 0 0 -140px; 
		  border:1px solid #666; border-radius:7px; padding:10px; overflow:hidden; }

#icontbl td,b,a { font-size:12px; color:#333; }


#tbl1		{ background:#CCCCCC; }
#tbl1 tr	{ background:#FFFFFF; }
#tbl1 tr:nth-child(odd) { background-color:#F5F5F5; }
#tbl1 tr:hover	{ background:#DDEEFF; }
#tbl1 th	{ font-size:calc(8px + .2vw); padding:6px 10px 6px 10px; background:#EEE; font-weight:normal; text-align:left; color:#333; }
#tbl1 td	{ font-size:calc(9px + .2vw); padding:7px 10px 7px 10px; vertical-align:top; }
#tbl1 td a,b	{ font-size:calc(9px + .2vw); }
.tb1cell	{ width:100%; height:15px; white-space:nowrap; text-overflow:ellipsis; }

.loading	{ display:block; width:100%; padding:25px; }