/* Grid Layout */
.rootContentContainer {
	display: grid;
}

.mainContentContainer {
	grid-row: 2;
	grid-column: 1;
	text-align: center;
	margin-left: 0.5em;
	margin-right: 0.5em;
}

/* Menu */

nav.mainMenu {
	display: inline;
	padding: 0;
}

ul.mainMenu {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9pt;
	font-family: Arial;
	list-style-type: none;
	padding: 0;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

li.mainMenuItem {
	display: inline;
	position: relative;
	list-style-type: none;
	border: 1px solid gray;
	border-radius: 0.25em;
	padding: 0.25em;
	margin-left: 0.25em;
	margin-right: 0.25em;
	background-color: thistle;
}

a.mainMenuItem,
a.mainMenuItem:visited {
	color: black;
	text-decoration: none;
}

.mainSubMenu {
	visibility: hidden;
	position: absolute;
	box-sizing: border-box;
	list-style-type: none;
	justify-items: center;
	font-size: 9pt;
	font-family: Arial;
	margin-top: 0.25em;
	margin-left: -0.25em;
	margin-right: 0;
	margin-bottom: 0;
	border: 1px solid gray;
	border-radius: 0.25em;
	padding-left: 0;
	white-space: nowrap;
}

li.mainSubMenuItem {
	border-bottom: 1px solid gray;
	justify-items: center;
	padding: 0.25em;
	background-color: #ffffff;
	box-sizing: border-box;
	width: 100%;
	background-color: floralwhite;
}

li.mainSubMenuItem:nth-child(even) {
	background-color: ghostwhite;
}

a.mainSubMenuItem,
a.mainSubMenuItem:visited {
	color: black;
	text-decoration: none;
}

.mainSubMenuItem:first-child {
	border-top-left-radius: 0.25em;
	border-top-right-radius: 0.25em;
}

.mainSubMenuItem:last-child {
	border-bottom: none;
	border-bottom-left-radius: 0.25em;
	border-bottom-right-radius: 0.25em;
}

/* Status Line */
div.mainStatusLine {
	margin: 3px auto;
	margin-left: auto;
	margin-right: auto;
	vertical-align:middle;
	width:500pt;
	position:relative;
	text-align:center;
	font-size:8pt;
	font-family:Arial;
	background-color:#E6E6E6;
}

/* Loading indicator and error messages associated with it */

#load_ind {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 10; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

dialog.load_ind_dialog {
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
	background-color: white;
	border-radius: 1em;
	border: 2px solid black;
    z-index: 10; /* Specify a stack order in case you're using a different order for other elements */
}

div.load_ind_error_title {
	padding: 1em;
	background: red;
	border-radius: 2em;
	color: white;
	min-width: 5em;
	width: max-content;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.5em;
}

div.load_ind_dialog_title {
	padding: 1em;
	background: yellow;
	border-radius: 2em;
	min-width: 5em;
	width: max-content;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.5em;
}

div.load_ind_dialog_btn {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 0.5em;
}

button.load_ind_dialog_btn {
	white-space: nowrap;
}

/* Login dialog box */

#login_pnl {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 9; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

dialog.login_panel_dialog {
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
	background-color: white;
	border-radius: 1em;
	border: 2px solid black;
    z-index: 9; /* Specify a stack order in case you're using a different order for other elements */
}

div.login_panel_title {
	padding: 1em;
	background: yellow;
	border-radius: 2em;
	min-width: 5em;
	width: max-content;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0.5em;
}

#login_pnl_content {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}

fieldset.login_panel {
	padding: 1em;
	background: white;
	border-radius: 1em;
	border: 2px solid black;
}

legend.login_panel {
	padding: 0.5em;
	margin-left: auto;
	margin-right: auto;
	background: yellow;
	border-radius: 1em;
}

button.login_panel {
	margin: 0.25em;	
	padding: 0.25em;
	white-space: nowrap;
}

i.login_panel {
	margin-right: 0.25em;
}

div.login_panel {
	margin-bottom: 0.25em;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

input.login_panel {
	min-width: 60%;
}

/* Body Content */

/*
.mainContent {

}
*/

/* Footer */

footer.mainFooter {
	grid-row: 3;
	grid-column: 1;
}

.mainFooter {
	margin: 0.5em 0;
	font-size:9pt;
	font-family:Arial;
	text-align:center;
	justify-items: center;
}

.mainFooterCopyright {
	text-align:center;
	font-size:7.5pt;
	font-family:Times;
}

/* Exclusions for printing */

@media print {
	.headmenu {
		display:none !important;
	}

	.menu {
		display: none !important;
	}

	.mainMenu {
		display:none !important;
	}

	.mainMenuItem {
		display:none !important;
	}

	.mainSubMenu {
		display:none !important;
	}

	.mainSubMenuItem {
		display:none !important;
	}

	.noprint {
		display: none !important;
	}

	.printonly {
		display: inerhit;
	}
}

@media screen {
	.printonly {
		display: none !important;
	}
}