/* ******************************************************************************************************************************************************

02/13/2022 -  Started a major cleanup, including fully qualifing elements wherever possible.
02/14/2022 -  Schedules by Meet and official are now clean.
06/03/2024 -  Another major cleanup AND began using CSS nesting.  menud,leftcol,rightcol are complete.  Centercol is going to be a challenge!
06/10/2024 -  Almost done with the cleanup and nesting.  The scheduleing and availability are all that's left and have to wait until after the Summer Track season is over.
06/14/2024 -  Scheduling is done.
08/03/2024 -  Nest is complete. Added code for the new "directions" post.
10/21/2024 -  Changed .officialmasterd and #menud to grid layouts.
10/22/2024 -  Changed full menu and schedbyschool official list to grid layout.
07/30/2025 -  Started introducing variables for submit buttons.  See :root{...}

Known Media Breakpoints -
	iPhoneXR : max-width: 980px
	iPadGen(5-10) : max-width: 1024px
		
	Tablet Device Dimensions (Landscaspe) as of 03/22/2024
	iPad - 1024 x 768
	LG Pad - 1280 x 768
	Galaxy Tab - 1280 x 800
		
	Important:  The [max/min]-width value [for the CSS @media rules] is really the window.innerWidth value as reported by the Javascript vars and NOT
	the actual size of the screen.  The page header now accurately reports this.

*********************************************************************************************************************************************************** */	
/*
**  Don't allow printing of any page
*/
@media print {
	body { display: none; }
}
/*
**  01/11/2023 - This makes sure that the padding and border are included in the total width and height of the elements.
*/
* {
	box-sizing: border-box;
}
/*  Global styles */
/*  Can be left in a global area.  These are good for formatting spans in html documents. */
[left] {text-align: left;}
[center] {text-align: center;}
[right] {text-align: right;}
[highlight] {color: red;}	
[navy] { color: navy; }
[red] { color: red; }
[green] {color: green;}
[orange] {color: orange;}
[magenta] {color: magenta;}
[ivory] {color: ivory;}
[azure] {color: azure;}
[royalblue] {color: royalblue;}
[grey] { color: grey; }
[bold] {font-weight: bold;}
[italic] {font-style: italic;}
[line-through] {text-decoration: line-through;}
[clearer] {clear:both;}
.clearer {clear: both;}

/* Colors I like
electricblue (apple) rgb(69,83,206);
greenish-bluish rgba(61,95,98,.9);
trackred rgb(204,104,83);
*/

/* Varialble */
:root {
	/* background color*/
	--defaultbackgroundcolor: ivory;
	
	/* default border radius*/
	--defaultborderradius: 15px;
	
	/* submit button defaults */
	--submitbuttoncolor: rgba(144,238,144,1);  /* lightgreen */
	--submitbuttontextalign: center;
	--submitbuttonbordercolor: transparent;
	--submitbuttonborderstyle: solid;
	--submitbuttonborderhovercolor: red;
	--submitbuttonborderwidth: 2px;
	--allbuttoncursor: pointer;
}

/*
**  Set the body's background color by environment using attribute selector for attribute environment
*/
body {
	font-family: verdana;
	&[environment="development"] {
		background-color: rgba(61,95,98,.9);
		color: ivory;
	}
	&[environment="staging"] {
		background-color: darkgoldenrod;
	}
	&[environment="production"] {
		background-color: royalblue;
	}
}

