@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	/* preset sizes */
	--maxwidth: 1200px;

	/* Corp Colors */
	--blue:	  rgb( 0,102,204);
        --ltblue: rgb(20,122,224);
        --dkblue: rgb( 0, 70,170);

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

*	{ box-sizing:border-box; }
html	{ -webkit-text-size-adjust:100%; }
body	{ font-family:Comfortaa,arial,sans-serif; font-size:1.1rem; line-height:1.5rem; color:#666; margin:0; overflow-Y:scroll; }
#white	{ width:100%; background:white; }

h1	{ line-height:2.5rem; font-weight:normal; }
h2	{ line-height:1.9rem; font-weight:normal; }
h3	{ line-height:1.7rem; font-weight:normal; }
b	{ color:black; }

.max	{ width:80%; max-width:900px; }
 @media (max-width:500px) { .max { width:90%; } } 

/* Image Styles */
.right { float:right; width:50%; max-width:320px; margin:0px 0 20px 10px; }
@media (max-width:529px) { .right { width:100%; max-width:3000px; margin:0px 0 20px 0; } } 

#nav	{ height:50px; margin:auto auto; font-size:.7rem; color:#333; }
#nav a	{ font-size:.8rem; text-decoration:none; }
#nav a:visited	{ font-size:.7rem; text-decoration:none; }
.nav_td		{ text-align:center; cursor:pointer; white-space:nowrap; background:#FFF; color:#333; padding:0 5px 0 5px; }
.nav_td_on	{ text-align:center; cursor:pointer; white-space:nowrap; background:#666; color:#FFF; padding:0 5px 0 5px; }
.top	{ color:black; }
.top_on { color:white; }
#logo	{ width:25px; height:25px; background:#333; }

#fade {	position:absolute; width:100%; min-height:110px; opacity:.2;
	background-image:url('/upload/images/girl_teacher_boy.jpg'); background-repeat:no-repeat; background-position:center; cover:cover; object-fit:cover; background-size:100% 100%;
	border-top:1px solid #000; border-bottom:1px solid #000; }
#ftxt {	position:relative; width:90%; max-width:500px; min-height:110px; margin:auto auto; font-size:calc(.5vw + 12px); line-height:calc(.5vw + 16px); font-style:italic; padding:20px 0 20px 0; 
	display:flex; justify-content:center; align-items:center; margin:auto auto; text-align:center; }

#main	{ margin:auto auto; padding-bottom:35px; }

#copy	{ font-size:.55rem; min-height:100px; padding:10px; text-align:center; border-top:1px solid #CCC; }

hr	{ height:1px; border:0px; background:#CCC; }

.panel	{ width:100%; border:1px solid #CCC; border-radius:10px; background:rgb(250,250,250); padding:15px; }

/* contact page */
.contact1 { font-size:0.8rem; float:left; width:130px; clear:both; margin-top:3px; white-space:nowrap; }
.contact2 { font-size:1.0rem; float:left; width:calc(100% - 130px); min-width:200px; font-size:1.0rem; margin-top:3px; }
 @media (max-width:450px) { .contact1 { width:100%; margin:3px 0 0 0; } } 
 @media (max-width:450px) { .contact2 { width:100%; margin:0px 0 7px 0; } } 

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

input[type='submit'] { font-size:.9rem; font-weight:bold; color:white; padding:6px 16px 6px 16px; border:0; border-radius:7px; background-color:#333; text-align:center; cursor:pointer; }

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

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


/* Admin Content Manager Site Map */
.tree ul { font-size:11px; margin:0px 0px 0px -15px; list-style:none; line-height:15px; }
.tree ul li { position:relative; }
.tree ul li:before { position:absolute; left:-15px; top:0px; content:''; display:block; border-left:1px solid #999; border-bottom:1px solid #999; width:10px; height:7px; }
.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 -25px; }
.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; }
.treeN { text-decoration:none; color:#888888; border:1px solid #FFF; }
.treeY:hover { border:1px solid #CCC; background-Color:#FFFFCC; }
.treeN:hover { border:1px solid #CCC; background-Color:#FFFFCC; }
.texta { width:100%; height:21px; border:0px; padding-top:5px; outline:none; }
.intxt { width:100%; height:24px; border:0px; outline:none; color:#000000;  }

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