@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900');

:root {
        --maxwidth:	1600px;
        --red:		rgb(250,0,0);
        --blue:		rgb(0,60,250);
        --green:	rgb(0,240,0);
	--purple:	rgb(102,0,204);
	--navfont:	verdana,sans-serif;
	--gfont:	verdana,sans-serif;
}

*	{ box-sizing:border-box; }
html	{ margin:0px; -webkit-text-size-adjust:100%; overflow-y:scroll; }
body	{ font-family:arial,sans-serif; margin:0; font-size:.9rem; background:white; #F5F5F5; }
#notice	{ z-index:10; position:absolute; top:0; left:0; margin-left:calc(50% - 100px); width:200px; background:#CCFFCC; padding:15px; color:#006600; text-align:center; font-size:12px; }

.shadow	{ filter: drop-shadow(0 0 1px black) drop-shadow(1px 1px 1px black);  }

input[type='text'], input[type='date'], input[type='datetime-local'], input[type='password'] { font-family:arial,sans-serif; font-size:12px; width:100%; padding:7px; border:1px solid #CCC; border-radius:10px;; }
select { font-size:12px; width:100%; height:30px; padding:7px 3px 7px 3px; border:1px solid #CCC; border-radius:10px; background:white; color:black; background:white; }

#submit,.submit,.update { font-size:1rem; font-weight:bold; color:#FFF; width:140px; padding:9px; border:0; border-radius:10px; background:var(--blue); text-align:center; color:#FFFFFF; cursor:pointer; }
#delete	  { display:none; font-size:1rem; font-weight:bold; color:#FFF; width:140px; padding:9px; border:0; border-radius:10px; background:var(--red);  text-align:center; color:#FFFFFF; cursor:pointer; }

.red	{ background:#FF0000; }
.blue	{ background:#0000CC; }
.black	{ background:black; }
.green	{ background:#00CC00; }

.totalremote { font-family:Outfit,arial,helvetica; font-size:32px; font-weight:800; text-align:center; }
.tr1	{ color:var(--blue); }
.tr2	{ color:var(--green); }

#nav	 { z-Index:999; font-family:var(--navfont); position:sticky; left:0; top:0; width:100%; cursor:pointer; }
#nav img { height:calc(10px + 3vw); max-height:30px; width:auto; margin:0 0 5px 0; border:0; }
#nav table { max-width: var(--maxwidth); }
#nav td	 { font-size:calc(4px + 1vw); color:white; padding:8px 3px 7px 3px; }
.nav_on	 { background:var(--blue) }
#nav a	 { color:white; text-decoration:none; }
@media (min-width:1200px) {
	#nav  td { font-size:16px; }
	#subs td { font-size:16px; }
}

#subs	{ z-Index:999; font-family:var(--navfont); font-size:calc(4px + 1vw); width:100%; min-height:5px; padding:7px; }
#subs table { max-width: var(--maxwidth); }
.subs	{ color:white; padding:0px 15px 1px 15px; cursor:pointer; }

#main	{ width:95%; margin:0 auto 0 auto; max-width:1477px; padding-top:10px; }

.title	 { display:inline-block; font-size:18px; color:black; margin:5px 0 5px 0; }
.title a { color:black; text-decoration:none; }

ul,ol	{ line-height:25px; }

#panel		{ clear:both; border:1px solid #CCC; border-radius:10px; padding:10px; background:#F5F5F5; margin-bottom:10px; }
#panel textarea { border:1px solid #CCC; border-radius:10px; padding:7px; }

#panel_13	{ float:left; width:29%; margin:0 1% 1% 0; }
#panel_23	{ float:left; width:29%; margin:0 1% 1% 0; }
#panel_33	{ float:left; width:40%; margin:0; }
.pans		{ border:1px solid #CCC; border-radius:10px; padding:10px; background:#F5F5F5; overflow:hidden; }
@media (max-width:900px) {
	#panel_13 { float:left; width:50%;  margin:0 1% 1% 0; }
	#panel_23 { float:left; width:49%;  margin:0 0  1% 0; }
	#panel_33 { float:none; width:100%; margin:0 0 10px 0; }
}
@media (max-width:560px) {
	#panel_13, #panel_23, #panel_33 { float:none; width:100%; margin-bottom:10px; }
}


#panel_14	{ float:left; width:24%; margin:0 1% 1% 0; }
#panel_24	{ float:left; width:24%; margin:0 1% 1% 0; }
#panel_34	{ float:left; width:24%; margin:0 1% 1% 0; }
#panel_44	{ float:left; width:25%; margin:0; }
@media (max-width:910px) {
	#panel_14	{ float:left; width:49%; margin:0 1% 1% 0; }
	#panel_24	{ float:left; width:50%; margin:0  0 1% 0; }
	#panel_34	{ float:left; width:49%; margin:0 1% 1% 0; }
	#panel_44	{ float:left; width:50%; margin:0  0 1% 0; }
}
@media (max-width:429px) {
	#panel_14, #panel_24,#panel_34,#panel_44 { float:none; width:100%; margin:0 0 1% 0; }
}


#container	{ width:100%; height:165px; border:1px solid #CCC; overflow-Y:scroll; }
.client_jobs_grid { display:grid; grid-template-columns: 40px 110px 1fr 1fr; gap:0; cursor:pointer; font-size:12px; color:#333; white-space:nowrap; overflow:hidden; }
.client_jobs_grid_row { display:contents; }
.client_jobs_grid_row > div { font-size:11px; padding:4px; border:1px solid #CCC; border-left:0; border-top:0; }
.client_jobs_grid_row:nth-child(odd) > div { background: rgb(250,250,250); }
.client_jobs_grid_row:nth-child(even) >div { background: #FFFFFF; }
.client_jobs_grid_row:hover > div { background:#EEFFEE; }
@media (max-width:900px) { #container { height:auto; max-height:165px; } } 


#copy { font-size:11px; height:100vh; font-style:italic; padding:20px; text-align:center; color:#FFF; background:#666; margin-top:100px; }

/* PrintFields */
.pftd { padding-right:5px; font-size:.8rem; }
.pfta { width:100%; height:150px; padding:6px 0px 5px 7px; margin-bottom:2px; }
.pfsl { width:100%; height:30px; margin-bottom:2px; }
.pfin { width:100%; height:30px; min-width:11px; margin:1px 0 1px 0; font-size:.8rem; }
.READONLY { background:#F5F5F5; outline:none; color:#666; }

/* GRID STYLES */
#grid		{ font-family:var(--gfont); width:100%; cursor:pointer; border-left:1px solid #CCC; margin-bottom:30px; }
#grid_title	{ font-size:18px; text-decoration:none; color:black; padding-right:5px; }
#grid_title a	{ font-size:18px; text-decoration:none; color:black; }
#grid_clear	{ font-size:12px; text-decoration:none; color:blue; }
#grid_pages	{ font-size:12px; }

#add_record	{ display:inline; }
#add_record a	{ font-size:11px; text-decoration:none; }

#grid .cols	{ display:grid; background:#F5F5F5; }
#grid .search	{ display:grid; }

#grid .col	{ padding:4px; font-size:13px; color:#333; border:1px solid #CCC; border-left:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#grid .col:hover{ color:black; background:rgb(250,240,200); }
#grid .col_on	{ padding:4px; font-size:13px; background:rgb(255,220,120); color:#333; border:1px solid #CCC; border-left:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#grid .cols img { width:calc(5px + .3vw); height:auto; margin:-2px 3px 0 3px; }
#grid .arrow	{ display:inline-block; }

#grid .search > div	{ padding:0px; font-family:var(--gfont); font-size:13px; color:#333; background:#FFFFCC; border:1px solid #CCC; border-left:0; border-top:0px; overflow:hidden; }
#grid .search input	{ padding:4px; width:100%; font-family:var(--gfont); font-size:13px; background:#FFFFCC; border:0; outline:none; }

#grid #results	{ display:contents; }

#grid .rows	{ display:grid; }
#grid .rows > div { padding:4px; font-size:13px; color:#333; border:1px solid #CCC; border-left:0; border-top:0; white-space:nowrap; overflow:hidden; }
#grid .rows:nth-child(odd)  > div { background: #F5F5F5; }
#grid .rows:nth-child(even) > div { background: #FFFFFF; }
#grid .rows:hover	    > div { background: #EEFFEE; }
#grid .no_rec	{ position:absolute; height:50px; font-family:arial; font-size:11px; color:#333; margin:4px 0 0 -1px; padding:0; white-space:nowrap; overflow:hidden; }
#grid .no_rec select { font-family:arial; font-size:11px; color:#333; outline:none; border:0; padding:0; background:transparent; width:100px; }

#tblpgs .td1	{ padding:3px 5px 3px 5px; border:1px solid #CCC; border-right:0; border-radius:5px 0 0 5px; }
#tblpgs .td2	{ padding:3px 5px 3px 5px; border:1px solid #CCC; }
#tblpgs .td3	{ padding:3px 5px 3px 5px; border:1px solid #CCC; border-left:0; border-right:0; font-size:13px; }
#tblpgs .td4	{ padding:3px 5px 3px 5px; border:1px solid #CCC; }
#tblpgs .td5	{ padding:3px 5px 3px 5px; border:1px solid #CCC; border-left:0; border-radius:0 5px 5px 0; }
#tblpgs img	{ width:10px; height:auto; border:0; }
#tblpgs .gray	{ filter: grayscale(100%); opacity:.2; }
.pointer	{ cursor:pointer; }