@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:	1400px;
        --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; }
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; }

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

/* Login Screen */
.center_screen { position:absolute; left:50%; top:0; width:270px; margin:20vh 0 0 -135px; }
.login1 { width:100%; border-radius:10px; outline:none; }
.login2 { width:100%; font-weight:bold; color:#FFF; padding:8px; border:0; border-radius:10px; background:var(--blue); text-align:center; color:#FFFFFF; cursor:pointer; }

/* form inputs */
textarea, input[type='text'], input[type='tel'], input[type='date'], input[type='datetime-local'], input[type='time'], input[type='password'] {
	  width:100%; padding:5px; border:1px solid #CCC; border-radius:5px;
}
input[type='checkbox'] { width:.8rem; height:.8rem; }

select	{ width:100%; min-width:80px; padding:5px; border:1px solid #CCC; border-radius:5px; background:white; color:black; background:white; }
#submit,.submit	{ font-size:.9rem; padding:9px; display:inline-block; margin:0 3px 3px 0; font-weight:bold; color:#FFF; border:0; border-radius:5px; background:var(--blue); text-align:center; cursor:pointer; }
#sendtx,.sendtx	{ font-size:.9rem; padding:9px; display:inline-block; margin:0 3px 3px 0; font-weight:bold; color:#FFF; border:0; border-radius:5px; background:var(--green); text-align:center; cursor:pointer; }
#delete,.delete { font-size:.9rem; padding:9px; display:inline-block; margin:0 3px 3px 0; font-weight:bold; color:#FFF; border:0; border-radius:5px; background:var(--red);  text-align:center; cursor:pointer; }

#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:.75rem; color:white; text-decoration:none; }

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

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

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

.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; color:black; font-weight:normal; text-decoration:none; padding:0 0 7px 0; }

/* 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%; margin:0 1% 1% 0; }
#panel_22	{ float:left; width:50%; margin:0  0 1% 0; }
@media (max-width:600px) { #panel_12, #panel_22 { float:none; width:100%; margin:0 0 10px 0; } }

#panel_13	{ float:left; width:29%; margin:0 1% 1% 0; }
#panel_23	{ float:left; width:34%; margin:0 1% 1% 0; }
#panel_33	{ float:left; width:35%; margin:0; }
.pans		{ border:1px solid #CCC; border-radius:10px; padding:10px; background:#F5F5F5; overflow:hidden; }
@media (max-width:930px) {
	#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:570px) {
	#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:75%; 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; width:100px; }
#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; }
}

#appt	{
	#tbl1 td { padding:0 5px 2px 0; }
	input { max-width:200px; }
	textarea { max-width:400px; }
	.pros, .locs { float:left; padding:0; margin:2px 5px 2px 0; padding:3px 6px 3px 6px; border:1px solid #CCC; border-radius:5px; background:white; }
	
}

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