@import url('https://fonts.googleapis.com/css2?family=Style+Script&display=swap');
:root {
	/* Corp Colors */
	--blue:	  rgb( 0, 51,153);
        --ltblue: rgb(20,122,224);
        --dkblue: rgb( 0, 0, 100);

	--hfade1: rgb( 0,102,204);
	--hfade2: rgb( 0, 42,154);

	/* Grid variables */
	--fade1:	rgb(255,255,255);
        --fade2:	rgb(220,220,220);
	--border:	rgb(200,200,200);
	--rowbk:	rgb(245,245,245);
	--grback:	rgb(240,240,240);
	--col_color:	rgb(50,50,50);
	--col_order:	rgb(255,225,125);
	--txtbk:	rgb(255,255,230);
	--hover:	rgb(255,255,150);
}

*, html		{ font-family:times,serif; font-size:1rem; box-sizing:border-box; line-height:130%; -webkit-text-size-adjust:100%; }
.body		{ font-family:times,serif; font-size:1rem; box-sizing:border-box; margin:0; overflow-X:auto; overflow-Y:scroll; background:rgb(150,200,255); }
.admin		{ font-family:times,serif; font-size:1rem; box-sizing:border-box; margin:0; overflow-X:auto; overflow-Y:scroll; background:white; }
pre		{ font-family:courier; }
a		{ color:var(--dkblue); }
#notice		{ z-index:3; position:fixed; top:0px; width:100%; height:55px; line-height:55px; top:0px; left:0px; font-weight:bold; text-align:center; color:white; }

#nav		{ z-index:2; position:sticky; left:0px; top:0px; width:100%; background:var(--blue); }
#nav img	{ max-height:40px; margin:0 0 3px 0; }
#nav a		{ font-family:arial,helvetica; color:white; text-decoration:none; }
#nav table	{ width:90%; max-width:var(--maxwidth); margin:auto auto; background:var(--blue); cursor:pointer; }
#nav table td	{ padding:10px 5px 5px 5px; }

#main		{ width:90%; max-width:1200px; padding-bottom:10px; margin:20px auto auto auto; }

h1, h1 a	{ font-family:'times'; font-size:calc(10px + 3vw); text-decoration:none; color:var(--dkblue); }