/* Small screen devices (typically phones and tablets in portrait position) */
@media screen and (max-width: 1023px) {
	body {
		/* see above */
	}
	
	/*
	** Main Header
	*/
	#mainheader {
		width: 100%;
		height: auto;
		padding: 4px 0px 4px 0px;
		background-color: transparent;
		background-image: url(headerimage14.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		overflow: hidden;
		font-size: 2em;
		font-weight: 600;
		color: ivory;
		text-align: left;
		.subheader1 {
			width: 99%;
			height: auto;
			margin: 0px 1% 8px 1%;
			padding: 4px 0px 4px 0px;
			background-color: transparent;
			font-size: .8em;
			color: ivory;
			text-align: left;
		}
		#headercommandnav {
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			width: 98%;
			height: 2%;
			margin: 4px 1%;
			.headercommandc {
				width: 25%;
				height: auto;
				font-size: 1.6rem;
				font-weight: 600;
				color: white;
				& > form {
					display: block;
					font-weight: 600;
					font-size: 1.2em;
					color: white;
					input[type=submit] {
						background-color: transparent;
						border: none;
						font-size: inherit;
						font-weight: inherit;
						color: inherit;
						&:hover {
							cursor: pointer;
						}
					}
				}
				a:link, a:visited {
					color: white;
					text-decoration: none;
				}
			}  /* headercommandc */
		}	/* headercommandnav */
		/*
		 ** For small screens only
		 */
		#columndisplayd {
			width: 100%;
			height: auto;
			font-weight: 600;
			font-size: 4vw;
			border: none;
			#leftcoldisplayd {
				width: 15%;
				float: left;
				margin: 8px 8px 8px 8px;
				cursor: pointer;
			}
			#rightcoldisplayd {
				width: 15%;
				height: auto;
				margin: 8px 8px 8px 8px;
				float: right;
				cursor: pointer;
				text-align: right;
			}
		}
	}  /* mainheader */
	
	/* ***************************************************************************
	 ** The top menu.  Not currently used on small screens.
	 *****************************************************************************/
	#menud {
		width: 98%;
		margin: 8px 1% 16px 1%;
		background-color: transparent;
		text-align: center;
		font-size: 2vw;
		/* border: 1px solid navy; */
		.menudformd {
			display: inline-block;
			margin: 0px 4px 4px 0px;
			font-size: 2vw;
			border: none;
			a:link,a:visited {
				text-decoration: none;
				font-size: 2vw;
				color: ivory;
				&:hover { color: red }
			}
		}
	} /* menud */
	
	#main {
	/*
	 ** The left and right columns are initially hidden on small screens.
	 **  They now display using CSS and Javascript upon request.
	 */
	#leftcol {  /* leftcol small nested */
		display: none;
		width: 95%;
		height: 1200px;
		margin: 0px 0px 12px 12px;
		float: left;
		position: absolute;
		top: 300px;
		left: 12px;
		z-index: 100;
		overflow-y: auto;
		border: 4px solid navy;
		border-radius: var(--defaultborderradius);
		.innerscrollable {
			margin: 12px 2px 12px 2px;
			padding: 0px 4px 0px 12px;
			overflow-y: auto;
			color: navy;
			border: none;
			p {
				border: none;
				font-size: 2vw;
				color: navy;
			}
		}
		.containerd {
			.titled {
				width: 100%;
				text-align: left;
				margin: 0px 0px 0px 0px;
				padding: 4px 4px 4px 8px;
				font-size: 16pt;
				font-style: italic;
				font-weight: bold;
				color: black;
				background-color: silver;
				border: 1px solid silver;
				.titleimage {
					display: block;
					width: 5%;
					float: left;
					margin-top: 0px;
				}
				.titletxtd {
					padding: 4px 0px 0px 0px;
					font-size: 24pt;
				}
			}
		}
		
		.notesd {  /* The default for small leftcol */
			width: 90%;
			margin: 12px 0px 12px 16px;
			font-size: 2vw;
			font-style: italic;
		}
		
		/*
		 **  Roster stuff -  Should only be available on big screens.  It's here just in case
		 */
		#rosterlinkcontainer {  /* extends containerd */
			width: 100%;
			height: auto;
			margin-bottom: 12px;
			background-color: ivory;
			.rosterd {
				width: 98%;
				height: auto;
				margin: 8px 1% 8px 1%;
				padding: 4px 8px 4px 8px;
				background-color: ivory;
				font-size: 2.5vw;
				color: green;
				border: 1px solid navy;
				border-radius: var(--defaultborderradius);
				.rosterlinkd {
					width: 95%;
					height: auto;
					margin: 4px 0px 4px 12px;
					padding-bottom: 8px;
					border-bottom: 2px solid green;
				}
				a:link {
					color: red;
					text-decoration: none;
					font-size: 3vw;
				}
				a:visited {
					color: red;
					text-decoration: none;
					font-size: .8vw;
				}
				.rosterlinkinstructions {
					width: 95%;
					height: auto;
					margin: 4px 0px 4px 12px;
					font-size: 3vw;
					color: green;
				}
				.notesd {
					color: red;
					font-size: 3vw;
				}
			}  /* rosterd */
		}  /* rosterlinkcontainer */
		
		#newscontainer { /* leftcol small - extends containerd */
			width: 100%;
			height: 1200px;
			background-color: ivory;
			overflow-y: auto;
			overflow-x: hidden;
			#newsheader {
				background-color: ivory;
				.newsbuttonnew {
					display: block;
					width: 90%;
					height: auto;
					margin: 8px 0px 8px 5%;
					cursor: pointer;
					background-color: blueviolet;
					font-size: 4vw;
					color: ivory;
					border: 1px solid grey;
					border-radius: 10px;
				}
				.newsd {
					width: 98%;
					height: auto;
					margin: 8px 1% 0px 1%;
					padding: 4px 4px 4px 4px;
					font-weight: 400;
					border: 1px solid grey;
					border-radius: var(--defaultborderradius);
					p {
						width: 95%;
						height: auto;
						margin: 0px 0px 0px 6px;
						font-size: 4vw;
					}
					.newsitemmtime {
						width: 95%;
						height: auto;
						margin: 6px 0px 4px 8px;
						font-size: 4vw;
						font-style: italic;
						font-weight: 400;
						color: navy;
					}
					.newsitemtitle {
						width: 95%;
						height: auto;
						margin: 6px 0px 4px 8px;
						font-size: 4.5vw;
						font-weight: 700;
						color: navy;
					}
					.newsitemimage {
						width: 95%;
						height: auto;
						margin: 6px 4px 4px 6px;
						border: 1px solid transparent;
						border-radius: var(--defaultborderradius);
					}
					.newsitembody {
						width: 95%;
						height: auto;
						margin: 6px 4px 4px 6px;
						font-size: 4vw;
						font-weight: 400;
						border: none;
					}
					.newsitembody p {
						margin: 0px 0px 12px 0px;
						font-size: 4vw;
						font-weight: 400;
						border: none;
					}
					.newsadmind {
						.newssearchid {
							width: 95%;
							height: auto;
							margin: 8px 0px 0px 8px;
							background-color: transparent;
							font-size: 4.1vw;
							font-style: italic;
							color: navy;
						}
						.newsbuttonedit {
							display: block;
							width: 90%;
							height: auto;
							margin: 8px 0px 8px 5%;
							cursor: pointer;
							background-color: lightgreen;
							font-size: 4.1vw;
							color: black;
							border: 1px solid grey;
							border-radius: 10px;
						}
						.newsbuttonpub {
							display: block;
							width: 90%;
							height: auto;
							margin: 8px 0px 8px 5%;
							cursor: pointer;
							background-color: yellow;
							font-size: 4.1vw;
							color: black;
							border: 1px solid grey;
							border-radius: 10px;
						}
						.newsbuttonunpub {
							display: block;
							width: 90%;
							height: auto;
							margin: 8px 0px 8px 5%;
							cursor: pointer;
							background-color: pink;
							font-size: 4.1vw;
							color: black;
							border: 1px solid grey;
							border-radius: 10px;
						}
						.newsbuttonremove {
							display: block;
							width: 90%;
							height: auto;
							margin: 8px 0px 8px 5%;
							cursor: pointer;
							background-color: red;
							font-size: 4.1vw;
							color: ivory;
							border: 1px solid grey;
							border-radius: 10px;
						}
						.newssearchbutton {
							display: block;
							width: 90%;
							height: auto;
							margin: 8px 0px 8px 5%;
							cursor: pointer;
							background-color: lightgreen;
							font-size: 4.1vw;
							color: navy;
							border: 1px solid grey;
							border-radius: 10px;
						}
					} /* newsadmind */
				} /* newsd */
			} /* newsheader */
		} /* newscontainer */
		
	} /* leftcol small nested */
	
	#rightcol {  /* small nested */
		width: 95%;
		height: 1300px;
		margin: 0px 12px 12px 0px;
		float: right;
		display: none;
		position: absolute;
		top: 300px;
		left: 2%;
		z-index: 150;
		background-color: ivory;
		overflow-y: auto;
		border: 4px solid navy;
		border-radius: var(--defaultborderradius);
		
		.containerd {
			.titled {
				width: 100%;
				text-align: left;
				margin: 0px 0px 0px 0px;
				padding: 4px 4px 4px 8px;
				font-size: 16pt;
				font-style: italic;
				font-weight: bold;
				color: black;
				background-color: silver;
				border: 1px solid silver;
				.titleimage {
					display: block;
					width: 5%;
					float: left;
					margin-top: 0px;
				}
				.titletxtd {
					padding: 4px 0px 0px 0px;
					font-size: 24pt;
				}
			}
		}
		
		.notesd {  /* The default for small rightcol */
			width: 90%;
			margin: 12px 1%;
			font-size: 2vw;
			font-style: italic;
		}
		
		#doclinkscontainer,#doctraininglist,#docgenerallist,#docsponsorlist,#docalllist,#docrulebooklist {
			width: 98%;
			height: 620px;
			margin: 12px 1% 24px 1%;
			padding: 0px 0px 12px 0px;
			background-color: transparent;
			overflow-y: auto;
			border: 2px solid navy;
			border-radius: var(--defaultborderradius);
			#doclinkstext {
				display: flex;
				flex-direction: column;
				gap: 6px;
				width: 96%;
				height: auto;
				padding: 0px 2px 12px 4px;
				font-size: 1.8rem;
				color: navy;
				& > div {
					a:link, a:visited {
						color: royalblue;
						text-decoration: none;
						&:hover {
							color: red;
							text-decoration: none;
						}
					}
				}	/* doclinkd */
			}
		} /* doclinkscontainer */
	} /* rightcol */
	
	/* *******************************************************************
	 ** The last message in the password change flow - Not in #centercol!
	 ******************************************************************** */
	#mastercontainer  {  /*  This is NOT in centercol */
		width: 98%;
		height: auto;
		margin: 24px 1% 0px 1%;
		border: 1px solid silver;
		border-radius: var(--defaultborderradius);
		.titled {
			width: 100%;
			text-align: left;
			margin: 0px 0px 0px 0px;
			padding: 0px 4px 8px 8px;
			font-size: 10pt;
			font-style: italic;
			font-weight: bold;
			color: black;
			background-color: silver;
			border: 1px solid silver;
		}
		.titleimage {
			width: 28px;
			display: block;
			float: left;
			margin-top: 1px;
		}
		.titletxtd {
			padding: 4px 0px 0px 0px;
		}
		#changepasswordcontainer {
			width: 90%;
			min-height: 300px;
			margin: 12px 0px 0px 12px;
			font-size: 12pt;
			color: navy;
			#changestatusd {
				width: 95%;
				height: auto;
				padding: 2px 8px 8px 8px;
				margin: 12px 0px 0px 12px;
				font-size: 4vw;
				font-weight: 600;
				color: red;
			}
			#changepassworderrord {
				width: 95%;
				height: auto;
				padding: 2px 8px 8px 8px;
				margin: 12px 0px 0px 12px;
				color: navy;
				font-size: 3.5vw;
				border: none;
				#messaged {
					width: 90%;
					height: auto;
					border: none;
				}
				#logoutformd  {
					width: 90%;
					height: auto;
					background-color: transparent;
					border: none;
					#pwchangelogoutform input[type=submit] {
						display: block;
						width: 30%;
						height: auto;
						font-size: 4vw;
						cursor: var(--allbuttoncursor);
						background-color: var(--submitbuttoncolor);
						border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
						border-radius: var(--defaultborderradius);
						&:hover { border-color: var(--submitbuttonhovercolor); }
					}
				}
			}
		}  /* changepasswordcontainer */
	}  /* mastercontainer */
	
	/*
	 **  Center Column - small nested
	 */
	#centercol {
		.schedmodtimed {
			width: 98%;
			height: auto;
			margin: 8px 1%;
			background-color: transparent;
			font-size: 1em;
			font-style: italic;
			color: navy;
		}
		.containerd, .schedule_container {
			width: 98%;
			height: 1450px;
			margin: 12px 1% 12px 1%;
			padding-bottom: 12px;
			overflow-y: auto;
			background-color: ivory;
			color: ivory;
			border: 2px solid navy;
			border-radius: var(--defaultborderradius);
			overflow: hidden;
			.titled {
				width: 100%;
				text-align: left;
				margin: 0px 0px 0px 0px;
				padding: 4px 4px 4px 8px;
				font-size: 16pt;
				font-style: italic;
				font-weight: bold;
				color: black;
				background-color: silver;
				border: 1px solid silver;
			}
			.titleimage {
				display: block;
				width: 5%;
				float: left;
				margin-top: 0px;
			}
			.titletxtd {
				padding: 4px 0px 0px 0px;
				font-size: 24pt;
			}
			#schedsearchinputd {   /* shared acrooss multiple sections */
				width: 98%;
				height: auto;
				margin: 8px 1% 8px 1%;
				padding: 8px 8px 8px 12px;
				background-color: ivory;
				font-weight: 500;
				font-size: 3vw;
				color: navy;
				border: 2px solid navy;
				border-radius: var(--defaultborderradius);
				.notesd {
					width: 98%;
					margin: 8px 1% 8px 1%;
					height:auto;
					font-style: normal;
					font-size: 3vw;
				}
				input[type=text] {
					width: 30%;
					height: auto;
					padding-left: 12px;
					font-size: 3vw;
					color: navy;
					border: 2px solid grey;
					border-radius: var(--defaultborderradius);
				}
			}  /* schedsearchinputd */
			.schedule_body {
				width: 98%;
				height: 1000px;
				margin: 8px 0px 12px 4px;
				padding: 4px 8px 12px 8px;
				overflow-y: auto;
				overflow-x: hidden;
				background-color: ivory;
				color: navy;
				font-family: verdana;
				font-size: 16px;
				border: 1px solid navy;
				border-radius: var(--defaultborderradius);
				.meetd {
					width: 99%;
					height: auto;
					margin: 8px .5% 0px .5%;
					padding: 8px 8px 8px 8px;
					border: 1px solid black;
					border-radius: var(--defaultborderradius);
				} /* meetd */
				.schedmodtimed {
					width: 98%;
					height: auto;
					margin: 8px 1%;
					background-color: ivory;
					font-size: 1.5em;
					font-style: italic;
					color: navy;
				}
			}  /* schedule_body */
			
			/* The inside [of .containerd] container */
			.innerscrollable {
				width: 95%;
				height: 1300px;
				padding: 12px 12px 0px 12px;
				margin: 8px 0px 8px 8px;
				overflow-y: auto;
				overflow-x: hidden;
				background-color: ivory;
				border: 1px solid navy;
				border-radius: var(--defaultborderradius);
				p {     /*  for documents likepageinfo */
					background-color: transparent;
					color: black;
					font-family: verdana;
					font-size: 20pt;
				}
				ul {     /*  for documents like pageinfo */
					background-color: transparent;
					color: black;
					font-family: verdana;
					font-size: 20pt;
				}
				table {     /*  for documents like pageinfo */
					background-color: transparent;
					color: black;
					font-family: verdana;
					font-size: 20pt;
					border: 1px solid navy;
					border-collapse: collapse;
					th {     /*  for documents like pageinfo */
						padding: 0px 4px 4px 4px;
						background-color: silver;
						color: navy;
						font-family: verdana;
						font-size: 20pt;
						border: 1px solid navy;
						border-collapse: collapse;
					}
					td {     /*  for documents like pageinfo */
						padding: 4px 4px 4px 4px;
						background-color: transparent;
						color: black;
						font-family: verdana;
						font-size: 20pt;
						border: 1px solid navy;
						border-collapse: collapse;
					}
				}
			}	/* F#useredit */
			
			#schedlockd {
				width: 80%;
				height: 500px;
				margin: 50px 0px 50px 25%;
				padding: 8px 8px 8px 8px;
				background-color: ivory;
				font-size: 3vw;
				color: navy;
				border: 2px solid red;
				border-radius: var(--defaultborderradius);
			}
			
			/*
			 **  Backend stuff
			 */
			.generalbackendsection, .generalbackendd {
				width: 98%;
				height: auto;
				margin: 4px 1%;
				padding: 4px;
				background-color: ivory;
				color: navy;
				font-size: 1em;
				border: 2px solid navy;
				border-radius: var(--defaultborderradius);
				.generalbackendsectiontitle {
					width: 98%;
					height: auto;
					margin: 8px 1%;
					font-weight: 600;
					font-size: 2.2em;
					border: none;
				}
				.generalbackendsubsection {
					width: 94%;
					height: auto;
					margin: 12px 3%;
					font-weight: 400;
					font-size: 1.3em;
					border: none;
				}
				.generalbackendsubtitle {
					width: 98%;
					height: auto;
					margin: 0px 1%;
					font-weight: 600;
					font-size: 1em;
					border: none;
				}
			}
			.generalbackendbuttonsection {
				width: 98%;
				height: auto;
				margin: 4px 1%;
				padding: 8px;
				background-color: ivory;
				color: navy;
				font-size: 2em;
				border: none;
				form {
					input[type=submit] {
						width: 50%;
						height: auto;
						margin: 12px 25%;
						background-color: var(--submitbuttoncolor);
						font-size: 2.2em;
						font-weight: 500;
						cursor: var(--allbuttoncursor);
						color: var(--submitbuttontextcolor);
						border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
						border-radius: var(--defaultborderradius);
						&:hover {border-color: var(--submitbuttonborderhovercolor);}
					}
				}
			}
			.generalbackendbuttonsectionsched {
				display: flex;
				flex-direction: row;
				justify-content: space-evenly;
				gap: 10px;
				width: 100%;
				margin-top: 12px;
				background-color: ivory;
				color: navy;
				font-size: 1.5em;
				border: none;
				form {
					display: block;
					width: 30%;
					height: auto;
					input[type=submit] {
						width: 100%;
						height: 100px;
						font-size: 1.3em;
						cursor: var(--allbuttoncursor);
						background-color: var(--submitbuttoncolor);
						color: var(--submitbuttontextcolor);
						border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
						border-radius: var(--defaultborderradius);
						&:hover {border-color: var(--submitbuttonborderhovercolor);}
					}
					#schedbacksubmit { background-color: lightGreen; color: navy }
					#schedsearchsubmit { background-color: navy; color: ivory }
					#schedsamedatesubmit { background-color: lightBlue; color: navy; font-size: 1.1em; }
				}
			}  /* generalbackendbuttonsectionsched */
			
		}  /* .containerd */
		
		.notesd {  /* The default for small centcol */
			width: 90%;
			margin: 12px 0px 12px 16px;
			font-size: 1em;
			font-style: italic;
		}
		
		#olschedemailbackend {
			background-color: ivory;
			color: navy;
			font-size: 3vw;
			#olemailfeedbackd {
				width: 95%;
				height: auto;
				margin: 12px 0px 8px 12px;
				padding: 4px 4px 4px 8px;
				background-color: transparent;
				color: navy;
				border: 2px solid navy;
				border-radius: var(--defaultborderradius);
				#schedemailwarningd {
					width: 95%;
					height: auto;
					margin: 4px 0px 4px  12px;
					padding: 4px 4px 4px  8px;
					background-color: ivory;
					color: red;
					font-size: 3vw;
					border: 2px solid red;
					border-radius: var(--defaultborderradius);
				}
				form {
					input[type=submit] {
						width: 30%;
						height: auto;
						margin: 12px 0px 12px 35%;
						cursor: var(--allbuttoncursor);
						background-color: var(--submitbuttoncolor);
						color: var(--submitbuttontextcolor);
						border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
						border-radius: var(--defaultborderradius);
						&:hover {border-color: var(--submitbuttonborderhovercolor);}
					}
				}
			}
		}
		
		/*
		 **  Fees stuff
		 */
		#feecontainer {  /* extends containerd */
			background-color: ivory;
			#feetabled {
				width: 98%;
				height: auto;
				margin: 4px 1% 8px 1%;
				padding: 4px 4px 4px 4px;
				font-size: 28px;
				border: 1px solid grey;
				border-radius: var(--defaultborderradius);
				.feestable {
					width: 97%;
					height: auto;
					margin: 8px 0px 8px 12px;
					border: 1px solid grey;
					border-collapse: collapse;
					tr {
						th {
							background-color: lightblue;
							color: navy;
							font-weight: 700;
							border: 1px solid grey;
							.feestableheader {
								border: 1px solid navy;
								background-color: lightgrey;
								text-align: center;
								color: navy;
								border-collapse: collapse;
							}
						}
						.feestablecategory {
							padding-left: 4px;
							background-color: transparent;
							text-align: left;
							color: navy;
							font-weight: 600;
							
						}
						.feestablefee {
							background-color: transparent;
							text-align: center;
							color: red;
							font-weight: 500;
						}
						td {
							background-color: transparent;
							color: navy;
							font-weight: 500;
							border: 1px solid grey;
						}
					}
				}
				#feenotes {
					color: navy;
				}
				.feeslistheaderd {
					width: 90%;
					height: auto;
					margin: 20px 0px 0px 12px;
					padding: 8px 8px 8px 8px;
					font-size: 3.5vw;
					font-weight: 700;
					color: navy;
				}
			}
			#feenotes {  /* extends notesd for now */
				width: 98%;
				height: auto;
				font-size: 2.5vw;
			}
			.feetitled{
				width: 95%;
				height: auto;
				margin: 0px 0px 8px 0px;
				font-size: 16px;
				font-weight: 600;
				color: navy;
				border: none;
			}
			
			/*
			 ** Edit Fees
			 */
			#editfeesd {
				#newfeeformd {
					width: 98%;
					height: auto;
					margin: 12px 1% 12px 1%;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					.feetitled {
						width: 98%;
						height: auto;
						margin: 12px 1% 12px 1%;
						padding: 8px;
						font-size: 4vw;
						color: navy;
					}
					#newfeeform {
						width: 98%;
						height: auto;
						margin: 12px 1% 12px 1%;
						.feenewoption {
							color: blue;
							font-style: italic;
						}
						select {
							margin: 12px 12px 0px 0px;
							float: left;
							font-size: 4vw;
						}
						#newfeesportselect {
							width: 60%;
						}
						#newfeeamountd {
							width: 98%;
							height: auto;
							margin: 8px 1% 8px 1%;
							label {
								width: 5%;
								height: auto;
								font-size: 4vw;
								color: navy;
							}
							#newfeeamount {
								display: inline;
								width: 50%;
								height: auto;
								cursor: pointer;
								margin: 8px 8px 8px 8px;
								background-color: lightblue;
								text-align: right;
								font-size: 4vw;
								border: 2px solid grey;
							}
						}  /* newfeeamountd */
						input[type=submit] {  /* or .newfeesubmit */
							width: 30%;
							height: auto;
							margin: 8px 0px 0px 35%;
							font-size: 4vw
							cursor: var(--allbuttoncursor);
							background-color: var(--submitbuttoncolor);
							color: var(--submitbuttontextcolor);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover {border-color: var(--submitbuttonborderhovercolor);}
						}
					}  /* newfeeform */
				}  /* newfeeformd */
				.feeinputsd {
					width: 95%;
					height: auto;
					margin: 8px 0px 0px 12px;
					padding: 8px 8px 8px 8px;
					border: 2px solid navy;
					border-radius: var(--defaultborderradius);
					.feetitled {
						width: 98%;
						height: auto;
						margin: 12px 1% 12px 1%;
						padding: 8px;
						font-size: 4vw;
						color: navy;
					}
					.feelined {
						width: 98%;
						height: auto;
						margin: 8px 1% 0px 1%;
						padding: 8px 8px 8px 8px;
						border: 1px solid red;
						font-size: 3vw;
						color: navy;
						.feelinedf {
							.feecatd {
								width: 98%;
								height: auto;
								margin: 8px 1% 8px 1%;
								font-weight: 600;
								font-size: 3vw;
							}
							label {
								width: 20%;
								height: auto;
								float: left;
								margin: 8px 0px 0px 8px;
								padding: 4px 4px 4px 4px;
								font-size: 4vw;
								color: navy;
							}
							.feeamount {
								width: 20%;
								height: auto;
								margin: 8px 0px 0px 8px;
								padding: 4px 4px 4px 4px;
								float: left;
								font-size: 4vw;
							}
							input[type=submit] {
								width: 27%;
								height: auto;
								margin: 8px 0px 0px 8px;
								cursor: var(--allbuttoncursor);
								text-align: center;
								font-size: 4vw;
							}
							.feelinesubmit {
								background-color: var(--submitbuttoncolor);
								color: var(--submitbuttontextcolor);
								border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
								border-radius: var(--defaultborderradius);
								&:hover {border-color: var(--submitbuttonborderhovercolor);}
							}
							.feelineremove {
								background-color: red;
								color: ivory;
								border: 2px solid red;
								border-radius: var(--defaultborderradius);
							}
							.feebatchremoved {
								width: 95%;
								height: auto;
								margin: 8px 0px 0px 8px;
								padding: 4px 4px 12px 4px;
								border: 1px solid green;
								.feeremovelabel {
									display: block;
									width: 55%;
									height: auto;
									color: navy;
									font-weight: 500;
								}
							}
						}  /* .feelinef */
					}  /* feelined*/
				}  /* feeinputsd */
			}  /* editfeesd */
		}  /* feecontainer - fees stuff */
		
		/*
		 ** Login Form
		 */
		#loginformcontainer {   /* extends containerd */
			height: 700px;
			background-color: ivory;
			margin-bottom: 24px;
			#loginformd {
				width: 90%;
				height: auto;
				margin: 12px 0px 0px 4%;
				padding: 12px 12px 12px 18px;
				background-color: lightblue;
				border: 4px solid navy;
				border-radius: var(--defaultborderradius);
				#loginform {
					font-size: 28pt;
					font-weight: bold;
					label {
						display: block;
						width: 80%;
						margin: 12px 0px 0px 12px;
						font-size: 4vw;
						color: black;
					}
					input[type=text] {
						width: 80%;
						height: auto;
						margin: 12px 0px 0px 12px;
						font-size: 5vw;
						text-transform: lowercase;
					}
					input[type=password] {
						width: 80%;
						height: auto;
						margin: 12px 0px 0px 12px;
						font-size: 5vw;
					}
					#loginbuttond {
						width: 50%;
						margin: 20px 0px 0px 35%;
						input[type=submit] {
							width: 50%;
							height: auto;
							cursor: pointer;
							background-color: lightgreen;
							color: navy;
							font-weight: 500;
							font-size: 4vw;
							border: 2px solid grey;
							border-radius: var(--defaultborderradius);
							&:hover {
								border: 2px solid red;
							}
						}
					}
					#loginformuser {
						text-transform: lowercase;
					}
				} /* loginform */
				#loginmessaged {
					width: 90%;
					height: auto;
					margin: 20px 0px 0px 12px;
					padding: 12px 12px 12px 12px;
					font-size: 3vw;
					color: black;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
				}
				#forgotpasswordlinkd {
					width: 45%;
					height: auto;
					margin: 12px 12px 12px 12px;
					padding: 2px 8px 2px 8px;
					cursor: pointer;
					float: right;
					text-align: center;
					background-color: ivory;
					font-size: 3.2vw;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					&:hover {
						border: 2px solid red;
					}
				}
			} /* loginformd */
			
			/*
			 ** For when the user doesn't provide a valid username/email response
			 */
			#emailresetd {
				width: 98%;
				height: auto;
				margin: 24px 1% 24px 1%;
				padding: 8px;
				background-color: ivory;
				font-size: 4vw;
				color: navy;
				border: 2px solid navy;
				border-radius: var(--defaultborderradius);
				#emaildoned {
					width: 50%;
					height: auto;
					margin: 24px 25% 24px 25%;
					input[type=button] {
						width: 60%;
						margin: 4px 20% 0px 20%;
						background-color: pink;
						font-size: 6vw;
						font-weight: 600;
						color: navy;
						border: 2px solid;
						border-radius: var(--defaultborderradius);
					}
				}
			}
		} /* loginformcontainer */
		
		/* *************************************************************
		 **  Forgot password stuff
		 **************************************************************** */
		#forgotpasswordformd {
			width: 95%;
			height: auto;
			padding: 8px;
			margin: 12px 0px 12px 12px;
			#forgotpasswordform {
				display: block;
				padding: 8px;
				border: 1px solid navy;
				#forgotpasswordformmsgd {
					width: 90%;
					height: auto;
					margin: 12px 0px 24px 5%;
					color: red;
					font-size: 3vw;
				}
				label {
					display: block;
					width: 50%;
					height: auto;
					margin: 12px 0px 0px 10%;
					color: green;
					font-size: 4vw;
				}
				input[type=text]{
					display: block;
					width: 50%;
					height: auto;
					display: block;
					margin: 0px 0px 12px 10%;
					font-size: 4vw;
				}
				input[type=email]{
					display: block;
					width: 70%;
					height: auto;
					display: block;
					margin: 0px 0px 12px 10%;
					font-size: 4vw;
				}
				input[type=submit] {
					display: block;
					width: 25%;
					height: auto;
					margin: 12px 0px 12px 25%;
					font-weight: 500;
					font-size: 4.5vw;
					cursor: var(--allbuttoncursor);
					background-color: var(--submitbuttoncolor);
					color: var(--submitbuttontextcolor);
					border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
					border-radius: var(--defaultborderradius);
					border: 2px solid var(--submitbuttonbordercolor);
					&:hover { border-color: var(--submitbuttonborderhovercolor); }
				}
			} /* forgotpasswordform */
		}  /* forgotpasswordformd */
		
		/*
		 **  Password reset response
		 */
		#sendpasswordresetd {
			#emailresetmessaged {
				width: 80%;
				height: auto;
				margin: 24px 0px 24px 10%;
				padding: 8px 8px 8px 8px;
				background-color: ivory;
				color: navy;
				font-size: 3vw;
				border: 2px solid navy;
			}
			#passwordresetendmessaged {
				width: 80%;
				height: auto;
				margin: 24px 0px 24px 10%;
				padding: 8px 8px 8px 8px;
				background-color: ivory;
				color: navy;
				font-size: 3vw;
				border: 2px solid navy;
			}
			input[type=button] {
				display: block;
				width: 15%;
				height: auto;
				margin: 12px 0px 12px 40%;
				background-color:  lightblue;
				font-weight: 500;
				font-size: 4vw;
				border: 2px solid lightblue;
				border-radius: var(--defaultborderradius);
				&:hover {
					border: 2px solid red;
				}
			}
		}  /* sendpasswordresetd */
		
		/*
		 **  Messaging
		 */
		#messagingcontainer {  /* extends containerd */
			width: 98%;
			height:auto;
			padding: 8px 4px 12px 4px;
			color: navy;
			#msgtitled {
				width: 95%;
				height: auto;
				margin: 4px 0px 4px 12px;
				background-color: transparent;
				color: navy;
				font-size: 28pt;
			}
			.msggroupd {
				width: 98%;
				height: auto;
				margin: 12px 1% 8px 1%;
				padding: 12px 4px 8px 12px;
				background-color: transparent;
				color: navy;
				border: 1px solid navy;
				border-radius: var(--defaultborderradius);
				.msgsmslink, .msgemaillink {
					width: 90%;
					height: auto;
					margin: 12px 0px 4px 12px;
					background-color: transparent;
					color: navy;
				}
				a:visited, a:link {
					text-decoration: none;
					color: navy;
					font-size: 28pt;
				}
				.msgemailsized {
					width: 50%;
					height: auto;
					margin: 12px 0px 4px 12px;
					background-color: transparent;
					color: red;
					font-style: italic;
					font-size: 22px;
				}
			}
		}
		
		/* ******************************************************
		 ** Availability - Small Devices
		 ** *****************************************************/
		
		/*
		 **  The below are for the small calendars presented on the web pages.
		 **
		 **  07/11/2021 - Increased width to 30% to (hopefully) fix 1280x1024 monitors or less running Edge
		 **  03/16/2024 - Went aspect-ratio for smallcaldaycelld -  Much better!
		 **  06/16/2024 - Switched to nested!
		 */
		#smallcalavailmasterd {   /* Really a fieldset */
			position: relative;
			width: 90%;
			height: 800px;
			margin: 12px 0px 12px 5%;
			overflow-y: auto;
			background-color: ivory;
			border: 1px solid red;
			legend {
				font-size: 3vw;
			}
			.availkeyd {
				width: 98%;
				height: auto;
				margin: 12px .5% 4px .5%;
				color: navy;
				font-style: italic;
				.keyd {
					display: inline-block;
					width: 30%;
					height: auto;
					margin: 12px .5% 12px .5%;
					.availkeylabeld {
						width: 80%;
						height: 20px;
						margin: 0px 8px 0px 4px;
						padding: 4px;
						float: left;
						vertical-align: middle;
						color: navy;
						font-size: 2.5vw;
						font-style: italic;
					}
					.availkeycolord {
						width: 10%;
						height: auto;
						padding: 4px;
						float: left;
						aspect-ratio: 1/1;
						border: 1px solid transparent;
						border-radius: 8px;
					}
				}
			}
			.smallcalusernamec {
				width: 90%;
				height: auto;
				margin: 8px 0px 0px 12px;
				font-size: 32pt;
				color: navy;
				border: none;
			}
			#keynotesd {
				width: 95%;
				height: auto;
				margin: 8px 0px 4px 22px;
				font-style: italic;
				font-size: 24pt;
				color: green;
			}
			.useravailkeylabeld {
				width: 15%;
				height: 20px;
				margin: 0px 8px 0px 4px;
				padding: 4px 0px 0px 2px;
				float: left;
				vertical-align: middle;
				color: navy;
				font-size: 22pt;
				font-style: italic;
			}
			.useravailkeycolord {
				width: 15%;
				height: 50px;
				margin: 0px 0px 0px 8px;
				padding: 4px 0px 0px 4px;
				float: left;
				vertical-align: middle;
				color: navy;
				font-size: 22pt;
				font-style: italic;
			}
			.smallcalmonthd {
				position: relative;
				width: 98%;
				height: auto;
				margin: 12px 0px 12px 1%;
				padding: 2px 2px 12px 2px;
				background-color: ivory;
				text-align: right;
				font-size: 22pt;
				color: green;
				border-bottom: 2px solid navy;
				.smallcalmonthlabeld {
					width: 80%;
					height: auto;
					margin: 4px 0px 4px 0px;
					padding: 2px 2px 2px 0px;
					text-align: left;
					font-size: 5vw;
					font-weight: 700;
					color: navy;
				}
				.smallcalmonthlabeld_bdates {
					width: 90%;
					height: auto;
					margin: 4px 0px 4px 0px;
					padding: 2px 2px 2px 0px;
					text-align: left;
					font-size: 32pt;
					color: BlueViolet;
				}
				.smallcalupdatef {
					display: block;
					width: 50%;
					margin: 8px 0px 4px 20%;
					input[type=submit] {
						width: 98%;
						height: auto;
						margin: 8px 1%;
						text-align: center;
						font-size: 4rem;
						font-weight: 700;
						cursor: var(--allbuttoncursor);
						background-color: var(--submitbuttoncolor);
						color: var(--submitbuttontextcolor);
						border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
						border-radius: var(--defaultborderradius);
						&:hover {border-color: var(--submitbuttonborderhovercolor);}
					}
				}  /* smallcalupdatef */
				.timescellpopup {
					position: absolute;
					top: 0px;
					left: 0px;
					width: 95%;
					height: auto;
					padding: 8px 8px 8px 8px;
					z-index: 10000;
					background-color: lightblue;
					font-size: 22pt;
					text-align: left;
					color: navy;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					.smallcalpopuptitle {
						width: 98%;
						margin: 0px 0px 4px 0px;
						font-size: 12px;
						font-weight: bold;
					}
					.smallcaltime {
						margin: 0px 0px 4px 4px;
					}
				}
				.smallcaldayheadd {  /*  Dimensions here must be the same as .smallcalydaycelld */
					width: 14%;
					height: auto;
					aspect-ratio: 1/1;
					float: left;
					margin: 0px 0px 0px 0px;
					background-color: lightblue;
					text-align: center;
					vertical-align: middle;
					font-size: 3vh;
					color: navy;
					border: 1px solid grey;
				}
				.smallcaldaycelld {		/*  Dimensions here must be the same as .smallcalydayheadd */
					position: relative;   /*  Need this positioning to allow for the absolute positioning of child divs */
					width: 14%;
					height: auto;
					aspect-ratio: 1/1;
					z-index: 0;
					float: left;
					margin: 0px 0px 0px 0px;
					text-align: center;
					vertical-align: middle;
					background-color: transparent;
					color: navy;
					font-size: 2.5vh;
					border: 1px solid grey;
					/*  This should effectively disable the tel: links stupidly put in by Firefox for the iPhone */
					a:link,a:visited {
						pointer-events: none;
						color: green;
						text-decoration: none;
					}
					.amcelld {
						position: absolute;
						top: 0px;
						left: 0px;
						width: 100%;
						height: 50%;    /* 1/2 of smallcaldaycelld */
						z-index: -10;
					}
					.pmcelld {
						position: absolute;
						top: 50%;
						left: 0px;
						width: 100%;
						height: 50%;    /* 1/2 of smallcaldaycelld */
						z-index: -10;
					}
				}  /* smallcaldaycelld */
				.smallcalnotesd {
					width: 90%;
					height: auto;
					margin: 8px 0px 8px 0px;
					text-align: left;
					color: navy;
					font-size: 22pt;
					font-style: italic;
				}
			}  /* smallcalmonthd */
		}  /* smallcalavailmasterd */
		
		#availfrontendd {  /* Extends .containerd */
			width: 98%;
			height: auto;
			background-color: ivory;
			color: navy;
			#allavailabilityd {
				width: 98%;
				height: 1500px;
				overflow-y: auto;
			}
			#availerrord {
				margin: 12px 0px 12px 12px;
				font-size: 14px;
				color: red;
			}
			#prefformfs {
				width: 98%;
				height: auto;
				margin: 8px 1% 8px 1%;
				background-color: ivory;
				color: navy;
				border: 2px solid navy;
				border-radius: var(--defaultborderradius);
				legend {
					font-size: 3.5vw;
				}
				#prefform {
					.prefformcheckboxd {
						margin-top: 12px;
					}
					label {
						display: inline;
						margin-left: 12px;
						font-size: 3.0vw;
					}
					input.performcheckbox {
						width: 48px;
						height: 48px;
					}
					input[type=text] {
						width: 50%;
						height: auto;
						margin: 0px 0px 0px 24px;
						font-size: 3vw;
					}
					input[type=submit] {
						display: block;
						width: 20%;
						height: auto;
						margin: 24px 0px 12px 20%;
						font-weight: 600;
						font-size: 3em;
						cursor: var(--allbuttoncursor);
						background-color: var(--submitbuttoncolor);
						color: var(--submitbuttontextcolor);
						border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
						border-radius: var(--defaultborderradius);
						&:hover { border-color: var(--submitbuttonborderhovercolor); }
					}
				}  /* preform */
			}  /* perfromfs */
			/* ********************************************************
			 ** Availability Input Calendar
			 ** ******************************************************* */
			.calmonthd {
				width: 98%;
				height: auto;
				margin: 12px 0px 12px 12px;
				padding: 8px 8px 8px 8px;
				background-color: ivory;
				font-style: italic;
				font-size: 18pt;
				color: navy;
				border: 2px solid navy;
				border-radius: var(--defaultborderradius);
				.calmonthlabelc {
					width: 75%;
					height: auto;
					margin: 8px 0px 12px 12px;
					font-size: 4vw;
					font-weight: 600;
					color: navy;
					border: none;
				}
				.caltopnotec {
					width: 95%;
					height: auto;
					margin: 0px 0px 4px 8px;
					color: navy;
					font-size: 2.5vw;
					font-style: italic;
					border: none;
				}
				#calselectalld {
					width: 98%;
					height: auto;
					margin: 8px 1% 0px 1%;
					padding: 0px 0px 0px 10%;
					input[type=button] {
						display: inline;
						margin-right: 12px;
						background-color: royalblue;
						font-size: 4vw;
						color: ivory;
						border: 1px solid green;
						border-radius: 5px;
					}
				}
				.calheadersd {
					width: 98%;
					height: auto;
					margin: 12px 1% 12px 1%;  /* right should be the same as .calformd */
					background-color:transparent;
					border: none;
					.caldayheaderc {
						width: 14%;
						height: auto;
						float: left;
						background-color: lightgrey;
						font-size: 16pt;
						color: navy;
						text-align: center;
						vertical-align: middle;
						border: 1px solid green;
					}
				}
				.calformd {
					width: 98%;
					height: auto;
					margin: 12px 1% 12px 1%;
					background-color:transparent;
					border: none;
					.calformc {
						.caldaycellc {
							width: 14%;
							height: auto;
							aspect-ratio: 1/1;
							float: left;
							color: navy;
							border: 1px solid green;
							.caldaynumberc {
								width: 40%;
								height: auto;
								margin: 0px 8px 0px 0px;
								float: right;
								color: red;
								font-size: 22pt;
								vertical-align: middle;
								text-align: center;
							}
							.calcheckboxd {
								width: 98%;
								height: auto;
								margin: 4px 0px 0px 2px;
								label {
									width: 90%;
									height: auto;
									font-size: 1.5vh;
								}
								input[type=checkbox] {
									display: block;
									width: 100%;
									height: auto;
									aspect-ratio: 1/1;
									font-size: 5vw;
								}
							}
						}
						.calnotestxtd {
							width: 98%;
							margin: 12px 1% 8px 1%;
							textarea {
								width: 99%;
								height: auto;
								margin: 8px .5% 8px .5%;
								font-size: 3vw;
							}
						}
						input[type=submit] {
							width: 50%;
							height: auto;
							margin: 12px 0px 8px 25%;
							text-align: center;
							font-size: 5vw;
							cursor: var(--allbuttoncursor);
							background-color: var(--submitbuttoncolor);
							color: var(--submitbuttontextcolor);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover {border-color: var(--submitbuttonborderhovercolor);}
						}
					}  /* calformf */
				}  /* calformd */
			}  /* calmonthd */
		} /* availfrontendd */
		
		#useravailability {  /* extends containerd */
			background-color: ivory;
			#useravaillistd {
				width: 98%;
				height: 1200px;
				margin: 8px 1%;
				overflow-y: auto;
				border: 1px solid navy;
				border-radius: var(--defaultborderradius);
				.useravailindividuald {
					width: 98%;
					height: auto;
					overflow: hidden;
					margin: 8px 1%;
					padding: 8px;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					.useravailnamed {
						display: inline-block;
						width: 50%;
						height: auto;
						/* margin: 8px 1%; */
						overflow: hidden;
						color: red;
						font-weight: 500;
						font-size: 2em;
						border: none;
						/* border: 1px solid red; */
					}
					.individualform {
						display: inline-block;
						width: 30%;
						height: auto;
						font-weight: 500;
						font-size: 2em;
						input[type=submit] {
							display: inline-block;
							width: 98%;
							margin: 0px 1%;
							height: auto;
							font-weight: 500;
							font-size: 1.5em;
							cursor: var(--allbuttoncursor);
							background-color: var(--submitbuttoncolor);
							color: var(--submitbuttontextcolor);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover {border-color: var(--submitbuttonborderhovercolor);}
						}
						.individualdonesubmit {
							background-color: navy;
							color: ivory;
						}
						.individualshowsubmit {
							background-color: lightgreen;
							color: navy;
						}
					}	/* form */
				}	/* useravailindividuald */
			}
			#availformd {
				width: 98%;
				height: auto;
				margin: 12px 1%;
				padding: 8px;
				border: 2px solid navy;
				#availform {
					display: block;
					width: 98%;
					height: auto;
					margin: 12px 1%;
					label {
						display: block;
						width: 98%;
						height: auto;
						font-size: 2.5em;
						color: red;
					}
					input[type=text] {
						display: block;
						width: 98%;
						height: auto;
						font-size: 2.5em;
						border: 2px solid navy;
					}
					input[type=button]{
						display: block;
						width: 98%;
						height: auto;
						margin: 8px 1%;
						background-color: LightBlue;
						color: navy;
						font-weight: 600;
						font-size: 3em;
					}
				}	/* availform */
			}	/* availformd */
		}  /* useravailability */
		
		/*
		 **  Setables Nested
		 */
		#setablecontainer {  /* extends containerd */
			width: 98%;
			height: auto;
			margin: 4px 1% 4px 1%;
			padding: 0px 0px 12px 0px;
			background-color: ivory;
			color: navy;
			border: 2px solid navy;
			border-radius: var(--defaultborderradius);
			overflow: hidden;
			.setableformd {
				width: 98%;
				height: 60px;
				overflow: hidden;
				margin: 12px 1% 12px 1%;
				padding: 8px 8px 8px 8px;
				background-color: lightgreen;
				border: 1px solid navy;
				border-radius: var(--defaultborderradius);
				.setabletitled {
					width: 90%;
					height: auto;
					margin: 8px 0px 12px 0px;
					float: left;
					font-size: 3vw;
					color: navy;
				}
				.setabletitled button {
					width: 10%;
					height: auto;
					margin: 8px 0px 12px 0px;
					float: left;
					font-size: 15px;
				}
				.setableform {
					label {
						display: block;
						width: 12%;
						height: auto;
						margin: 12px 12px 12px 12px;
						float: left;
						font-size: 3vw;
						color: navy;
					}
					.parameter {
						display: block;
						width: 50%;
						height: auto;
						margin: 12px 12px 12px 12px;
						float: left;
						color: navy;
						text-transform: lowercase;
					}
					.datatype {
						display: block;
						width: 30%;
						height: auto;
						margin: 12px 12px 12px 12px;
						float: left;
						color: navy;
					}
					.selectvals {
						display: block;
						width: 30%;
						height: auto;
						margin: 12px 12px 12px 12px;
						float: left;
						color: navy;
					}
					.description {
						display: block;
						width: 75%;
						height: auto;
						margin: 12px 12px 12px 12px;
						float: left;
						color: navy;
					}
					.value {
						display: block;
						width: 45%;
						height: auto;
						margin: 12px 12px 12px 12px;
						float: left;
						color: navy;
					}
					.boolvalue {
						display: block;
						width: 15%;
						height: auto;
						margin: 12px 12px 12px 12px;
						float: left;
						color: navy;
					}
					.datevalue {
						display: block;
						width: 25%;
						height: auto;
						margin: 12px 12px 12px 12px;
						float: left;
						color: navy;
					}
					.emailvalue {
						display: block;
						width: 45%;
						height: auto;
						margin: 12px 12px 12px 12px;
						float: left;
						color: navy;
					}
					input[type=button] {
						display: block;
						width: 15%;
						height: auto;
						margin: 12px 12px 12px 40%;
						background-color: navy;
						font-size: 18px;
						color: ivory;
						border: 2px solid silver;
						border-radius: var(--defaultborderradius);
					}
				}  /* .setableform */
			}  /* setableformd */
			#existingsetablesd {
				width: 98%;
				height: 500px;
				margin: 12px 1% 0px 1%;
				padding: 0px 0px 0px 8px;
				overflow-y: auto;
				background-color: ivory;
				border: 1px solid navy;
				border-radius: var(--defaultborderradius);
				#setableparamindexd {
					
				}
				.setableexistingformd {
					display: none;
					width: 92%;
					height: 0px;
					margin: 12px 12px 12px 12px;
					padding: 8px 8px 8px 8px;
					background-color: lightyellow;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					.setableinfod {
						width: 92%;
						height: auto;
						margin: 8px 12px 0px 12px;
						padding: 8px 8px 8px 8px;
						background-color: transparent;
						font-size: .8vw;
						font-style: italic;
					}
					.setableexistingtitled {
						width: 90%;
						height: auto;
						margin: 8px 0px 12px 0px;
						font-size: 3vw;
						color: orangered;
					}
					.setabletitled .phighlight {
						color: navy;
						font-weight: 700;
					}
					.setableexistingform {
						label {
							display: block;
							width: 10%;
							height: auto;
							margin: 12px 12px 12px 12px;
							float: left;
							font-size: 2.5vw;
							color: navy;
						}
						.parameter {
							display: block;
							width: 30%;
							height: auto;
							margin: 12px 12px 12px 12px;
							float: left;
							color: navy;
						}
						.datatype {
							display: block;
							width: 20%;
							height: auto;
							margin: 12px 12px 12px 12px;
							float: left;
							color: navy;
						}
						#selectlistd {
							width: 100%;
							height: auto;
							display: none;
						}
						.selectvals {
							display: block;
							width: 20%;
							height: auto;
							margin: 12px 12px 12px 12px;
							float: left;
							color: navy;
						}
						select {
							display: block;
							width: 20%;
							height: auto;
							margin: 12px 12px 12px 12px;
							float: left;
							color: navy;
						}
						.value {
							display: block;
							width: 55%;
							height: auto;
							margin: 12px 12px 12px 12px;
							float: left;
							color: navy;
						}
						.boolvalue {
							display: block;
							width: 15%;
							height: auto;
							margin: 12px 12px 12px 12px;
							float: left;
							color: navy;
						}
						.datevalue {
							display: block;
							width: 25%;
							height: auto;
							margin: 12px 12px 12px 12px;
							float: left;
							color: navy;
						}
						.emailvalue {
							display: block;
							width: 45%;
							height: auto;
							margin: 12px 12px 12px 12px;
							float: left;
							color: navy;
						}
						.description {
							display: block;
							width: 75%;
							height: auto;
							margin: 12px 12px 12px 12px;
							background-color: white;
							float: left;
							color: navy;
						}
						.setableexistingsubmit {
							display: block;
							width: 15%;
							height: auto;
							margin: 12px 12px 12px 20%;
							float: left;
							cursor: pointer;
							background-color: navy;
							font-size: 3.5vw;
							color: ivory;
							border: 2px solid silver;
							border-radius: var(--defaultborderradius);
						}
						.setableremovesubmit {
							display: block;
							width: 15%;
							height: auto;
							margin: 12px 12px 12px 5%;
							float: left;
							cursor: pointer;
							background-color: red;
							font-size: 3.5vw;
							color: ivory;
							border: 2px solid silver;
							border-radius: var(--defaultborderradius);
						}
					}  /* setableexistingform */
					input[type=button] {
						display: block;
						width: 10%;
						height: auto;
						background-color: blueviolet;
						font-size: 3vw;
						color: ivory;
						border: 2px solid silver;
						border-radius: var(--defaultborderradius);
						&:hover {
							border: 2px solid red;
						}
					}
				} /* setable existingformd */
				#setabletable {
					display: block;
					width: 98%;
					height: auto;
					border: 1px solid navy;
					border-collapse: collapse;
					th {
						background-color: navy;
						font-size: 2vw;
						color: ivory;
						border: 1px solid navy;
						border-collapse: collapse;
					}
					td {
						padding: 4px 2px 4px 2px;
						background-color: transparent;
						font-size: 2vw;
						color: navy;
						border: 1px solid navy;
						border-collapse: collapse;
					}
					.paramtd {
						text-decoration: underline;
						cursor: pointer;
					}
					.valuetd {
						
					}
					.desctd {
						
					}
				}
			}  /* existing setablesd */
		}  /* setablecontainer */
		
		/*
		 **  Admin dashboard
		 */
		#admindashcontainer {  /* this extends .containterd */
			background-color: ivory;
			#admindashd {
				width: 98%;
				height: auto;
				padding: 8px 8px 8px 8px;
				color: ivory;
				border: 1px solid silver;
				border-radius: var(--defaultborderradius);
				#admindashgrid {
					display: grid;
					grid-template-columns: repeat(auto-fill, minmax(45%,1fr));
					grid-auto-rows: 60px;
					grid-gap: 10px 8px;
					padding: 8px;
					background-color: OldLace;
					form input[type=submit] {
						width: 98%;
						cursor: pointer;
						text-align: center;
						font-size: 2.5rem;
						color: navy;
						background-color: lightblue;
						border: 1px solid navy;
						border-radius: var(--defaultborderradius);
						&:hover {
							color: ivory;
							background-color: royalblue;
						}
					}
					
				}
				#statsd {
					width: 95%;
					min-height: 50px;
					margin: 12px 0px 12px 8px;
					padding: 8px 8px 8px 8px;
					border: 1px solid red;
					#statstitled {
						width: 95%;
						height: auto;
						font-size: 2rem;
						font-weight: 700;
						color: blueviolet;
						border: none;
					}
					.statsdc {
						width: 95%;
						height: auto;
						margin: 4px 0px 0px 4px;
						font-size: 2rem;
						font-weight: normal;
						color: navy;
						border: none;
					}
				}  /* statsd */
			}	/* admindashd */
		}  /* admindashcontainer */
		
		#fullmenucontainerd {  /* extends .containerd */
			width: 98%;
			height: 1000px;
			background-color: ivory;
			margin: 8px 1%;
			overflow-y: auto;
			overflow-x: hidden;
			#menucontainer {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(45%,1fr));
				grid-auto-rows: min-content;
				grid-gap: 2px 10px;
				.menulistformd 	{
					margin: 12px 8px;
					cursor: pointer;
					text-align: center;
					color: navy;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					form {
						input[type=submit] {	/* The various/different colors are applied by the PHP code */
							width: 98%;
							height: auto;
							background-color: transparent;
							font-size: 2.5rem;
							color: black;
							border: none;
							&:hover {color: red;}
						}
					}
					a {
						background-color: transparent;
						text-align: center;
						text-decoration: none;
						font-size: 2.2rem;
						font-weight: 600;
						color: ivory;
						border: none;
						&:hover {color: red;}
					}
				}
			}
		} /* fullmenucontainerd */
		
		/*
		 **  News centercol small
		 */
		#newscontainer {
			width: 98%;
			height: 1000px;
			background-color: ivory;
			margin: 8px 1% 8px 1%;
			overflow-y: auto;
			overflow-x: hidden;
			.newsbuttonnew {
				display: block;
				width: 40%;
				height: auto;
				margin: 8px 30% 8px 30%;
				cursor: pointer;
				background-color: blueviolet;
				font-size: 3vw;
				color: ivory;
				border: 1px solid grey;
				border-radius: 10px;
			}
			.newsd {
				width: 98%;
				height: 1200px;
				margin: 8px 1% 0px 1%;
				padding: 4px 4px 4px 4px;
				overflow-y: auto;
				font-weight: 400;
				font-size: 1vw;
				border: 2px solid red;
				border-radius: var(--defaultborderradius);
				.newsitemmtime {
					width: 95%;
					height: auto;
					margin: 6px 0px 4px 8px;
					font-size: 2vw;
					font-style: italic;
					font-weight: 400;
					color: navy;
				}
				.newsitemtitle {
					width: 95%;
					height: auto;
					margin: 6px 0px 4px 8px;
					font-weight: 700;
					font-size: 3.5vw;
					color: navy;
				}
				.newsitemimage {
					width: 98%;
					height: auto;
					margin: 6px 1% 4px 1%;
					border: 1px solid transparent;
					border-radius: var(--defaultborderradius);
				}
				.newsitembody {
					width: 95%;
					height: auto;
					margin: 6px 4px 4px 6px;
					padding: 8px 4px 4px 4px;
					font-size: 2.75vw;
					font-weight: 400;
					color: navy;
					border: none;
				}
				.newsitembody p {
					width: 95%;
					height: auto;
					margin: 0px 0px 12px 0px;
					color: navy;
					border: none;
				}
				.news_image_left {
					display: block;
					float: left;
					width: 30%;
					margin: 6px 12px 4px 0px;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
				}
				.news_image_right {
					display: block;
					float: right;
					width: 30%;
					margin: 6px 4px 4px 12px;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
				}
				.newsadmind {
					width: 98%;
					height: auto;
					margin: 12px 1% 0px 1%;
					background-color: transparent;
					color: navy;
					.newssearchid {
						width: 98%;
						height: auto;
						margin: 8px 0px 0px 8px;
						background-color: transparent;
						font-size: 3vw;
						font-style: italic;
						color: navy;
					}
					.newsbuttonedit {
						display: inline;
						width: 25%;
						height: auto;
						margin: 18px 0px 8px 5%;
						cursor: pointer;
						background-color: lightgreen;
						font-size: 4vw;
						color: black;
						border: 1px solid grey;
						border-radius: 10px;
					}
					input[type=submit] {
						display: inline;
						width: 25%;
						height: auto;
						float: left;
						margin: 12px 0px 0px 5%;
						cursor: pointer;
						font-size: 4vw;
						border: 1px solid grey;
						border-radius: 10px;
					}
					.newsbuttonpub {
						background-color: yellow;
						color: black;
					}
					.newsbuttonunpub {
						background-color: pink;
						color: black;
					}
					.newsbuttonremove {
						background-color: red;
						color: ivory;
					}
				} /* .newsadmind */
			}  /* .newsd */
		}  /* #newscontainer */
		
		/*
		 **  Confirmations
		 */
		#conrptcontainer {  /* extends .containerd */
			background-color: ivory;
			#confirmreportf {
				display: block;
				width: 30%;
				height: auto;
				margin: 24px 0px 12px 48px;
				input[type=submit] {
					display: block;
					width: 100%;
					height: auto;
					margin-right: 8px;
					background-color: lightgreen;
					font-size: 3vw;
					color: navy;
				}
			}
			#confirmsearchlabel {
				display: inline-block;
				margin-left: 48px;
				margin-right: 8px;
				font-size: 2em;
			}
			#confirmsearchinput {
				display: inline-block;
				margin-right: 8px;
				font-size: 2em;
			}
			#confirmsearchbutton {
				display: inline-block;
				width: 20%;
				height: auto;
				background-color: lightblue;
				font-size: 2em;
				color: navy;
				border: 1px solid lightblue;
				border-radius: var(--defaultborderradius);
			}
			#conrptmasterd {
				width: 98%;
				height: 1500px;
				overflow-y: auto;
				color: navy;
				.conrptuserd {
					width: 98%;
					height: auto;
					margin: 12px 1%;
					padding: 8px 8px 8px 8px;
					font-weight: 600;
					font-size: 2em;
					color: navy;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					.conusername {
						width: 95%;
						height: auto;
						margin: 4px 0px 0px 0px;
						font-weight: 700;
						font-size: 2em;
						color: navy;
						border: none;
					}
					.conrptdata {
						display: flex;
						flex-direction: row;
						width: 98%;
						height: auto;
						margin: 4px 1%;
						&>div {
							margin-right: 4px;
							overflow: hidden;
							font-size: .8em;
							font-weight: normal;
						}
						.conrpteventnumber {
							width: 8%;
						}
						.conrptstatus {
							width: 18%;
						}
						.conrptdate {
							width: 25%;
						}
						.conrpteventtitle {
							width: 45%;
						}
						.conrptmessage {
							width: 20%;
						}
						.constatusaccept {
							width: 95%;
							height: auto;
							margin: 0px 0px 0px 8px;
							padding: 0px 8px 0px 8px;
							font-size: 2vw;
							color: green;
							border: none;
						}
						.constatusdecline {
							width: 95%;
							min-height: 10px;
							margin: 0px 0px 0px 8px;
							padding: 0px 8px 0px 8px;
							color: red;
							font-size: 1em;
							border: none;
						}
					}
				}	/* conrptuserd */
			}	/* conrptmasterd */
		}  /* #conrptcontainer */
		
		/*
		 ** The Contacts list elements - Small Screens
		 */
		#contactlistd {    /*  extends .containerd */
			width: 95%;
			height: 1200px;
			border: 2px solid navy;
			border-radius: var(--defaultborderradius);
			#contactindexd {
				width: 95%;
				height: auto;
				margin: 8px 0px 8px 12px;
				padding: 5px;
				background-color: transparent;
				color: navy;
				.contactindexelement {
					width: 15px;
					height: 15px;
					margin: 0px 30px 30px 0px;
					float: left;
					cursor: pointer;
					text-align: center;
					font-size: 36px;
					font-weight: 700;
				}
				.contactindexelement:hover {
					color: orangered;
				}
				#contactdatad{
					width: 5%;
					height: 20px;
					margin: 8px 0px 0px 8px;
					float: left;
					background-color: transparent;
					text-align: center;
					font-size: 18px;
					color: navy;
				}
			}
			#contactinfod {
				width: 95%;
				height: 1100px;
				overflow-x: scroll;
				border-top: 2px solid navy;
				user-select: none;  /* turns off copy&paste */
				#namesearchdiv {
					width: 98%;
					height: auto;
					margin: 12px 1%;
					font-size: 2em;
					#namesearchmessage {
						width: 98%;
						height: auto;
						margin: 12px 1%;
						font-style: italic;
					}
					label {
						display: block;
						margin-left: 12px;
						color: navy;
						font-weight: 600;
					}
					input[type=text] {
						margin-left: 8px;
						font-size: 1em;
					}
					input[type=button] {
						width: 25%;
						height: auto;
						margin-left: 12px;
						background-color: lightBlue;
						font-weight: 600;
						font-size: 1em;
						color: navy;
						border: 2px solid transparent;
						border-radius: var(--defaultborderradius);
						&:hover { border-color: red; }
					}
				}
				.contactbodysectiond {
					width: 85%;
					height: auto;
					margin: 2px 0px 2px 12px;
					padding-bottom: 8px;
					color: navy;
					border-bottom: 4px solid green;
				}
				.contactbodyindexd {
					width: 50px;
					height: 50px;
					margin: 2px 0px 2px 4px;
					float: left;
					background-color: transparent;
					font-size: 42px;
					font-weight: 700;
					color: green;
				}
				.onclicktopd {
					width: 15%;
					height: 20px;
					margin: 2px 0px 2px 12px;
					float: left;
					cursor: pointer;
					padding-top: 4px;
					color: navy;
					font-size: 24px;
					font-weight: 400;
				}
				.contactbodypersond {
					width: 95%;
					height: auto;
					margin: 2px 0px 12px 12px;
					color: navy;
					font-size: 24px;
					font-weight: 600;
				}
				.contactbodynamed {
					width: 95%;
					height: auto;
					margin: 2px 0px 2px 12px;
					color: navy;
					font-size: 32px;
					font-weight: 600;
				}
				.contactbodyaddressd {
					width: 95%;
					height: auto;
					margin: 2px 0px 2px 32px;
					color: navy;
					font-size: 24px;
					font-weight: 400;
				}
				.contactbodyphoned {
					width: 95%;
					height: auto;
					margin: 2px 0px 2px 32px;
					color: navy;
					font-size: 24px;
					font-weight: 400;
				}
				.contactbodyadmind {
					width: 95%;
					height: auto;
					margin: 2px 0px 2px 32px;
					color: navy;
					font-style: italic;
					font-size: 24px;
					font-weight: 400;
				}
			}
		}
		
		/* ************************************************
		 **  Contact form
		 ** ************************************************ */
		#contactformcontainer {
			#contactformd {
				width: 98%;
				height: auto;
				margin: 8px 1% 8px 1%;
				color: navy;
				font-size: 10pt;
				#contactform {
					#contactformtitle {
						width: 98%;
						height: auto;
						margin: 12px 1% 12px 1%;
						font-size: 3vw;
					}
					label {
						display: block;
						width: 90%;
						margin: 12px 0px 4px 0px;
						font-size: 3.5vw;
						color: green;
					}
					input[type=text] {
						display: block;
						width: 90%;
						font-size: 3.5vw;
					}
					input[type=email] {
						display: block;
						width: 90%;
						font-size: 3.5vw;
					}
					textarea {
						width: 90%;
						height: auto;
						font-size: 3.5vw;
					}
					input[type=submit] {
						display: block;
						width: 30%;
						height: auto;
						float: left;
						margin: 12px 12px 12px 20%;
						background-color: lightgreen;
						text-align: center;
						font-size: 4.5vw;
						color: navy;
						border: 2px solid lightgreen;
						border-radius: var(--defaultborderradius);
						&:hover {
							border: 2px solid red;
						}
					}
					input[type=button] {
						display: block;
						width: 30%;
						height: auto;
						float: left;
						margin: 12px 12px 12px 0px;
						background-color: red;
						text-align: center;
						font-size: 4.5vw;
						color: ivory;
						border: 2px solid red;
						border-radius: var(--defaultborderradius);
					}
				}
			}
		} /* contactformcontainer */
		
		/* *******************************************************************
		 ** Documents
		 ** *******************************************************************/
		#doceditcontainer {  /* extends comntainerd */
			background-color: ivory;
			max-height: 1200px;
			overflow-y: auto;
			color: green;
			#doceditnewdocd {
				width: 98%;
				height: auto;
				margin: 12px 1%;
				padding: 8px;
				background-color: transparent;
				font-size: 1rem;
				color: green;
				border: 1px solid navy;
				border-radius: var(--defaultborderradius);
				form {
					display: block;
					width: 98%;
					margin: 8px 1%;
					font-size: 2rem;
					label {
						display: inline-block;
					}
					input[type=submit] {
						width: 15%;
						display: inline-block;
						margin-left: 12px;
						font-size: 2rem;
						cursor: var(--allbuttoncursor);
						background-color: var(--submitbuttoncolor);
						color: var(--submitbuttontextcolor);
						text-align: var(--submitbuttontextalign);
						border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
						border-radius: var(--defaultborderradius);
						&:hover { border-color: var(--submitbuttonborderhovercolor); }
					}
				}
			}
			#docsearchd {
				width: 98%;
				height: auto;
				margin: 12px 1%;
				padding: 8px;
				color: green;
				font-size: 2rem;
				border: 1px solid navy;
				border-radius: var(--defaultborderradius);
				label {
					display: inline-block;
					width: 50%;
				}
				input[type=text] {
					display: inline-block;
					width: 30%;
					font-size: 2rem;
				}
				input[type=submit] {
					display: inline-block;
					width: 15%;
					margin-left: 12px;
					font-size: 2rem;
					cursor: var(--allbuttoncursor);
					background-color: var(--submitbuttoncolor);
					color: var(--submitbuttontextcolor);
					text-align: var(--submitbuttontextalign);
					border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
					border-radius: var(--defaultborderradius);
					&:hover { border-color: var(--submitbuttonborderhovercolor); }
				}
			}
			.doceditformd {
				width: 98%;
				height: auto;
				margin: 12px 1%;
				padding: 8px;
				background-color: var(--defaultbackgroundcolor);
				color: green;
				border: 1px solid navy;
				border-radius: var(--defaultborderradius);
				.doceditform {
					width: 98%;
					margin: 12px 1%;
					font-size: 2rem;
					color: navy;
					.contextlabel {
						margin-left: 6px;
					}
					input[type=text] {
						font-size: inherit;
						color: inherit;
					}
					input[type=checkbox] {
						width: 2rem;
						height: 2rem;
					}
					input[type=file] {
						width: 60%;
						color: navy;
						padding: 5px;
						background: azure;
						font-size: 2rem;
						border-radius: 10px;
						border: 1px solid navy;
						&::file-selector-button {
							font-size: 2rem;
						}
					}
					fieldset .docformcontexts {
						width: 98%;
						margin: 8px 1%;
						border: 1px solid navy;
						border-radius: var(--defaultborderradius);
					}
					legend {
						color: navy;
						font-size: 2rem;
						font-style: italic;
					}
					.docformnamed {
						width: 98%;
						height: auto;
						margin: 4px 1%;
						color: navy;
						font-size: 2rem;
						font-weight: bold;
					}
					.docdescrinputd {
						width: 80%;
						height: auto;
					}
					.docdescrinputd .docdescr {
						width: 90%;
						height: auto;
					}
					#docreviewstatusd {
						width: 95%;
						height: auto;
						margin: 4px 0px 4px 4px;
						color: navy;
						font-size: 2rem;
						font-style: italic;
					}
					#docfilenamed {
						width: 98%;
						height: auto;
						margin: 12px 1%;
						font-size: 2rem;
						color: navy;
						a:link, a:visited {
							color: blue;
						}
					}
					.docprimarynoted {
						width: 95%;
						height: auto;
						margin: 4px 0px 4px 4px;
						font-size: 1.8vw;
						font-style: italic;
					}
					.docprimarynoted span {
						color: navy;
						font-size: 1.8vw;
						font-style: normal;
						font-weight: 600;
					}
					#docreviewstatusd span {
						font-weight: 700;
					}
					#docreviewokd {
						width: 95%;
						height: auto;
						margin: 4px 0px 4px 4px;
						color: navy;
						font-size: 1.8vw;
						font-style: italic;
					}
					.buttondiv {
						display: flex;
						flex-direction: row;
						justify-content: space-evenly;
						gap: 18px;
						width: 98%;
						margin: 12px 1%;
						border: none;
						input[type=submit], input[type=button] {
							width: 25%;
							cursor: var(--allbuttoncursor);
							text-align: var(--submitbuttontextalign);
							font-size: 2.5rem;
							border-radius: var(--defaultborderradius);
						}
						.submitbutton {
							background-color: var(--submitbuttoncolor);
							color: var(--submitbuttontextcolor);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							&:hover { border-color: var(--submitbuttonborderhovercolor); }
						}
						.removebutton {
							background-color: red;
							color: ivory;
							border: 1px solid black;
						}
						.cancelbutton {
							background-color: yellow;
							color: black;
							border: 1px solid black;
						}
					}	/* buttondiv */
				}  /* doceditform */
			} /* doceditformd */
			#docreviewlinkd {
				width: 90%;
				height: auto;
				margin: 12px 0px 12px 12px;
				padding: 4px 0px 4px 8px;
				color: green;
				a:link {
					color: green;
					text-decoration: none;
					cursor: pointer;
				}
			}
		}  /* doceditcontainer */
		
		/*
		 ** Documents Listing
		 */
		#doclinkscontainer,#doctraininglist,#docgenerallist,#docsponsorlist,#docalllist,#docrulebooklist {
			#doclinkstext {
				display: flex;
				flex-direction: column;
				gap: 6px;
				color: navy;
				font-size: 1.8rem;
				.doclinkd {
					a {
						&:link, &:visited {
							color: royalblue;
							text-decoration: none;
						}
						&:hover {
							color: red;
							text-decoration: none;
						}
					}
				}	/* doclinkd */
			} /* doclinkstext */
		}  /* doclinkscontainer */
		
		/* *******************************************************************
		 ** Locations Class
		 ** *******************************************************************/
		#loceditcontainer {
			background-color: ivory;
			height: auto;
			color: green;
			font-size: 2rem;
			#loceditd {
				width: 98%;
				height: 1000px;
				margin: 8px 1%;
				overflow-y: auto;
				#loceditnewdocd {
					width: 95%;
					height: auto;
					margin: 12px 1%;
					padding: 8px;
					background-color: transparent;
					font-size: 2rem;
					color: green;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					label {
						display: inline-block;
						width: 75%;
					}
					input[type=submit] {
						display: inline-block;
						width: 10%;
						font-size: 3rem;
						cursor: var(--allbuttoncursor);
						background-color: var(--submitbuttoncolor);
						color: var(--submitbuttontextcolor);
						text-align: var(--submitbuttontextalign);
						border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
						border-radius: var(--defaultborderradius);
						&:hover { border-color: var(--submitbuttonborderhovercolor); }
					}
				}
				#locsearchd {
					width: 90%;
					height: auto;
					margin: 8px 1%;
					padding: 4px 0px 4px 8px;
					color: green;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					label {
						display: inline-block;
						width: 53%;
					}
					input[type=text] {
						display: inline-block;
						width: 15%;
						font-size: 2rem;
					}
					input[type=submit] {
						display: inline-block;
						width: 20%;
						margin-left: 5%;
						font-size: 2.5rem;
						cursor: var(--allbuttoncursor);
						background-color: var(--submitbuttoncolor);
						color: var(--submitbuttontextcolor);
						text-align: var(--submitbuttontextalign);
						border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
						border-radius: var(--defaultborderradius);
						&:hover { border-color: var(--submitbuttonborderhovercolor); }
					}
				}
				#newlocmessage {
					width: 90%;
					height: auto;
					margin: 2px 0px 12px 0px;
					font-size: 2rem;
					color: navy;
				}
			} /* loceditd */
			.loceditformd {
				width: 98%;
				height: auto;
				margin: 4px 1%;
				padding: 8px 0px 8px 8px;
				background-color: transparent;
				color: green;
				border: 1px solid navy;
				border-radius: var(--defaultborderradius);
				.loceditform {
					fieldset {
						width: 98%;
						height: auto;
						margin: 8px 1% 0px 1%;
						font-size: 2rem;
						color: green;
						border: 1px solid green;
						border-radius: var(--defaultborderradius);
						legend {
							color: orange;
						}
					}
					.locformcoords .locnotesd {
						width: 90%;
						height: auto;
						margin: 4px 0px 2px 4px;
						color: navy;
						font-size: 2rem;
						font-style: italic;
					}
					.locgeotaglink {
						width: 98%;
						margin: 8px 1%;
						font-size: 2rem;
						font-style: italic;
						color: navy;
						a:link, a:visited { color: red; }
					}
					label {
						display: block;
						width: 80%;
						height: auto;
						color: green;
					}
					input[type=text] {
						width: 60%;
						font-size: 2rem;
					}
					.locinputd {
						width: 80%;
						margin: 12px 0px 4px 4px;
					}
					.locinputd .loccodename {
						text-transform: lowercase;
					}
					.buttondiv {
						display: flex;
						flex-direction: row;
						justify-content: space-evenly;
						gap: 18px;
						width: 98%;
						margin: 12px 1%;
						background-color: transparent;
						border: none;
						input[type=button], input[type=submit] {
							padding: 4px;
							font-size: 3rem;
							cursor: var(--allbuttoncursor);
							border: 2px solid transparent;
							border-radius: var(--defaultborderradius);
						}
						.submitbutton {
							background-color: var(--submitbuttoncolor);
							color: var(--submitbuttontextcolor);
							text-align: var(--submitbuttontextalign);
							&:hover { border-color: var(--submitbuttonborderhovercolor); }
						}
						.removebutton {
							background-color: orangered;
							color: ivory;
							&:hover { border-color: black }
						}
						.cancelbutton {
							background-color: yellow;
							color: navy;
							&:hover { border-color: red }
						}
					}
				} /* loceditform */
			}  /* loceditformd */
		} /* loceditcontainer */
		
		/*
		 **  The directions table
		 */
		#directionscontainer { /* extends containerd */
			width: 98%;
			height: auto;
			margin: 12px 1% 12px 1%;
			#directionsd {
				width: 98%;
				height: 1500px;
				margin: 0px 1% 0px 1%;
				#directionst {
					width: 98%;
					height: auto;
					font-size: 3vw;
					margin: 12px 1% 8px 1%;
					border: 2px solid navy;
					border-collapse: collapse;
					.directionsth {
						background-color: lightgrey;
						text-align: center;
						color: navy;
						font-size: 1.5em;
						border: 1px solid navy;
						border-collapse: collapse;
					}
					td {
						font-size: 1em;
						color: navy;
						.directionstd {
							padding: 2px;
							background-color: transparent;
							padding: 4px;
							text-align: left;
							color: navy;
							font-size: .8vw;
							border: 1px solid navy;
							border-collapse: collapse;
							a:link, a:visited {
								color: blue;
							}
						}
						.directionstdc {
							width: 100px;
							padding: 2px;
							border: 1px solid navy;
							background-color: transparent;
							text-align: left;
							color: navy;
							border-collapse: collapse;
							a:link, a:visited {
								color: green;
							}
						}
					}
				}
			}  /* directionsd */
		} /* directionscontainer */
		
		/*
		 **  The locations table
		 */
		#locationscontainer { /* extends containerd */
			width: 98%;
			height: auto;
			margin: 12px 1% 12px 1%;
			#locationsd {
				width: 98%;
				height: 1000px;
				margin: 0px 1% 0px 1%;
				#locationst {
					font-size: .5vw;
					margin: 12px 0px 8px 16px;
					border: 1px solid navy;
					border-collapse: collapse;
					.locationsth {
						background-color: lightgrey;
						text-align: center;
						color: navy;
						border: 1px solid navy;
						border-collapse: collapse;
					}
					.locationstd {
						padding: 2px;
						background-color: transparent;
						text-align: left;
						color: navy;
						border: 1px solid navy;
						border-collapse: collapse;
					}
					.locationstdc {
						width: 100px;
						padding: 2px;
						border: 1px solid navy;
						background-color: transparent;
						text-align: left;
						color: navy;
						border-collapse: collapse;
						a:link, a:visited {
							color: green;
						}
					}
				}
			}  /* locationsd */
		} /* locationscontainer */
		
		
		/*
		 **  Jobs
		 */
		#jobscontainer {  /* extends .containerd */
			#jobcodesd{       /*  extends innerscrollable */
				width: 98%;
				height: 1200px;
				margin: 10px 1% 10px 1%;
				overflow-y: auto;
				border: none;
				#jobst {
					width: 98%;
					margin: 10px 1%;
					th {
						text-align: center;
						font-size: 1.8rem;
						font-weight: 600;
						background-color: lightblue;
						color: navy;
					}
					td {
						padding: 4px 8px 4px 8px;
						font-size: 1.5rem;
						font-weight: 400;
					}
					.jobstcode {
						width: 15%;
						text-transform: uppercase;
					}
					.jobstjob {
						width: 40%;
					}
				}  /* jobst */
			}  /* jobcodesd */
			#jobnotes {
				font-size: 1.5rem;
			}
		}  /* jobscontainer */
		
		/*
		 **  Jobs editor
		 */
		#jobeditcontainer {  /* extends containerd */
			width: 98%;
			height: auto;
			background-color: ivory;
			color: navy;
			#newjobcoded {
				width: 98%;
				height: auto;
				margin: 12px 1% 12px 1%;
				padding: 12px;
				border: 2px solid navy;
				border-radius: var(--defaultborderradius);
				#newjobmessage {
					width: 90%;
					height: auto;
					font-size: 2.2rem;
					font-weight: 600;
					color: navy;
					input[type=button] {
						display: inline;
						width: 30%;
						height: auto;
						margin-left: 12px;
						background-color: lightblue;
						text-align: center;
						font-size: 2.2rem;
						font-weight: 600;
						border: 2px solid lightblue;
						border-radius: var(--defaultborderradius);
						&:hover {
							border: 2px solid navy;
						}
					}
				}
				form {
					display: none;
					width: 98%;
					height: auto;
					margin: 12px 1% 12px 1%;
					label {
						display: block;
						width: 80%;
						height: auto;
						font-size: 4vw;
						font-weight: 600;
						color: green;
					}
					#jobcode {
						display: block;
						width: 60%;
						margin: 0px 0px 12px 0px;
						font-size: 4vw;
						color: navy;
						text-transform: uppercase;
					}
					#description {
						display: block;
						width: 60%;
						margin: 0px 0px 12px 0px;
						font-size: 4vw;
						color: navy;
					}
					input[type=submit] {
						display: block;
						width: 30%;
						height: auto;
						margin: 4px 45% 4px 35%;
						background-color: lightgreen;
						font-size: 5vw;
						font-weight: 600;
						color: navy;
						border: 2px solid lightgreen;
						border-radius: var(--defaultborderradius);
						&:hover {
							border: 2px solid red;
						}
					}
				}
			}
			#jobsearchd {
				width: 98%;
				height: auto;
				margin: 12px 1% 12px 1%;
				padding: 12px;
				border: 1px solid green;
				border-radius: var(--defaultborderradius);
				#jobsearchf {
					label {
						display: inline;
						width: 40%;
						height: auto;
						font-size: 3rem;
						color: navy;
					}
					input[type=text] {
						display: inline;
						width: 20%;
						height: auto;
						text-transform: uppercase;
						font-size: 3rem;
					}
					input[type=submit] {
						display: inline;
						width: 30%;
						height: auto;
						margin: 12px 0px 4px 12px;
						font-size: 3rem;
						font-weight: 600;
						cursor: var(--allbuttoncursor);
						background-color: var(--submitbuttoncolor);
						color: var(--submitbuttontextcolor);
						text-align: var(--submitbuttontextalign);
						border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
						border-radius: var(--defaultborderradius);
						&:hover { border-color: var(--submitbuttonborderhovercolor); }
					}
				}
				#jobssearchstringd {
					width: 95%;
					height: auto;
					margin: 12px 0px 12px 12px;
				}
			}
			#jobslistd {
				width: 98%;
				height: 1000px;
				margin: 12px 1% 12px 1%;
				font-size: 1rem;
				border: 1px solid green;
				border-radius: var(--defaultborderradius);
				overflow-y: auto;
				.jobeditformd {
					width: 98%;
					height: auto;
					margin: 8px 1% 0px 1%;
					padding: 8px;
					background-color: ivory;
					color: navy;
					border: 1px solid green;
					border-radius: var(--defaultborderradius);
					width: 95%;
					height: auto;
					margin: 12px 0px 12px 12px;
					.jobeditform {
						& > div {
							display: inline-block;
						}
						input[type=text] {
							font-size: 2.2rem;
						}
						.jobcoded {
							width: 30%;
						}
						.jobcode {
							width: 50%;
							text-transform: uppercase;
						}
						.jobdescriptiond {
							width: 65%;
						}
						.jobdescription {
							width: 80%;
						}
						label {
							width: 40%;
							display: inline;
							font-size: 2.2rem;
							color: navy;
						}
						.jobsbuttond {
							display: flex;
							flex-direction: row;
							justify-content: space-evenly;
							gap: 12px;
							width: 60%;
							height: auto;
							margin: 24px 0px 12px 20%;
						}
						.jobformupdate {
							width: 40%;
							font-size: 2.5rem;
							cursor: var(--allbuttoncursor);
							background-color: var(--submitbuttoncolor);
							color: var(--submitbuttontextcolor);
							text-align: var(--submitbuttontextalign);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover { border-color: var(--submitbuttonborderhovercolor); }
						}
						.jobformremove {
							width: 40%;
							cursor: pointer;
							text-align: center;
							background-color: red;
							color: ivory;
							font-size: 2.5rem;
							border: 2px solid red;
							border-radius: var(--defaultborderradius);
							&:hover {
								border: 2px solid navy;
							}
						}
					}  /* jobeditform */
				} /* jobeditformd */
			}  /* joblistd */
		} /* jobeditcontainer */
		
		/*
		 ** Photos
		 */
		#photostackcontainer {
			background-color: ivory;
			#photostackd {
				border: none;
				#photomessage {
					p {
						color: navy;
						font-size: 3.3vw;
					}
				}
				#photoslideshowd {
					input[type=submit] {
						display: block;
						width: 60%;
						height: auto;
						float: left;
						margin: 4px 12px 24px 0px;
						cursor: pointer;
						background-color: lightgreen;
						color: navy;
						font-size: 4vw;
						border: 2px solid silver;
						border-radius: var(--defaultborderradius);
						&:hover {
							background-color: lightblue;
							border: 2px solid red;
						}
					}
				}
			}
		} /* photostackcontainer */
		
		/*
		 **  Videos if posted on the webpage
		 */
		#videooutercontainer {
			#videocontainer {
				#trainingvideo {
					margin: 8px 0px 8px 4px;
					border: 4px solid royalblue;
					border-radius: var(--defaultborderradius);
				}
			}
		}  /* videooutercontainer */
		
		
		/*
		 **  Access Log Table
		 */
		#accesscontainer {  /* cascades from .containerd */
			min-height: 550px;
			overflow-y: auto;
			#accessd {  /* cascades from .innerscrollable */
				width: 96%;
				height: 1500px;
				color: red;
				#accesst {
					table-layout: fixed;
					width: 98%;
					height: 98%;
					font-size: 2vw;
					margin: 2px 0px 8px 2px;
					border-collapse: collapse;
					th {
						border: 1px solid navy;
						background-color: lightgreen;
						font-size: 2vw;
						text-align: center;
						color: navy;
						border-collapse: collapse;
						&:nth-child(1) {
							width: 12%;
						}
						&:nth-child(2) {
							width: 18%;
						}
						&:nth-child(3) {
							width: 58%;
						}
						&:nth-child(4) {
							width: 15%;
						}
						/*  Specific column td properties */
						
					}
					td {
						padding: 0px 4px 0px 4px;
						border: 1px solid navy;
						background-color: transparent;
						font-size: 2.5vw;
						text-align: left;
						color: navy;
						border-collapse: collapse;
						&:nth-child(1) {
							width: 12%;
						}
						&:nth-child(2) {
							width: 18%;
						}
						&:nth-child(3) {
							overflow: hidden;
							text-overflow: ellipsis;
						}
						&:nth-child(4) {
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}  /* accesst */
			}	/* accessd */
		}  /* accesscontainer */
		
		/*********************************************************************
		 **  AD list and loader stuff
		 *********************************************************************/
		#admastercontainer {
			width: 98%;
			height: auto;
			margin: 12px 1%;
			background-color: ivory;
			font-size: 1em;
			border: 2px solid navy;
			border-radius: var(--defaultborderradius);
			#adsearchbox {
				width: 98%;
				height: auto;
				margin: 8px 1%;
				padding: 8px;
				font-size: 2em;
				border: 2px solid navy;
				border-radius: var(--defaultborderradius);
				#adsearchlabel {
					display: block;
					width: 98%;
					height: auto;
					margin: 2px 0px;
				}
				#adsearchschoolinput {
					display: inline-block;
					width: 98%;
					height: auto;
					margin: 8px 1%;
					font-size: 1.5em;
					border: 1px solid navy;
				}
				input[type=button]{
					display: inline-block;
					width: 98%;
					height: auto;
					margin: 8px 1%;
					background-color: LightBlue;
					color: navy;
					font-weight: 600;
					font-size: 2.5em;
				}
				#adshared {
					width: 98%;
					height: auto;
					margin: 4px 1%;
					color: red;
				}
			}
			#adlistd {
				width: 98%;
				height: 900px;
				margin: 8px 1%;
				padding: 4px;
				overflow-y: auto;
				border: 1px solid navy;
				border-radius: var(--defaultborderradius);
				.adlistitem {
					width: 98%;
					height: auto;
					margin: 12px 1%;
					padding: 8px;
					background-color: ivory;
					color: navy;
					border: 2px solid navy;
					border-radius: var(--defaultborderradius);
					.messaged {
						width: 98%;
						height: auto;
						margin: 8px 1%;
						font-size: 1.2em;
						color: red;
					}
				}
				.adlistelement {
					display: block;
					width: 98%;
					min-height: 100px;
					margin: 4px 1%;
					padding: 8px;
					border: 2px solid navy;
					border-radius: var(--defaultborderradius);
					.schooltitle {
						width: 90%;
						height: auto;
						margin: 0px 2px 1%;
						color: red;
						font-weight: 600;
						font-size: 1.9em;
					}
					.aditem {
						width: 98%;
						height: auto;
						margin: 1% 2px;
						color: navy;
						font-size: 1.7em;
						border: none;
					}
					.addresscard {
						display: inline-block;
						width: 90%;
						height: auto;
						margin: 0px 0%;
						padding: 1px;
						color: navy;
						font-size: 1.7em;
						border: 1px solid transparent;
						legend {
							font-weight: 600;
						}
						.addresscardelement {
							width: 98%;
							height: auto;
							margin: 2px 1%;
							color: navy;
						}
					}
				}  /* adlistelement */
			}	/* adlistd */
		}
		
		/* **************************************************************
		 **  Request Manager
		 ** ************************************************************/
		#requestmanager {	/* extends .containerd */
			width: 100%;
			height: auto;
			background-color: ivory;
			#requestmanagerbody {
				width: 98%;
				height: auto;
				margin: 4px 1%;
				padding: 8px;
				background-color: transparent;
				font-size: 2em;
				color: navy;
				border: 1px solid navy;
				border-radius: var(--defaultborderradius);
				&>div {
					width: 90%;
					height: auto;
					margin: 12px 5%;
				}
				#buttonsection {
					display: flex;
					flex-direction: row;
					margin-top: 18px;
					form {
						width: 38%;
						height: auto;
						input[type=submit] {
							width: 100%;
							height: auto;
							font-size: 1.5em;
							border: 2px solid transparent;
							border-radius: var(--defaultborderradius);
						}
						#myschedule { background-color: lightgreen; color: navy; }
					}
				}
				#managebuttonsection,
				#adminbuttonsection {
					display: flex;
					flex-direction: row;
					width: 98%;
					height: auto;
					margin: 12px 1%;
					background-color: transparent;
					form {
						display: block;
						width: 60%;
						height: auto;
						input[type=submit] {
							width: 100%;
							font-weight: 600;
							font-size: 2em;
							cursor: var(--allbuttoncursor);
							background-color: var(--submitbuttoncolor);
							color: var(--submitbuttontextcolor);
							text-align: var(--submitbuttontextalign);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover { border-color: var(--submitbuttonborderhovercolor); }
						}
					}
				}
				#requests {
					width: 98%;
					height: auto;
					margin: 4px 1%;
					padding: 8px;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					.indrequest {
						display: flex;
						flex-direction: column;
						margin-bottom: 12px;
						border: 1px solid navy;
						border-radius: var(--defaultborderradius);
						& > div {
							width: 98%;
							height: auto;
							margin: 4px 1%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.eventtitle { font-weight: 600; }
						.eventnumber { }
						.username { }
						.jobcode { }
						.slotid { }
						.eventdate { }
						.formbuttond {
							display: flex;
							flex-direction: row;
							justify-content: space-evenly;
							width: 98%;
							margin: 8px 1%;
							form {
								display: block;
								width: 40%;
								input[type=submit] {
									width: 100%;
									font-size: 1.5em;
									cursor: var(--allbuttoncursor);
									background-color: var(--submitbuttoncolor);
									color: var(--submitbuttontextcolor);
									text-align: var(--submitbuttontextalign);
									border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
									border-radius: var(--defaultborderradius);
									&:hover { border-color: var(--submitbuttonborderhovercolor); }
								}
							}
							#reject .actionreject {
								background-color: red;
								color: ivory;
								&:hover { border-color: black; }
							}
						}	/* formbuttond */
					}
				}
			}
		}
		
		/* *************************************************************
		 ** Schedule By Official
		 ** *************************************************************/
		#byofficialschedbody {
			height: 1195px;
			background-color: ivory;
			#nomeetnotesd {
				width: 98%;
				height: auto;
				margin: 12px 1%;
				padding: 12px;
				font-size: 1em;
				border: 1px solid navy;
				border-radius: var(--defaultborderradius);
				div {
					margin-bottom: 12px;
				}
			}
			#masterschedmod {
				width: 98%;
				height: auto;
				margin: 8px 1%;
				background-color: ivory;
			}
			#confirmbox {
				position: absolute;
				width: 95%;
				height: auto;
				top: 30%;
				z-index: 100;
				padding: 12px;
				background-color: LightGrey;
				color: navy;
				font-size: 2rem;
				border: 4px solid navy;
				border-radius: var(--defaultborderradius);
				#textlabel {
					display: block;
					width: 90%;
					height: auto;
					margin: 8px 5%;
					color: navy;
				}
				#textarea {
					display: block;
					width: 90%;
					height: auto;
					margin: 0px 5%;
					font-size: 1.1em;
					border: 1px solid navy;
				}
				input[type=button],input[type=submit] {	/* not a standard submit - shows in the pop-up */
					display: inline-block;
					width: 40%;
					height: auto;
					margin-top: 24px;
					margin-right: 4%;
					font-size: 1.5em;
					border: 2px solid transparent;
					border-radius: var(--defaultborderradius);
				}
				#confirmbutton { margin-left: 5%; background-color: lightGreen; color: navy; border-color: navy; }
				#cancelbutton { margin-left: 12px; background-color: red; color: antiqueWhite; border-color: AntiqueWhite; }
			}
			.meetd {
				padding: 8px;
				.schedmodtimed {
					/* see .innerscrollable */
				}
				.olofficiald {
					width: 80%;
					height: auto;
					margin: 4px 0px 4px 4px;
					font-size: 2em;
					font-weight: 600;
					color: navy;
					/* border: 1px solid red; */
				}
				.arbitermessage {
					width: 98%;
					height: auto;
					margin: 12px 1%;
					padding: 8px;
					font-size: 1.5em;
					font-weight: 600;
					color: red;
					border: 1px solid red;
					border-radius: var(--defaultborderradius);
				}
				.olnotregd {
					width: 25%;
					margin: 4px 0px 4px 12px;
					float: left;
					font-size: 12pt;
					font-weight: 700;
					text-align: left;
					color: red;
				}
				.notesd {
					width: 99%;
					height: auto;
					margin: 8px 1% 8px 1%;
					font-size: 3vw;
					color: navy;
				}
				.commandsd {
					.hidedatad {
						width: 45%;
						height: auto;
						margin: 12px 12px 12px 12px;
						padding: 4px 0px 8px 0px;
						text-align: center;
						background-color: lightgreen;
						float: left;
						font-size: 3.5vw;
						border: 1px solid lightgreen;
						border-radius: var(--defaultborderradius);
					}
				}
				#singleevents {
					.controlbreak{
						width: 100%;
						height: 20px;
					}
					.olsingleeventmobiled {  /* mobile devices */
						display: flex;
						flex-direction: column;
						width: 98%;
						min-height: 200px;
						margin: 12px 1%;
						background-color: Azure;
						border: 1px solid navy;
						border-radius: var(--defaultborderradius);
						& > div {
							width: 98%;
							height: auto;
							margin: 4px 1%;
							font-size: 2.2em;
							color: navy;
						}
						.oldateinfomobiled {
							font-weight: 600;
						}
						.oltitlemobiled {
							font-weight: 500;
							.mobiletitle {
								display: inline-block;
								width: 80%;
								height: auto;
								.oladdtocald {
									display: inline-block;
								}
							}
							.mobileics {
								display: inline-block;
								width: 15%;
							}
						}
						.oljobmobiled {}
						.oldirectionsmobiled {
							width: 98%;
							height: auto;
							margin: 8px 1%;
							.olgooglelabeld {
								display: inline-block;
								width: 10%;
								height: auto;
							}
							.olgoogled {
								display: inline-block;
								width: 80%;
								height: auto;
								a:link,a:visited {
									font-size: 1em;
									text-decoration: underline;
									color: navy;
								}
							}
						}
						.olsitemobiled {
							width: 98%;
							height: auto;
							margin: 4px 1%;
							font-size: 2em;
						}
						.olcolleguelaunchmobiled {
							width: 98%;
							height: auto;
							margin: 8px 1%;
							text-decoration: underline;
						}
						.olcollegued {
							display: none;
							width: 98%;
							height: auto;
							margin: 8px 1%;
							background-color: transparent;
							font-size: 2.2em;
						}
						.olbuttonmobiled {
							display: flex;
							flex-direction: row;
							justify-content: space-evenly;
							width: 98%;
							height: auto;
							margin: 12px 1%;
							padding: 0px;
							background-color: transparent;
							color: navy;
							overflow: hidden;
							.olconfirmf {
								width: 100%;
								height: 100%;
								background-color: ivory;
								padding: 8px;
								input[type=button],
								input[type=submit] {
									display: inline-block;
									width: 30%;
									height: auto;
									margin: 0px 1%;
									cursor: pointer;
									background-color: lightBlue;
									text-align: center;
									font-size: 1.3em;
									color: navy;
									border: 2px solid navy;
									border-radius: 10px;
									&.crewb { background-color: navy; color: ivory; }
									&.confirmb { background-color: lightGreen; color: navy; }
									&.resetb { background-color: blueViolet; color: ivory; }
									&.declineb { background-color: red; color: ivory; }
								}
								textarea {
									display: inline-block;
									width: 40%;
									height: auto;
									margin: 0px 1%;
									font-size: 1.1em;
									border: 1px solid navy;
								}
							}   /* olconfirmf */
						}   /* olbuttonmobiled */
					}   /* olsiggleeventmobiled */
					.olsingleeventmobiled-past {
						display: none;
						width: 98%;
						min-height: 200px;
						margin: 4px 1%;
						background-color: lightGrey;
						border: 1px solid silver;
						border-radius: var(--defaultborderradius);
						& > div {
							width: 98%;
							height: auto;
							margin: 4px 1%;
							font-size: 2.2em;
							color: black;
						}
						.oldateinfomobiled {
							font-weight: 600;
						}
						.oltitlemobiled {
							font-weight: 500;
							.mobiletitle {
								display: inline-block;
								width: 80%;
								height: auto;
							}
							.mobileics {
								display: none;
								width: 15%;
							}
						}
						.oldirectionsmobiled {
							width: 98%;
							height: auto;
							margin: 8px 1%;
							.olgooglelabeld {
								display: inline-block;
								width: 10%;
								height: auto;
							}
							.olgoogledpast {
								display: inline-block;
								width: 80%;
								height: auto;
								a:link,a:visited {
									font-size: 1em;
									text-decoration: underline;
									color: black;
								}
							}
						}
					}   /* olsingleeventmobiled-past */
				} /* Single Events */
				#olconfirmalld {
					display: flex;
					flex-direction: row;
					justify-content: space-evenly;
					width: 98%;
					height: auto;
					margin: 8px 1%;
					padding: 4px;
					background-color: transparent;
					color: navy;
					overflow: hidden;
					form {
						display: block;
						width: 30%;
						height: auto;
						margin: 12px 12px 0px 10%;
						background-color: transparent;
						font-size: 1.5em;
						color: navy;
						input[type=submit] {	/* not a standard submit */
							width: 100%;
							height: auto;
							text-align: center;
							font-size: 1.5em;
							color: navy;
							border: 1px solid navy;
							border-radius: var(--defaultborderradius);
						}
						#confirmallconfirm { background-color: lightgreen }
						#confirmalldecline { background-color: red }
						#confirmallreset { background-color: lightblue }
					}
				}
				.olcollegued {
					display: none;
					width: 99%;
					height: auto;
					margin: 8px 0px 0px 2px;
					padding: 8px 8px 8px 8px;
					background-color: transparent;
					color: navy;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					.olcollegueindd {
						margin: 2px 8px 2px 4px;
						background-color: transparent;
						font-size: 2.5vw;
						color: navy;
					}
				}
			}  /* meetd */
			
			/*
			 ** Open Slots
			 */
			#olopenslotsd {
				width: 98%;
				height: auto;
				margin: 4px 0px 8px 4px;
				padding: 8px;
				font-size: 3vw;
				color: navy;
				border: 1px solid navy;
				border-radius: var(--defaultborderradius);
				.osmeetd {
					width: 98%;
					height: auto;
					margin: 4px 1%;
					padding: 8px;
					color: navy;
					font-size: 1em;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					.olosdated {
						width: 99%;
						height: auto;
						margin: 0px .5% 4px .5%;
						font-weight: 600;
					}
					.olostitled {
						width: 90%;
						height: auto;
						margin: 0px 2% 4px 8%;
						font-weight: 500;
					}
					.oloseventnumberd {
						display: inline-block;
						width: 90%;
						margin: 0px 2% 4px 8%;
						cursor: pointer;
						white-space: nowrap;
						overflow: hidden;
					}
					.olossited {
						width: 90%;
						height: auto;
						margin: 0px 2% 4px 8%;
					}
					.olosjobd {
						width: 90%;
						height: auto;
						margin: 12px 0px 0px 48px;
						form {
							display: block;
							label {
								display: inline-block;
								margin-left: 12px;
								font-size: 1.3em;
							}
							input[type=submit] {  /* not a standard submit */
								display: inline-block;
								width: 30%;
								background-color: lightblue;
								cursor: pointer;
								font-size: 1.3em;
								color: navy;
								border: 2px solid transparent;
								border-radius: var(--defaultborderradius);
								&:hover {border-color: red;}
							}
							#retract { background-color: red; color: ivory; }
							#request {}
						}
					}
				}
				.oloscontactd {   /* don't forget to unhide this in both places */
					display: none;
					width: 98%;
					margin: 12px 1% 4px 1%;
					text-align: center;
					font-size: 3.2vw;
					font-style: italic;
					color: red;
				}
			} /* olopenslotsd */
		}  /* byofficialschedbody */
		
		/*
		 ** Leagues
		 */
		#leaguemanagercontainer {
			background-color: ivory;
			#formpurpose {
				width: 98%;
				height: auto;
				margin: 8px 1%;
				padding: 4px;
				font-size: 1.8em;
				color: navy;
			}
			form {
				input[type=submit] {
					display: inline-block;
					width: 25%;
					height: auto;
					margin-top: 18px;
					font-size: 1.5em;
					cursor: var(--allbuttoncursor);
					background-color: var(--submitbuttoncolor);
					color: var(--submitbuttontextcolor);
					text-align: var(--submitbuttontextalign);
					border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
					border-radius: var(--defaultborderradius);
					&:hover { border-color: var(--submitbuttonborderhovercolor); }
				}
			}
			#newleagueform {
				display: block;
				width: 98%;
				height: auto;
				margin: 4px 1%;
				padding: 4px;
				font-size: 2em;
				border: 2px solid navy;
				border-radius: var(--defaultborderradius);
				fieldset {
					legend {
						font-size: 2em;
						color: navy;
					}
					label {
						display: inline-block;
						font-size: 2em;
					}
					input {
						display: inline-block;
					}
				}
			}
			#leaguemanagerform {
				display: block;
				width: 98%;
				height: auto;
				margin: 4px 1%;
				#contactnotes {
					width: 98%;
					height: auto;
					margin: 4px 1%;
					font-size: 1.5em;
				}
				label {
					margin-top: 12px;
					display: block;
					font-size: 1.5em;
					color: navy
				}
				.backbutton {
					display: inline-block;
					width: 25%;
					height: auto;
					margin-top: 18px;
					background-color: lightBlue;
					font-size: 2em;
					font-weight: 500;
					color: navy;
					border: 2px solid transparent;
					border-radius: var(--defaultborderradius);
					&:hover { border-color: red }
				}
				fieldset {
					width: 98%;
					height: auto;
					margin: 12px 1%;
					border: 1px solid green;
					border-radius: var(--defaultborderradius);
					legend {
						font-size: 1.5em;
						color: orangeRed;
					}
					input[type=text] {
						width: 50%;
						height: auto;
						font-size: 1.5em;
					}
					#leagueacronym {
						width: 25%;
						text-transform: uppercase;
					}
					#leaguename {
						width: 80%;
					}
					#contact1,#contact2 {
						text-transform: lowercase;
					}
				}
			}
			#leagues {
				width: 98%;
				height: auto;
				margin: 8px 1%;
				.leagued {
					width: 98%;
					height: auto;
					margin: 8px 1%;
					padding: 4px;
					font-size: 2em;
					border: 2px solid navy;
					border-radius: var(--defaultborderradius);
					input[type=submit] {
						display: inline-block;
						width: 20%;
						height: auto;
						margin: 12px 10%;
						font-size: 1.5em;
					}
					.leaguename {
						width: 98%;
						height: auto;
						margin: 4px 1%;
						font-weight: 600;
					}
					.leagueid {
						width: 98%;
						height: auto;
						margin: 4px 1%;
						font-weight: 600;
					}
					.delete {
						display: inline-block;
						width: 25%;
						height: auto;
						margin: 12px 10%;
						cursor: pointer;
						font-size: 1.5em;
						background-color: orangered;
						color: ivory;
						border: 2px solid transparent;
						border-radius: var(--defaultborderradius);
						&:hover { border-color: red ; background-color: navy}
					}
				}
			}
		} /* leaguemanagercontainer */
		
		/*
		 ** Schedule By Meet  SBM
		 */
		#bymeetschedulecontainer {
			/*
			 ** Schedule Manager/Editor uses this element in the same named parent.
			 */
			#neweventformd {
				width: 98%;
				height: auto;
				margin: 8px 1% 8px 1%;
				padding: 4px 4px 4px 8px;
				background-color: ivory;
				color: navy;
				border: 1px solid navy;
				border-radius: var(--defaultborderradius);
				#neweventform {
					display: block;
					width: 90%;
					height: auto;
					padding: 8px;
					label {
						display: inline-block;
						width: 50%;
						height: auto;
						margin: 0px 0px 8px 0px;
						font-size: 2.5em;
						color: red;
					}
					input[type=submit] {
						display: inline-block;
						width: 20%;
						height: auto;
						margin-left: 12px;
						font-size: 2.5em;
						cursor: var(--allbuttoncursor);
						background-color: var(--submitbuttoncolor);
						color: var(--submitbuttontextcolor);
						text-align: var(--submitbuttontextalign);
						border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
						border-radius: var(--defaultborderradius);
						&:hover { border-color: var(--submitbuttonborderhovercolor); }
					}
				}  /* #neweventform */
			}  /* #neweventformd */
			
			#schedadjustformd {
				width: 98%;
				height: auto;
				margin: 8px 1% 0px 1%;
				padding: 8px 8px 8px 12px;
				background-color: ivory;
				color: navy;
				border: 2px solid navy;
				border-radius: var(--defaultborderradius);
				#schedadjustform {
					width: 90%;
					height: auto;
					#schedadjusttitled {
						width: 99%;
						margin: 8px .5% 8px .5%;
						#schedadjusttitle {
							display: inline-block;
							width: 60%;
							height: auto;
							margin: 8px .5% 8px .5%;
							font-size: 3.8vw;
							color: orangered;
						}
						input[type=button] {
							display: inline-block;
							width: 30%;
							margin-left: 12px;
							background-color: lightblue;
							cursor: var(--allbuttoncursor);
							font-size: 3.8vw;
							font-weight: 600;
							border: 2px solid lightblue;
							border-radius: var(--defaultborderradius);
							&:hover {
								border: 2px solid red;
							}
						}
					} /* schedadjusttitled */
					#schedadjustbodyd {
						display: none;
						width: 99%;
						margin: 8px .5% 8px .5%;
						label {
							display: block;
							width: 40%;
							height: auto;
							margin: 4px 0px 8px 24px;
							font-size: 3.8vw;
							color: navy;
						}
						input[type=date] {
							display: block;
							width: 25%;
							height: auto;
							margin: 4px 0px 8px 24px;
							font-size: 3.8vw;
						}
						input[type=submit] {
							display: block;
							width: 30%;
							height: auto;
							margin: 12px 40% 12px 40%;
							font-size: 4.2vw;
							cursor: var(--allbuttoncursor);
							background-color: var(--submitbuttoncolor);
							color: var(--submitbuttontextcolor);
							text-align: var(--submitbuttontextalign);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover { border-color: var(--submitbuttonborderhovercolor); }
						}
					}  /* schedadjustbodyd */
				}  /* schedadjustform */
			}  /* schedadjustformd */
			
			#schedtargetdated {
				width: 98%;
				height: auto;
				margin: 8px 1% 0px 1%;
				padding: 8px 8px 12px 12px;
				background-color: ivory;
				font-size: 3.5vw;
				color: navy;
				border: 2px solid navy;
				border-radius: var(--defaultborderradius);
				label {
					display: inline-block;
					width: 30%;
					height: auto;
					font-size: 3.5vw;
				}
				div {
					width: 98%;
					height: auto;
					margin: 8px 1% 0px 1%;
					padding: 8px;
					font-size: 3.5vw;
				}
				#schedtargetdatepickd {
					#schedtargetdate {
						display: inline-block;
						width: 25%;
						height: auto;
						font-size: 3.5vw;
						border: 1px solid navy;
					}
					#schedtargetdateall {
						display: inline-block;
						width: 20%;
						height: auto;
						margin: 4px 0px 8px 48px;
						cursor: pointer;
						background-color: navy;
						text-align: center;
						font-size: 3.5vw;
						color: ivory;
						border: 1px solid grey;
						border-radius: var(--defaultborderradius);
					}
				}
				#schedformtypeselectd /* #schedeventtype select */ {
					width: 90%;
					height: auto;
					margin: 12px 0px 0px 0px;
					select {
						display: inline-block;
						width: 45%;
						height: auto;
						cursor: pointer;
						color: navy;
						font-size: 3.5vw;
						border: 1px solid navy;
					}
					option {
						
					}
				}
			}
			
			#bymeetschedbody {
				padding-bottom: 24px;
				/* Also .schedule_container defined elsewhere */
				.schedmodtimed {
					/* see this in schedule_container */
				}
				.meeterrord {
					width: 98%;
					height: auto;
					margin: 2px 0px 0px 12px;
					font-size: 3vw;
					color: red;
					border: none;
				}
				.meetd {
					#notinrostertitled {
						width: 95%;
						height: auto;
						margin: 2px 0px 0px 12px;
						color: red;
						font-weight: 600;
						font-size: 3vw;
						border: none;
					}
					#notinrosterd {
						width: 95%;
						height: auto;
						margin: 2px 0px 0px 12px;
						color: red;
						font-weight: 500;
						font-size: 3vw;
						border: none;
					}
					.meettitled {
						width: 98%;
						height: auto;
						margin: 8px 1% 8px 1%;
						color: orangered;
						font-size: 4vw;
						font-weight: bold;
					}
					.meetinfod {
						width: 60%;
						margin-right: 2px;
						float: left;
						font-weight: bold;
						font-size: 3vw;
						overflow: hidden;
					}
					.googled {
						width: 25%;
						margin: 0px 0px 0px 18px;
						font-size: 3vw;
						float: left;
						/* border: 1px solid green; */
						a:link, a:visited {
							color: blue;
						}
					}
					.teamd {
						width: 98%;
						margin: 8px 1% 0px 1%;
						font-size: 3vw;
						color: navy;
						/* border: 1px solid green; */
					}
					.officialmasterd {
						display: grid;
						grid-template-columns: repeat(auto-fill, minmax(30%,1fr));
						grid-auto-rows: min-content;
						grid-gap: 2px 10px;
						margin: 18px 1% 12px 1%;
						padding: 8px;
						color: green;
						border: 1px solid navy;
						border-radius: var(--defaultborderradius);
						& > div {
							font-size: 2.2vw;
							font-weight: 400;
							color: red;
						}
						.officialstd {
							font-style: italic;
							font-weight: 600;
						}
						.officiald {
						}
						.confirmed {
							color: green;
						}
						.notconfirmed {
							color: red;
						}
						.officialopen {
							font-weight: 600;
							color: blue;
						}
						.officialunknown {
							font-weight: 600;
							font-style: italic;
							color: MediumVioletRed;
						}
						.officialnotregd {
							font-style: italic;
						}
						.officialnocountd {
							color: green;
						}
					}
					.eventeditsubmitd {
						display: inline-block;
						width: 30%;
						height: auto;
						margin: 4px 0px 4px 8px;
						input[type=submit] {	/* not a standard submit */
							display: inline-block;
							width: 100%;
							height: auto;
							margin: 8px 0px 8px 12px;
							background-color: navy;
							font-size: 4vw;
							color: white;
							border: 2px solid white;
							border-radius: var(--defaultborderradius);
						}
						.eventeditform {
							input[type=submit] { /* not a standard submit */
								background-color: navy;
								color: white;
								border-color: navy;
								border-radius: var(--defaultborderradius);
							}
						}
						.eventcloneform {
							input[type=submit] {  /* not a standard submit button */
								background-color: red;
								color: white;
								border-color: red;
								border-radius: var(--defaultborderradius);
							}
						}
						.deleteeventb {
							display: inline-block;
							width: 100%;
							height: auto;
							margin: 8px 0px 8px 48px;
							background-color: orangered;
							font-size: 4vw;
							color: white;
							border: 2px solid orangered;
							border-radius: var(--defaultborderradius);
						}
					}
					.messageidd {
						
					}
					.arbiterupdater {  /* this is a form */
						display: block;
						width: 98%;
						height: auto;
						margin: 12px 2%;
						label {
							margin-right: 4px;
							font-weight: 500;
							font-size: 1.8em;
						}
						input[type=number] {
							width: auto;
							height: auto;
							margin-right: 8px;
							font-size: 1.8em;
						}
						input[type=submit] {
							width: 35%;
							height: auto;
							font-size: 2em;
							cursor: var(--allbuttoncursor);
							background-color: var(--submitbuttoncolor);
							color: var(--submitbuttontextcolor);
							text-align: var(--submitbuttontextalign);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover { border-color: var(--submitbuttonborderhovercolor); }
						}
					}
					.warningdiv {
						width: 90%;
						height: auto;
						margin: 12px 5% 12px 5%;
						padding: 12px;
						background-color: AntiqueWhite;
						font-size: 2.5vw;
						font-weight: 600;
						color: navy;
						border: 4px solid red;
						border-radius: var(--defaultborderradius);
						p {
							
						}
						.buttond {  /* this is put in by javascript and won't show in any .php file */
							width: 98%;
							height: auto;
							margin: 24px 1% 0px 1%;
							.confirmform {
								display: inline-block;
								width: 30%;
								height: auto;
								margin: 12px 5% 12px 20%;
								.confirmbuttonc {
									display: inline-block;
									width: 100%;
									height: auto;
									font-size: 4vw;
									font-weight: 600;
									cursor: var(--allbuttoncursor);
									background-color: var(--submitbuttoncolor);
									color: var(--submitbuttontextcolor);
									text-align: var(--submitbuttontextalign);
									border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
									border-radius: var(--defaultborderradius);
									&:hover { border-color: var(--submitbuttonborderhovercolor); }
								}
							}  /* confirmform */
							.cancelbuttonc {
								display: inline-block;
								width: 30%;
								height: auto;
								margin: 12px 5% 12px 5%;
								background-color: red;
								text-align: center;
								font-size: 4vw;
								font-weight: 600;
								color: navy;
								border: 1px solid red;
								border-radius: var(--defaultborderradius);
							}
						}
					}  /* warningdiv */
					.schedbymeetsmsd {
						width: 95%;
						height: auto;
						margin: 4px 0px 2px 12px;
						a:link, a:visited {
							color: blue;
							font-size: 3vw;
							font-style: italic;
							text-decoration: none;
						}
					}
				}  /* .meetd */
			}  /*  bymeetschedbody */
		}  /* bymeetschedcontainer */
		
		#officialsummary {	/* extends .containerd */
			width: 98%;
			height: 800px;
			margin: 8px 1%;
			padding: 4px 4px 12px 4px;
			overflow-y: auto;
			background-color: ivory;
			color: navy;
			#officialsummarytotal {
				width: 98%;
				height: auto;
				margin: 8px 1%;
				font-size: 1.2em;
				font-weight: 600;
			}
			#officialsummaryofficials {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(35%,1fr));
				grid-auto-rows: 170px;
				grid-gap: 10px 8px;
				.officialsummaryind {
					padding: 4px;
					font-size: 1.5em;
					background-color: lightgrey;
					border: 1px solid silver;
					border-radius: var(--defaultborderradius);
					.officialsummaryindtotal {
						margin-left: 12px;
					}
				}
			}
			#officialleaderboardtitle {
				width: 98%;
				height: auto;
				margin: 8px 1%;
				font-weight: 600;
				font-size: 1.8em;
			}
			#officialleaderboard {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(35%,1fr));
				grid-auto-rows: 40px;
				grid-gap: 10px 8px;
				border: none;
				.officialsummaryleaders {
					padding: 4px;
					font-size: 1.5em;
					background-color: LightCoral;
				}
			}
		}  /* Officialsummary */
		
		/* **********************************************************
		 **  Schedule By School
		 ** ******************************************************** */
		#schoolschedcontainer {
			#schedsearchinputd {
				/* see containerd */
			}
			#byschoolschedbody {
				.schedmodtimed {}
				.meetd {
					.olschoold {
						width: 98%;
						height: auto;
						margin: 8px 1% 8px 1%;
						font-size: 3.2vw;
						font-weight: 600;
						color: navy
					}
					.olschoolmeetd {
						width: 98%;
						height: auto;
						margin: 8px 1% 8px 1%;
						font-size: 3vw;
						font-weight: 600;
						color: navy;
						.olschooldateinfod {
							width: 98%;
							font-size: 3vw;
							font-weight: 600;
						}
						.olschooltyped {
							display: inline-block;
							width: 15%;
							font-size: 3vw;
						}
						.olschoolteamd {
							display: inline-block;
							width: 50%;
							font-size: 3vw;
						}
						.olschoolgoogled {
							display: inline-block;
							width: 30%;
							font-size: 3vw;
							a:link, a:visited {
								color: blue;
							}
						}
						.olschoolofficialmasterd {
							display: grid;
							grid-template-columns: repeat(auto-fill, minmax(20%,1fr));
							grid-auto-rows: min-content;
							grid-gap: 2px 10px;
							width: 98%;
							height: auto;
							margin: 12px 1% 12px 1%;
							padding: 8px;
							font-size: 2.2vw;
							border: 2px solid navy;
							border-radius: var(--defaultborderradius);
							.officiald {
								margin: 4px 2px 0px 0px;
								font-weight: 400;
								color: navy;
							}
						}
					}  /* olschoolmeetd */
				}  /* .meetd */
			}  /* byschoolschedbody */
		}
		
		/* ****************************************************************
		 ** Scheduler Report
		 ** ************************************************************** */
		#schedreportcontainer {
			background-color: ivory;
			#schedreportd {
				#schedreporttitle {
					width: 99%;
					height: auto;
					margin: 12px .5% 12px .5%;
					font-size: 3.5vw;
				}
				.schedstatuscounterd {
					width: 98%;
					height: auto;
					margin: 2px 1% 2px 1%;
					font-size: 3vw;
				}
			}
		}  /* schedreportcontainer */
		
		/* **********************************************************
		 **  The schedule editor
		 ** ********************************************************* */
		#scheduleeditcontainer {  /* extends containerd */
			width: 98%;
			height: auto;
			margin: 12px 1%;
			background-color: ivory;
			color: navy;
			#scheduleeditformd {
				width: 98%;
				height: 1000px;
				margin: 12px 1% 12px 1%;
				background-color: ivory;
				color: navy;
				#scheduleform {
					.notesd {
						font-weight: 600;
					}
					fieldset {
						width: 98%;
						height: auto;
						margin: 8px 1% 0px 1%;
						color: green;
						border: 1px solid green;
						border-radius: var(--defaultborderradius);
						legend {
							color: navy;
							font-size: 3vw;
						}
					}
					label {
						display: block;
						width: 94%;
						height: auto;
						margin: 8px 0px 0px 0px;
						font-size: 3vw;
						color: green;
					}
					select {
						font-size: 3vw;
					}
					#eventpubstatustitled {
						width: 95%;
						height: auto;
						margin: 12px 0px 0px 2px;
						color: green;
					}
					.eventpubprivtitled {
						width: 95%;
						height: auto;
						margin: 12px 0px 0px 2px;
						color: green;
					}
					.teamselectd {
						width: 48%;
						height: auto;
						float: left;
						margin: 8px 0px 0px 8px;
						font-size: .9vw;
						border: 1px solid navy;
					}
					#availlistformd {
						width: 10%;
						height: auto;
						float: left;
						margin: 8px 0px 0px 8px;
						font-size: 10pt;
						color: green;
						border: 1px solid navy;
					}
					.sectionlabeld {
						width: 95%;
						height: auto;
						margin: 2px 0px 4px 4px;
						color: red;
						font-size: 3vw;
						font-weight: bold;
					}
					input[type=number] {
						width: 15%;
						text-align: right;
						font-size: 3vw;
					}
					input[type=text] {
						width: 30%;
						font-size: 3vw;
					}
					input[type=submit] {
						display: block;
						width: 20%;
						height: auto;
						margin: 8px 0px 8px 24px;
						font-size: 2.2em;
						cursor: var(--allbuttoncursor);
						background-color: var(--submitbuttoncolor);
						color: var(--submitbuttontextcolor);
						border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
						border-radius: var(--defaultborderradius);
						&:hover { border-color: var(--submitbuttonborderhovercolor); }
					}
					#teamslabel {
						width: 10%;
						height: auto;
						margin: 8px 0px 2px 0px;
					}
					#eventinfofs {
						#titlediv {
							width: 98%;
							height: auto;
							input[type=text] {
								width: 98%;
								height: auto;
								font-size: 2em;
							}
						}
						#datediv {
							width: 98%;
							height: auto;
							input[type=date] {
								width: 25%;
								height: auto;
								font-size: 2em;
							}
						}
						#timediv {
							width: 98%;
							height: auto;
							input[type=time] {
								width: 25%;
								height: auto;
								font-size: 2em;
							}
						}
						#schedformdurationd {
							
						}
						#schedformtypeselectd {
							select {
								width: 60%;
								height: auto;
								font-size: 3vw;
							}
						}
					}
					#eventfs {
						label {
							display: inline;
							width: 10%;
							height: auto;
							margin: 0px 0px 0px 0px;
							font-size: 3vw;
							color: green;
						}
						input[type=radio] {
							width: 5%;
							height: auto;
							margin: 8px 0px 0px 8px;
							font-size: 3vw;
							color: green;
							border: 1px solid red;
						}
						#eventpubstatuschkboxd {
							width: 95%;
							height: auto;
							margin: 8px 0px 4px 4px;
							font-size: 3vw;
						}
						.eventpubprivchkboxd {
							width: 95%;
							height: auto;
							margin: 8px 0px 4px 4px;
						}
						input[type=checkbox] {
							display: inline;
							width: 5%;
							height: auto;
							font-size: 3vw;
							color: green;
						}
					}
					#siteinfofs {
						#schedformsiteselectd {  /* uses the form defaults defined above */
							label {}
							select {
								option {
									
								}
							}
							#schedformteamselectd {  /* uses the form defaults defined above */
								select {
									font-size: 3vw;
									option {
										
									}
								}
							}
						}
					}
					#notesfs {
						textarea {
							width: 80%;
							font-size: 3vw;
						}
					}
					#officials2fs {
						width: 98%;
						height: auto;
						margin: 8px 1% 8px 1%;
						background-color:transparent;
						#eventnumrequiredd {
							width: 85%;
							height: auto;
							margin: 4px 0px 12px 8px;
							label {
								width: 60%;
								height: auto;
								float: left;
							}
							input[type=number] {
								width: 10%;
								height: auto;
								float: left;
								margin-top: 6px;
								border: 2px solid lightblue;
							}
						}
						.availformemojid {
							width: 90%;
							height: auto;
							font-size: 3vw;
						}
						#samedatebuttond input[type=submit] {
							background-color: lightblue;
							color: navy;
						}
						#assignedofficials {
							width: 98%;
							height: auto;
							margin: 8px 1% 4px 1%;
							padding: 2px 0px 8px 8px;
							background-color: white;
							border: 1px solid navy;
							border-radius: var(--defaultborderradius);
							
							#assignedtitle {  /* see .sectionlabeld */ }
							
							.assignedcontainer {
								width: 90%;
								height: 110px;
								margin: 4px 8px 0px 0px;
								float: left;
								overflow-x: hidden;
								border: 1px solid green;
								#selected, #unselected {
									width: 85%;
									height: auto;
									margin: 2px 0px 8px 8px;
									background-color: lightblue;
								}
								.assignedrmd {
									width: 10%;
									height: auto;
									aspect-ratio: 1/1;
									margin: 0px 8px 4px 4px;
									padding: 12px;
									float: left;
									cursor: pointer;
									background-color: red;
									text-align: center;
									color: white;
									font-size: 3.5vw;
									font-weight: 700;
									border: 1px solid red;
									border-radius: 8px;
								}
								.assignednamed {
									width: 95%;
									height: auto;
									margin: 0px 0px 0px 4px;
									font-size: 3.5vw;
									font-weight: 500;
									color: orange;
									border: none;
								}
								.assignedopend {
									width: 95%;
									height: auto;
									margin: 0px 0px 0px 4px;
									font-size: 3.5vw;
									font-weight: 600;
									color: blue;
									border: none;
								}
								select {
									font-size: 3.5vw;
								}
							}	/* assigned container */
						}  /* #assignedofficials */
						#availableofficials {
							width: 98%;
							height: auto;
							margin: 8px 1% 4px 1%;
							padding: 2px 0px 8px 8px;
							background-color: white;
							border: 1px solid navy;
							border-radius: var(--defaultborderradius);
							#availabletitle { /* see .sectionlabeld */ }
							#availofficialsearchd {
								width: 85%;
								height: auto;
								margin: 8px 0px 12px 12px;
								padding: 8px 8px 8px 8px;
								background-color: transparent;
								font-size: 14px;
								color: red;
								border: 2px solid green;
								border-radius: var(--defaultborderradius);
								.notesd {
									width: 85%;
									height: auto;
									margin: 4px 0px 12px 0px;
								}
								#availsearchlabel {
									width: 25%;
									height: auto;
									float: left;
									font-size: 3vw;
									color: navy;
								}
								#availsearchinput {
									width: 20%;
									height: auto;
									float: left;
									text-transform: lowercase;
									font-size: 3vw;
									color: green;
									border: 1px solid green;
								}
								#availresetbutton {
									width: 25%;
									height: auto;
									float: left;
									margin-left: 24px;
									text-align: center;
									cursor: pointer;
									font-size: 3vw;
									color: black;
									background-color: lightgreen;
									border: 1px solid grey;
									border-radius: var(--defaultborderradius);
								}
							}  /*  availofficialsearchd */
							.availofficiald-open {
								width: 90%;
								height: 90px;
								margin: 4px 2px 4px 8px;
								padding: 2px 0px 4px 8px;
								background-color: lightblue;
								font-size: 3.5vw;
								color: navy;
								float: left;
								border: 2px solid navy;
								border-radius: var(--defaultborderradius);
							}
							.availofficiald {
								width: 90%;
								height: 90px;
								margin: 4px 2px 4px 8px;
								padding: 2px 0px 4px 8px;
								overflow: hidden;
								font-size: 3.5vw;
								color: navy;
								float: left;
								border: 2px solid navy;
								border-radius: var(--defaultborderradius);
								&:hover {
									cursor: pointer;
									background-color: lightblue;
								}
								.availofficiallocprefsd {
									margin: 0px 0px 0px 0px;
									width: 98%;
									overflow: hidden;
									font-size: 3vw;
									color: navy;
								}
							}
						}  /* availableofficials */
					} /* officials2fs */
				} /* scheduleeditform */
			} /* scheduleeditformd */
		} /* scheduleeditcontainer */
		
		/* ********************************************************
		 ** All things for the User Manager - Big screen devices
		 *********************************************************** */
		#usereditcontainer {
			background-color: ivory;
			color: navy;
			#userpagetitled {
				width: 95%;
				height: auto;
				margin: 4px 0px 4px 12px;
				font-size: 3.5vw;
				color: navy;
			}
			#newuserd {
				width: 99%;
				height: auto;
				margin: 8px .5% 8px .5%;
				color: navy;
				border: 1px solid navy;
				border-radius: var(--defaultborderradius);
				label {
					display: inline;
					width: 55%;
					height: auto;
					float: left;
					margin: 4px 0px 4px 4px;
					font-size: 3.2vw;
					color: green;
				}
				#newuserbutton {
					width: 20%;
					height: auto;
					float: left;
					margin: 4px 0px 4px 4px;
					background-color: lightgreen;
					font-size: 3.2vw;
					color: navy;
					border: 2px solid lightgreen;
					border-radius: var(--defaultborderradius);
					&:hover {
						border: 2px solid red;
					}
				}
			}  /* newuserd */
			/*
			 **  The search box
			 */
			#usersearchd {
				width: 99%;
				height: auto;
				margin: 8px .5% 8px .5%;
				padding: 4px 4px 4px 4px;
				background-color: ivory;
				border: 1px solid navy;
				border-radius: var(--defaultborderradius);
				label {
					display: inline;
					font-size: 3.5vw;
					color: green;
				}
				input[type=text] {
					display: inline;
					width: 20%;
					height: auto;
					margin: 8px 0px 8px 8px;
					text-transform: lowercase;
					font-size: 3.5vw;
					border: 1px solid blue;
				}
			}
			
			/*
			 **  The User Listing
			 */
			#userlistd {
				width: 99%;
				height: auto;
				margin: 12px .5% 12px .5%;
				color: navy;
				#userlistscrollabled {
					width: 98%;
					min-height: 10px;
					max-height: 1500px;
					margin: 4px 0px 12px 12px;
					padding: 4px 8px 4px 8px;
					background-color: transparent;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					overflow-y: auto;
					overflow-x: hidden;
					.userlistsingleuserc {
						width: 99%;
						height: auto;
						margin: 12px .5% 12px .5%;
						padding: 8px 2px 2px 12px;
						background-color: transparent;
						color: navy;
						border: 2px solid navy;
						border-radius: var(--defaultborderradius);
						.dirfullname {
							width: 60%;
							height: auto;
							margin: 0px 0px 8px 0px;
							font-size: 3.5vw;
							font-weight: bold;
							color: navy;
							border: none;
						}
						.dirrolesd {
							width: 90%;
							height: auto;
							font-size: 2.5vw;
							font-weight: normal;
							color: navy;
							border: none;
						}
						.singleuserformd {
							width: 99%;
							height: auto;
							margin: 12px .5% 12px .5%;
							.singleuserform {
								display: block;
								width: 99%;
								height: auto;
								margin: 8px .5% 8px .5%;
								border: none;
								input[type=submit] {  /* .usereditformsubmit */
									width: 25%;
									height: auto;
									background-color: lightgreen;
									font-size:  4vw;
									text-align: center;
									cursor: var(--allbuttoncursor);
									background-color: var(--submitbuttoncolor);
									color: var(--submitbuttontextcolor);
									border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
									border-radius: var(--defaultborderradius);
									&:hover { border-color: var(--submitbuttonborderhovercolor); }
								}
								input[type=button] {  /* usereditformremovesubmit */
									width: 25%;
									height: auto;
									background-color: red;
									font-size:  4vw;
									text-align: center;
									color: ivory;
									border-radius: var(--defaultborderradius);
								}
							}
							.confirmbox {
								position: absolute;
								top: 100px;
								left: 400px;
								width: 40%;
								min-height: 400px;
								z-index: 1000;
								padding: 12px 12px 12px 12px;
								background-color: lightgrey;
								color: orangered;
								font-size: 3vw;
								font-weight: 700;
								border: 4px solid navy;
								border-radius: var(--defaultborderradius);
								#warningdiv {
									width: 80%;
									height: auto;
									margin: 12px 0px 12px 8%;
									padding: 12px;
									background-color: ivory;
									font-size: 1vw;
									font-weight: 600;
									color: navy;
									border: 2px solid navy;
								}
								.confirmbuttonc {
									display: block;
									width: 15%;
									height: auto;
									margin: 24px 18px 8px 20%;
									float: left;
									background-color: lightgreen;
									color: navy;
									font-size: 1vw;
									font-weight: 700;
									border: 3px solid lightgreen;
									border-radius: var(--defaultborderradius);
									&:hover {
										border: 3px solid red;
									}
								}
								.cancelbuttonc {
									display: block;
									width: 15%;
									height: auto;
									margin: 24px 18px 8px 20%;
									float: left;
									background-color: red;
									color: ivory;
									font-size: 1vw;
									font-weight: 700;
									border: 1px solid red;
									border-radius: var(--defaultborderradius);
								}
							}  /* confirmbox */
						}  /* singleuserformd */
						.usersinglecontactd {
							width: 99%;
							height: auto;
							margin: 12px .5% 12px .5%;
							.diremail {
								display: inline-block;
								width: 20%;
								height: auto;
								margin: 4px 0px 4px 0px;
								font-style: italic;
								font-size: 2.5vw;
								font-weight: normal;
								color: grey;
								a:link, a:visited {
									color: blue;
									font-style: italic;
									font-size: 3vw;
									text-decoration: none;
								}
							}
							.dirphone {
								display: inline-block;
								width: 20%;
								height: auto;
								margin: 4px 0px 4px 0px;
								font-style: italic;
								font-size: 2.5vw;
								font-weight: normal;
								color: grey;
								a:link, a:visited {
									color: blue;
									font-style: italic;
									font-size: 3vw;
									text-decoration: none;
								}
							}
							.dirsms {
								display: inline-block;
								width: 20%;
								height: auto;
								margin: 4px 0px 4px 0px;
								font-style: italic;
								font-size: 2.5vw;
								font-weight: normal;
								color: grey;
								a:link, a:visited {
									color: blue;
									font-style: italic;
									font-size: 3vw;
									text-decoration: none;
								}
							}
						}  /* usersinglecontactd */
					}  /* .userlistsingleuserc */
				}  /* userlistscrollabled */
			}  /* userlistd */
		}  /* usereditcontainer */
		
		/* *************************************************************
		 **  User Edit form
		 ** ***********************************************************s*/
		#usereditformd {
			width: 99%;
			height: 1200px;
			margin: 12px .5% 12px .5%;
			padding: 12px 0px 4px 8px;
			color: navy;
			font-size: 3vw;
			background-color: ivory;
			#usereditform {
				color: green;
				.formtitled {
					width: 90%;
					height: auto;
					margin: 4px 0px 8px 12px;
					font-size: 3.5vw;
					color: navy;
				}
				fieldset {
					width: 99%;
					height: auto;
					margin: 12px .5% 12px .5%;
					color: green;
					border-radius: var(--defaultborderradius);
					legend {
						font-size: 3vw;
						color: red;
					}
				}
				label {
					font-size: 3vw;
					font-weight: 500;
					color: green;
				}
				input[type=radio] {
					width: 40px;
					height: 40px;
					margin-right: 12px;
					accent-color: red;
				}
				input[type=checkbox] {
					width: 40px;
					height: 40px;
					margin-right: 12px;
					accent-color: red;
				}
				.inputd {
					width: 90%;
					height: auto;
					margin: 4px 0px 0px 12px;
				}
				input[type=text] {
					width: 20%;
					font-size: 3vw;
				}
				input[type=number] {
					width: 15%;
					text-align: right;
					font-size: 3vw;
				}
				input[type=email] {
					width: 55%;
					font-size: 3vw;
				}
				#snailmailinputd {
					width: 95%;
					height: auto;
					margin: 12px 0px 0px 12px;
					input[type=text] {
						width: 40%;
						margin: 4px 0px 0px 0px;
					}
					.inputdsm {
						width: 45%;
						height: auto;
						float: left;
						margin: 4px 12px 0px 0px;
						input[type=text]{
							width: 70%;
							height: auto;
							float: left;
						}
					}
					.inputdsmaddr {
						width: 48%;
						height: auto;
						float: left;
						margin: 4px 12px 0px 0px;
						input[type=text] {
							width: 98%;
							height: auto;
						}
					}
					.inputdsmstate {
						width: 30%;
						height: auto;
						float: left;
						margin: 4px 4px 0px 0px;
						input[type=text]{
							width: 80%;
							height: auto;
							margin: 4px 12px 0px 0px;
							float: left;
						}
					}
					.inputdsmpc {  /* postal code  */
						width: 50%;
						height: auto;
						float: left;
						margin: 4px 12px 0px 0px;
						input[type=text]{
							width: 80%;
							height: auto;
							margin: 4px 12px 0px 0px;
							float: left;
						}
					}
				}  /* snailmailinputd */
				#buttond {
					width: 70%;
					margin: 12px 25% 12px 15%;
					height: auto;
					#usersubmitd {
						display: inline-block;
						width: 40%;
						margin: 12px 48px 4px 12px;
						input[type=submit] {
							width: 100%;
							height: auto;
							font-size: 4vw;
							color: var(--submitbuttontextcolor);
							cursor: var(--allbuttoncursor);
							background-color: var(--submitbuttoncolor);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover { border-color: var(--submitbuttonborderhovercolor); }
						}
					}
					#usercanceld {
						display: inline-block;
						width: 40%;
						margin: 12px 0px 4px 12px;
						input[type=button]{
							width: 100%;
							height: auto;
							cursor: pointer;
							background-color: red;
							color: ivory;
							font-size: 4vw;
							border: 1px solid red;
							border-radius: var(--defaultborderradius);
						}
					}
				}  /* buttond */
				.userinfod {
					width: 90%;
					height: auto;
					margin: 8px 0px 2px 8px;
					text-align: left;
					font-size: 2vw;
					font-style: italic;
					color: navy;
				}
			}  /* usereditform */
			#usernotfoundlabeld {
				width: 80%;
				height: auto;
				margin: 8px 0px 0px 12px;
				background-color: transparent;
				text-align: left;
				color: green;
				font-size: 3.5vw;
			}
			#usernotfoundd {
				width: 40px;
				height: auto;
				margin: 8px 0px 0px 12px;
				background-color: green;
				text-align: center;
				color: ivory;
				font-weight: bold;
				border: 1px solid green;
				border-radius: var(--defaultborderradius);
				a:link, a:visited {
					color: ivory;
					text-decoration: none;
				}
			}
		}	/* usereditformd */
		
		#paypalcontainer {
			#paymentd {
				width: 95%;
				height: auto;
				margin: 8px 0px 8px 8px;
				padding: 8px;
				background-color: transparent;
				font-size: 4vw;
				color: navy;
				border: 1px solid green;
				border-radius: var(--defaultborderradius);
			}
		}
		
		#pageinfocontainer {  /* extends .containerd */
			height: 1450px;
			#pageinfod {
				width: 98%;
				margin: 12px 1% 12px 1%;
				height: 1250px;
				overflow-y: auto;
				overflow-x: hidden;
				[maintitle] {
					width: 100%;
					text-align: left;
					padding: 8px 0px 0px 0px;
					font-weight: bold;
					font-size: 4vw;
				}
				[pnote] {
					margin: 8px 0px 8px 12px;
					padding: 0px 4px 0px 8px;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
				}
				[sectiontitle] {
					margin-top: 8px;
					font-weight: 600;
					font-size: 3.5vw;
					color: royalblue;
				}
				[subtitle1] {
					margin-top: 8px;
					font-weight: bold;
					font-size: 3.3vw;
				}
				[bodytext] {
					font-size: 3vw;
				}
				p {
					font-size: 3vw;
					color: navy;
				}
				#htmltext {
					font-size: 3vw;
					height: 1300px;
					color: navy;
					.page_image_left {
						float: left;
						max-width: 40%;
						margin: 6px 6px 6px 6px;
					}
					.page_image_right {
						float: right;
						max-width: 40%;
						margin: 6px 6px 6px 6px;
					}
				}
				#trailer {
					display: none;
					width: 98%;
					padding: 4px 12px 4px 12px;
					margin: 8px 1% 0px 1%;
					border: 1px solid silver;
					border-radius: var(--defaultborderradius);
				}
			}	/* pageinfod */
		}  /* pageinfocontainer */
	} /* centercol small nested */
} /* main section */
}  /* end of small screens media query */

