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

/* 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; }

/* form inputs */
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='checkbox'] { width:1rem; height:1rem; -webkit-appearance:checkbox; appearance:checkbox; }
textarea { font-family:outfit,verdana,sans-serif; width:100%; padding:.5rem ; border:1px solid #CCC; border-radius:.5rem; height:800px; }

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); }
	
#nav { width:100%; cursor:pointer; background:black; border-bottom:1px solid black; }
#nav td { border-right:1px solid #FFF; }
.nav_on   { background:#FFEE00; } .nav_on  a { text-decoration:none; color:black; }
.nav_off  { background:#000000; } .nav_off a { text-decoration:none; color:white; }

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

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

#copy { text-align:center; font-size:.6rem; }

/* 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	{ font-size:.8rem; width:65px; text-decoration:none; color:blue; }
#grid_pages, #grid_records { 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; }