input[type='text'], input[type='file'], input[type='number'], input[type='range'], input[type='password'], input[type='email'], input[type='tel'], textarea {
		  width:100%; height:35px; padding:7px;		    border:1px solid #CCC; border-radius:10px; background:white; color:black; background:white; }
select			{ width:100%; height:35px; padding:7px 7px 7px 5px; border:1px solid #CCC; border-radius:10px; background:white; color:black; background:white; }
input[type='date']	{ height:35px; padding:7px; border:1px solid #CCC; border-radius:10px; background:white; color:black; background:white; }

#submit,.submit,.update	{ font-size:1.1rem; font-weight:bold; color:#FFF; padding:7px; border:0; border-radius:10px; 
		width:49%; background-color:#0099FF; background:-webkit-linear-gradient(#0099FF,#0066CC); text-align:center; color:#FFFFFF; cursor:pointer; }
#delete,.delete{ font-size:1.1rem; font-weight:bold; color:#FFF; padding:7px; border:0; border-radius:10px;
		width:100%; background-color:#EE0000; background:-webkit-linear-gradient(#FF0000,#CC0000); text-align:center; color:#FFFFFF; cursor:pointer; }
#reset		{ font-size:1.1rem; font-weight:bold; color:#FFF; padding:7px; border:0; border-radius:10px;
		width:100%; background-color:#EE0000; background:-webkit-linear-gradient(#999,#666); text-align:center; color:#FFFFFF; cursor:pointer; }
@media (max-width: 600px) { #submit, #delete, #reset { width:100%; } }

/* Calendar */
.event		{ border-top:1px solid #999; padding:10px 0 10px 0; width:100%; height:auto; overflow:hidden; cursor:pointer; color:blue;  background:#FFFFFF; text-decoration:underline; }
.event_on	{ border-top:1px solid #999; padding:10px 0 10px 0; width:100%; height:auto; overflow:hidden; cursor:pointer; color:black; background:rgb(240,245,255); text-decoration:none; }
.time, .loca, .copy { display:none; padding-top:5px; }

#left    { float:left; width:48%; margin:0 2% 1% 0; background:white; }
#right   { float:left; width:50%; margin:0 0  1% 0; background:#CCC; }
@media (max-width: 550px) { #left, #right { width:100%; } }
#cal     { width:100%; display:grid; text-align:left; background:#CCC; border:1px solid #CCC; grid-gap:1px; grid-template-columns:repeat(7,minmax(0,1fr)); }
.week    { width:100%; height:100%; font-size:calc(.4vw + 5px); padding:3px 0 3px 0; text-align:center; background:#EEE; }
.days    { font-size:calc(.3vw + 6px); background:white; aspect-ratio:5/4; padding:3px; white-space:nowrap; overflow-X:hidden; text-overflow:ellipsis; }
.past    { background:#EEE; color:#999; }
.today   { background:#CCFFCC; }
.show    { background:#CCDDFF; }
.dates   { width:100%; min-height:10px; padding:2px 0 2px 0; font-size:calc(.3vw + 5px); white-space:nowrap; text-overflow:ellipsis; cursor:pointer; border-bottom:1px solid #778899; }
.dates:last-child { border:0; }
#uptbl td { padding:3px 5px 3px 0; }
.up:last-child { border:0; padding:7px 0 15px; }

/* Grid Stuff */
#gtbl	{ margin:0; }
#title_cell h1 { margin-top:2px; white-space:nowrap; }
.addrec, .addrec a { display:inline; font-size:1.2rem; font-weight:normal; text-decoration:none; white-space:nowrap; }
#clear	{ position:absolute; top:120px; width:calc(90% - 8px); min-width:206px; max-width:var(--maxwidth); margin:auto auto;
	  visibility:hidden; font-size:.9rem; color:blue; text-align:right; text-decoration:none; cursor:pointer; background:red; }
#pages	{ font-size:1rem;  white-space:nowrap; }
#pgtbl	{ font-size:1rem; white-space:nowrap;
	.records	{ height:10px; padding-right:7px; }
	.cell_on	{ height:10px; padding:2px 3px 2px 3px; color:white; background:#0033FF; border:1px solid #CCC; border-radius:5px; text-align:center; cursor:pointer; }
	.cell_of	{ height:10px; padding:2px 3px 2px 3px; color:black; background:#FFFFFF; border:1px solid #CCC; border-radius:5px; text-align:center; cursor:pointer; }
	#l2, #l1, #n1, #of, #pgs, #n2, #g1, #g2 { display:table-cell; height:10px; padding:2px; text-align:center; vertical-align:middle; }
	#l2	{ border:1px solid #CCC; min-width:20px; border-radius:5px 0 0 5px; border-right:0; }
	#l1	{ border:1px solid #CCC; min-width:20px; }
	#n1	{ border:1px solid #CCC; border-left:0; border-right:0; padding:0; text-align:right; }
	#of	{ border:1px solid #CCC; min-width:15px; border-left:0; border-right:0; }
	#n2	{ border:1px solid #CCC; border-left:0; padding:0; padding-right:4px; }
	#pgs	{ border:1px solid #CCC; border-left:0; text-align:left; padding-right:5px; }
	#g1	{ border:1px solid #CCC; min-width:20px; border-left:0; }
	#g2	{ border:1px solid #CCC; min-width:20px; border-radius:0 5px 5px 0; border-left:0; }
	.dark	{ color:#000; }
	.dark:hover { background:#CCFFCC; cursor:pointer; }
	.lite	{ color:#999; }
}

/* Pagination */
#grid_page_tbl		{ font-size:80%; border:1px solid #CCC; border-radius:5px; padding:1px; }
#grid_page_tbl	td	{ height:100%; padding:3px 5px 3px 5px; cursor:pointer; text-align:center; border:0px; }
.grid_page		{ font-size:85%; height:100%; padding:3px 5px 3px 5px; cursor:pointer; text-align:center; color:black; }
.grid_page_on		{ font-size:85%; height:100%; padding:3	px 5px 3px 5px; cursor:pointer; text-align:center; color:white; text-align:center; background:var(--blue); border-radius:5px; }
#grid_page_cell1	{ font-size:85%; padding:0; text-decoration:none; color:blue; padding:0 10px 0 10px; white-space:nowrap; }
#grid_page_cell2	{ font-size:85%; padding:0; white-space:nowrap; }
#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 		{ font-size:80%; white-space:nowrap; text-align:left; background:white; color:var(--col_color); overflow:hidden; gtf-text-overflow:ellipsis; padding:calc(4px + .05vw);
				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 Stuff */
.grid_col_order		{ background: var(--col_order); }
.grid_search_cell	{ white-space:nowrap; overflow:hidden; padding:0; border:0; background:white;		}
.grid_search_txt	{ font-size:85%; width:100%; background:var(--txtbk); border:0; outline:none;		padding:4px 4px 4px 4px; }
.grid_cell		{ font-size:85%; white-space:nowrap; text-align:left; color:#000; overflow:hidden;	padding:4px; }
.grid_row_User		{ display:contents; position:absolute; }
.grid_row_Admin		{ display:contents; position:absolute; }
.grid_row_User:nth-child(odd)	> div { background-color:rgb(255,255,255); }
.grid_row_User:nth-child(even)	> div { background-color:rgb(255,255,255); }
.grid_row_Admin:nth-child(odd)	> div { background-color:rgb(225,255,225); }
.grid_row_Admin:nth-child(even)	> div { background-color:rgb(225,255,225); }
.grid_row		{ display:contents; position:absolute; }
.grid_row_new		{ display:contents; position:absolute; font-weight:bold; }
.grid_row:nth-child(odd)  	> div { background-color: #FFFFFF; }
.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; }

/* Page Manager */
.tree		{ width:100%; min-width:100px; padding:10px 10px 5px 5px; border:1px solid #CCC; border-radius:10px; white-space:nowrap; overflow:auto; }
.tree ul	{ font-size:12px; margin:0px 0px 0px -15px; list-style:none; }
.tree ul li	{ position:relative; cursor:pointer; }
.tree ul li:before { position:absolute; left:-15px; top:4px;	 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 -15px; }
.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; height:24px; padding:2px; margin:0px 0px 0px 0px; }
.treeN		{ text-decoration:none; color:#666666; border:1px solid #FFF; height:24px; padding:2px; margin:0px 0px 0px 0px; }
.treeY:hover	{ border:1px solid #CCC; background-Color:#FFFFCC; }
.treeN:hover	{ border:1px solid #CCC; background-Color:#FFFFCC; }
#sortable	{ list-style-type: none; margin: 0; padding: 0; }
#sortable li	{ float:left; width:100%; height:auto; }

/* Page Manager */
.ta	{ height:150px; }
.block	{ display:inline-block; width:100%; border:1px solid #CCC; border-radius:5px; padding:5px; background:rgb(250,250,250); }
.display{ width:100%; height:auto; display:none; }
.block1	{ float:left; width:80px; clear:both; font-size:.7rem; padding-top:12px; cursor:pointer; }
.block2	{ float:left; width:calc(100% - 182px); padding-right:2px; }
.block3	{ float:left; width:100px; }
.block4	{ float:left; width:100%; clear:both; overflow:hidden; }

.bttns	{ width:100%; min-width:80px; border-radius:7px; padding:5px 7px 5px 7px; font-size:11px; margin-bottom:5px; }
.cols	{ font-size:.7rem; margin-bottom:2px; }
.cols input[type='checkbox'] { width:20px; height:20px; margin-top:8px; }
.col1	{ float:left; width:75px; clear:both; padding-top:10px; white-space:nowrap;	PageTitle;	}
.col2	{ float:left; width:calc(100% - 300px); padding-right:2px; }
.col2-4	{ float:left; width:calc(100% - 180px); padding-right:2px; }

.col3	{ float:left; width:80px; padding:10px 0 0 10px; white-space:nowrap;		ParentID;	}
.col4	{ float:left; width:40px; }
.col5	{ float:left; width:80px; padding:10px 0 0 10px; white-space:nowrap;		Visibile;	}
.col6	{ float:left; width:25px; padding:0px 0 0 0; 					Checkbox;	}
.clr	{ clear:both; }

.tmp1	{ float:left; width:75px; padding:10px 0 0 0; white-space:nowrap; clear:both; }
.tmp2	{ float:left; width:200px; }
.tmp3	{ float:left; width:75px; padding:10px 0 0 7px; white-space:nowrap; }
.tmp4	{ float:left; width:calc(100% - 350px); }

/* Media Manger */
#fileman { z-index:5; font-size:11px; position:fixed; resize:horizontal; top:0px; left:-70%; width:70%; bottom:0px; background:#FFF;
	   padding:10px 10px 20px 20px; overflow:auto; border-right:1px solid #666; box-shadow: 0px 0px 10px black; }

.fman0 { float:left; width:calc(25% - 14px); height:auto; min-width:60px; padding:10px; margin:0 7px 15px 7px; white-space:nowrap; overflow:hidden; background:#EEE; border:1px solid #CCC; border-radius:10px; }

.fman_on	{ background:rgb(255,255,0); border:1px solid #FFFF00; }

.fman0:hover	{ background:rgb(255,255,100); border:1px solid #FFFF00; cursor:pointer; }

.fman1		{ width:100%; aspect-ratio:4/3; background:black; margin-bottom:1%; border-radius:7px;
		  display:flex; height:calc(100% - 10px); align-items:center; justify-content:center;
		}

.fman1 img	{ width:100%; aspect-ratio:4/3; border-radius:5px; object-fit:cover; }

.fman_refresh	{ z-index:4; position:absolute; margin:2px 0 0 110px; cursor:pointer; }
.fman_refresh img { margin:10px 5px 0 0; width:15px; height:auto; }

.ftree				{ font-size:11px; float:left; width:auto; padding:0; border:1px solid #CCC; border-radius:5px; white-space:nowrap; overflow:auto; }
.ftree ul:first-child		{ margin:10px 10px 15px -15px; }
.ftree ul			{ margin-left:-10px; list-style:none; }
.ftree ul li			{ position:relative; margin-left:-21px; }
.ftree ul li:before		{ position:absolute; left:-15px; top:0px;     content:''; display:block; border-left:1px solid #999; border-bottom:1px solid #999; width:5px; height:10px; }
.ftree ul li:after		{ position:absolute; left:-15px; bottom:-7px; content:''; display:block; border-left:1px solid #999; height:100%; }
.ftree ul li.root		{ margin:0px 0px 0px -15px; }
.ftree ul li.root:before	{ display:none; }
.ftree ul li.root:after		{ display:none; }
.ftree ul li:last-child:after	{ display:none; }
.ftreeN				{ cursor:pointer; text-decoration:none; color:#000; border:1px solid #FFFFFF; padding:2px; margin:0px 0px 0px -10px; }
.ftreeMATCH			{ cursor:pointer; text-decoration:none; color:#000; border:1px solid #FFFF00; padding:2px; margin:0px 0px 0px -10px; background:#FFFF00; }
.ftreeN:hover			{ border:1px solid #CCC; background-Color:#FFFFCC; }