@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 {
	font-size:calc(16px + .5vw);
	font-family:outfit,verdana,sans-serif;
        --maxwidth:	1600px;
        --red:		rgb(250,0,0);
        --blue:		rgb(0,51,204);
        --green:	rgb(0,204,0);
	--purple:	rgb(102,0,204);}

@media (min-width:1400px) { :root { font-size:23px; } }

/* Global */
*	{ font-size:1rem; box-sizing:border-box; -webkit-appearance:none; appearance:none; }
html	{ font-size:1rem; margin:0px; -webkit-text-size-adjust:100%; overflow-y:scroll; }
body	{ font-size:1rem; font-family:Outfit,arial,sans-serif; background:white; margin:0; }
b	{ font-weight:500; }

/* Javascript Update Div */
#notice	{ z-index:2; position:absolute; top:0; left:0; width:100%; display:flex; align-items:center; justify-content:center; background:#99FF99; color:#006600; text-align:center; }
#error  { z-index:2; position:absolute; top:0; left:0; width:100%; display:flex; align-items:center; justify-content:center; background:#FF0000; color:#FFFFFF; text-align:center; }

#top1 { text-align:center; font-size:1.4rem; margin:15px 0 5px 0; }
#top2 { text-align:center; font-size:1.2rem; margin-bottom:5px; }