/*
**  When the phone is turned to landscape position
*/
@media screen and (orientation:landscape) {	
	body {
		font-size: .8vw;
	}
	[maintitle] {
		width: 100%;
		text-align: left;
		padding: 8px 0px 0px 0px;
		font-weight: bold;
		font-size: 14pt;	
	}
	/* ***************************************************************************
	** The top menu.  Currently only used on big screens.
	*****************************************************************************/
	#menud {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(8%,1fr));
		grid-auto-rows: max-content;
		grid-gap: 2px 5px;
		width: 90%;
		margin: 8px 5%;
		padding: 0px 0px 0px 0px;
		text-align: left;
		font-size: .75vw;
		background-color: transparent;
		border: none;
		.menudformd {		
			margin: 0px 4px 4px 0px;
			border: none;
			input[type=submit] {		
				background-color: transparent;
				font-size: .5em;
				color: ivory;
				border: none;
				&:hover {
					color: red;
					cursor: pointer;
				}
			}
			a:link,a:visited {
				text-decoration: none;
				font-size: .5em;
				color: ivory;color: ivory;
				&:hover { color: red }
			}
		} /* menudformd */	
	} /* menud */
	[pnote] {
		margin: 8px 0px 8px 12px;
		padding: 0px 4px 0px 8px;
		border: 1px solid navy;
		border-radius: var(--defaultborderradius);
	}
	[sectiontitle] {
		margin-top: 8px;
		font-weight: bold;
		font-size: 11pt;
		color: royalblue;
	}
	[subtitle1] {
		margin-top: 8px;
		font-weight: bold;
		font-size: 10pt;
	}
	[bodytext] {
		font-size: 10pt;
	}
	.body-staging {
		background-color: BlueViolet;
	}
	.body-development {
		
	}
	.meetinfod {
		font-size: 12pt;
	}
}
/* #################################################################
##  Big screen devices (desk/laptops)
#################################################################### */
@media screen and (min-width: 1024px) {
	body {
		/* see top of file */
	}
	#mainheader {
		width: 100%;
		height: auto;
		margin: 0px;
		padding: 0px;
		background-color: transparent;
		background-image: url(headerimage14.jpg);
		background-size: cover;
		overflow: hidden;
		font-size: 1.5rem;
		color: ivory;
		text-align: left;
		.subheader1 {
			width: 98%;
			height: auto;
			margin: 0px 1% 8px 1%;
			padding: 4px 0px 4px 8px;
			background-color: transparent;
			font-size: 1rem;
			color: ivory;
			text-align: left;	
		}
		#headercommandnav {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			gap: 8px;
			width: 98%;
			height: 2%;
			margin: 4px 1%;
			.headercommandc {
				width: 10%;
				height: auto;
				font-size: 1rem;
				font-weight: 600;
				color: white;
				& > form {
					display: block;
					font-weight: 600;
					font-size: 1.2em;
					color: white;
					input[type=submit] {
						background-color: transparent;
						border: none;
						font-size: inherit;
						font-weight: inherit;
						color: inherit;
						&:hover {
							cursor: pointer;
						}
					}
				}
				a:link, a:visited {
					color: white;
					text-decoration: none;
				}
			}  /* headercommandc */
		}	/* headercommandnav */
	}  /* mainheader */

	/* ***************************************************************************
	** The top menu.  Currently only used on big screens.
	*****************************************************************************/
	#menud {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(8%,1fr));
		grid-auto-rows: max-content;
		grid-gap: 2px 5px;
		width: 90%;
		margin: 8px 5%;
		padding: 0px 0px 0px 0px;
		text-align: left;
		font-size: .75vw;
		background-color: transparent;
		border: none;
		.menudformd {
			/* display: inline-block; */		
			margin: 0px 4px 4px 0px;
			border: none;
			input[type=submit] {		
				background-color: transparent;
				font-size: .75vw;
				color: ivory;
				border: none;
				&:hover {
					color: red;
					cursor: pointer;
				}
			}
			a:link,a:visited {
				text-decoration: none;
				font-size: .75vw;
				color: ivory;color: ivory;
				&:hover { color: red }
			}
		} /* menudformd */	
	} /* menud */
	
	/*
	**  08/05/2025 - Added the main wrabber section to get rid of the floated columns - cleaner layout.
	*/
	#main {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		
		/* *******************************************************************
		 **	Left Column
		 ******************************************************************** */
		#leftcol {
			width: 20%;
			height: auto;
			.containerd {
				width: 98%;
				height: auto;
				margin: 0px 1% 0px 1%;
				overflow: hidden;
				border-radius: var(--defaultborderradius);
				.titled {
					width: 100%;
					text-align: left;
					margin: 0px 0px 0px 0px;
					padding: 0px 4px 8px 8px;
					font-size: 10pt;
					font-style: italic;
					font-weight: bold;
					color: black;
					background-color: silver;
					border: 1px solid silver;
				}
				.titleimage {
					width: 28px;
					display: block;
					float: left;
					margin-top: 1px;
				}
				.titletxtd {
					padding: 4px 0px 0px 0px;
				}
				.innerscrollable {
					margin: 12px 2px 12px 2px;
					padding: 0px 4px 0px 12px;
					overflow-y: auto;
					color: navy;
					border: none;
				}
				.innerscrollable p {
					border: none;
					font-size: 8pt;
					color: navy;
				}
			} /* containerd */
			
			.notesd {  /* The default for leftcol */
				width: 90%;
				margin: 12px 0px 12px 16px;
				font-size: 8pt;
				font-style: italic;
			}
			
			#rosterlinkcontainer {  /* extends containerd */
				width: 100%;
				height: auto;
				margin-bottom: 12px;
				background-color: ivory;
				.rosterd {
					width: 98%;
					height: auto;
					margin: 8px 1% 8px 1%;
					padding: 4px 8px 4px 8px;
					background-color: ivory;
					font-size: .8vw;
					color: green;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					.rosterlinkd {
						width: 95%;
						height: auto;
						margin: 4px 0px 4px 12px;
						padding-bottom: 8px;
						border-bottom: 2px solid green;
					}
					a:link {
						color: red;
						text-decoration: none;
						font-size: .8vw;
					}
					a:visited {
						color: red;
						text-decoration: none;
						font-size: .8vw;
					}
					.rosterlinkinstructions {
						width: 95%;
						height: auto;
						margin: 4px 0px 4px 12px;
						font-size: .8vw;
						color: green;
					}
					.notesd {
						color: red;
						font-size: .8vw;
					}
				}  /* rosterd */
			}  /* rosterlinkcontainer */
			
			#newscontainer {  /* leftcol big extends .containerd */
				width: 100%;
				height: 600px;
				background-color: ivory;
				overflow-y: auto;
				overflow-x: hidden;
				.titled {
					width: 100%;
					text-align: left;
					margin: 0px 0px 0px 0px;
					padding: 0px 4px 8px 8px;
					font-size: .8vw;
					font-style: italic;
					font-weight: bold;
					color: black;
					background-color: silver;
					border: 1px solid silver;
				}
				.titleimage {
					width: 28px;
					display: block;
					float: left;
					margin-top: 1px;
				}
				.titletxtd {
					padding: 4px 0px 0px 0px;
				}
				.newsbuttonnew {
					display: block;
					width: 90%;
					height: auto;
					margin: 8px 0px 8px 5%;
					cursor: pointer;
					background-color: blueviolet;
					font-size: .9vw;
					color: ivory;
					border: 1px solid grey;
					border-radius: 10px;
				}
				.newsd {
					width: 90%;
					height: 200px;
					resize: vertical;
					overflow: hidden;
					margin: 8px 6px 0px 6px;
					padding: 4px;
					font-weight: 400;
					border: 1px solid grey;
					border-radius: var(--defaultborderradius);
					p {
						width: 95%;
						height: auto;
						margin: 0px 0px 0px 6px;
						color: navy;
						font-size: .8vw;
					}
					.newsitemmtime {
						width: 95%;
						height: auto;
						margin: 6px 0px 4px 8px;
						font-size: 10px;
						font-style: italic;
						font-weight: 400;
						color: navy;
					}
					.newsitemtitle {
						width: 95%;
						height: auto;
						margin: 6px 0px 4px 8px;
						font-weight: 700;
						color: navy;
						font-size: 1vw;
					}
					.newsitemimage {
						width: 95%;
						height: auto;
						margin: 6px 4px 4px 6px;
						border: 1px solid transparent;
						border-radius: var(--defaultborderradius);
					}
					.newsitembody {
						width: 95%;
						height: auto;
						margin: 6px 4px 4px 6px;
						font-size: .8vw;
						font-weight: 400;
						color: navy;
						border: none;
					}
					.newsitembody p {
						margin: 0px 0px 12px 0px;
					}
					.newsadmind {
						.newssearchid {
							width: 95%;
							height: auto;
							margin: 8px 0px 0px 8px;
							background-color: transparent;
							font-size: .9vw;
							font-style: italic;
							color: navy;
						}
						.newsbuttonedit {
							display: block;
							width: 90%;
							height: auto;
							margin: 8px 0px 8px 5%;
							cursor: pointer;
							background-color: lightgreen;
							font-size: .9vw;
							color: black;
							border: 1px solid grey;
							border-radius: 10px;
						}
						.newsbuttonpub {
							display: block;
							width: 90%;
							height: auto;
							margin: 8px 0px 8px 5%;
							cursor: pointer;
							background-color: yellow;
							font-size: .9vw;
							color: black;
							border: 1px solid grey;
							border-radius: 10px;
						}
						.newsbuttonunpub {
							display: block;
							width: 90%;
							height: auto;
							margin: 8px 0px 8px 5%;
							cursor: pointer;
							background-color: pink;
							font-size: .9vw;
							color: black;
							border: 1px solid grey;
							border-radius: 10px;
						}
						.newsbuttonremove {
							display: block;
							width: 90%;
							height: auto;
							margin: 8px 0px 8px 5%;
							cursor: pointer;
							background-color: red;
							font-size: .9vw;
							color: ivory;
							border: 1px solid grey;
							border-radius: 10px;
						}
						.newssearchbutton {
							display: block;
							width: 90%;
							height: auto;
							margin: 8px 0px 8px 5%;
							cursor: pointer;
							background-color: lightgreen;
							font-size: .9vw;
							color: navy;
							border: 1px solid grey;
							border-radius: 10px;
						}
					} /* .newsadmind  */
				} /* .newsd */
			} /* newscontainer */
		}  /* leftcol */
		
		
		/* **************************************
		 ** Right Column
		 ** **************************************/
		#rightcol {
			width: 22%;
			height: auto;
			background-color: transparent;
			border: none;
			.containerd {
				width: 98%;
				height: auto;
				margin-bottom: 12px;
				overflow: hidden;
				background-color: ivory;
				border: 1px solid silver;
				border-radius: var(--defaultborderradius);
				.titled {
					width: 100%;
					text-align: left;
					margin: 0px 0px 0px 0px;
					padding: 0px 4px 8px 8px;
					font-size: 10pt;
					font-style: italic;
					font-weight: bold;
					color: black;
					background-color: silver;
					/* border: 1px solid silver;
					 border-radius: var(--defaultborderradius); */
				}
				.titleimage {
					width: 28px;
					display: block;
					float: left;
					margin-top: 1px;
				}
				.titletxtd {
					padding: 4px 0px 0px 0px;
				}
				.innerscrollable {
					width: 98%;
					height: 300px;
					padding: 4px;
					overflow-y: auto;
					.doclinksd {
						
					}
				}
			} /* containerd */
			
			.notesd {  /* The default for rightcol */
				width: 90%;
				margin: 12px 0px 12px 16px;
				font-size: 8pt;
				font-style: italic;
			}
			
			#doclinkscontainer,#doctraininglist,#docgenerallist,#docsponsorlist,#docalllist,#docrulebooklist {
				width: 99%;
				height: 300px;
				margin: 4px 0px 24px 4px;
				padding: 0px 0px 8px 0px;
				background-color: ivory;
				overflow-y: auto;
				border: 1px solid navy;
				border-radius: var(--defaultborderradius);
				#doclinkstext {
					display: flex;
					flex-direction: column;
					gap: 6px;
					color: navy;
					font-size: .8rem;
					& > div{
						a {
							&:link, &:visited {
								text-decoration: none;
								color: royalblue;
							}
							&:hover {
								color: red;
							}
						}
					}	/* doclinkd */
				}
			} /* doclinkscontainer */
			
			/*
			 ** Right Column Availability
			 */
			#availlistd {
				height: 500px;
				background-color: ivory;
				overflow-y: auto;
				overflow-x: hidden;
				.availstrd {
					width: 90%;
					height: auto;
					margin: 4px 0px 0px 8px;
					color: navy;
				}
			} /* availlistd */
		} /* rightcol */
		
		#centercol {  /* big nested */
			width: 55%;
			height: auto;
			/* margin: 0px 4px 0px 4px; */
			padding: 0px 0px 14px 0px;
			background-color: transparent;
			color: ivory;
			border-radius: var(--defaultborderradius);
			overflow: hidden;
			.schedmodtimed {
				width: 98%;
				height: auto;
				margin: 8px 1%;
				background-color: transparent;
				font-size: 1em;
				font-style: italic;
				color: navy;
			}
			.containerd, .schedule_container {
				width: 100%;
				height: auto;
				padding: 0px;
				background-color: transparent;
				color: white;
				border: 2px solid silver;
				border-radius: var(--defaultborderradius);
				overflow: hidden;
				.titled {
					width: 100%;
					text-align: left;
					margin: 0px 0px 0px 0px;
					padding: 0px 4px 8px 8px;
					font-size: 10pt;
					font-style: italic;
					font-weight: bold;
					color: black;
					background-color: silver;
					border: 1px solid silver;
				}
				.titleimage {
					width: 28px;
					display: block;
					float: left;
					margin-top: 1px;
				}
				.titletxtd {
					padding: 4px 0px 0px 0px;
				}
				#schedsearchinputd {
					width: 98%;
					height: auto;
					margin: 8px 1% 8px 1%;
					padding: 8px 8px 8px 12px;
					background-color: ivory;
					font-weight: 500;
					font-size: 1vw;
					color: navy;
					border: 2px solid navy;
					border-radius: var(--defaultborderradius);
					.notesd {
						width: 98%;
						margin: 8px 1% 8px 1%;
						height:auto;
						font-style: normal;
						font-size: 1vw;
					}
					input[type=text] {
						width: 30%;
						height: auto;
						padding-left: 12px;
						font-size: 1vw;
						color: navy;
						border: 2px solid grey;
						border-radius: var(--defaultborderradius);
					}
				}  /* schedsearchinputd */
				.schedule_body {
					width: 98%;
					height: 560px;
					margin: 8px 0px 12px 8px;
					padding: 4px 8px 12px 8px;
					background-color: ivory;
					color: navy;
					font-family: verdana;
					font-size: 10pt;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius) 0px 0px 15px;
					overflow-y: auto;
					overflow-x: hidden;
					scrollbar-color: silver transparent;
					::-webkit-scrollbar {
						width: 8px;
						background-color: transparent;
					}
					::-webkit-scrollbar-track {
						width: 20px;
						border-radius: var(--defaultborderradius);
						background-color: transparent;
					}
					::-webkit-scrollbar-track-piece {
						border-radius: 0px;
						background-color: transparent;
					}
					::-webkit-scrollbar-thumb {
						background-color: lightgrey;
						border-radius: var(--defaultborderradius);
					}
					.meetd {
						width: 99%;
						height: auto;
						margin: 8px .5% 0px .5%;
						padding: 8px 0px 8px 4px;
						background-color: transparent;
						color: navy;
						border: 2px solid navy;
						border-radius: var(--defaultborderradius);
					} /* .meetd */
					.schedmodtimed {
						width: 98%;
						height: auto;
						margin: 0px;
						background-color: ivory;
						font-size: .6vw;
						font-style: italic;
						color: navy;
					}
				} /* .schedule_body */
			} /* containerd */
			
			.notesd {  /* The default for centercol */
				width: 90%;
				margin: 12px 0px 12px 16px;
				font-size: 8pt;
				font-style: italic;
			}
			
			#arbiterreconcile {  /* extends containerd */
				display: flex;
				width: 98%;
				height: 700px;
				margin: 4px 1%;
				padding: 8px;
				overflow-y: auto;
				background-color: ivory;
				border: 1px solid silver;
				border-radius: var(--defaultborderradius);
				.meetlist {
					width: 45%;
					height: auto;
					margin: 2px 1%;
					padding: 4px;
					border: 1px solid transparent;
					border-radius: var(--defaultborderradius);
					.total {
						width: 98%;
						height: auto;
						margin: 4px 1%;
						font-weight: 500;
						color: green;
						border-bottom: 2px solid navy;
					}
					.singlemeet {
						width: 98%;
						height: auto;
						margin: 4px 1%;
						border-bottom: 1px solid navy;
						text-overflow: ellipsis;
						.meetelement {
							width: 98%;
							height: auto;
							margin: 2px 1%;
							cursor: pointer;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: .8em;
							font-weight: 700;
							&:hover {
								white-space: wrap;
							}
						}
						.official {
							margin-left: 16px;
							font-weight: 400;
						}
						.officalstarred {
							margin-left: 16px;
							color: red;
						}
						.officialopen {
							margin-left: 16px;
							color: red;
							font-weight: 600;
						}
						.officialdiff {
							margin-left: 16px;
							color: blueviolet;
							font-weight: 600;
						}
					}
					.daycountdiv {
						width: 98%;
						height: auto;
						margin: 8px 1%;
						border-bottom: 2px solid red;
					}
				}
			}
			
			#officialsummary {	/* extends .containerd */
				width: 98%;
				height: 800px;
				margin: 8px 1%;
				padding: 4px 4px 12px 4px;
				overflow-y: auto;
				background-color: ivory;
				color: navy;
				#officialsummarytotal {
					width: 98%;
					height: auto;
					margin: 8px 1%;
					font-size: 1.2em;
					font-weight: 600;
				}
				#officialsummaryofficials {
					display: grid;
					grid-template-columns: repeat(auto-fill, minmax(20%,1fr));
					grid-auto-rows: 100px;
					grid-gap: 10px 8px;
					/* width: 98%;
					 height: auto;
					 margin: 8px 1%; */
					.officialsummaryind {
						padding: 4px;
						font-size: 1em;
						background-color: lightgrey;
						border: 1px solid silver;
						border-radius: var(--defaultborderradius);
						.officialsummaryindtotal {
							margin-left: 12px;
						}
					}
				}
				#officialleaderboardtitle {
					width: 98%;
					height: auto;
					margin: 8px 1%;
					font-size: 1.2em;
				}
				#officialleaderboard {
					display: grid;
					grid-template-columns: repeat(auto-fill, minmax(25%,1fr));
					grid-auto-rows: 30px;
					grid-gap: 10px 8px;
					border: none;
					.officialsummaryleaders {
						padding: 4px;
						font-size: 1em;
						background-color: LightCoral;
					}
				}
			}
			
			#olschedemailbackend {
				background-color: ivory;
				color: navy;
				#olemailfeedbackd {
					width: 95%;
					height: auto;
					margin: 12px 0px 8px 12px;
					padding: 4px 4px 4px 8px;
					background-color: transparent;
					color: navy;
					border: 2px solid navy;
					border-radius: var(--defaultborderradius);
					#schedemailwarningd {
						width: 95%;
						height: auto;
						margin: 4px 0px 4px  12px;
						padding: 4px 4px 4px  8px;
						background-color: ivory;
						color: red;
						border: 2px solid red;
						border-radius: var(--defaultborderradius);
					}
					form {
						input[type=submit] {
							display: block;
							width: 20%;
							height: auto;
							margin: 12px 40% 12px 40%;
							font-size: 2vw;
							cursor: var(--allbuttoncursor);
							/* background-color: var(--submitbuttoncolor); */
							background-color: purple;   /* intentionally made ugly in case we reinstate this */
							color: var(--submitbuttontextcolor);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover {border-color: var(--submitbuttonborderhovercolor);}
						}
					}
				}
			}  /* olschedemailbackend */
			
			.innerscrollable {
				width: 98%;
				height: 500px;
				padding: 0px 12px 0px 12px;
				margin: 12px 1% 12px 1%;
				overflow-y: auto;
				overflow-x: hidden;
				scrollbar-color: silver transparent;
				background-color: ivory;
				border: 2px solid silver;
				border-radius: var(--defaultborderradius) 0px 0px 15px;
				table {     /*  for documents pageinfo */
					margin: 4px 0px 12px 0px;
					background-color: transparent;
					color: black;
					font-family: verdana;
					font-size: .5vw;
					border: 1px solid navy;
					border-collapse: collapse;
					th {     /*  for documents like pageinfo */
						padding: 0px 4px 4px 4px;
						background-color: silver;
						color: navy;
						font-family: verdana;
						font-size: .5vw;
						border: 1px solid navy;
						border-collapse: collapse;
					}
					td {     /*  for documents like pageinfo */
						background-color: transparent;
						color: black;
						font-family: verdana;
						font-size: .5vw;
						border: 1px solid navy;
						border-collapse: collapse;
					}
				}
				&::-webkit-scrollbar {
					width: 8px;
					margin: 8px 2px 0px 0px;
					background-color: transparent;
					overflow: hidden;
				}
				&::-webkit-scrollbar-track {
					border-radius: var(--defaultborderradius);
					background-color: transparent;
					margin-right: 12px;
				}
				&::-webkit-scrollbar-track-piece {
					border-radius: 0px;
					background-color: transparent;
				}
				&::-webkit-scrollbar-thumb {
					background-color: lightgrey;
					border-radius: var(--defaultborderradius);
				}
			}  /* .innerscrollable */
			
			/*
			 **  Schedule lock
			 */
			#schedlockd {
				width: 94%;
				min-height: 600px;
				margin: 20px 0px 0px 12px;
				padding: 8px 8px 8px 8px;
				background-color: ivory;
				font-size: .8vw;
				color: navy;
				border: 4px solid red;
				border-radius: var(--defaultborderradius);
			}
			
			/*
			 **  Backend stuff  -  This should (eventually) cover the backends for all classes
			 */
			#generalbackendcontainer {
				.generalbackendsection, .generalbackendd {
					width: 94%;
					height: auto;
					margin: 4px 3% 4px 3%;
					padding: 4px;
					background-color: ivory;
					color: navy;
					font-size: .8vw;
					border: 2px solid navy;
					border-radius: var(--defaultborderradius);
					.generalbackendsectiontitle, .generalbackendheaderd {
						width: 98%;
						height: auto;
						margin: 0px 0px 8px 2%;
						font-weight: 600;
						font-size: .9vw;
						border: none;
					}
					.generalbackendsubsection {
						width: 98%;
						height: auto;
						margin: 12px 0px 2px 2%;
						padding: 8px;
						font-weight: 400;
						font-size: 1.2em;
						border: none;
					}
					.generalbackendsubtitle {
						width: 98%;
						height: auto;
						margin: 0px 0px 0px 0px;
						font-weight: 600;
						font-size: .8vw;
						border: none;
					}
				}  /* generalbackendsection */
				.generalbackendbuttonsection {  /* should be inside that last generalbackendsection */
					width: 94%;
					height: auto;
					margin: 4px 3% 4px 3%;
					background-color: ivory;
					color: navy;
					font-size: 1vw;
					border: none;
					form {
						width: 80%;
						height: auto;
						margin: 0px 10% 0px 10%;
						input[type=submit] {
							display: block;
							width: 20%;
							height: auto;
							margin: 12px 35% 12px 35%;
							background-color: var(--submitbuttoncolor);
							font-size: 1.2vw;
							font-weight: 500;
							cursor: var(--allbuttoncursor);
							color: var(--submitbuttontextcolor);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover { border-color: var(--submitbuttonborderhovercolor); }
						}
						#myschedulebutton {
							width: 20%;
							height: auto;
							margin: 12px 40%;
						}
					}
				} /* generalbackendbuttonsection */
				.generalbackendbuttonsectionsched {
					width: 98%;
					height: auto;
					margin: 4px 1% 24px 1%;
					padding: 12px 0px 12px 64px;
					background-color: ivory;
					color: navy;
					font-size: 2vw;
					border: none;
					form {
						display: inline-block;
						width: 25%;
						height: auto;
						margin-right: 24px;
						input[type=submit] {
							width: 100%;
							cursor: pointer;
							font-size: 1.2vw;
							color: var(--submitbuttontextcolor);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover { border-color: var(--submitbuttonborderhovercolor); }
						}
					}
					#scheddeletebackf {
						display: block;
						width: 30%;
						height: auto;
						input[type=submit] {
							cursor: var(--allbuttoncursor);
							background-color: var(--submitbuttoncolor);
							color: var(--submitbuttontextcolor);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover { border-color: var(--submitbuttonborderhovercolor); }
						}
					}
					#schedbackendbackf {
						input[type=submit] {
							cursor: var(--allbuttoncursor);
							background-color: var(--submitbuttoncolor);
							color: var(--submitbuttontextcolor);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover { border-color: var(--submitbuttonborderhovercolor); }
						}
					}
					#schedbackendsearchf {
						input[type=submit] {
							background-color: navy;
							color: ivory;
							border: 2px solid navy;
							&:hover {
								border: 2px solid white;
							}
						}
					}
					#schedbackendsamedatef {
						input[type=submit] {
							background-color: lightblue;
							color: navy;
							border: 2px solid lightblue;
							&:hover {
								border: 2px solid navy;
							}
						}
					}
				}  /* generalbackendbuttonsectionsched */
			}  /* generalbackendcontainer */
			
			/*
			 ** The Contacts list elements
			 */
			#contactlistd {   /*  Extends .containerd, Leave the # in so the javascript scroll methods work */
				width: 98%;
				height: 700px;
				margin: 8px 1%;
				background-color: ivory;
				border: 2px solid navy;
				border-radius: var(--defaultborderradius);
				#contactinfod {
					width: 95%;
					height: 1000px;
					overflow-x: scroll;
					border-top: 2px solid navy;
					user-select: none;  /* turns off copy&paste */
					&::selection { background: none; }
					#namesearchdiv {
						width: 98%;
						height: auto;
						margin: 12px 1%;
						#namesearchmessage {
							width: 98%;
							height: auto;
							margin: 8px 1%;
							font-style: italic;
						}
						label {
							margin-left: 12px;
							color: navy;
							font-weight: 600;
						}
						input[type=text] {
							margin-left: 8px;
						}
						input[type=button] {
							width: 15%;
							height: auto;
							margin-left: 12px;
							background-color: lightBlue;
							font-weight: 600;
							color: navy;
							border: 2px solid transparent;
							border-radius: var(--defaultborderradius);
							&:hover { border-color: red; }
						}
					}
					.contactbodysectiond {
						width: 95%;
						height: auto;
						margin: 2px 0px 2px 12px;
						padding: 8px;
						overflow-y: auto;
						color: navy;
						border-bottom: 2px solid green;
					}
					.contactbodyindexd {
						width: 2.5%;
						height: auto;
						aspect-ratio: 1/1;
						margin: 2px 0px 2px 0px;
						background-color: transparent;
						font-size: 1.2vw;
						font-weight: 700;
						color: green;
					}
					.contactbodypersond {
						width: 95%;
						height: auto;
						margin: 2px 0px 12px 12px;
						padding-bottom: 8px;
						color: navy;
						font-size: 12px;
						font-weight: 600;
						border-bottom: 2px solid lightBlue;
					}
					.contactbodynamed {
						width: 95%;
						height: auto;
						margin: 2px 0px 2px 12px;
						color: navy;
						font-size: 18px;
						font-weight: 600;
					}
					.contactbodyaddressd {
						width: 95%;
						height: auto;
						margin: 2px 0px 2px 32px;
						color: navy;
						font-size: 12px;
						font-weight: 400;
					}
					.contactbodyphoned {
						width: 95%;
						height: auto;
						margin: 2px 0px 2px 32px;
						color: navy;
						font-size: 12px;
						font-weight: 400;
					}
					.contactbodyadmind {
						width: 95%;
						height: auto;
						margin: 2px 0px 2px 32px;
						color: navy;
						font-style: italic;
						font-size: 12px;
						font-weight: 400;
					}
				}
			}  /* contactlistd */
			
			/* ************************************************
			 **  Contact form
			 ** ************************************************ */
			#contactformcontainer {
				#contactformd {
					width: 90%;
					height: auto;
					color: navy;
					font-size: 10pt;
					#contactform {
						#contactformtitle {
							width: 90%;
							height: auto;
							margin: 12px 0px 12px 0px;
							font-size: 1.2vw;
						}
						label {
							display: block;
							width: 80%;
							margin: 12px 0px 0px 0px;
							font-size: 1vw;
							color: green;
						}
						input[type=text] {
							display: block;
							width: 40%;
							font-size: 1vw;
						}
						input[type=email] {
							display: block;
							width: 60%;
							font-size: 1vw;
						}
						textarea {
							width: 80%;
							height: auto;
							font-size: 1vw;
						}
						input[type=submit] {
							display: block;
							width: 20%;
							height: auto;
							float: left;
							margin: 12px 12px 12px 30%;
							background-color: lightgreen;
							text-align: center;
							font-size: 1.25vw;
							color: navy;
							border: 1px solid lightgreen;
							border-radius: var(--defaultborderradius);
							&:hover {
								border: 2px solid red;
							}
						}
						input[type=button] {
							display: block;
							width: 20%;
							height: auto;
							float: left;
							margin: 12px 12px 12px 0px;
							background-color: red;
							text-align: center;
							font-size: 1.25vw;
							color: ivory;
							border: 1px solid red;
							border-radius: var(--defaultborderradius);
						}
					}
				}
			} /* contactformcontainer */
			
			/*
			 **  Messaging
			 */
			#messagingcontainer {  /* extends containerd - big screens */
				width: 98%;
				height:auto;
				background-color: ivory;
				color: navy;
				#msgtitled {
					width: 95%;
					height: auto;
					margin: 4px 0px 4px 12px;
					background-color: transparent;
					color: navy;
					font-size: 14pt;
				}
				.msggroupd {
					width: 80%;
					height: auto;
					margin: 4px 0px 8px 12px;
					padding: 12px 4px 8px 8px;
					background-color: transparent;
					color: navy;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					a:visited,.msggroupd a:link {
						text-decoration: none;
						color: navy;
					}
					.msgsmslink, .msgemaillink  {
						width: 45%;
						height: auto;
						float: left;
						margin: 4px 0px 4px 12px;
						background-color: transparent;
						color: navy;
					}
					.msgemailsized {
						width: 50%;
						height: auto;
						margin: 12px 0px 4px 12px;
						background-color: transparent;
						color: red;
						font-style: italic;
						font-size: 10px;
					}
				}
			}
			
			/*
			 **  New fees table stuff
			 */
			#feecontainer {  /* extends containerd */
				background-color: ivory;
				#feetabled {
					width: 95%;
					height: auto;
					margin: 12px 0px 8px 12px;
					background-color: transparent;
					border: 1px solid grey;
					border-radius: var(--defaultborderradius);
					.feestable {
						width: 95%;
						height: auto;
						margin: 0px 0px 8px 12px;
						background-color: transparent;
						font-size: 1em;
						color: navy;
						border-collapse: collapse;
						border: 1px solid grey;
						tr {
							th {
								background-color: lightblue;
								color: navy;
								font-weight: 700;
								border: 1px solid grey;
								.feestableheader {
									border: 1px solid navy;
									background-color: lightgrey;
									text-align: center;
									color: navy;
									border-collapse: collapse;
								}
							}
							.feestablecategory {
								padding-left: 4px;
								background-color: transparent;
								text-align: left;
								color: navy;
								font-weight: 500;
							}
							.feestablefee {
								background-color: transparent;
								text-align: center;
								color: red;
								font-weight: 500;
							}
							td {
								background-color: transparent;
								color: navy;
								font-weight: 500;
								border: 1px solid grey;
							}
						}
					}
					#feenotes {
						   color: navy;
					}
					.feeslistheaderd {
						width: 90%;
						height: auto;
						margin: 20px 0px 0px 12px;
						padding: 8px 8px 8px 8px;
						font-size: .8vw;
						font-weight: 700;
						color: navy;
					}
				}  /* feestabled */
				#feenotes {  /* extends notesd for now */
					font-size: .8vw;
				}
				
				/*
				 ** edit fees
				 */
				#editfeesd {
					#newfeeformd {
						width: 98%;
						height: auto;
						margin: 12px 1% 12px 1%;
						border: 1px solid navy;
						border-radius: var(--defaultborderradius);
						.feetitled {
							width: 98%;
							height: auto;
							margin: 12px 1% 12px 1%;
							padding: 8px;
							font-size: 1vw;
							color: navy;
						}
						#newfeeform {
							width: 98%;
							height: auto;
							margin: 12px 1% 12px 1%;
							.feenewoption {
								color: blue;
								font-style: italic;
							}
							select {
								margin: 12px 12px 0px 0px;
								float: left;
								font-size: 1vw;
							}
							#newfeesportselect{
								width: 30%;
							}
							#newfeeamountd {
								width: 98%;
								height: auto;
								margin: 8px 1% 8px 1%;
								label {
									width: 5%;
									height: auto;
									font-size: 1vw;
									color: navy;
								}
								#newfeeamount {
									display: inline;
									width: 20%;
									height: auto;
									cursor: pointer;
									margin: 8px 8px 8px 8px;
									background-color: lightblue;
									text-align: right;
									font-size: 1vw;
									border: 2px solid grey;
								}
							}  /* newfeeamountd */
							input[type=submit] {  /* or .newfeesubmit */
								width: 30%;
								height: auto;
								margin: 8px 0px 0px 35%;
								font-size: 1.2em;
								cursor: var(--allbuttoncursor);
								background-color: var(--submitbuttoncolor);
								color: var(--submitbuttontextcolor);
								border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
								border-radius: var(--defaultborderradius);
								&:hover {border-color: var(--submitbuttonborderhovercolor);}
							}
						}  /* newfeeform */
					}  /* newfeeformd */
					.feeinputsd {
						width: 95%;
						height: auto;
						margin: 8px 0px 0px 12px;
						padding: 8px 8px 8px 8px;
						border: 2px solid navy;
						border-radius: var(--defaultborderradius);
						.feetitled {
							width: 98%;
							height: auto;
							margin: 12px 1% 12px 1%;
							padding: 8px;
							font-size: 1vw;
							color: navy;
						}
						.feelined {
							width: 98%;
							height: auto;
							margin: 8px 1% 0px 1%;
							padding: 8px 8px 8px 8px;
							font-size: .8vw;
							color: navy;
							border: 1px solid red;
							.feelinedf {
								.feecatd {
									width: 98%;
									height: auto;
									margin: 8px 1% 8px 1%;
									font-weight: 600;
									font-size: .8vw;
								}
								label {
									width: 10%;
									height: auto;
									float: left;
									margin: 8px 0px 0px 8px;
									padding: 4px 4px 4px 4px;
									font-size: 1vw;
									color: navy;
								}
								.feeamount {
									width: 10%;
									height: auto;
									margin: 8px 0px 0px 8px;
									padding: 4px 4px 4px 4px;
									float: left;
									font-size: 1vw;
								}
								input[type=submit] {
									width: 20%;
									height: auto;
									margin: 8px 0px 0px 8px;
									cursor: var(--allbuttoncursor);
									text-align: center;
									font-size: 1.2em;
								}
								.feelinesubmit {
									background-color: var(--submitbuttoncolor);
									color: var(--submitbuttontextcolor);
									border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
									border-radius: var(--defaultborderradius);
									&:hover {border-color: var(--submitbuttonborderhovercolor);}
								}
								.feelineremove {
									background-color: red;
									color: ivory;
									border: 2px solid red;
									border-radius: var(--defaultborderradius);
								}
								.feebatchremoved {
									width: 95%;
									height: auto;
									margin: 8px 0px 0px 8px;
									padding: 4px 4px 12px 4px;
									border: 1px solid green;
									.feeremovelabel {
										display: block;
										width: 55%;
										height: auto;
										color: navy;
										font-weight: 500;
									}
								}
							}  /* .feelinef */
						}  /* feelined*/
					}  /* feeinputsd */
				}  /* editfeesd */
				
			} /* #feecontainer */
			
			/*
			 ** Login Form
			 */
			#loginformcontainer {   /* extends containerd */
				width: 98%;
				min-height: 200px;
				background-color: transparent;
				height: auto;
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				color: black;
				background-color: ivory;
				border: 1px solid navy;
				border-radius: var(--defaultborderradius);
				#loginformd {
					width: 80%;
					min-height: 200px;
					margin: 24px 0px 24px 10%;
					padding: 12px 0px 12px 12px;
					color: black;
					background-color: lightblue;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					#loginform {
						font-size: 14pt;
						font-weight: bold;
						label {
							display: block;
							width: 400px;
							margin: 12px 0px 0px 24px;
							font-size: 1vw;
							color: black;
						}
						input {
							font-size: 1vw;
							margin: 2px 0px 0px 24px;
						}
						button {
							font-size: 22pt;
						}
						#loginbuttond {
							width: 50%;
							margin: 20px 0px 0px 35%;
							input[type=submit] {
								width: 30%;
								height: auto;
								cursor: pointer;
								font-weight: 500;
								font-size: 1.5em;
								background-color: var(--submitbuttoncolor);
								color: var(--submitbuttontextcolor);
								border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
								border-radius: var(--defaultborderradius);
								border: 2px solid var(--submitbuttonbordercolor);
								&:hover { border-color: var(--submitbuttonborderhovercolor); }
							}
						}
						#loginformuser {
							text-transform: lowercase;
						}
					} /* loginform */
					#loginmessaged {
						width: 90%;
						height: auto;
						margin: 20px 0px 0px 12px;
						padding: 12px 12px 12px 12px;
						font-size: 10pt;
						color: black;
						border: 1px solid navy;
						border-radius: var(--defaultborderradius);
					}
					#forgotpasswordlinkd {
						width: 25%;
						height: auto;
						margin: 12px 12px 12px 12px;
						padding: 2px 8px 2px 8px;
						cursor: pointer;
						float: right;
						text-align: center;
						background-color: lightyellow;
						border: 2px solid navy;
						border-radius: var(--defaultborderradius);
						&:hover {
							border: 2px solid red;
						}
					}
				} /* loginformd */
				
				/*
				 ** For when the user doesn't provide a valid username/email response
				 */
				#emailresetd {
					width: 80%;
					height: auto;
					margin: 24px 0px 24px 10%;
					padding: 8px 8px 8px 8px;
					background-color: ivory;
					font-size: 1vw;
					color: navy;
					border: 2px solid navy;
					border-radius: var(--defaultborderradius);
					#emaildoned {
						width: 80%;
						height: auto;
						margin: 24px 10% 24px 10%;
						input[type=button] {
							width: 60%;
							margin: 4px 20% 0px 20%;
							background-color: pink;
							font-size: 1vw;
							color: navy;
							border: 1px solid pink;
							border-radius: var(--defaultborderradius);
						}
					}
				}
			} /* loginformcontainer */
			
			/* *************************************************************
			 **  Forgot password stuff
			 **************************************************************** */
			#forgotpasswordformd {
				width: 95%;
				height: auto;
				padding: 8px;
				margin: 12px 0px 12px 12px;
				#forgotpasswordform {
					display: block;
					padding: 8px;
					border: 1px solid navy;
					#forgotpasswordformmsgd {
						width: 80%;
						height: auto;
						margin: 12px 0px 24px 10%;
						color: red;
						font-size: 1vw;
					}
					label {
						display: block;
						width: 50%;
						height: auto;
						margin: 12px 0px 0px 10%;
						color: green;
						font-size: 1vw;
					}
					input[type=text]{
						display: block;
						width: 50%;
						height: auto;
						display: block;
						margin: 0px 0px 12px 10%;
						font-size: 1vw;
					}
					input[type=email]{
						display: block;
						width: 50%;
						height: auto;
						display: block;
						margin: 0px 0px 12px 10%;
						font-size: 1vw;
					}
					input[type=submit] {
						display: block;
						width: 10%;
						height: auto;
						margin: 12px 0px 12px 35%;
						font-weight: 500;
						font-size: 1vw;
						background-color: var(--submitbuttoncolor);
						color: var(--submitbuttontextcolor);
						border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
						border-radius: var(--defaultborderradius);
						border: 2px solid var(--submitbuttonbordercolor);
						&:hover { border-color: var(--submitbuttonborderhovercolor); }
					}
				} /* forgotpasswordform */
			}  /* forgotpasswordformd */
			
			/*
			 **  Password reset response
			 */
			#sendpasswordresetd {
				#emailresetmessaged {
					width: 80%;
					height: auto;
					margin: 24px 0px 24px 10%;
					padding: 8px 8px 8px 8px;
					background-color: ivory;
					color: navy;
					border: 2px solid navy;
				}
				#passwordresetendmessaged {
					width: 80%;
					height: auto;
					margin: 24px 0px 24px 10%;
					padding: 8px 8px 8px 8px;
					background-color: ivory;
					color: navy;
					border: 2px solid navy;
				}
				input[type=button] {
					display: block;
					width: 15%;
					height: auto;
					margin: 12px 0px 12px 40%;
					background-color:  lightblue;
					font-weight: 500;
					font-size: 1vw;
					border: 2px solid lightblue;
					border-radius: var(--defaultborderradius);
					&:hover {
						border: 2px solid red;
					}
				}
			}  /* sendpasswordresetd */
			
			/* ********************************************
			 ** Availability - Big Devices
			 ** ******************************************* */
			
			/*
			 **  The below are for the small calendars presented on the web page.
			 **
			 **  07/11/2021 - Increased width to 30% to (hopefully) fix 1280x1024 monitors or less running Edge
			 **  03/16/2024 - Went aspect-ratio for smallcaldaycelld -  Much better!
			 **  06/16/2024 - Switched to nested!
			 */
			#smallcalavailmasterd {   /* Really a fieldset */
				width: 98%;
				height: auto;
				margin: 12px 1% 12px 1%;
				padding-bottom: 12px;
				overflow: hidden;
				background-color: ivory;
				border: 2px solid navy;
				border-radius: var(--defaultborderradius);
				legend {
					
				}
				.availkeyd {
					width: 99%;
					height: auto;
					margin: 12px .5% 4px .5%;
					padding: 8px;
					color: navy;
					font-size: 14pt;
					font-style: italic;
					.keyd {
						display: inline-block;
						width: 18%;
						height: auto;
						margin: 12px .5% 12px .5%;
						.availkeylabeld {
							width: 80%;
							height: 20px;
							margin: 0px 8px 0px 4px;
							padding: 4px;
							float: left;
							vertical-align: middle;
							color: navy;
							font-size: .8vw;
							font-style: italic;
						}
						.availkeycolord {
							width: 10%;
							height: auto;
							padding: 4px;
							float: left;
							aspect-ratio: 1/1;
							border: 1px solid transparent;
							border-radius: 8px;
						}
					}
				}
				.smallcalusernamec {
					width: 90%;
					height: auto;
					margin: 8px 0px 0px 12px;
					font-size: 14pt;
					color: navy;
					border: none;
				}
				#keynotesd {
					width: 95%;
					height: auto;
					margin: 8px 0px 4px 22px;
					font-style: italic;
					font-size: 9pt;
					color: green;
				}
				.useravailkeylabeld {
					width: 15%;
					height: 20px;
					margin: 0px 8px 0px 4px;
					padding: 4px 0px 0px 2px;
					float: left;
					vertical-align: middle;
					color: navy;
					font-size: 8pt;
					font-style: italic;
				}
				.useravailkeycolord {
					width: 20px;
					height: 20px;
					float: left;
					border: 1px solid transparent;
					border-radius: 8px;
				}
				.smallcalmonthd {
					position: relative;
					width: 32%;
					height: 375px;
					z-index: 10;
					float: left;
					margin: 8px 0px 0px 4px;
					padding: 2px 2px 2px 8px;
					overflow: hidden;
					background-color: ivory;
					text-align: right;
					font-size: 12px;
					color: green;
					border: 1px solid BlueViolet;
					.smallcalmonthlabeld {
						width: 80%;
						height: auto;
						z-index: -100;
						margin: 4px 0px 4px 0px;
						padding: 2px 2px 2px 0px;
						text-align: left;
						font-size: 14px;
						font-weight: 700;
						color: navy;
					}
					.smallcalmonthlabeld_bdates {
						width: 95%;
						height: auto;
						z-index: -100;
						margin: 4px 0px 4px 0px;
						padding: 2px 2px 2px 0px;
						text-align: left;
						font-size: 12px;
						font-weight: 700;
						color: BlueViolet;
					}
					.timescellpopup {
						position: absolute;
						top: 0px;
						left: 0px;
						width: 95%;
						height: auto;
						padding: 8px 8px 8px 8px;
						z-index: 10000;
						background-color: lightblue;
						font-size: 10px;
						text-align: left;
						color: navy;
						border: 1px solid navy;
						border-radius: var(--defaultborderradius);
						.smallcalpopuptitle {
							width: 98%;
							margin: 0px 0px 4px 0px;
							font-size: 12px;
							font-weight: bold;
						}
						.smallcaltime {
							margin: 0px 0px 4px 4px;
						}
					}
					.smallcaldayheadd {  /*  Dimensions here must be the same as .smallcalydaycelld */
						width: 14%;
						height: auto;
						aspect-ratio: 1/1;
						float: left;
						margin: 0px 0px 0px 0px;
						padding: 4px 0px 4px 0px;
						background-color: lightblue;
						text-align: center;
						vertical-align: middle;
						color: navy;
						font-weight: 600;
						font-size: .8vw;
						border: 1px solid grey;
					}
					.smallcaldaycelld {		/*  Dimensions here must be the same as .smallcalydayheadd */
						position: relative;   /*  Need this positioning to allow for the absolute positioning of child divs */
						width: 14%;
						height: auto;
						aspect-ratio: 1/1;
						z-index: 0;
						float: left;
						margin: 0px 0px 0px 0px;
						padding: 2px 4px 0px 0px;
						cursor: pointer;
						text-align: right;
						vertical-align: middle;
						background-color: transparent;
						font-size: .6vw;
						font-weight: 600;
						color: navy;
						border: 1px solid grey;
						.amcelld {
							position: absolute;
							top: 0px;
							left: 0px;
							width: 100%;
							height: 50%;
							z-index: -10;
						}
						.pmcelld {
							position: absolute;
							top: 50%;
							left: 0px;
							width: 100%;
							height: 50%;
							z-index: -10;
						}
					}  /* smallcaldaycelld */
					.smallcalnotesd {
						width: 90%;
						min-height: 1px;
						max-height: 60px;
						margin: 2px 0px 8px 0px;
						overflow-y: auto;
						overflow-x: hidden;
						text-align: left;
						color: navy;
						font-size: .8rem;
						font-style: italic;
					}
					.smallcalupdatef {
						display: block;
						width: 40%;
						height: auto;
						margin: 12px 30%;
						.availupdateb {
							width: 98%;
							height: auto;
							margin: 0px 1%;
							text-align: center;
							font-weight: 600;
							font-size: 1rem;
							cursor: var(--allbuttoncursor);
							background-color: var(--submitbuttoncolor);
							color: var(--submitbuttontextcolor);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover {border-color: var(--submitbuttonborderhovercolor);}
						}
					}  /* smallcalupdatef */
				}  /* smallcalmonthd */
			}  /* smallcalavailmasterd */
			
			/*
			 **  I don't know what this is but there's code for it.  :-(
			 */
			#availbitdayconvertd  {
				width: 85%;
				height: auto;
				margin: 4px 0px 8px 12px;
				padding: 10px;
				font-size: 10px;
				color: BlueViolet;
				border: 1px solid BlueViolet;
				border-radius: var(--defaultborderradius);
			}
			
			#availfrontendd {  /* extends .containerd */
				width: 98%;
				height: auto;
				background-color: ivory;
				color: navy;
				#allavailabilityd {
					width: 98%;
					height: 2000px;
					margin: 12px 1% 12px 1%;
				}
				#availerrord {
					margin: 12px 0px 12px 12px;
					font-size: 14px;
					color: red;
				}
				#prefformfs {
					width: 98%;
					height: auto;
					margin: 8px 1% 8px 1%;
					background-color: ivory;
					color: navy;
					border: 2px solid navy;
					border-radius: var(--defaultborderradius);
					#prefform {
						input[type=submit] {
							display: block;
							width: 15%;
							height: auto;
							margin: 12px 0px 12px 20%;
							font-weight: 600;
							font-size: 1.2em;
							cursor: var(--allbuttoncursor);
							background-color: var(--submitbuttoncolor);
							color: var(--submitbuttontextcolor);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover {border-color: var(--submitbuttonborderhovercolor);}
						}
					} /* prefform */
				}
				/* ************************************************************
				 ** Availability Input Calendar
				 ** ********************************************************** */
				.calmonthd {
					width: 95%;
					height: auto;
					margin: 12px 0px 12px 12px;
					padding: 8px 8px 8px 8px;
					background-color: ivory;
					font-size: 9pt;
					font-style: italic;
					color: navy;
					border: 2px solid navy;
					border-radius: var(--defaultborderradius);
					.calmonthlabelc {
						width: 75%;
						height: auto;
						margin: 8px 0px 12px 12px;
						font-size: 24pt;
						color: red;
						border: none;
					}
					.caltopnotec {
						width: 90%;
						height: auto;
						margin: 0px 0px 4px 8px;
						color: navy;
						font-size: 10pt;
						font-style: italic;
						border: none;
					}
					#calselectalld {
						width: 60%;
						height: auto;
						margin: 8px 0px 0px 10%;
						input[type=button] {
							display: inline;
							width: 45%;
							height: auto;
							margin-right: 12px;
							background-color: royalblue;
							text-align: center;
							color: ivory;
							font-size: 1.25vw;
							border: 1px solid royalblue;
							border-radius: 5px;
						}
					}
					.calheadersd {
						width: 90%;
						height: auto;
						margin: 12px 0px 12px 5%;
						background-color: transparent;
						border: none;
						.caldayheaderc {
							width: 12%;
							height: 20px;
							float: left;
							background-color: lightgrey;
							font-size: .8vw;
							color: navy;
							font-weight: 500;
							text-align: center;
							vertical-align: middle;
							border: 1px solid green;
						}
					}
					.calformd {
						width: 90%;
						height: auto;
						margin: 12px 0px 12px 5%;
						background-color: transparent;
						border: none;
						.calformc {
							background-color: transparent;
							.caldaycellc {
								width: 12%;
								height: auto;
								aspect-ratio: 1/1;
								padding: 0px 4px 0px 4px;
								float: left;
								background-color: transparent;
								font-style: normal;
								border: 1px solid green;
								.caldaynumberc {
									width: 30%;
									height: auto;
									margin: 0px 8px 0px 0px;
									float: right;
									color: navy;
									font-size: 1vw;
									vertical-align: middle;
									text-align: center;
								}
								.calcheckboxd {
									width: 98%;
									height: auto;
									margin: 2px 0px 0px 2px;
									font-size: .8vw;
									input[type=checkbox] {
										width: 20%;
										height: auto;
										aspect-ratio: 1/1;
										border: 1px solid navy;
										border-radius: var(--defaultborderradius);
									}
									input[type=checkbox]:checked {
										background-color: lightgreen;
										border: 4px solid red;
										border-radius: var(--defaultborderradius);
									}
								}
							}  /* caldaycelld */
							.calnotestxtd {
								width: 99%;
								margin: 12px .5% 4px .5%;
								textarea {
									font-size: .8vw;
								}
							}
							input[type=submit] {
								width: 20%;
								height: auto;
								margin: 12px 0px 8px 40%;
								text-align: center;
								font-size: 2em;
								cursor: var(--allbuttoncursor);
								background-color: var(--submitbuttoncolor);
								color: var(--submitbuttontextcolor);
								border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
								border-radius: var(--defaultborderradius);
								&:hover {border-color: var(--submitbuttonborderhovercolor);}
							}
						}  /* calformf */
					}  /* calformd */
				}  /* calmonthd */
			}	/* availfrontendd */
			
			#useravailability {  /* extends containerd */
				background-color: ivory;
				#availformd {
					width: 98%;
					height: auto;
					margin: 12px 1%;
					#availform {
						display: block;
						width: 98%;
						height: auto;
						margin: 12px 1% 12px 1%;
						label {
							display: inline;
							margin-right: 4px;
							font-size: 1em;
							color: navy;
						}
						input[type=text] {
							display: inline;
							font-size: 1em;
							border: 2px solid navy;
						}
						input[type=button]{
							display: inline-block;
							width: 15%;
							height: auto;
							margin: 8px 1%;
							background-color: LightBlue;
							color: navy;
							font-weight: 600;
							font-size: 1em;
						}
					}
				}	/* availformd */
				
				#useravaillistd {
					width: 98%;
					height: 900px;
					margin: 8px 1%;
					overflow-y: auto;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					.useravailindividuald {
						width: 98%;
						height: auto;
						overflow: hidden;
						margin: 8px 1%;
						padding: 8px;
						border: 1px solid navy;
						border-radius: var(--defaultborderradius);
						.useravailnamed {
							display: inline-block;
							width: 50%;
							height: 22px;
							/* margin: 8px 1%; */
							overflow: hidden;
							color: red;
							font-weight: 500;
							font-size: 1.2em;
							border: none;
							/* border: 1px solid red; */
						}
						.individualform {
							display: inline-block;
							width: 15%;
							height: 22px;
							font-weight: 500;
							font-size: 1.2em;
							input[type=submit] {
								display: inline-block;
								width: 98%;
								height: auto;
								margin: 0px 1%;
								font-weight: 500;
								font-size: 1.3em;
								cursor: var(--allbuttoncursor);
								background-color: var(--submitbuttoncolor);
								color: var(--submitbuttontextcolor);
								border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
								border-radius: var(--defaultborderradius);
								&:hover {border-color: var(--submitbuttonborderhovercolor);}
							}
							.individualdonesubmit {
								background-color: navy;
								transition: transform 0.3s ease;
								color: ivory;
								&:hover {
									border-color: Silver;
									transform: scale(1.2,1.2);
									background: linear-gradient(to right,LightBlue,navy);
									text-shadow: 2px 2px 5px RebeccaPurple;
									color: OldLace;
								}
							}
							.individualshowsubmit {
								background-color: lightgreen;
								transition: transform 0.3s ease;
								color: navy;
								&:hover {
									border-color: DarkGreen;
									transform: scale(1.2,1.2);
									background: linear-gradient(to right,LightGreen,DarkGreen);
									text-shadow: 2px 2px 5px RebeccaPurple;
									color: OldLace;
								}
							}
						}	/* form */
					}	/* useravailindividuald */
				}	/* usertavaillistd */
			}	/* useravailability */
			
			/*
			 **  Availability Report
			 */
			#useravailabilityrptd {
				width: 98%;
				height: auto;
				background-color: ivory;
				color: navy;
				#availabilitytabled {
					width: 95%;
					height: 800px;
					margin: 8px 0px 8px 12px;
					padding: 4px 4px 4px 4px;
					overflow-y: auto;
					overflow-x: hidden;
					color: navy;
					table {
						width: 98%;
						background-color: transparent;
						color: black;
						font-family: verdana;
						font-size: 10px;
						border: 1px solid navy;
						border-collapse: collapse;
						th {
							width: 15%;
							padding: 0px 4px 4px 4px;
							background-color: silver;
							color: navy;
							font-family: verdana;
							font-size: 10px;
							border: 1px solid navy;
							border-collapse: collapse;
						}
						td {
							width: 15%;
							padding: 4px 4px 4px 4px;
							background-color: transparent;
							color: navy;
							font-family: verdana;
							font-size: 10px;
							border: 1px solid navy;
							border-collapse: collapse;
						}
					}
				}
			} /* #useravailabilityrptd */
			
			/*
			 **  News Nested - centercol
			 */
			#newscontainer {
				width: 100%;
				height: 1300px;
				background-color: ivory;
				overflow-y: auto;
				overflow-x: hidden;
				.newsbuttonnew {
					display: block;
					width: 20%;
					height: auto;
					margin: 8px 0px 8px 40%;
					cursor: pointer;
					background-color: blueviolet;
					font-size: 1.5vw;
					color: ivory;
					border: 1px solid grey;
					border-radius: 10px;
				}
				.newsd {
					width: 98%;
					min-height: 200px;
					resize: vertical;
					margin: 8px 1% 0px 1%;
					padding: 4px 4px 4px 4px;
					font-weight: 400;
					font-size: 1.2vw;
					border: 1px solid grey;
					border-radius: var(--defaultborderradius);
					.newsitemmtime {
						width: 95%;
						height: auto;
						margin: 6px 0px 4px 8px;
						font-size: .8vw;
						font-style: italic;
						font-weight: 400;
						color: navy;
					}
					.newsitemtitle {
						width: 95%;
						height: auto;
						margin: 6px 0px 4px 8px;
						font-weight: 700;
						font-size: 1.5vw;
						color: navy;
					}
					.newsitemimage {
						width: 70%;
						height: auto;
						margin: 6px 4px 4px 15%;
						border: 1px solid transparent;
						border-radius: var(--defaultborderradius);
					}
					.newsitembody p {
						width: 95%;
						height: auto;
						margin: 0px 0px 12px 0px;
						color: navy;
						border: none;
					}
					.news_image_left {
						display: block;
						float: left;
						width: 30%;
						margin: 6px 12px 4px 0px;
						border: 1px solid navy;
						border-radius: var(--defaultborderradius);
					}
					.news_image_right {
						display: block;
						float: right;
						width: 30%;
						margin: 6px 4px 4px 12px;
						border: 1px solid navy;
						border-radius: var(--defaultborderradius);
					}
					.newsitembody {
						width: 95%;
						height: auto;
						margin: 6px 4px 4px 6px;
						padding: 8px 4px 4px 4px;
						font-size: 1vw;
						font-weight: 400;
						color: navy;
						border: none;
					}
					.newsitembody p {
						width: 95%;
						height: auto;
						margin: 0px 0px 12px 0px;
						color: navy;
						border: none;
					}
					.newsadmind .newssearchid {
						width: 95%;
						height: auto;
						margin: 8px 0px 0px 8px;
						background-color: transparent;
						font-size: .8vw;
						font-style: italic;
						color: navy;
					}
					.newsadmind .newsbuttonedit {
						display: inline;
						width: 20%;
						height: auto;
						margin: 18px 0px 8px 5%;
						cursor: pointer;
						background-color: lightgreen;
						font-size: 1.5vw;
						color: black;
						border: 1px solid grey;
						border-radius: 10px;
					}
					.newsadmind input[type=submit] {
						display: inline;
						width: 20%;
						height: auto;
						float: left;
						margin: 12px 0px 0px 5%;
						cursor: pointer;
						font-size: 1.5vw;
						border: 1px solid grey;
						border-radius: 10px;
					}
					.newsadmind .newsbuttonpub {
						background-color: yellow;
						color: black;
					}
					.newsadmind .newsbuttonunpub {
						background-color: pink;
						color: black;
					}
					.newsadmind .newsbuttonremove {
						background-color: red;
						color: ivory;
					}
				}  /* .newsd */
			} /* #newscontainer */
			
			#newseditcontainer {
				#newseditformd {
					width: 95%;
					height: auto;
					background-color: ivory;
					font-size: 2vw;
					color: navy;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					#newsedittitled {
						width: 95%;
						height: auto;
						color: Navy;
						font-size: 1.5vw;
					}
					#newseditform {
						font-size: 1vw;
						#articleidd {
							width: 95%;
							height: auto;
							margin: 0px 0px 0px 4px;
						}
						label {
							display: block;
							margin: 12px 0px 0px 0px;
							color: green;
							font-size: 1vw;
						}
						input[type=text] {
							display: block;
							width: 50%;
							height: auto;
							font-size: 1vw;
							color: navy;
						}
						textarea {
							display: block;
							width: 95%;
							color: navy;
							font-size: 1vw;
						}
						input[type=submit] {
							display: block;
							width: 20%;
							height: auto;
							margin: 24px 0px 8px 35%;
							font-size: 2vw;
							background-color: lightgreen;
							color: navy;
						}
					}  /* newseditform */
				}  /* newseditformd */
			}  /* newseditcontainer */
			
			/*
			 **  Setables Nested
			 */
			#setablecontainer {  /* extends containerd */
				width: 98%;
				min-height: auto;
				padding: 0px 0px 12px 0px;
				background-color: ivory;
				color: navy;
				border: 2px solid navy;
				border-radius: var(--defaultborderradius);
				overflow: hidden;
				.setableformd {
					width: 92%;
					height: 60px;
					overflow: hidden;
					margin: 12px 12px 12px 12px;
					padding: 8px 8px 8px 8px;
					background-color: lightgreen;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					.setabletitled {
						width: 90%;
						height: auto;
						margin: 8px 0px 12px 0px;
						float: left;
						font-size: 1vw;
						color: navy;
					}
					.setabletitled button {
						width: 10%;
						height: auto;
						margin: 8px 0px 12px 0px;
						float: left;
						font-size: 1vw;
					}
					.setableform {
						label {
							display: block;
							width: 12%;
							height: auto;
							margin: 12px 12px 12px 12px;
							float: left;
							font-size: .9vw;
							color: navy;
						}
						.parameter {
							display: block;
							width: 50%;
							height: auto;
							margin: 12px 12px 12px 12px;
							float: left;
							color: navy;
							text-transform: lowercase;
						}
						.datatype {
							display: block;
							width: 30%;
							height: auto;
							margin: 12px 12px 12px 12px;
							float: left;
							color: navy;
						}
						.selectvals {
							display: block;
							width: 30%;
							height: auto;
							margin: 12px 12px 12px 12px;
							float: left;
							color: navy;
						}
						.description {
							display: block;
							width: 75%;
							height: auto;
							margin: 12px 12px 12px 12px;
							float: left;
							color: navy;
						}
						.value {
							display: block;
							width: 45%;
							height: auto;
							margin: 12px 12px 12px 12px;
							float: left;
							color: navy;
						}
						.boolvalue {
							display: block;
							width: 15%;
							height: auto;
							margin: 12px 12px 12px 12px;
							float: left;
							color: navy;
						}
						.datevalue {
							display: block;
							width: 25%;
							height: auto;
							margin: 12px 12px 12px 12px;
							float: left;
							color: navy;
						}
						.emailvalue {
							display: block;
							width: 45%;
							height: auto;
							margin: 12px 12px 12px 12px;
							float: left;
							color: navy;
						}
						input[type=submit] {
							display: block;
							width: 15%;
							height: auto;
							margin: 12px 12px 12px 40%;
							background-color: navy;
							font-size: 1.1vw;
							color: ivory;
							border: 4px solid silver;
							border-radius: var(--defaultborderradius);
							&:hover {
								border: 4px solid red;
							}
						}
					}  /* .setableform */
				}  /* setableformd */
				
				#existingsetablesd {
					width: 98%;
					height: 500px;
					margin: 12px 1% 0px 1%;
					padding: 8px;
					overflow-y: auto;
					background-color: ivory;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					#setableparamindexd {
						
					}
					.setableexistingformd {
						display: none;
						width: 92%;
						height: 0px;
						margin: 12px 12px 12px 12px;
						padding: 8px 8px 8px 8px;
						background-color: lightyellow;
						border: 1px solid navy;
						border-radius: var(--defaultborderradius);
						.setableinfod {
							width: 92%;
							height: auto;
							margin: 8px 12px 0px 12px;
							padding: 8px 8px 8px 8px;
							background-color: transparent;
							font-size: .8vw;
							font-style: italic;
						}
						.setableexistingtitled {
							width: 90%;
							height: auto;
							margin: 8px 0px 12px 0px;
							font-size: 1vw;
							color: orangered;
						}
						.setabletitled .phighlight {
							color: navy;
							font-weight: 700;
						}
						.setableexistingform {
							label {
								display: block;
								width: 10%;
								height: auto;
								margin: 12px 12px 12px 12px;
								float: left;
								font-size: .9vw;
								color: navy;
							}
							.parameter {
								display: block;
								width: 30%;
								height: auto;
								margin: 12px 12px 12px 12px;
								float: left;
								color: navy;
							}
							.datatype {
								display: block;
								width: 20%;
								height: auto;
								margin: 12px 12px 12px 12px;
								float: left;
								color: navy;
							}
							#selectlistd {
								width: 100%;
								height: auto;
								display: none;
							}
							.selectvals {
								display: block;
								width: 20%;
								height: auto;
								margin: 12px 12px 12px 12px;
								float: left;
								color: navy;
							}
							select {
								display: block;
								width: 20%;
								height: auto;
								margin: 12px 12px 12px 12px;
								float: left;
								color: navy;
							}
							.value {
								display: block;
								width: 55%;
								height: auto;
								margin: 12px 12px 12px 12px;
								float: left;
								color: navy;
							}
							.boolvalue {
								display: block;
								width: 15%;
								height: auto;
								margin: 12px 12px 12px 12px;
								float: left;
								color: navy;
							}
							.datevalue {
								display: block;
								width: 25%;
								height: auto;
								margin: 12px 12px 12px 12px;
								float: left;
								color: navy;
							}
							.emailvalue {
								display: block;
								width: 45%;
								height: auto;
								margin: 12px 12px 12px 12px;
								float: left;
								color: navy;
							}
							.description {
								display: block;
								width: 75%;
								height: auto;
								margin: 12px 12px 12px 12px;
								background-color: white;
								float: left;
								color: navy;
							}
							.setableexistingsubmit {
								display: block;
								width: 15%;
								height: auto;
								margin: 12px 12px 12px 20%;
								float: left;
								cursor: pointer;
								background-color: navy;
								font-size: 18px;
								color: ivory;
								border: 2px solid silver;
								border-radius: var(--defaultborderradius);
							}
							.setableremovesubmit {
								display: block;
								width: 15%;
								height: auto;
								margin: 12px 12px 12px 5%;
								float: left;
								cursor: pointer;
								background-color: red;
								font-size: 1.1vw;
								color: ivory;
								border: 2px solid silver;
								border-radius: var(--defaultborderradius);
							}
						}  /* setableexistingform */
						input[type=button] {
							display: block;
							width: 10%;
							height: auto;
							background-color: blueviolet;
							font-size: 1vw;
							color: ivory;
							border: 2px solid silver;
							border-radius: var(--defaultborderradius);
							&:hover {
								border: 2px solid red;
							}
						}
					} /* setable existingformd */
					#setabletable {
						display: block;
						width: 98%;
						height: auto;
						border: 1px solid navy;
						border-collapse: collapse;
						th {
							background-color: navy;
							font-size: 12px;
							color: ivory;
							border: 1px solid navy;
							border-collapse: collapse;
						}
						td {
							padding: 4px 2px 4px 2px;
							background-color: transparent;
							font-size: 12px;
							color: navy;
							border: 1px solid navy;
							border-collapse: collapse;
						}
						.paramtd {
							text-decoration: underline;
							cursor: pointer;
						}
						.valuetd {
							
						}
						.desctd {
							
						}
					}
				}  /* existing setablesd */
			}  /* setablecontainer */
			
			/*
			 **  Admin dashboard
			 */
			#admindashcontainer {  /* this extends .containterd */
				background-color: ivory;
				#admindashd {
					width: 98%;
					height: auto;
					padding: 8px 8px 8px 8px;
					color: ivory;
					border: 1px solid silver;
					border-radius: var(--defaultborderradius);
					#admindashgrid {
						display: grid;
						grid-template-columns: repeat(auto-fill, minmax(20%,1fr));
						grid-auto-rows: 20px;
						grid-gap: 10px 8px;
						padding: 8px;
						background-color: OldLace;
						form input[type=submit] {
							width: 98%;
							text-align: center;
							font-size: 1.2rem;
							color: navy;
							background-color: lightblue;
							border: 1px solid navy;
							border-radius: var(--defaultborderradius);
							&:hover {
								color: ivory;
								background-color: royalblue;
							}
						}
						
					}
					#statsd {
						width: 95%;
						min-height: 50px;
						margin: 12px 0px 12px 8px;
						padding: 8px 8px 8px 8px;
						border: 1px solid red;
						#statstitled {
							width: 95%;
							height: auto;
							font-size: 12px;
							font-weight: 700;
							color: blueviolet;
							border: none;
						}
						.statsdc {
							width: 95%;
							height: auto;
							margin: 4px 0px 0px 4px;
							font-size: 12px;
							font-weight: normal;
							color: navy;
							border: none;
						}
					}  /* statsd */
				}	/* admindashd */
			}  /* admindashcontainer */
			
			/*
			 **  Full Menu
			 */
			#fullmenucontainerd {
				width: 95%;
				min-height: 550px;
				color: black;
				background-color: ivory;
				border: 2px solid navy;
				border-radius: var(--defaultborderradius);
				#menucontainer {
					display: grid;
					grid-template-columns: repeat(auto-fill, minmax(30%,1fr));
					grid-auto-rows: min-content;
					grid-gap: 10px 8px;
					padding: 4px;
					.menulistformd {
						margin: 8px 8px;
						cursor: pointer;
						text-align: center;
						color: ivory;
						background-color: royalblue;
						border: 1px solid navy;
						border-radius: var(--defaultborderradius);
						form {
							input[type=submit] {
								cursor: pointer;
								background-color: transparent;
								text-align: center;
								font-size: 1.8rem;
								color: black;
								border: none;
							}
						} /* form */
						a {
							cursor: pointer;
							background-color: transparent;
							text-align: center;
							text-decoration: none;
							font-size: 1.8rem;
							color: ivory;
							border: none;
						}
					}	/* menulistformd */
				}
			} /* fullmenucontainerd */
			
			/* Confirmations */
			#conrptcontainer {  /* extends .containerd */
				background-color: ivory;
				#confirmreportf {
					display: inline-block;
					width: 15%;
					height: auto;
					margin: 24px 12px 12px 48px;
					input[type=submit] {
						display: block;
						width: 100%;
						height: auto;
						background-color: lightgreen;
						font-size: 1vw;
						color: navy;
						border: 1px solid lightgreen;
						border-radius: var(--defaultborderradius);
					}
				}
				#confirmsearchlabel {
					display: inline-block;
					margin-right: 8px;
					font-size: 1vw;
				}
				#confirmsearchinput {
					display: inline-block;
					margin-right: 8px;
					font-size: 1vw;
				}
				#confirmsearchbutton {
					display: inline-block;
					width: 15%;
					height: auto;
					background-color: lightblue;
					font-size: 1vw;
					color: navy;
					border: 1px solid lightblue;
					border-radius: var(--defaultborderradius);
				}
				#conrptmasterd {
					width: 98%;
					height: 1000px;
					overflow-y: auto;
					color: navy;
					.conrptuserd {
						width: 95%;
						min-height: 50px;
						margin: 12px 0px 0px 8px;
						padding: 8px 8px 8px 8px;
						color: navy;
						font-size: 1.2em;
						font-weight: 700;
						border: 1px solid navy;
						border-radius: var(--defaultborderradius);
						.conusername {
							width: 95%;
							height: auto;
							margin: 4px 0px 0px 0px;
							font-weight: 700;
							color: navy;
							border: none;
						}
						.conrptdata {
							display: flex;
							flex-direction: row;
							width: 98%;
							height: auto;
							margin: 4px 1%;
							&>div {
								margin-right: 4px;
								overflow: hidden;
								font-size: .8em;
								font-weight: normal;
							}
							.conrpteventnumber {
								width: 8%;
							}
							.conrptstatus {
								width: 10%;
							}
							.conrptdate {
								width: 22%;
							}
							.conrpteventtitle {
								width: 40%;
							}
							.conrptmessage {
								width: 20%;
							}
							.constatusaccept {
								width: 95%;
								height: auto;
								margin: 0px 0px 0px 8px;
								padding: 0px 8px 0px 8px;
								color: green;
								border: none;
							}
							.constatusaccept {
								width: 95%;
								height: auto;
								margin: 0px 0px 0px 8px;
								padding: 0px 8px 0px 8px;
								color: green;
								border: none;
							}
							.constatusdecline {
								width: 95%;
								min-height: 10px;
								margin: 0px 0px 0px 8px;
								padding: 0px 8px 0px 8px;
								color: red;
								border: none;
							}
						}
					}
				}
			}  /* #conrptcontainer */
			
			/* *******************************************************************
			 ** Documents
			 ** *******************************************************************/
			#doceditcontainer {
				background-color: ivory;
				max-height: 800px;
				overflow-y: auto;
				color: green;
				#doceditnewdocd {
					width: 98%;
					height: auto;
					margin: 12px 1%;
					padding: 8px;
					background-color: transparent;
					font-size: 1rem;
					color: green;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					form {
						display: block;
						width: 98%;
						margin: 8px 1%;
						font-size: 1rem;
						label {
							display: inline-block;
						}
						input[type=submit] {
							width: 15%;
							display: inline-block;
							margin-left: 12px;
							font-size: inherit;
							cursor: var(--allbuttoncursor);
							background-color: var(--submitbuttoncolor);
							color: var(--submitbuttontextcolor);
							text-align: var(--submitbuttontextalign);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover { border-color: var(--submitbuttonborderhovercolor); }
						}
					}
				}
				#docsearchd {
					width: 98%;
					height: auto;
					margin: 12px 1%;
					padding: 8px;
					color: green;
					font-size: 1rem;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					label {
						display: inline-block;
						width: 50%;
					}
					input[type=text] {
						display: inline-block;
						width: 30%;
						font-size: inherit;
					}
					input[type=submit] {
						display: inline-block;
						width: 15%;
						margin-left: 12px;
						font-size: inherit;
						cursor: var(--allbuttoncursor);
						background-color: var(--submitbuttoncolor);
						color: var(--submitbuttontextcolor);
						text-align: var(--submitbuttontextalign);
						border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
						border-radius: var(--defaultborderradius);
						&:hover { border-color: var(--submitbuttonborderhovercolor); }
					}
				}
				.doceditformd {
					width: 98%;
					height: auto;
					margin: 12px 1%;
					padding: 8px;
					background-color: var(--defaultbackgroundcolor);
					color: green;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					.doceditform {
						width: 98%;
						margin: 12px 1%;
						font-size: 1rem;
						color: navy;
						.contextlabel {
							margin-left: 6px;
						}
						input[type=text] {
							font-size: inherit;
							color: inherit;
						}
						input[type=checkbox] {
							width: 1rem;
							height: 1rem;
						}
						input[type=file] {
							width: 60%;
							color: navy;
							padding: 5px;
							background: azure;
							font-size: 1rem;
							border-radius: 10px;
							border: 1px solid navy;
							&::file-selector-button {
								font-size: 1rem;
							}
						}
						fieldset .docformcontexts {
							width: 98%;
							margin: 8px 1%;
							border: 1px solid navy;
							border-radius: var(--defaultborderradius);
						}
						legend {
							color: navy;
							font-size: 1rem;
							font-style: italic;
						}
						.docformnamed {
							width: 98%;
							height: auto;
							margin: 4px 1%;
							color: navy;
							font-size: 1rem;
							font-weight: bold;
						}
						.docdescrinputd {
							width: 80%;
							height: auto;
						}
						.docdescrinputd .docdescr {
							width: 90%;
							height: auto;
						}
						#docreviewstatusd {
							width: 95%;
							height: auto;
							margin: 4px 0px 4px 4px;
							color: navy;
							font-size: 1rem;
							font-style: italic;
						}
						#docfilenamed {
							width: 98%;
							height: auto;
							margin: 12px 1%;
							font-size: 1rem;
							color: navy;
							a:link, a:visited {
								color: blue;
							}
						}
						.docprimarynoted {
							width: 95%;
							height: auto;
							margin: 4px 0px 4px 4px;
							font-size: 1rem;
							font-style: italic;
						}
						.docprimarynoted span {
							color: navy;
							font-size: 1rem;
							font-style: normal;
							font-weight: 600;
						}
						#docreviewstatusd span {
							font-weight: 700;
						}
						#docreviewokd {
							width: 95%;
							height: auto;
							margin: 4px 0px 4px 4px;
							color: navy;
							font-size: 1rem;
							font-style: italic;
						}
						.buttondiv {
							display: flex;
							flex-direction: row;
							justify-content: space-evenly;
							gap: 18px;
							width: 98%;
							margin: 12px 1%;
							border: none;
							input[type=submit], input[type=button] {
								width: 25%;
								cursor: var(--allbuttoncursor);
								text-align: var(--submitbuttontextalign);
								font-size: 1rem;
								border-radius: var(--defaultborderradius);
							}
							.submitbutton {
								background-color: var(--submitbuttoncolor);
								color: var(--submitbuttontextcolor);
								border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
								&:hover { border-color: var(--submitbuttonborderhovercolor); }
							}
							.removebutton {
								background-color: red;
								color: ivory;
								border: 1px solid black;
							}
							.cancelbutton {
								background-color: yellow;
								color: black;
								border: 1px solid black;
							}
						}	/* buttondiv */
						.docuploadd {
							width: 85%;
							height: auto;
							margin: 8px 0px 24px 4px;
						}
					}  /* doceditform */
				} /* doceditformd */
				#docreviewlinkd {
					width: 90%;
					height: auto;
					margin: 12px 0px 12px 12px;
					padding: 4px 0px 4px 8px;
					color: green;
					a:link {
						color: green;
						text-decoration: none;
						cursor: pointer;
					}
				}
			}  /* doceditcontainer */
			
			/*
			 ** Documents Listing
			 */
			#doclinkscontainer,#doctraininglist,#docgenerallist,#docsponsorlist,#docalllist,#docrulebooklist {
				#doclinkstext {
					display: flex;
					flex-direction: column;
					gap: 6px;
					color: navy;
					& > div {
						font-size: .7vw;
						a:link,a:visited {
							color: royalblue;
							text-decoration: none;
							&:hover {
								color: red;
								text-decoration: none;
							}
						}
					}	/* doclinkd */
				} /* doclinkstext */
			}  /* doclinkscontainer */
			
			/* *******************************************************************
			 ** Locations Class
			 ** *******************************************************************/
			#loceditcontainer {
				background-color: ivory;
				height: auto;
				color: green;
				font-size: 1rem;
				#loceditnewdocd {
					width: 98%;
					height: auto;
					margin: 12px 1%;
					padding: 8px;
					background-color: transparent;
					color: green;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					form {
						display: block;
						label {
							display: inline-block;
						}
						input[type=submit] {
							display: inline-block;
							width: 15%;
							margin-left: 5%;
							cursor: var(--allbuttoncursor);
							background-color: var(--submitbuttoncolor);
							color: var(--submitbuttontextcolor);
							text-align: var(--submitbuttontextalign);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover { border-color: var(--submitbuttonborderhovercolor); }
						}
					}
				}
				#locsearchd {
					width: 98%;
					height: auto;
					margin: 12px 1%;
					padding: 4px 0px 4px 8px;
					color: green;
					form {
						display: block;
						label {
							display: inline-block;
						}
						input[type=text] {
							display: inline-block;
						}
						input[type=submit] {
							display: inline-block;
							width: 15%;
							margin-left: 5%;
							cursor: var(--allbuttoncursor);
							background-color: var(--submitbuttoncolor);
							color: var(--submitbuttontextcolor);
							text-align: var(--submitbuttontextalign);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover { border-color: var(--submitbuttonborderhovercolor); }
						}
					}
				}
				#newlocmessage {
					width: 90%;
					height: auto;
					margin: 2px 0px 12px 0px;
					font-size: 1rem;
					color: navy;
				}
				.loceditformd {
					width: 98%;
					height: auto;
					margin: 4px 1%;
					padding: 8px 0px 8px 8px;
					background-color: transparent;
					color: green;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					.loceditform {
						fieldset {
							width: 98%;
							height: auto;
							margin: 8px 1% 0px 1%;
							color: green;
							border: 1px solid green;
							border-radius: var(--defaultborderradius);
							legend {
								color: orange;
							}
						}
						.locformcoords .locnotesd {
							width: 90%;
							height: auto;
							margin: 4px 0px 2px 4px;
							color: navy;
							font-size: .8vw;
							font-style: italic;
						}
						.locgeotaglink {
							width: 98%;
							margin: 8px 1%;
							font-size: 1rem;
							font-style: italic;
							color: navy;
							a:link, a:visited { color: red };
						}
						label {
							display: block;
							width: 80%;
							height: auto;
							color: green;
						}
						input[type=text] {
							width: 60%;
						}
						.locinputd {
							width: 80%;
							margin: 12px 0px 4px 4px;
						}
						.locinputd .loccodename {
							text-transform: lowercase;
						}
						.buttondiv {
							display: flex;
							flex-direction: row;
							justify-content: space-evenly;
							gap: 18px;
							width: 98%;
							margin: 12px 1%;
							background-color: transparent;
							border: none;
							input[type=button], input[type=submit] {
								padding: 4px;
								font-size: 1.2rem;
								cursor: var(--allbuttoncursor);
								border: 2px solid transparent;
								border-radius: var(--defaultborderradius);
							}
							.submitbutton {
								background-color: var(--submitbuttoncolor);
								color: var(--submitbuttontextcolor);
								text-align: var(--submitbuttontextalign);
								&:hover { border-color: var(--submitbuttonborderhovercolor); }
							}
							.removebutton {
								background-color: orangered;
								color: ivory;
								&:hover { border-color: black }
							}
							.cancelbutton {
								background-color: yellow;
								color: navy;
								&:hover { border-color: red }
							}
						}
					} /* loceditform */
				}  /* loceditformd */
			} /* loceditcontainer */
			
			/*
			 **  The directions table
			 */
			#directionscontainer { /* extends containerd */
				width: 98%;
				height: auto;
				margin: 12px 1%;
				#directionsd {
					width: 98%;
					height: 1500px;
					margin: 8px 1%;
					#directionst {
						width: 98%;
						height: auto;
						margin: 12px 1% 8px 1%;
						font-size: 1rem;
						color: navy;
						border: 2px solid navy;
						border-collapse: collapse;
						.directionsth {
							background-color: lightblue;
							text-align: center;
							color: navy;
							font-size: 1.1rem;
							border: 1px solid navy;
							border-collapse: collapse;
						}
						td {
							padding: 4px;
							font-size: 1rem;
							color: navy;
							.directionstd {
								padding: 2px;
								background-color: transparent;
								padding: 4px;
								text-align: left;
								border: 1px solid navy;
								border-collapse: collapse;
								a:link, a:visited {
									color: blue;
								}
							}
							.directionstdc {
								width: 100px;
								padding: 2px;
								border: 1px solid navy;
								background-color: transparent;
								text-align: left;
								border-collapse: collapse;
								a:link, a:visited {
									color: green;
								}
							}
						}
					}
				}  /* directionsd */
			} /* directionscontainer */
			
			/*
			 **  The locations table
			 */
			#locationscontainer { /* extends containerd */
				width: 98%;
				height: auto;
				margin: 12px 1% 12px 1%;
				#locationsd {
					width: 98%;
					height: 1000px;
					margin: 8px 1%;
					overflow-x: auto;
					overflow-y: auto;
					#locationst {
						font-size: 1.5rem;
						margin: 12px 0px 8px 16px;
						border: 1px solid navy;
						border-collapse: collapse;
						td {
							font-size: 1rem;
						}
						.locationsth {
							background-color: lightgrey;
							text-align: center;
							color: navy;
							border: 1px solid navy;
							border-collapse: collapse;
						}
						.locationstd {
							padding: 2px;
							background-color: transparent;
							text-align: left;
							color: navy;
							border: 1px solid navy;
							border-collapse: collapse;
						}
						.locationstdc {
							width: 100px;
							padding: 2px;
							border: 1px solid navy;
							background-color: transparent;
							text-align: left;
							color: navy;
							border-collapse: collapse;
							a:link, a:visited {
								color: green;
							}
						}
					}
				}  /* locationsd */
			} /* locationscontainer */
			
			/*
			 **  Jobs
			 */
			#jobscontainer {  /* extends .containerd */
				#jobcodesd{       /*  extends innerscrollable */
					width: 98%;
					height: 800px;
					margin: 10px 1%;
					overflow-y: auto;
					font-size: 1.5rem;
					border: none;
					#jobst {
						width: 80%;
						margin: 10px 10% 0px 10%;
						font-size: 2rem;
						color: red;
						tr {
							th {
								text-align: center;
								font-weight: 600;
								background-color: lightblue;
								font-size: 1.3rem;
							}
							td {
								padding: 4px 8px 4px 8px;
								font-weight: 400;
								font-size: 1.2rem;
							}
							.jobstcode {
								width: 15%;
								text-transform: uppercase;
							}
							.jobstjob {
								width: 40%;
							}
						}
					}  /* jobst */
				}  /* jobcodesd */
				#jobnotes {
					font-size: 1rem;
					color: crimson;
				}
			}  /* jobscontainer */
			
			/*
			 **  Jobs editor
			 */
			#jobeditcontainer {  /* extends containerd */
				width: 98%;
				height: auto;
				background-color: ivory;
				color: navy;
				#newjobcoded {
					width: 98%;
					height: auto;
					margin: 12px 1% 12px 1%;
					padding: 12px;
					font-size: 1rem;
					border: 2px solid navy;
					border-radius: var(--defaultborderradius);
					#newjobmessage {
						width: 90%;
						height: auto;
						font-weight: 600;
						color: navy;
						input[type=button] {
							display: inline;
							width: 20%;
							height: auto;
							margin-left: 12px;
							background-color: lightblue;
							font-weight: 600;
							border: 2px solid lightblue;
							border-radius: var(--defaultborderradius);
							&:hover {
								border: 2px solid red;
							}
						}
					}
					form {
						display: none;
						width: 98%;
						height: auto;
						color: navy;
						font-weight: 600;
						font-size: 1rem;
						margin: 12px 1% 12px 1%;
						label {
							display: block;
							width: 30%;
						}
						#jobcode {
							display: block;
							width: 60%;
							margin: 0px 0px 12px 0px;
							text-transform: uppercase;
						}
						#description {
							display: block;
							width: 60%;
							margin: 0px 0px 12px 0px;
						}
						input[type=submit] {
							display: block;
							width: 15%;
							margin: 4px 45% 4px 15%;
							font-size: 1.5rem;
							font-weight: 600;
							cursor: var(--allbuttoncursor);
							background-color: var(--submitbuttoncolor);
							color: var(--submitbuttontextcolor);
							text-align: var(--submitbuttontextalign);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover { border-color: var(--submitbuttonborderhovercolor); }
						}
					}
				}
				#jobsearchd {
					width: 98%;
					height: auto;
					margin: 12px 1% 12px 1%;
					padding: 12px;
					border: 1px solid green;
					border-radius: var(--defaultborderradius);
					#jobsearchf {
						label {
							display: inline;
							width: 40%;
							font-size: 1.2rem;
							color: navy;
						}
						input[type=text] {
							display: inline;
							width: 10%;
							font-size: 1.2rem;
							text-transform: uppercase;
						}
						input[type=submit] {
							display: inline;
							width: 10%;
							height: auto;
							margin: 4px 0px 4px 12px;
							font-size: 1.2rem;
							font-weight: 600;
							cursor: var(--allbuttoncursor);
							background-color: var(--submitbuttoncolor);
							color: var(--submitbuttontextcolor);
							text-align: var(--submitbuttontextalign);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover { border-color: var(--submitbuttonborderhovercolor); }
						}
					}
					#jobssearchstringd {
						width: 95%;
						height: auto;
						margin: 12px 0px 12px 12px;
					}
				}
				
				#jobslistd {
					width: 98%;
					height: 800px;
					margin: 12px 1% 12px 1%;
					font-size: 1rem;
					border: 1px solid green;
					border-radius: var(--defaultborderradius);
					overflow-y: auto;
					.jobeditformd {
						width: 98%;
						height: auto;
						margin: 8px 1%;
						padding: 12px 8px 12px 8px;
						background-color: ivory;
						color: navy;
						border: 1px solid green;
						border-radius: var(--defaultborderradius);
						.jobeditform {
							& > div {
								display: inline-block;
							}
							input[type=text] {
								font-size: 1.1rem;
							}
							.jobcoded {
								width: 30%;
								height: auto;
							}
							.jobcode {
								width: 50%;
								text-transform: uppercase;
							}
							.jobdescriptiond {
								width: 55%;
							}
							.jobdescription {
								width: 60%;
							}
							label {
								width: 40%;
								color: navy;
							}
							.jobsbuttond {
								display: flex;
								flex-direction: row;
								justify-content: space-evenly;
								width: 40%;
								height: auto;
								margin: 12px 0px 12px 30%;
							}
							.jobformupdate {
								width: 30%;
								margin: 2px 12px 2px 0px;
								font-size: 1.2rem;
								cursor: var(--allbuttoncursor);
								background-color: var(--submitbuttoncolor);
								color: var(--submitbuttontextcolor);
								text-align: var(--submitbuttontextalign);
								border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
								border-radius: var(--defaultborderradius);
								&:hover { border-color: var(--submitbuttonborderhovercolor); }
							}
							.jobformremove {
								width: 30%;
								margin: 2px 12px 2px 0px;
								cursor: pointer;
								text-align: center;
								background-color: red;
								font-size: 1.2rem;
								color: ivory;
								border: 2px solid red;
								border-radius: var(--defaultborderradius);
								&:hover {
									border: 2px solid navy;
								}
							}
						}  /* jobeditform */
					} /* jobeditformd */
				}  /* joblistd */
			} /* jobeditcontainer */
			
			/*
			 **  AD list and loader stuff
			 */
			#admastercontainer {
				width: 98%;
				height: auto;
				margin: 0px 12px 1%;
				padding-bottom: 12px;
				background-color: ivory;
				font-size: 1em;
				border: 2px solid silver;
				border-radius: var(--defaultborderradius);
				#adsearchbox {
					width: 98%;
					height: auto;
					margin: 8px 1%;
					padding: 8px;
					border: 2px solid navy;
					border-radius: var(--defaultborderradius);
					#adsearchlabel {
						display: inline-block;
						width: 40%;
						height: auto;
						margin: 2px 0px;
					}
					#adsearchschoolinput {
						display: inline-block;
						width: 20%;
						min-height: 1.2em;
						border: 1px solid navy;
					}
					input[type=button] {
						display: inline-block;
						width: 10%;
						height: auto;
						margin: 2px 8px;
						background-color: lightBlue;
						color: navy;
						border: 2px solid silver;
						&:hover {border-color: red;}
					}
					#adshared {
						width: 98%;
						height: auto;
						margin: 4px 1%;
						color: red;
					}
				}
				#adlistd {
					width: 98%;
					height: 900px;
					margin: 8px 1%;
					padding: 4px;
					overflow-y: auto;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					.adlistitem {
						width: 98%;
						height: auto;
						margin: 12px 1%;
						padding: 8px;
						background-color: ivory;
						color: navy;
						border: 2px solid navy;
						border-radius: var(--defaultborderradius);
						.messaged {
							width: 98%;
							height: auto;
							margin: 8px 1%;
							font-size: 1.2em;
							color: red;
						}
					}
					.adlistelement {
						display: block;
						width: 98%;
						min-height: 100px;
						margin: 4px 1%;
						padding: 8px;
						border: 2px solid navy;
						border-radius: var(--defaultborderradius);
						.schooltitle {
							width: 90%;
							height: auto;
							margin: 0px 2px 1%;
							color: red;
							font-size: 1.3em;
						}
						.aditem {
							width: 98%;
							height: auto;
							margin: 1% 2px;
							color: navy;
							font-size: 1em;
							border: none;
						}
						.addresscard {
							display: inline-block;
							width: 90%;
							height: auto;
							margin: 0px 0%;
							padding: 1px;
							color: navy;
							font-size: 1em;
							border: 1px solid transparent;
							legend {
								font-weight: 600;
							}
							.addresscardelement {
								width: 98%;
								height: auto;
								margin: 2px 1%;
								color: navy;
							}
						}
					}  /* adlistelement */
				}	/* adlistd */
			}	/* admastercontainer */
			
			/*
			 **  Bulk Loader
			 */
			#arbitercontainerd {
				width: 98%;
				height: 800px;
				margin: 12px 1%;
				padding: 8px;
				overflow-y: auto;
				font-size: 1rem;
				color: navy;
				border: 2px solid navy;
				border-radius: var(--defaultborderradius);
				#arbitermessaged {
					width: 98%;
					height: auto;
					margin: 12px 1%;
					padding: 8px;
					border: 2px solid navy;
					border-radius: var(--defaultborderradius);
				}
				.meetd {
					width: 98%;
					height: auto;
					margin: 12px 1%;
					padding: 8px;
					border: 2px solid navy;
					border-radius: var(--defaultborderradius);
					.title {
						width: 98%;
						height: auto;
						margin: 8px 1%;
						font-weight: 600;
						color: Crimson;
					}
					.data {
						width: 98%;
						height: auto;
						margin: 8px 1%;
						color: navy;
					}
					.status {
						width: 98%;
						height: auto;
						margin: 8px 1%;
						font-size: .8em;
						color: Crimson;
					}
				}
				#arbitermeets {
					width: 98%;
					height: auto;
					margin: 12px 1%;
					padding: 8px;
					border: 2px solid navy;
					border-radius: var(--defaultborderradius);
				}
				.arbitermeetd {
					width: 98%;
					height: auto;
					margin: 12px 1%;
					padding: 8px;
					border: 2px solid red;
					border-radius: var(--defaultborderradius);
					.olistcmptable {
						width: 96%;
						height: auto;
						margin: 12px 0px 12px 2%;
						td {
							width: 48%;
							height: auto;
							padding: 2px 4px 2px 4px;
							background-color: transparent;
							font-weight: 600;
							color: navy;
							border: 1px solid navy;
							border-collapse: collapse;
						}
						.emptyclass {
							background-color: lightyellow;
						}
						.okclass {
							background-color: lightblue;
						}
						.unknownclass {
							background-color: lightblue;
							color: crimson;
						}
						.trclass {
							background-color: yellow;
						}
						.delclass {
							background-color: red;
							color: white;
						}
						.naclass {
							background-color: navy;
							color: white;
						}
						.openclass {
							background-color: blue;
							color: white;
						}
						.discclass {
							background-color: red;
							color: white;
						}
						th {
							width: 48%;
							height: auto;
							padding: 2px 4px 2px 4px;
							background-color: lightgrey;
							color: navy;
							border: 1px solid navy;
							border-collapse: collapse;
						}
					}	/* olistcmptable */
					.arbiterresultsdiv {
						width: 98%;
						height: auto;
						margin: 8px 1%;
						font-size: 1em;
						font-style: italic;
						color: red;
					}
				}	/* arbitermeetd */
			}	/* arbiter containerd */
			
			#bulkcontainerd {
				height: 800px;
				overflow-y: auto;
				overflow-x: hidden;
				background-color: ivory;
				color: navy;
				font-size: 1rem;
				.bulkfeedbackd {
					width: 95%;
					height: auto;
					margin: 8px 0px 12px 8px;
					padding: 8px;
					border: 2px solid BlueViolet;
					border-radius: var(--defaultborderradius);
					.bulkfeedbackdated{
						width: 85%;
						height: auto;
						margin: 8px 0px 8px 8px;
						font-size: 14px;
						font-weight: 700;
						color: navy;
					}
					.bulkfeedbackerrord {
						color: red;
					}
					.bulkerrormessaged {
						width: 80%;
						height: auto;
						margin: 12px 0px 8px 8px;
						font-size: 1vw;
						color: red;
					}
				}
				.officialcomparenonod {
					width: 45%;
					height: auto;
					margin: 4px 8px 12px 5%;
					padding: 2px 4px 12px 8px;
					background-color: red;
					color: white;
					border: 1px solid green;
					border-radius: var(--defaultborderradius);
				}
				.officialcompared {
					width: 45%;
					height: auto;
					margin: 4px 8px 12px 5%;
					padding: 2px 4px 12px 8px;
					border: 1px solid green;
					border-radius: var(--defaultborderradius);
					.changecountd {
						width: 80%;
						height: auto;
						margin: 4px 8px 12px 10%;
						padding: 2px 4px 12px 8px;
						border: 1px solid green;
						border-radius: var(--defaultborderradius);
					}
					.officialcomparetitled {
						width: 96%;
						height: auto;
						margin: 12px 0px 12px 2%;
						padding: 2px 4px 2px 8px;
						border: none;
					}
				}
				.olistcmptable {
					width: 96%;
					height: auto;
					margin: 12px 0px 12px 2%;
					.okclass {
						width: 48%;
						height: auto;
						padding: 2px 4px 2px 4px;
						background-color: lightblue;
						font-weight: 600;
						color: navy;
						border: 1px solid navy;
						border-collapse: collapse;
					}
					.unknownclass {
						width: 48%;
						height: auto;
						padding: 2px 4px 2px 4px;
						background-color: lightblue;
						font-weight: 600;
						color: red;
						border: 1px solid navy;
						border-collapse: collapse;
					}
					.openclass {
						width: 48%;
						height: auto;
						padding: 2px 4px 2px 4px;
						background-color: blue;
						font-weight: 600;
						color: white;
						border: 1px solid navy;
						border-collapse: collapse;
					}
					.addclass {
						width: 48%;
						height: auto;
						padding: 2px 4px 2px 4px;
						background-color: yellow;
						font-weight: 600;
						color: navy;
						border: 1px solid navy;
						border-collapse: collapse;
					}
					.newclass {
						width: 48%;
						height: auto;
						padding: 2px 4px 2px 4px;
						background-color: yellow;
						font-weight: 600;
						color: navy;
						border: 1px solid navy;
						border-collapse: collapse;
					}
					.discclass {
						width: 48%;
						height: auto;
						padding: 2px 4px 2px 4px;
						background-color: red;
						font-weight: 600;
						color: white;
						border: 1px solid navy;
						border-collapse: collapse;
					}
					th {
						width: 48%;
						height: auto;
						padding: 2px 4px 2px 4px;
						background-color: lightgrey;
						color: navy;
						border: 1px solid navy;
						border-collapse: collapse;
					}
				}
				#notfoundd {
					width: 45%;
					min-height: 200px;
					margin: 4px 8px 12px 5%;
					padding: 2px 4px 12px 8px;
					color: green;
					font-weight: 500;
					border: 2px solid red;
					border-radius: var(--defaultborderradius);
				}
				.updated {
					width: 98%;
					height: auto;
					color: red;
				}
			} /* bulkcontainerd */
			
			/*
			 ** Photos
			 */
			#photostackcontainer {
				color: navy;
				font-size: 10pt;
				#photostackd {
					color: navy;
					font-size: .8vw;
					border: none;border: none;
					#photomessage {
						p {
							color: navy;
							font-size: .8vw;
						}
					}
					#photoslideshowd {
						input[type=submit] {
							display: block;
							width: 25%;
							height: auto;
							float: left;
							margin: 4px 12px 4px 0px;
							cursor: pointer;
							background-color: lightgreen;
							color: navy;
							font-size: .8vw;
							border: 2px solid silver;
							border-radius: 10px;
							&:hover {
								background-color: lightblue;
								border: 2px solid navy;
							}
						}
					}
				}
			} /* photostackcontainer */
			
			/*
			 **  Videos if posted on the webpage
			 */
			#videooutercontainer {
				#videocontainer {
					#trainingvideo {
						margin: 8px 0px 8px 4px;
						border: 4px solid royalblue;
						border-radius: var(--defaultborderradius);
					}
				}
			}  /* videooutercontainer */
			
			/*
			 **  Access Log Table
			 */
			#accesscontainer {  /* cascades from .containerd */
				min-height: 550px;
				overflow-y: auto;
				#accessd {  /* cascades from .innerscrollable */
					width: 96%;
					height: 500px;
					color: red;
					#accesst {
						table-layout: fixed;
						width: 98%;
						height: 98%;
						font-size: 1vw;
						margin: 2px 0px 8px 2px;
						border-collapse: collapse;
						th {
							border: 1px solid navy;
							background-color: lightgreen;
							font-size: 1.2vw;
							text-align: center;
							color: navy;
							border-collapse: collapse;
							&:nth-child(1) {
								width: 12%;
							}
							&:nth-child(2) {
								width: 18%;
							}
							&:nth-child(3) {
								width: 58%;
							}
							&:nth-child(4) {
								width: 15%;
							}
							/*  Specific column td properties */
							
						}
						td {
							padding: 0px 4px 0px 4px;
							border: 1px solid navy;
							background-color: transparent;
							font-size: .8vw;
							text-align: left;
							color: navy;
							border-collapse: collapse;
							&:nth-child(1) {
								width: 12%;
							}
							&:nth-child(2) {
								width: 18%;
							}
							&:nth-child(3) {
								overflow: hidden;
								text-overflow: ellipsis;
							}
							&:nth-child(4) {
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
					}  /* accesst */
				}	/* accessd */
			}  /* accesscontainer */
			
			/* **************************************************************
			 **  Request Manager
			 ** ************************************************************/
			#requestmanager {	/* extends .containerd */
				width: 100%;
				height: auto;
				background-color: ivory;
				#requestmanagerbody {
					width: 98%;
					height: auto;
					margin: 4px 1%;
					padding: 8px;
					color: navy;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					&>div {
						width: 90%;
						height: auto;
						margin: 4px 5%;
					}
					#buttonsection {
						display: flex;
						flex-direction: row;
						margin-top: 12px;
						form {
							width: 15%;
							height: auto;
							input[type=submit] {
								width: 100%;
								border: 2px solid transparent;
								border-radius: var(--defaultborderradius);
							}
							#myschedule { background-color: lightgreen; color: navy; }
						}
					}
					#managebuttonsection,
					#adminbuttonsection {
						display: flex;
						flex-direction: row;
						width: 98%;
						height: auto;
						background-color: transparent;
						margin: 12px 1%;
						form {
							display: block;
							width: 20%;
							height: auto;
							margin-left: 10%;
							input[type=submit] {
								width: 100%;
								font-size: 1.2em;
								font-weight: 600;
								cursor: var(--allbuttoncursor);
								background-color: var(--submitbuttoncolor);
								color: var(--submitbuttontextcolor);
								text-align: var(--submitbuttontextalign);
								border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
								border-radius: var(--defaultborderradius);
								&:hover { border-color: var(--submitbuttonborderhovercolor); }
							}
						}
					}
					#requests {
						width: 98%;
						height: auto;
						margin: 4px 1%;
						padding: 8px;
						border: 1px solid navy;
						border-radius: var(--defaultborderradius);
						.indrequest {
							display: block;
							width: 98%;
							height: auto;
							margin: 8px 1%;
							padding: 4px;
							& > div {
								display: inline-block;
								cursor: pointer;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								&:hover {
									white-space: wrap;
									color: red;
								}
							}
							.eventnumber { width: 8%; }
							.username { width: 10%; }
							.jobcode { width: 10%; }
							.slotid { width: 5%; }
							.eventdate { width: 25%; }
							.eventtitle { width: 40%; }
							.formbuttond {
								display: block;
								width: 98%;
								margin: 8px 1%;
								form {
									display: inline-block;
									width: 30%;
									height: auto;
									margin: 8px 5%;
									input[type=submit] {	/* not a standard submit */
										width: 100%;
										font-weight: 600;
										cursor: var(--allbuttoncursor);
										background-color: var(--submitbuttoncolor);
										color: var(--submitbuttontextcolor);
										text-align: var(--submitbuttontextalign);
										border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
										border-radius: var(--defaultborderradius);
										&:hover { border-color: var(--submitbuttonborderhovercolor); }
									}
								}
								#reject .actionreject {
									background-color: orangered;
									color: ivory;
									&:hover { border-color: black; }
								}
							}	/* formbuttond */
						}
					}
				}
			}
			
			/* ****************************************************************
			 ** Schedule By Official
			 ** ***************************************************************/
			#byofficialschedbody {
				height: 1000px;
				#nomeetnotesd {
					width: 98%;
					height: auto;
					margin: 12px 1%;
					padding: 12px;
					font-size: 1em;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					div {
						margin-bottom: 12px;
					}
				}
				#confirmbox {
					position: absolute;
					width: 30%;
					height: auto;
					top: 40%;
					left: 35%;
					padding: 24px;
					background-color: LightGrey;
					color: navy;
					font-size: 1.2em;
					border: 4px solid navy;
					border-radius: var(--defaultborderradius);
					#textlabel {
						display: block;
						width: 90%;
						height: auto;
						margin: 8px 5%;
						color: navy;
					}
					#textarea {
						display: block;
						width: 90%;
						height: auto;
						margin: 0px 5%;
						font-size: 1.1em;
						border: 1px solid navy;
					}
					input[type=button],input[type=submit] {	/* nota standard submit -  shows in the pop-up */
						display: inline-block;
						width: 40%;
						height: auto;
						margin-top: 12px;
						font-size: 1.5em;
						border: 2px solid transparent;
						border-radius: var(--defaultborderradius);
					}
					#confirmbutton { margin-left: 8%; background-color: lightGreen; }
					#cancelbutton { margin-left: 12px; background-color: red; color: antiqueWhite; }
				}
				.meetd {
					.schedmodtimed {
						/* see containerd */
						color: navy;
					}
					.arbitermessage {
						width: 98%;
						height: auto;
						margin: 12px 1%;
						padding: 8px;
						font-size: 1em;
						font-weight: 600;
						color: red;
						border: 1px solid red;
						border-radius: var(--defaultborderradius);
					}
					.olnotregd {
						width: 25%;
						margin: 4px 0px 4px 12px;
						float: left;
						font-size: 12pt;
						font-weight: 700;
						text-align: left;
						color: red;
					}
					.olofficiald {
						width: 98%;
						height: auto;
						margin: 4px 1%;
						font-size: 1.2em;
						font-weight: 600;
						color: navy;
					}
					.statussymbolcontainerd {
						width: 80%;
						height: auto;
						margin: 8px 10%;
						background-color: transparent;
						color: navy;
						.statussymbold {
							display: inline-block;
							width: 20%;
							height: auto;
							background-color: transparent;
							font-size: .75vw;
							color: navy;
						}
						span {
							color: red;
						}
						#showconfirms {  /* currently not used */
							width: 20%;
							height: auto;
							margin: 12px 12px 12px 24px;
							float: left;
							cursor: pointer;
							font-size: 12px;
						}
					}
					.notesd {
						font-size: .7vw;
					}
					.commandsd {
						.hidedatad {
							width: 20%;
							height: auto;
							margin: 12px 12px 12px 12px;
							padding: 4px 0px 4px 0px;
							float: left;
							text-align: center;
							cursor: pointer;
							background-color: lightgreen;
							font-size: .8vw;
							border: 1px solid lightgreen;
							border-radius: var(--defaultborderradius);
						}
					}
					#singleevents {
						display: flex;
						flex-direction: column;
						width: 100%;
						.controlbreak {
							width: 100%;
							height: 12px;
						}
						.olsingleeventheaderd {
							display: block;
							width: 99%;
							height: auto;
							margin: 4px .5%;
							& > div {
								display: inline-block;
								text-align: center;
								text-decoration: underline;
								font-family: monaco,monospace;
								font-size: .68vw;
								font-weight: 700;
								color: navy;
							}
							.oldateinfoheaderd {
								width: 20%;
							}
							.oleventnumberheaderd {
								width: 5%;
							}
							.oladdtocalheaderd {
								width: 20px;
							}
							.oljobheaderd {
								width: 6%;
							}
							.olsiteheaderd {
								width: 20%;
							}
							.olteamheaderd {
								width: 15%;
							}
							.oltitleheaderd {
								width: 25%;
							}
						}
						& > div:nth-child(odd):is(.olsingleeventd) {
							background-color: lightblue;
						}
						.olsingleeventd {
							display: flex;
							flex-direction: row;
							justify-content: space-evenly;
							width: 99%;
							height: auto;
							margin: 4px .5%;
							padding-top: 4px;
							padding-bottom: 4px;
							color: navy;
							font-family: DejaVu Sans Mono,Consolas,monaco,monospace;
							font-size: .9em;
							.olstatusd {
								width: .5%;
								cursor: pointer;
								&:hover {
									color: red;
								}
							}
							.oldateinfod {
								width: 20%;
								cursor: pointer;
								overflow: hidden;
								&:hover {
									color: red;
									font-size: 1.05em;
								}
							}
							.oleventnumber {
								width: 5%;
								height: auto;
							}
							.oladdtocald {
								width: 20px;
							}
							.oljobd {
								width: 6%;
								cursor: pointer;
								overflow: hidden;
							}
							.olgoogled {
								width: 20%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								a:link, a:visited {
									color: blue;
									&:hover {
										color: red;
									}
								}
							}
							.olgoogledpast {
								width: 20%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								a:link, a:visited {
									color: grey;
									&:hover {
										color: blueviolet;
									}
								}
							}
							.olteamd {
								width: 15%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								&:hover {
									white-space: wrap;
								}
							}
							.olmeettyped {
								width: 25%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								&:hover {
									white-space: wrap;
								}
							}
							.oldoublebookd {
								width: 80%;
								color: red;
								font-size: 11px;
								font-weight: bold;
							}
						}  /* olsingleeventd */
					} /* singleevents */
					.olconfirmd {
						display: none;
						width: 90%;
						height: auto;
						margin: 8px 0px 8px 8px;
						padding: 0px;
						background-color: transparent;
						color: navy;
						overflow: hidden;
						.olconfirmf {
							width: 100%;
							height: 100%;
							background-color: ivory;
							padding: 8px;
							border: 1px solid navy;
							input[type=button],
							input[type=submit] {	/* not a standard submit */
								display: inline-block;
								width: 15%;
								height: auto;
								margin: 0px 1%;
								cursor: pointer;
								background-color: lightBlue;
								text-align: center;
								font-size: 1.3em;
								color: navy;
								border: 2px solid navy;
								border-radius: 10px;
								&.closeb {
									position: relative;
									top: -10px;
									left: -10px;
									width: 2%;
									margin: 0px;
									text-align: left;
									background-color: transparent;
									color: navy;
									border: none;
								}
								&.crewb { background-color: navy; color: ivory; }
								&.confirmb { background-color: lightGreen; color: navy; }
								&.resetb { background-color: blueViolet; color: ivory; }
								&.declineb { background-color: red; color: ivory; }
								&.confirmallb { margin-left: 80px; background-color: limegreen; }
								&.unconfirmallb { background-color: blueviolet; color: ivory; }
							}
							&:nth-child(4) {
								margin-left: 24px;
							}
						}   /* olconfirmf */
					}
					#olconfirmalld {
						display: block;
						width: 98%;
						height: auto;
						margin: 8px 1%;
						padding: 0px 0px 0px 4px;
						background-color: transparent;
						color: navy;
						overflow: hidden;
						form {
							display: inline-block;
							width: 15%;
							height: auto;
							margin: 12px 12px 0px 15%;
							background-color: transparent;
							color: navy;
							input[type=submit] {
								width: 100%;
								height: auto;
								font-size: 1em;
								cursor: var(--allbuttoncursor);
								background-color: var(--submitbuttoncolor);
								color: var(--submitbuttontextcolor);
								text-align: var(--submitbuttontextalign);
								border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
								border-radius: var(--defaultborderradius);
								&:hover { border-color: var(--submitbuttonborderhovercolor); }
							}
							#confirmallconfirm { background-color: lightgreen }
							#confirmalldecline { background-color: red }
							#confirmallreset { background-color: lightblue }
						}
					}
					.olcollegued {
						display: none;
						width: 95%;
						height: auto;
						cursor: pointer;
						margin: 8px 0px 8px 8px;
						padding: 8px 8px 8px 8px;
						background-color: transparent;
						color: navy;
						border: 1px solid navy;
						border-radius: var(--defaultborderradius);
						.olcollegueindd {
							margin: 2px 8px 2px 4px;
							background-color: transparent;
							font-size: 1em;
							color: navy;
						}
					}
				}  /* meetd */
				
				#olopenslotsd {
					width: 98%;
					height: auto;
					margin: 4px 0px 8px 4px;
					padding: 2px 4px 8px 8px;
					font-size: 1.2em;
					color: navy;
					border: 2px solid navy;
					border-radius: var(--defaultborderradius);
					.osmeetd {
						width: 98%;
						height: auto;
						margin: 4px 1%;
						padding: 8px;
						color: navy;
						font-size: 1em;
						border: 1px solid navy;
						border-radius: var(--defaultborderradius);
						& > div {
							width: 90%;
							height: auto;
							margin: 8px 0px 0px 5%;
							font-size: 1em;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							&:hover {
								white-space: wrap;
								overflow-wrap: break-word;
							}
						}
						.olosdated {
							width: 98%;
							height: auto;
							margin: 8px 1%;
							font-weight: 600;
							font-size: 1.2em;
						}
						.olostitled {
							
						}
						.oloseventnumberd {}
						.olossited {}
						.olosjobd {
							display: block;
							width: 40%;
							height: auto;
							margin: 12px 0px 4px 20%;
							cursor: pointer;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							&:hover {
								white-space: wrap;
								overflow-wrap: break-word;
								color: red;
							}
							form {
								display: block;
								label {
									display: inline-block;
									margin-left: 8px;
								}
								input[type=submit] {	/* not a standard submit */
									display: inline-block;
									width: 30%;
									text-align: center;
									background-color: lightblue;
									cursor: pointer;
									border: 2px solid transparent;
									border-radius: var(--defaultborderradius);
									&:hover { border-color: red; }
								}
								#retract { background-color: red; color: ivory; }
								#request {}
							}
						}
					}
					.oloscontactd {
						display: none;  /* don't forget to unhide this in both places */
						width: 98%;
						margin: 12px 1% 4px 1%;
						text-align: center;
						font-size: .9vw;
						font-style: italic;
						color: red;
					}
				} /* olopenslotsd */
			}  /* byofficialschedbody */
			
			/*
			 ** Leagues
			 */
			#leaguemanagercontainer {
				background-color: ivory;
				color: navy;
				form {
					input[type=submit] {
						display: inline-block;
						width: 20%;
						height: auto;
						margin-top: 18px;
						cursor: var(--allbuttoncursor);
						background-color: var(--submitbuttoncolor);
						color: var(--submitbuttontextcolor);
						text-align: var(--submitbuttontextalign);
						border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
						border-radius: var(--defaultborderradius);
						&:hover { border-color: var(--submitbuttonborderhovercolor); }
					}
				}
				#newleagueform {
					display: block;
					width: 98%;
					height: auto;
					margin: 4px 1%;
					padding: 4px;
					border: 2px solid navy;
					border-radius: var(--defaultborderradius);
					label {
						display: inline-block;
					}
					input {
						display: inline-block;
					}
				}
				#leaguemanagerform {
					display: block;
					width: 98%;
					height: auto;
					margin: 4px 1%;
					label {
						margin-top: 12px;
						display: block;
						color: navy
					}
					.backbutton {
						display: inline-block;
						width: 20%;
						height: auto;
						margin-top: 18px;
						background-color: lightBlue;
						border: 2px solid transparent;
						border-radius: var(--defaultborderradius);
						&:hover { border-color: red }
					}
					fieldset {
						width: 98%;
						height: auto;
						margin: 12px 1%;
						border: 1px solid green;
						border-radius: var(--defaultborderradius);
						legend {
							font-size: 1em;
							color: orangeRed;
						}
						legend {
							font-size: 1em;
							color: orangeRed;
						}
						input[type=text] {
							width: 50%;
							height: auto;
							font-size: 1em;
						}
						#leagueacronym {
							width: 25%;
							text-transform: uppercase;
						}
						#leaguename {
							width: 80%;
						}
						#contact1,#contact2 {
							text-transform: lowercase;
						}
					}
				}
				#leagues {
					width: 98%;
					height: auto;
					margin: 8px 1%;
					color: navy;
					.leagued {
						width: 98%;
						height: auto;
						margin: 8px 1%;
						padding: 4px;
						color: navy;
						border: 2px solid navy;
						border-radius: var(--defaultborderradius);
						input[type=submit] {
							display: inline-block;
							width: 15%;
							height: auto;
							margin: 12px 10%;
						}
						.leaguename {
							width: 98%;
							height: auto;
							margin: 4px 1%;
							font-weight: 600;
						}
						.leagueid {
							width: 98%;
							height: auto;
							margin: 4px 1%;
							font-weight: 600;
						}
						.delete {
							display: inline-block;
							width: 15%;
							height: auto;
							margin: 12px 10%;
							cursor: pointer;
							background-color: orangered;
							color: ivory;
							border: 2px solid transparent;
							border-radius: var(--defaultborderradius);
							&:hover { border-color: red ; background-color: red}
						}
					}
				}
			} /* leaguemanagercontainer */
			
			/*
			 **  Schedule By Meet
			 */
			#bymeetschedulecontainer {
				/*
				 ** Schedule Manager/Editor uses this element in the same named parent.
				 */
				#neweventformd {
					width: 98%;
					height: auto;
					margin: 8px 1% 8px 1%;
					padding: 4px 4px 4px 8px;
					background-color: ivory;
					color: navy;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					#neweventform {
						display: block;
						width: 90%;
						height: auto;
						padding: 8px;
						label {
							display: inline-block;
							width: 40%;
							height: auto;
							margin: 0px 0px 8px 0px;
							font-size: 1.5em;
							color: red;
						}
						input[type=submit] {
							display: inline-block;
							width: 10%;
							height: auto;
							margin-left: 12px;
							font-size: 1.5em;
							cursor: var(--allbuttoncursor);
							background-color: var(--submitbuttoncolor);
							color: var(--submitbuttontextcolor);
							text-align: var(--submitbuttontextalign);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover { border-color: var(--submitbuttonborderhovercolor); }
						}
					}  /* #neweventform */
				}  /* #neweventformd */
				#schedadjustformd {
					width: 98%;
					height: auto;
					margin: 8px 1% 0px 1%;
					padding: 8px 8px 8px 8px;
					background-color: ivory;
					color: navy;
					border: 2px solid navy;
					border-radius: var(--defaultborderradius);
					#schedadjustform {
						width: 90%;
						height: auto;
						#schedadjusttitled {
							width: 99%;
							margin: 8px .5% 8px .5%;
							#schedadjusttitle {
								display: inline-block;
								width: 35%;
								height: auto;
								margin: 8px .5% 8px .5%;
								font-size: 1.2vw;
								color: orangered;
							}
							input[type=button] {
								display: inline-block;
								width: 20%;
								margin-left: 12px;
								background-color: lightblue;
								cursor: var(--allbuttoncursor);
								font-size: 1.2vw;
								font-weight: 600;
								border: 2px solid lightblue;
								border-radius: var(--defaultborderradius);
								&:hover {
									border: 2px solid red;
								}
							}
						} /* schedadjusttitled */
						#schedadjustbodyd {
							display: none;
							width: 99%;
							margin: 8px .5% 8px .5%;
							label {
								display: inline-block;
								width: 20%;
								height: auto;
								margin: 4px 0px 8px 0px;
								font-size: 1vw;
								color: navy;
							}
							input[type=date] {
								display: inline-block;
								width: 25%;
								height: auto;
								margin: 4px 0px 8px 0px;
								font-size: 1vw;
							}
							input[type=submit] {
								display: block;
								width: 20%;
								height: auto;
								margin: 12px 40% 12px 40%;
								font-size: 1.5vw;
								cursor: var(--allbuttoncursor);
								background-color: var(--submitbuttoncolor);
								color: var(--submitbuttontextcolor);
								text-align: var(--submitbuttontextalign);
								border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
								border-radius: var(--defaultborderradius);
								&:hover { border-color: var(--submitbuttonborderhovercolor); }
							}
						}  /* schedadjustbodyd */
					}  /* schedadjustform */
				}  /* schedadjustformd */
				#schedtargetdated {
					width: 98%;
					height: auto;
					margin: 8px 1% 0px 1%;
					padding: 8px;
					background-color: ivory;
					color: navy;
					border: 2px solid navy;
					border-radius: var(--defaultborderradius);
					label {
						display: inline-block;
						width: 15%;
						height: auto;
						font-size: 1vw;
						color: red;
					}
					div {
						width: 98%;
						height: auto;
						margin: 8px 1% 0px 1%;
						padding: 8px;
						font-size: 1vw;
					}
					#schedtargetdatepickd {
						#schedtargetdate {  /* input[type=date] */
							display: inline-block;
							width: 20%;
							height: auto;
							font-size: 1vw;
						}
						#schedtargetdateall {
							display: inline-block;
							width: 15%;
							height: auto;
							margin: 4px 0px 8px 12px;
							cursor: pointer;
							background-color: navy;
							text-align: center;
							font-size: 1vw;
							color: ivory;
							border: 1px solid grey;
							border-radius: var(--defaultborderradius);
						}
					}
					#schedformtypeselectd /* #schedeventtype select */ {
						select {
							display: inline-block;
							width: 45%;
							height: auto;
							cursor: pointer;
							color: navy;
							font-size: 1vw;
							border: 1px solid navy;
						}
						option {
							
						}
					}
				}  /* schedadjusttargetdated */
				#bymeetschedbody {
					/* Also .schedule_container defined elsewhere */
					.schedmodtimed {
						/* see schedule_container */
					}
					.meeterrord {
						width: 98%;
						height: auto;
						margin: 2px 0px 0px 12px;
						font-size: 18pt;
						color: red;
						border: none;
					}
					.meetd {
						#notinrostertitled {
							width: 95%;
							height: auto;
							margin: 2px 0px 0px 12px;
							color: red;
							font-weight: 600;
							border: none;
						}
						#notinrosterd {
							width: 95%;
							height: auto;
							margin: 2px 0px 0px 12px;
							color: red;
							font-weight: 500;
							border: none;
						}
						.meettitled {
							width: 95%;
							height: auto;
							margin: 8px 0px 8px 0px;
							color: orangered;
							font-size: 1.2vw;
							font-weight: bold;
						}
						.meetinfod {
							width: 35%;
							margin-right: 2px;
							float: left;
							font-weight: bold;
							/* font-size: 10pt; */
							font-size: 1.1vw;
							overflow: hidden;
							/* border: 1px solid red; */
						}
						.googled {
							width: 45%;
							margin: 0px 0px 0px 18px;
							font-size: 1vw;
							float: left;
							/* border: 1px solid green; */
							a:link, a:visited {
								color: blue;
							}
						}
						.teamd {
							width: 80%;
							margin: 8px 0px 0px 0px;
							font-size: 1vw;
							color: navy;
						}
						.officialmasterd {
							display: grid;
							grid-template-columns: repeat(auto-fill, minmax(20%,1fr));
							grid-auto-rows: min-content;
							grid-gap: 2px 10px;
							margin: 8px 1% 8px 1%;
							padding: 4px;
							font-size: .8vw;
							color: red;
							border: 1px solid red;
							border-radius: var(--defaultborderradius);
							& > div {
								font-size: .8vw;
								font-weight: 400;
							}
							.officialstd {
								font-style: italic;
								font-weight: 600;
							}
							.officiald {
							}
							.officialopen {
								font-weight: 600;
								color: blue;
							}
							.officialunknown {
								font-weight: 600;
								font-style: italic;
								color: MediumVioletRed;
							}
							.officialnotregd {
								font-style: italic;
							}
							.officialconflict {
								text-decoration: underline;
								background-color: yellow;
								font-weight: 600;
								color: Fuchsia;
							}
							.officialcountd {
								/* display: inline-block; */
								width: 5%;
								font-size: .8vw;
								font-style: italic;
								font-weight: 400;
								color: green;
							}
							.officialnocountd {
								font-size: .8vw;
							}
						}
						.eventeditsubmitd {
							display: inline-block;
							width: 15%;
							height: auto;
							margin: 4px 0px 4px 8px;
							/* float: left; */
							input[type=submit] {
								display: inline-block;
								width: 80%;
								height: auto;
								margin: 8px 0px 8px 12px;
								cursor: pointer;
								background-color: navy;
								font-size: 1vw;
								color: white;
								border: 2px solid white;
								border-radius: var(--defaultborderradius);
							}
							.eventeditform {
								input[type=submit] {
									background-color: navy;
									color: white;
									border-color: navy;
									border-radius: var(--defaultborderradius);
								}
							}
							.eventcloneform {
								input[type=submit] {
									background-color: red;
									color: white;
									border-color: red;
									border-radius: var(--defaultborderradius);
								}
							}
							.deleteeventb {
								display: inline-block;
								width: 80%;
								height: auto;
								margin: 8px 0px 8px 72px;
								cursor: pointer;
								background-color: orangered;
								font-size: 1vw;
								color: white;
								border: 2px solid orangered;
								border-radius: var(--defaultborderradius);
							}
						}
						.messageidd {
							
						}
						.arbiterupdater {  /* this is a form */
							display: block;
							height: auto;
							margin: 8px 2%;
							label {
								margin-right: 4px;
							}
							input[type=number] {
								width: 10%;
								height: auto;
								margin-right: 8px;
							}
							input[type=submit] {
								width: 10%;
								font-size: 1em;
								cursor: var(--allbuttoncursor);
								background-color: var(--submitbuttoncolor);
								color: var(--submitbuttontextcolor);
								text-align: var(--submitbuttontextalign);
								border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
								border-radius: var(--defaultborderradius);
								&:hover { border-color: var(--submitbuttonborderhovercolor); }
							}
						}
						.warningdiv {
							position: absolute;
							top: 50%;
							left: 25%;
							z-index: 100;
							width: 50%;
							height: 50%;
							padding: 12px;
							background-color: lightYellow;
							font-size: 1.5em;
							font-weight: 600;
							color: navy;
							border: 8px solid red;
							border-radius: var(--defaultborderradius);
							.buttond {  /* DON'T DELETE - this is put in by javascript and won't show in any .php file */
								width: 98%;
								height: auto;
								margin: 24px 1% 0px 1%;
								.confirmform {
									display: inline-block;
									width: 20%;
									height: auto;
									margin: 12px 5% 12px 20%;
									.confirmbuttonc {
										display: inline-block;
										width: 100%;
										height: auto;
										text-align: center;
										font-size: 1vw;
										font-weight: 600;
										cursor: var(--allbuttoncursor);
										background-color: var(--submitbuttoncolor);
										color: var(--submitbuttontextcolor);
										text-align: var(--submitbuttontextalign);
										border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
										border-radius: var(--defaultborderradius);
										&:hover { border-color: var(--submitbuttonborderhovercolor); }
									}
								}  /* confirmform */
								.cancelbuttonc {
									display: inline-block;
									width: 20%;
									height: auto;
									margin: 12px 5% 12px 0px;
									cursor: pointer;
									background-color: red;
									text-align: center;
									font-size: 1vw;
									font-weight: 600;
									color: navy;
									border: 2px solid red;
									border-radius: var(--defaultborderradius);
								}
							}
						}  /* warningdiv */
						.schedbymeetsmsd {
							width: 95%;
							height: auto;
							margin: 4px 0px 2px 12px;
							a:link, a:visited {
								color: blue;
								font-size: 1vw;
								font-style: italic;
								text-decoration: none;
							}
						}
					}  /* .meetd */
				}  /*  bymeetschedbody */
			}  /* bymeetschedulecontainer */
			
			/* **********************************************************
			 **  Schedule By School
			 ** ******************************************************** */
			#schoolschedcontainer {
				#schedsearchinputd {
					/* See containerd */
				}
				#byschoolschedbody {
					.schedmodtimed {}
					.meetd {
						.olschoold {
							width: 98%;
							height: auto;
							margin: 8px 1% 8px 1%;
							font-size: 1.2vw;
							font-weight: 600;
							color: navy
						}
						.olschoolmeetd {
							width: 98%;
							height: auto;
							margin: 8px 1% 8px 1%;
							font-size: .8vw;
							font-weight: 600;
							color: navy;
							.olschooldateinfod {
								display: inline-block;
								width: 30%;
								font-size: .8vw;
							}
							.olschooltyped {
								display: inline-block;
								width: 10%;
								font-size: .8vw;
							}
							.olschoolteamd {
								display: inline-block;
								width: 30%;
								font-size: .8vw;
							}
							.olschoolgoogled {
								display: inline-block;
								width: 20%;
								font-size: .8vw;
								a:link, a:visited {
									color: blue;
								}
							}
							.olschoolofficialmasterd {
								display: grid;
								grid-template-columns: repeat(auto-fill, minmax(20%,1fr));
								grid-auto-rows: min-content;
								grid-gap: 2px 10px;
								/* width: 98%;
								 height: auto; */
								margin: 12px 1% 12px 1%;
								padding: 8px;
								font-size: .8vw;
								border: 2px solid navy;
								border-radius: var(--defaultborderradius);
								.officiald {
									margin: 4px 2px 0px 0px;
									font-weight: 400;
									color: green;
								}
							}
						}  /* olschoolmeetd */
					}  /* .meetd */
				}  /* byschoolschedbody */
			}  /* schoolschedcontainer */
			
			/* ****************************************************************
			 ** Scheduler Report
			 ** ************************************************************** */
			#schedreportcontainer {
				background-color: ivory;
				#schedreportd {
					#schedreporttitle {
						width: 99%;
						height: auto;
						margin: 12px .5% 12px .5%;
						font-size: 1.5vw;
					}
					.schedstatuscounterd {
						width: 98%;
						height: auto;
						margin: 2px 1% 2px 1%;
						font-size: 1vw;
					}
				}
			}  /* schedreportcontainer */
			
			/* **********************************************************
			 ** The Clone container - only on big screens
			 ** ********************************************************** */
			#scheduleeditclonecontainer {   /* extends containerd */
				width: 98%;
				height: auto;
				margin: 12px 1%;
				background-color: lightblue;
				#scheduleform {
					.notesd {
						width: 80%;
						height: auto;
						margin: 8px 20%;
						font-size: 1em;
						font-style: italic;
						color: red;
					}
					label {
						display: inline-block;
						width: 5%;
						text-align: left;
					}
					#eventinfofs {
						& > div {
							width: 98%;
							height: auto;
							margin: 8px 1%;
						}
					}
					input[type=submit] {
						display: block;
						width: 10%;
						height: auto;
						margin-left: 40%;
						font-size: 1.5em;
						cursor: var(--allbuttoncursor);
						background-color: var(--submitbuttoncolor);
						color: var(--submitbuttontextcolor);
						border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
						border-radius: var(--defaultborderradius);
						&:hover { border-color: var(--submitbuttonborderhovercolor); }
					}
				}
			}
			
			/* **********************************************************
			 **  The schedule editor
			 ** ********************************************************* */
			#scheduleeditcontainer {  /* extends containerd */
				width: 98%;
				height: auto;
				margin: 12px 1% 12px 1%;
				background-color: ivory;
				color: navy;
				#scheduleeditformd {
					width: 98%;
					height: 1000px;
					margin: 12px 1% 12px 1%;
					background-color: ivory;
					color: navy;
					#scheduleform {
						.notesd {
							font-weight: 600;
						}
						fieldset {
							width: 98%;
							height: auto;
							margin: 8px 1% 0px 1%;
							color: green;
							border: 1px solid green;
							border-radius: var(--defaultborderradius);
							legend {
								color: navy;
							}
						}
						legend {
							font-size: .9vw;
						}
						label {
							display: block;
							width: 94%;
							height: auto;
							margin: 8px 0px 0px 0px;
							font-size: .9vw;
							color: green;
						}
						#eventpubstatustitled {
							width: 95%;
							height: auto;
							margin: 12px 0px 0px 2px;
							color: green;
						}
						.eventpubprivtitled {
							width: 95%;
							height: auto;
							margin: 12px 0px 0px 2px;
							color: green;
						}
						.teamselectd {
							width: 48%;
							height: auto;
							float: left;
							margin: 8px 0px 0px 8px;
							font-size: .9vw;
							border: 1px solid navy;
						}
						#availlistformd {
							width: 10%;
							height: auto;
							float: left;
							margin: 8px 0px 0px 8px;
							font-size: 10pt;
							color: green;
							border: 1px solid navy;
						}
						.sectionlabeld {
							width: 95%;
							height: auto;
							margin: 2px 0px 4px 4px;
							color: red;
							font-weight: bold;
						}
						input[type=number] {
							width: 6ch;
							text-align: right;
						}
						input[type=text] {
							width: 60ch;
						}
						input[type=submit] {
							display: block;
							width: 10%;
							height: auto;
							margin: 8px 16px 8px 0px;
							font-size: 1em;
							cursor: var(--allbuttoncursor);
							background-color: var(--submitbuttoncolor);
							color: var(--submitbuttontextcolor);
							border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
							border-radius: var(--defaultborderradius);
							&:hover { border-color: var(--submitbuttonborderhovercolor); }
						}
						#teamslabel {
							width: 10%;
							height: auto;
							margin: 8px 0px 2px 0px;
						}
						#eventinfofs {
							#titlediv {
								
							}
							#datediv {
								
							}
							#timediv {
								
							}
							#schedformdurationd {
								
							}
							#schedformtypeselectd {
								select {
									width: 20%;
									height: auto;
									background-color: transparent;
									font-size: 1em;
									selectedcontent {
										color: red;
									}
									/* ::picker(select) {
									 appearance: base-select;
									 } */
								}
							}
							#arbiterid {
								width: 10%;
								height: auto;
								background-color: transparent;
							}
						}
						#eventfs {
							label {
								display: inline;
								width: 10%;
								height: auto;
								margin: 0px 0px 0px 0px;
								color: green;
							}
							input[type=radio] {
								width: 5%;
								height: auto;
								margin: 8px 0px 0px 8px;
								color: green;
								border: 1px solid red;
							}
							#eventpubstatuschkboxd {
								width: 95%;
								height: auto;
								margin: 8px 0px 4px 4px;
							}
							.eventpubprivchkboxd {
								width: 95%;
								height: auto;
								margin: 8px 0px 4px 4px;
							}
							input[type=checkbox] {
								display: inline;
								width: 5%;
								height: auto;
								color: green;
							}
						}
						#siteinfofs {
							#schedformsiteselectd {  /* uses the form defaults defined above */
								label {}
								select {
									option {
										
									}
								}
								#schedformteamselectd {  /* uses the form defaults defined above */
									select {
										option {
											
										}
									}
								}
							}
						}
						#notesfs {
							textarea {
								
							}
						}
						#officials2fs {
							width: 98%;
							height: auto;
							margin: 8px 1% 8px 1%;
							background-color:transparent;
							#eventnumrequiredd {
								width: 85%;
								height: auto;
								margin: 4px 0px 12px 8px;
								label {
									width: 40%;
									height: auto;
									float: left;
								}
								input[type=number] {
									width: 10%;
									height: auto;
									float: left;
									margin-top: 6px;
									border: 2px solid lightblue;
								}
							}
							#samedatebuttond input[type=submit] {
								background-color: lightblue;
								color: navy;
							}
							#assignedofficials {
								width: 98%;
								height: auto;
								margin: 8px 1% 4px 1%;
								padding: 2px 0px 8px 8px;
								background-color: white;
								border: 1px solid navy;
								border-radius: var(--defaultborderradius);
								#assignedtitle {  /* see .sectionlabeld */ }
								.assignedcontainer {
									width: 30%;
									height: 60px;
									margin: 4px 8px 0px 0px;
									float: left;
									overflow-x: hidden;
									border: 1px solid green;
									#selected, #unselected {
										width: 85%;
										height: auto;
										margin: 2px 0px 8px 8px;
										background-color: lightblue;
									}
									.assignedrmd {
										width: 8%;
										height: auto;
										aspect-ratio: 1/1;
										margin: 0px 8px 4px 4px;
										float: left;
										cursor: pointer;
										background-color: red;
										text-align: center;
										color: white;
										font-size: 1vw;
										font-weight: 700;
										border: 1px solid red;
										border-radius: 8px;
									}
									.assignednamed {
										width: 95%;
										height: auto;
										margin: 0px 0px 0px 4px;
										font-size: 14px;
										font-weight: 600;
										color: orange;
										border: none;
									}
									.assignedopend {
										width: 95%;
										height: auto;
										margin: 0px 0px 0px 4px;
										font-size: 14px;
										font-weight: 700;
										color: blue;
										border: none;
									}
									select {
										
									}
								}
							}  /* #assignedofficials */
							#availableofficials {
								width: 98%;
								height: auto;
								margin: 8px 1% 4px 1%;
								padding: 2px 0px 8px 8px;
								background-color: white;
								border: 1px solid navy;
								border-radius: var(--defaultborderradius);
								
								#availabletitle { /* see .sectionlabeld */ }
								
								#availofficialsearchd {
									width: 85%;
									height: auto;
									margin: 8px 0px 12px 12px;
									padding: 8px 8px 8px 8px;
									background-color: transparent;
									font-size: 14px;
									color: red;
									border: 2px solid green;
									border-radius: var(--defaultborderradius);
									.notesd {
										width: 85%;
										height: auto;
										margin: 4px 0px 12px 0px;
									}
									#availsearchlabel {
										width: 20%;
										height: auto;
										float: left;
										font-size: 14px;
										color: navy;
									}
									#availsearchinput {
										width: 20%;
										height: auto;
										float: left;
										text-transform: lowercase;
										font-size: 14px;
										color: green;
										border: 1px solid green;
									}
									#availresetbutton {
										width: 15%;
										height: auto;
										float: left;
										margin-left: 24px;
										text-align: center;
										cursor: pointer;
										font-size: 14px;
										color: black;
										background-color: lightgreen;
										border: 1px solid grey;
										border-radius: var(--defaultborderradius);
									}
								}  /*  availofficialsearchd */
								.availofficiald-open {
									width: 27%;
									height: 50px;
									margin: 4px 2px 4px 8px;
									padding: 2px 0px 4px 8px;
									background-color: lightblue;
									font-size: 12px;
									color: navy;
									float: left;
									border: 2px solid navy;
									border-radius: var(--defaultborderradius);
								}
								.availofficiald {
									width: 27%;
									height: 50px;
									margin: 4px 2px 4px 8px;
									padding: 2px 0px 4px 8px;
									overflow: hidden;
									font-size: 12px;
									color: navy;
									float: left;
									border: 2px solid navy;
									border-radius: var(--defaultborderradius);
									&:hover {
										cursor: pointer;
										background-color: lightblue;
									}
									.availofficiallocprefsd {
										margin: 0px 0px 0px 0px;
										width: 98%;
										overflow: hidden;
										font-size: 9px;
										color: navy;
									}
								}
							}  /* availableofficials */
						} /* officials2fs */
					} /* scheduleeditform */
				} /* scheduleeditformd */
			} /* scheduleeditcontainer */
			
			/* ********************************************************
			 ** All things for the User Manager - Big screen devices
			 *********************************************************** */
			#usereditcontainer {
				background-color: ivory;
				color: navy;
				#userpagetitled {
					width: 95%;
					height: auto;
					margin: 4px 0px 4px 12px;
					font-size: 1.2vw;
					color: navy;
				}
				#newuserd {
					width: 99%;
					height: auto;
					margin: 4px .5% 4px .5%;
					font-size: 22px;
					color: navy;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					label {
						display: inline;
						width: 35%;
						height: auto;
						float: left;
						margin: 4px 0px 4px 4px;
						font-size: 1vw;
						color: green;
					}
					#newuserbutton {
						width: 15%;
						height: auto;
						float: left;
						margin: 4px 0px 4px 4px;
						background-color: lightgreen;
						font-size: 1vw;
						color: navy;
						border: 2px solid lightgreen;
						border-radius: var(--defaultborderradius);
						&:hover {
							border: 2px solid red;
						}
					}
				}  /* newuserd */
				/*
				 **  The search box
				 */
				#usersearchd {
					width: 99%;
					height: auto;
					margin: 8px .5% 8px .5%;
					padding: 4px 4px 4px 4px;
					background-color: ivory;
					border: 1px solid navy;
					border-radius: var(--defaultborderradius);
					label {
						display: inline;
						font-size: 1vw;
						color: green;
					}
					input[type=text] {
						display: inline;
						width: 20%;
						height: auto;
						margin: 8px 0px 8px 8px;
						text-transform: lowercase;
						font-size: 1vw;
						border: 1px solid blue;
					}
				}
				
				/*
				 **  The User Listing
				 */
				#userlistd {
					width: 99%;
					height: auto;
					margin: 12px .5% 12px .5%;
					color: navy;
					#userlistscrollabled {
						width: 98%;
						min-height: 10px;
						max-height: 500px;
						margin: 4px 0px 12px 12px;
						padding: 4px 8px 4px 8px;
						background-color: transparent;
						border: 1px solid navy;
						border-radius: var(--defaultborderradius);
						overflow-y: auto;
						overflow-x: hidden;
						.userlistsingleuserc {
							width: 99%;
							height: auto;
							margin: 12px .5% 12px .5%;
							padding: 8px 2px 2px 12px;
							background-color: transparent;
							color: navy;
							border: 2px solid navy;
							border-radius: var(--defaultborderradius);
							.dirfullname {
								width: 60%;
								height: auto;
								margin: 0px 0px 8px 0px;
								font-size: 1vw;
								font-weight: bold;
								color: navy;
								border: none;
							}
							.dirrolesd {
								width: 90%;
								height: auto;
								font-size: .8vw;
								font-weight: normal;
								color: navy;
								border: none;
							}
							.singleuserformd {
								width: 99%;
								height: auto;
								margin: 12px .5% 12px .5%;
								.singleuserform {
									display: block;
									width: 99%;
									height: auto;
									margin: 8px .5% 8px .5%;
									border: none;
									input[type=submit] {  /* .usereditformsubmit */
										width: 10%;
										color: black;
										font-size:  1vw;
										text-align: center;
										cursor: var(--allbuttoncursor);
										background-color: var(--submitbuttoncolor);
										color: var(--submitbuttontextcolor);
										border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
										border-radius: var(--defaultborderradius);
										&:hover { border-color: var(--submitbuttonborderhovercolor); }
									}
									input[type=button] {  /* usereditformremovesubmit */
										width: 10%;
										color: ivory;
										font-size:  1vw;
										text-align: center;
										background-color: red;
										border-radius: var(--defaultborderradius);
									}
								}
								.confirmbox {
									position: absolute;
									top: 100px;
									left: 400px;
									width: 40%;
									min-height: 400px;
									z-index: 1000;
									padding: 12px 12px 12px 12px;
									background-color: lightgrey;
									color: orangered;
									font-size: 18px;
									font-weight: 700;
									border: 4px solid navy;
									border-radius: var(--defaultborderradius);
									#warningdiv {
										width: 80%;
										height: auto;
										margin: 12px 0px 12px 8%;
										padding: 12px;
										background-color: ivory;
										font-size: 1vw;
										font-weight: 600;
										color: navy;
										border: 2px solid navy;
									}
									.confirmbuttonc {
										display: block;
										width: 15%;
										height: auto;
										margin: 24px 18px 8px 20%;
										float: left;
										background-color: lightgreen;
										color: navy;
										font-size: 1vw;
										font-weight: 700;
										border: 3px solid lightgreen;
										border-radius: var(--defaultborderradius);
										&:hover {
											border: 3px solid red;
										}
									}
									.cancelbuttonc {
										display: block;
										width: 15%;
										height: auto;
										margin: 24px 18px 8px 20%;
										float: left;
										background-color: red;
										color: ivory;
										font-size: 1vw;
										font-weight: 700;
										border: 1px solid red;
										border-radius: var(--defaultborderradius);
									}
								}  /* confirmbox */
							}  /* singleuserformd */
							.usersinglecontactd {
								.diremail {
									display: inline-block;
									width:20%;
									height: auto;
									margin: 0px 24px 4px 0px;
									font-style: italic;
									font-size: .8vw;
									font-weight: normal;
									color: grey;
									border: none;
									a:link, a:visited {
										color: blue;
										font-style: italic;
										font-size: 1vw;
										text-decoration: none;
									}
								}
								.dirphone {
									display: inline-block;
									width: 25%;
									height: auto;
									margin: 0px 24px 4px 0px;
									font-style: italic;
									font-size: 1vw;
									font-weight: normal;
									color: grey;
									border: none;
									a:link, a:visited {
										color: blue;
										font-style: italic;
										font-size: 1vw;
										text-decoration: none;
									}
								}
								.dirsms {
									display: inline-block;
									width: 30%;
									height: auto;
									margin: 0px 24px 4px 0px;
									font-style: italic;
									font-size: 1vw;
									font-weight: normal;
									color: grey;
									border: none;
									a:link, a:visited {
										color: blue;
										font-style: italic;
										font-size: 1vw;
										text-decoration: none;
									}
								}
							}  /* usersinglecontactd */
						}  /* .userlistsingleuserc */
					}  /* userlistscrollabled */
				}  /* userlistd */
			}  /* usereditcontainer */
			
			
			/* *************************************************************
			 **  User Edit form
			 ** ***********************************************************s*/
			#usereditformd {
				width: 99%;
				height: auto;
				margin: 12px .5% 12px .5%;
				padding: 12px 0px 4px 8px;
				color: navy;
				font-size: 10pt;
				background-color: ivory;
				#usereditform {
					color: green;
					.formtitled {
						width: 90%;
						height: auto;
						margin: 4px 0px 8px 12px;
						font-size: 1.3em;
						color: darkgreen;
					}
					fieldset {
						width: 99%;
						height: auto;
						margin: 12px .5% 12px .5%;
						color: green;
						border-radius: var(--defaultborderradius);
						legend {
							font-size: 1.25em;
							color: red;
						}
					}
					label {
						font-size: 1vw;
						color: green;
					}
					input {
						font-size: 1vw;
					}
					input[type=radio] {
						width: 20px;
						height: 20px;
						accent-color: red;
					}
					input[type=checkbox] {
						width: 20px;
						height: 20px;
						accent-color: red;
					}
					.inputd {
						width: 90%;
						height: auto;
						margin: 4px 0px 0px 12px;
					}
					input[type=text] {
						width: 20%;
						font-size: 1vw;
					}
					input[type=number] {
						width: 15%;
						text-align: right;
						font-size: 1vw;
					}
					input[type=email] {
						width: 55%;
						font-size: 1vw;
					}
					#snailmailinputd {
						width: 95%;
						height: auto;
						margin: 12px 0px 0px 12px;
						input[type=text] {
							margin: 4px 0px 0px 0px;
						}
						.inputdsm {
							width: 45%;
							height: auto;
							float: left;
							margin: 4px 12px 0px 0px;
							input[type=text]{
								width: 70%;
								height: auto;
								float: left;
							}
						}
						.inputdsmaddr {
							width: 45%;
							height: auto;
							float: left;
							margin: 4px 12px 0px 0px;
							input[type=text]{
								width: 70%;
								height: auto;
								float: left;
							}
						}
						.inputdsmstate {
							width: 10%;
							height: auto;
							float: left;
							margin: 4px 4px 0px 0px;
							input[type=text]{
								width: 80%;
								height: auto;
								margin: 4px 12px 0px 0px;
								float: left;
							}
						}
						.inputdsmpc {  /* postal code  */
							width: 15%;
							height: auto;
							float: left;
							margin: 4px 12px 0px 0px;
							input[type=text]{
								width: 80%;
								height: auto;
								margin: 4px 12px 0px 0px;
								float: left;
							}
						}
					}
					#buttond {
						width: 50%;
						margin: 12px 25% 12px 25%;
						height: auto;
						#usersubmitd {
							display: inline-block;
							width: 35%;
							margin: 12px 48px 4px 12px;
							input[type=submit] {
								width: 100%;
								height: auto;
								font-size: 1.5vw;
								cursor: var(--allbuttoncursor);
								background-color: var(--submitbuttoncolor);
								border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
								border-radius: var(--defaultborderradius);
								&:hover { border-color: var(--submitbuttonborderhovercolor); }
							}
						}
						#usercanceld {
							display: inline-block;
							width: 35%;
							margin: 12px 0px 4px 12px;
							input[type=button]{
								width: 100%;
								height: auto;
								cursor: pointer;
								background-color: red;
								color: ivory;
								font-size: 1.5vw;
								border: 1px solid red;
								border-radius: var(--defaultborderradius);
							}
						}
					}  /* buttond */
					.userinfod {
						width: 90%;
						height: auto;
						margin: 8px 0px 2px 8px;
						text-align: left;
						font-size: .8vw;
						font-style: italic;
						color: navy;
					}
				}  /* usereditform */
				#usernotfoundlabeld {
					width: 80%;
					height: auto;
					margin: 8px 0px 0px 12px;
					background-color: transparent;
					text-align: left;
					color: green;
					font-size: 1vw;
				}
				#usernotfoundd {
					width: 40px;
					height: auto;
					margin: 8px 0px 0px 12px;
					background-color: green;
					text-align: center;
					color: ivory;
					font-weight: bold;
					border: 1px solid green;
					border-radius: var(--defaultborderradius);
					a:link, a:visited {
						color: ivory;
						text-decoration: none;
					}
				}
			}	/* usereditformd */
			
			#paypalcontainer {
				#paymentd {
					width: 95%;
					height: auto;
					margin: 8px 0px 8px 8px;
					padding: 8px;
					background-color: transparent;
					font-size: 1vw;
					color: navy;
					border: 1px solid green;
					border-radius: var(--defaultborderradius);
				}
			}
			
			
			#pageinfocontainer {  /* extends .containerd */
				min-height: 550px;
				#pageinfod {
					width: 98%;
					height: 500px;
					margin: 12px 1% 12px 1%;
					padding: 8px;
					overflow-y: auto;
					overflow-x: hidden;
					background-color: ivory;
					border: 4px solid navy;
					border-radius: var(--defaultborderradius);
					[maintitle] {
						width: 100%;
						text-align: left;
						padding: 8px 0px 0px 0px;
						font-weight: bold;
						font-size: 1vw;
						color: red;
					}
					[pnote] {
						margin: 8px 0px 8px 12px;
						padding: 0px 4px 0px 8px;
						border: 1px solid navy;
						border-radius: var(--defaultborderradius);
					}
					[sectiontitle] {
						margin-top: 8px;
						font-weight: bold;
						font-size: .9vw;
						color: royalblue;
					}
					[subtitle1] {
						margin-top: 8px;
						font-weight: bold;
						font-size: .8vw;
					}
					[bodytext] {
						font-size: .8vw;
					}
					#trailer {
						display: none;
						width: 98%;
						padding: 4px 12px 4px 12px;
						margin: 12px 1% 0px 1%;
						border: 1px solid silver;
					}
				}  /* pageinfod */
			}  /* pageinfocontainer */
			
			#orgmanagercontainer {  /* extends containerd */
				background-color: ivory;
				min-height: 200px;
				#orgmanager_body {
					width: 99%;
					height: auto;  /* for now */
					margin: 8px .5% 8px .5%;
					border: 2px solid navy;
					border-radius: var(--defaultborderradius);
					.sectiontitle {
						width:  98%;
						height: auto;
						margin: 8px 1% 8px 1%;
						font-size: 1vw;
						font-weight: 600;
						color: navy;
						border: none;
					}
					#orgmanagertitle {
						width:  98%;
						height: auto;
						margin: 8px 1% 8px 1%;
						font-size: 1vw;
						font-weight: 600;
						color: navy;
						border: none;
					}
					#neworglaunch {
						width: 98%;
						height: auto;
						margin: 8px 1% 8px 1%;
						padding-bottom: 8px;
						border: 1px solid navy;
						border-radius: var(--defaultborderradius);
						label {
							display: inline-block;
							width: 30%;
							height: auto;
							margin: 4px 8px 4px 12px;
							color: navy;
							font-weight: 500;
							font-size: 1vw;
						}
						input[type=button] {
							display: inline-block;
							width: 10%;
							background-color: navy;
							cursor: pointer;
							color: ivory;
							font-weight: 500;
							font-size: 1vw;
							border: 2px solid navy;
							border-radius: var(--defaultborderradius);
							&:hover { border-color: red; }
						}
						#neworgdata {
							display: none;
							form {
								label {
									display: inline-block;
									width: 20%;
									color: navy;
									font-size: 1vw;
								}
								input {
									display: inline-block;
									font-weight: 500;
									font-size: 1vw;
								}
								#neworgacronym {
									width: 10%;
									text-transform: uppercase;
								}
								input[type=submit] {
									width: 20%;
									height: auto;
									margin: 12px 40% 12px 40%;
									font-size: 1vw;
									font-weight: 500;
									cursor: var(--allbuttoncursor);
									background-color: var(--submitbuttoncolor);
									border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
									border-radius: var(--defaultborderradius);
									&:hover { border-color: var(--submitbuttonborderhovercolor); }
								}
							} /* form */
						}  /* neworgdata */
					} /* neworglaunch */
					#existingorgdiv {
						width: 99%;
						height: auto;
						margin: 12px .5% 12px .5%;
						padding: 8px;
						border: 2px solid navy;
						border-radius: var(--defaultborderradius);
						.indorgdiv {
							width: 99%;
							height: auto;
							margin:  8px 1% 8px 1%;
							padding: 8px;
							border: 1px solid navy;
							border-radius: var(--defaultborderradius);
							form {
								label {
									display: inline-block;
									width: 20%;
									font-size: 1vw;
								}
								input[type=text] {
									display: inline-block;
									width: 60%;
									font-weight: 500;
									font-size: 1vw;
								}
								.existingorgsubmit {
									display: inline-block;
									width: 20%;
									height: auto;
									margin: 24px 10% 12px 10%;
									font-size: 1.2em;
									font-weight: 500;
									cursor: var(--allbuttoncursor);
									background-color: var(--submitbuttoncolor);
									border: var(--submitbuttonborderwidth) var(--submitbuttonborderstyle) var(--submitbuttonbordercolor);
									border-radius: var(--defaultborderradius);
									&:hover { border-color: var(--submitbuttonborderhovercolor); }
								}
								.existingorgdelete {
									display: inline-block;
									width: 20%;
									height: auto;
									margin: 24px 10% 12px 10%;
									background-color: red;
									font-size: 1vw;
									font-weight: 500;
									color: ivory;
									border: 2px solid red;
									border-radius: var(--defaultborderradius);
									&:hover { border-color: navy; }
								}
							} /* form */
						}
					}
				}  /* orgmanager_body */
			}  /* orgmanagercontainer */
			
		} /* centercol big nested  */
		/* *******************************************************************
		 ** The last message in the password change workflow - Not in #centercol!
		 ******************************************************************** */
		#mastercontainer  {  /*  This is NOT in centercol */
			width: 60%;
			height: auto;
			margin: 24px 20% 0px 20%;
			border: 1px solid silver;
			border-radius: var(--defaultborderradius);
			.titled {
				width: 100%;
				text-align: left;
				margin: 0px 0px 0px 0px;
				padding: 0px 4px 8px 8px;
				font-size: 10pt;
				font-style: italic;
				font-weight: bold;
				color: black;
				background-color: silver;
				border: 1px solid silver;
			}
			.titleimage {
				width: 28px;
				display: block;
				float: left;
				margin-top: 1px;
			}
			.titletxtd {
				padding: 4px 0px 0px 0px;
			}
			#changepasswordcontainer {
				width: 90%;
				min-height: 300px;
				margin: 12px 0px 0px 12px;
				font-size: 12pt;
				color: navy;
				#changestatusd {
					width: 95%;
					height: auto;
					padding: 2px 8px 8px 8px;
					margin: 12px 0px 0px 12px;
					font-size: 18px;
					font-weight: 600;
					color: red;
				}
				#changepassworderrord {
					width: 95%;
					height: auto;
					padding: 2px 8px 8px 8px;
					margin: 12px 0px 0px 12px;
					color: navy;
					border: none;
					#messaged {
						width: 50%;
						height: auto;
						float: left;
						border: none;
					}
					#logoutformd  {
						width: 10%;
						height: auto;
						float: left;
						background-color: transparent;
						border: none;
						#pwchangelogoutform input[type=submit] {
							display: inline;
							width: 100%;
							height: auto;
							background-color: lightgreen;
							border: 2px solid silver;
							border-radius: 10px;
							&:hover {
								border: 2px solid red;
							}
						}
					}
				}
			}  /* changepasswordcontainer */
		}  /* mastercontainer */
	}	/* main section */
}	/* End of big screen menu query */