/* Home Public Page */
#home_login	{ position:absolute; top:3vw; right:4vw; width:6vw; height:auto; }
#home		{ display:inline-block; background:white; width:100%; height:auto; }
#home1		{ display:table-cell; width:40%; padding:4vw 1vw 0 4vw; vertical-align:top; }
#home2		{ display:table-cell; width:60%; padding:3vw 5vw 0 0;	vertical-align:bottom;}
#home_logo	{ width:70%; height:auto; }
.homeH1		{ font-size:5vw; font-weight:600; color:#00CC00; white-space:nowrap; line-height:5vw; }
.hometxt	{ font-size:2vw; font-weight:400; color:#666666; padding:2vw 3vw 0 0; }
#home_green	{ clear:both; background:#00CC00; height:.6vw; }
#home_white	{ clear:both; background:#FFFFFF; height:.6vw; }
#home_tbl	{ width:100%; }
#home_tbl td	{ padding:2vw 4vw 0 4vw; }
#home_tbl .txt	{ font-size:calc(1.80vw); color:white; font-weight:400; }
#home_tbl b	{ font-size:calc(2.00vw); color:white; font-weight:600; }
#login_tbl td	{ padding:0 0 0 0; }	
#login_tbl .inp { width:120px; height:30px; border-radius:5px; font-size:.7rem; color:#666; } 

@media (max-width:550px) {
	#home_login     { position:absolute; top:4vw; right:4vw; width:12vw; height:auto; }
	#home_logo	{ width:68%; height:auto; }
	#home1		{ display:block; width:100%; padding:4vw 4vw 0 4vw; }
	#home2		{ display:block; width:100%; padding:1vw 4vw 0 4vw; }
	.homeH1		{ float:left; font-size:6vw; font-weight:600; white-space:nowrap; line-height:5vw; padding-right:1vw; }
	.hometxt	{ clear:both; font-size:3vw; font-weight:400; color:#666666; padding:2vw 3vw 0 0; }
	#home_tbl .txt	{ font-size:calc(2.80vw); color:white; font-weight:400; }
	#home_tbl b	{ font-size:calc(3.00vw); color:white; font-weight:600; }
}


/* Login Screen */
.center_screen { position:absolute; left:50%; top:30%; width:240px; margin-left:-120px; text-align:center; }
@media (min-width:700px) { .center_screen { width:350px; margin-left:-175px; } } 
.csbot, .csbot a { font-size:.7rem; color:#666; }

#panel1 { width:85%; max-width:450px; margin:auto auto; padding:25px 15px 15px 15px; margin-top:20px; border:1px solid #CCC; border-radius:20px; background:white; }
#panel1 { width:100%; height:100%; }

/* form inputs */
textarea, input[type='text'], input[type='tel'], input[type='date'], input[type='datetime-local'], input[type='time'], input[type='password'] {
	font-family:outfit,verdana,sans-serif; width:100%; padding:.5rem ; border:1px solid #CCC; border-radius:.5rem; 
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator { display:none; -webkit-appearance:none; }
input[type='checkbox'] { width:1rem; height:1rem; -webkit-appearance:checkbox; appearance:checkbox; }

select	{ width:100%; min-width:100px; padding:.5rem; border:1px solid #CCC; border-radius:.5rem; background:white; color:black; background:white; }

#submit,.submit, #preview, .preview, #delete,.delete {
	font-size:1rem; padding:.6rem 1.2rem .6rem 1.2rem; display:inline-block; margin:0 3px 3px 0; width:auto; 
	font-weight:bold; color:#FFF; border:0; border-radius:.5rem; text-align:center; cursor:pointer; text-transform: uppercase;
}
#submit, .submit  { background:var(--blue); }
#preview,.preview { background:var(--green); }
#delete, .delete  { background:var(--red); }

#top		{ z-Index:1; position:sticky; left:0; top:0; width:100%; }
#nav		{ width:100%; cursor:pointer; }
#nav img	{ height:calc(15px + 2vw); max-height:60px; width:auto; margin-top:2px; }
#nav table	{ max-width:var(--maxwidth); }
#nav td		{ color:white; padding:calc(5px + .5vw); border-left:1px solid #CCC; }
#nav td:first-child { border-left:0; }
.nav_on		{ background:var(--blue) }
#nav a		{ font-size:calc(9px + .7vw); color:white; text-decoration:none; }

#assign { position:absolute; left:50%; transform:translate(-50%); top:0px; cursor:pointer; font-size:.7rem; color:black; padding:1px 12px 2px 12px; border-radius:0 0 5px 5px; cursor:pointer; background:yellow; }

#subs		{ width:100%; padding:0 0 5px 0; }
#subs table	{ max-width:var(--maxwidth); }
.subs		{ font-size:calc(10px + .7vw); color:white; cursor:pointer; padding:.5rem .1rem .4rem .1rem; }
.subs a, .subs a:visited { font-size:calc(10px + .7vw); color:white; text-decoration:none; }
.pipe		{ font-size:calc(10px + .7vw); color:white; opacity:.5; padding:0 2.5vw 0 2.5vw; }

@media (min-width:1600px ) {
	#nav td:first-child { border-left: 1px solid #CCC; }
	#nav td:last-child  { border-right:1px solid #CCC; }
}

#main	{ max-width:var(--maxwidth); width:96%; margin:0 auto 0 auto; padding:15px 2% 20px 2%; }

.qr1	{ margin:5px 0 0 0; text-align:center; color:var(--blue); }
.qr2	{ display:block; margin:0 0 2px 0; text-align:center; font-weight:bold; color:var(--blue); }

h1, .h1	{ color:black; margin:5px 0 5px 0; font-weight:normal; }
h2, .h2	{ color:black; margin:5px 0 5px 0; font-weight:normal; } 
h3, .h3	{ color:black; margin:5px 0 5px 0; font-weight:normal; } 
.title, .title a {  font-size:1.5rem; font-weight:normal; padding:0 0 10px 0; text-decoration:none; color:black; }

/* General Stuff */
.nowrap	{ white-space:nowrap; }
#clear,.clear	{ clear:both; }
ul,ol	{ line-height:150%; }

.panel		{ display:inline-block; 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_12	{ float:left; width:49.5%; margin:0 1% 1% 0; }
#panel_22	{ float:left; width:49.5%; margin:0  0 1% 0; }
@media (max-width:800px) { #panel_12, #panel_22 { float:none; width:100%; margin:0 0 10px 0; } }

#panel_13	{ float:left; width:31%; margin:0 1% 1% 0; }
#panel_23	{ float:left; width:31%; margin:0 1% 1% 0; }
#panel_33	{ float:left; width:36%; margin:0; }
.pans		{ border:1px solid #CCC; border-radius:10px; padding:10px; background:#F5F5F5; overflow:hidden; }
@media (max-width:1000px) {
	#panel_13 { float:left; width:49%;  margin:0 1% 1% 0; }
	#panel_23 { float:left; width:50%;  margin:0 0  1% 0; }
	#panel_33 { float:none; width:100%; margin:0 0 10px 0; }
}
@media (max-width:700px) {
	#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; }
}


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

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


/* GRID STYLES */
.ellipsis	{ min-width:1px; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#grid		{ width:100%; cursor:pointer; border-left:1px solid #CCC; margin-bottom:30px; }
#grid_title	{ text-decoration:none; color:black; }
#grid_title a	{ text-decoration:none; color:black; }
#grid_clear	{ width:65px; text-decoration:none; color:blue; }
#grid_pages	{ font-size:.8rem; }
#add_record	{ display:inline; }
#add_record a	{ font-size:1rem; text-decoration:none; }
#grid .cols	{ display:grid; background:#F5F5F5; }
#grid .search	{ display:grid; }
#grid .col	{ font-size:.8rem; padding:4px; 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	{ font-size:.8rem; padding:4px; background:rgb(255,220,120); color:#333; border:1px solid #CCC; border-left:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#grid .arrow	{ font-size:.8rem; display:inline-block; }
#grid .search > div { padding:0px; color:#333; background:#FFFFCC; border:1px solid #CCC; border-left:0; border-top:0px; overflow:hidden; }
#grid .search input { padding:4px; width:100%; background:#FFFFCC; border:0; outline:none; }
#grid #results	{ display:contents; }
#grid .rows	{ display:grid; }
#grid .rows > div { font-size:.9rem; padding:4px; 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	{ font-size:.6rem; position:absolute; height:50px; font-family:arial; color:#333; margin:4px 0 0 -1px; padding:0; white-space:nowrap; overflow:hidden; }
#grid .no_rec select { font-size:.6rem; color:#333; outline:none; border:0; padding:0; background:transparent; }
#grid .no_rec select option { font-size:.6rem; }

#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	{ font-size:.7rem; padding:3px 5px 3px 5px; border:1px solid #CCC; border-left:0; border-right:0; }
#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; }

/* Other Styles */
.block_rows {
	.row { display:table; width:99%; border:1px solid #CCC; border-top:0; padding:7px; cursor:pointer; }
	.row:first-child { border:1px solid #CCC; }
	.row1 { display:table-cell; vertical-align:top; width:20px; }
	.row2 { display:table-cell; vertical-align:top; }
	.row:hover { background:#CCFFCC; }
	.row img { width:14px; height:auto; margin:4px 5px 0 0; }
}

#cont	{
	.d1 { white-space:nowrap; padding:3px 0  0 0px; }
	.d2 { white-space:nowrap; padding:0px; max-width:300px; margin-bottom:5px; overflow:hidden; }
	@media (max-width:320px) {
		.grid { display:block; }
		.d1 { padding:0; }
		.d2 { margin-bottom:10px; }
	}
	.pros { padding:0 0 4px 0; }
}

.prolo_left { float:left; white-space:nowrap; border:1px solid #CCC; border-radius:10px; padding:5px 12px 7px 12px; margin:10px 10px 0 0; overflow:hidden; cursor:pointer; }