@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,700,800&display=swap");
/*--------------------------------------------------------------------------------------------------------------
# Global
--------------------------------------------------------------------------------------------------------------*/
/*a {
	text-decoration: none;
}*/

/*img {*/
/* Make sure images are scaled correctly. */
/*max-width: 100%;
}*/


/*body,
button,
input,
select,
optgroup,
textarea {
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	letter-spacing: .25px;
	line-height: 1.5;
}*/

/*ul, ol {
	margin: 0;
	padding: 0;
}*/

/* Push footer to the bottom
	https://stackoverflow.com/questions/4575826/how-to-push-a-footer-to-the-bottom-of-page-when-content-is-short-or-missing
*/
/*.flex-wrapper {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	justify-content: space-between;
}
*/


/*--------------------------------------------------------------------------------------------------------------
# Resets
--------------------------------------------------------------------------------------------------------------*/
.header-container, .footer-container {
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	letter-spacing: .25px;
}

	.header-container img, .footer-container img {
		height: auto;
		/* Make sure images are scaled correctly. */
		max-width: 100%;
	}

	.header-container ul, .header-container ol, .footer-container ul, .footer-container ol {
		margin: 0;
		padding: 0;
	}

	.header-container a, .footer-container a {
		font-weight: normal;
		text-decoration: none;
	}

		.header-container a:hover, .footer-container a:hover {
			text-decoration: none;
		}


/*--------------------------------------------------------------------------------------------------------------
 # Header | Bootstrap overrides
 --------------------------------------------------------------------------------------------------------------*/
.modal-open {
	/* https://getbootstrap.com/docs/4.5/components/modal/#usage | https://github.com/valor-software/ngx-bootstrap/issues/1599 | https://stackoverflow.com/questions/25070144/bootstrap-modal-removes-scroll-bar */
	padding: 0 !important;
	overflow: inherit;
}

#loginDialog {
}

	#loginDialog .modal-content {
		font-family: "Poppins", sans-serif;
		font-size: 14px;
		border-radius: 0;
	}

		#loginDialog .modal-content .modal-body {
			padding: 7px 14px;
		}

			#loginDialog .modal-content .modal-body #loginEmail {
				line-height: 2.0;
				width: 100%;
			}

			#loginDialog .modal-content .modal-body .input-error {
				color: #d0021b;
				display: none;
				font-size: .75rem;
				margin-top: .125rem;
			}

		#loginDialog .modal-content .modal-footer {
			padding: 7px 2px;
		}

			#loginDialog .modal-content .modal-footer button {
				border: 1px solid #43A447;
				border-radius: 0;
				border: 1px solid #ffffff;
				margin: 2px 4px;
			}

				#loginDialog .modal-content .modal-footer button:hover {
					border: 1px solid #ffffff;
					background: #005598;
					font-weight: normal;
					color: #ffffff;
				}

#forgotPasswordIDPDialog {
}

	#forgotPasswordIDPDialog .modal-content {
		font-family: "Poppins", sans-serif;
		border: 1px solid #43A447;
		border-radius: 0;
		background-color: #ffffff;
		padding: 2px;
	}

	#forgotPasswordIDPDialog .modal-body {
		font-size: 16px;
		background-color: #43a447;
		color: #ffffff;
	}

/* Feedback Modal Styling*/
#feedbackDialog {
}

	#feedbackDialog .modal-dialog {
		display: table;
		width: fit-content;
	}

	#feedbackDialog .feedbackDialogBody {
		display: flex;
		flex-direction: row;
		width: 100%;
	}

		#feedbackDialog .feedbackDialogBody > a {
			text-align: center;
			display: flex;
			flex-direction: column;
			cursor: pointer;
			align-items: center;
			color: black;
		}

	#feedbackDialog #bug-span {
		background-color: rgb(255, 200, 200);
		width: 17vw;
		height: 100%;
		padding: 5px;
	}

	#feedbackDialog #feature-span {
		background-color: rgb(200, 255, 200);
		width: 17vw;
		height: 100%;
		padding: 5px;
	}

	#feedbackDialog #support-span {
		background-color: rgb(255, 255, 180);
		width: 17vw;
		height: 100%;
		padding: 5px;
	}

	#feedbackDialog .feedback-icon {
		padding: 10px;
		width: 7rem;
	}

/*--------------------------------------------------------------------------------------------------------------
## Header | .header-container
--------------------------------------------------------------------------------------------------------------*/
.header-container {
	background-color: #FFFFFF;
	position: fixed;
	top: 0;
	z-index: 995;
	width: 100%;
}

	.header-container .header-logo {
		max-width: 150px;
	}

	.header-container ul {
		list-style-type: none;
	}

/*--------------------------------------------------------------------------------------------------------------
## Header | .header-container | media queries
--------------------------------------------------------------------------------------------------------------*/
/* Desktop Display */
@media only screen and (min-width:992px) {

	#loginDialog {
	}

		#loginDialog .modal-dialog {
			max-width: 450px;
		}

	.header-container {
		/* add shadow to bottom of the header */
		/* offset-x | offset-y | blur-radius | spread-radius | color */
		box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.15);
	}

		.header-container .limit-max-width {
			max-width: 1200px;
		}

		/*--------------------------------------------------------------------------------------------------------------
		### Header | .header-container | .header-top-nav
		--------------------------------------------------------------------------------------------------------------*/
		.header-container .header-top-nav {
			background-color: #005598;
			color: #88a5c8;
			font-size: 13px;
			/*display: block;*/
			text-transform: uppercase;
			/*position: initial;*/
		}

			.header-container .header-top-nav a {
				color: #88a5c8;
				padding: 0 0 5px 0;
			}

				.header-container .header-top-nav a:hover {
					background-color: #0f345f;
					color: #FFFFFF;
				}

			.header-container .header-top-nav li {
				text-align: center;
			}

				.header-container .header-top-nav li a, .header-container .header-top-nav li #userNameDisplay {
					display: inline-block;
					padding: 10px;
					position: relative;
					width: initial;
					text-decoration: none;
				}

				/* put | as divider on all except last li */
				.header-container .header-top-nav li:not(:last-child) a::after {
					color: #0f345f;
					content: '|';
					position: relative;
					right: -10px;
				}

			.header-container .header-top-nav #loginButton i, .header-container .header-top-nav #logoutButton i {
				color: #43a447;
			}


			.header-container .header-top-nav .header-top-nav-menu {
				/* center the content */
				margin: 0 auto;
			}

		/*--------------------------------------------------------------------------------------------------------------
		### Header | .header-container | .header-main-nav
		--------------------------------------------------------------------------------------------------------------*/
		.header-container .header-main-nav {
			padding: 4px 0px;
			/* center the content */
			margin: 0 auto;
		}
			/*--------------------------------------------------------------------------------------------------------------
			### Header | .header-container | .header-main-nav | Bootstrap overrides
			--------------------------------------------------------------------------------------------------------------*/
			.header-container .header-main-nav .header-main-nav-menu {
				padding: 0;
			}

				/* Change Navigation Menu */
				.header-container .header-main-nav .header-main-nav-menu .navbar-nav .nav-item, .header-container .header-main-nav .header-main-nav-menu .navbar-nav .nav-item a {
					font-family: "Poppins", sans-serif;
					font-size: 11px;
					text-transform: uppercase;
					font-weight: 600;
				}

					.header-container .header-main-nav .header-main-nav-menu .navbar-nav .nav-item > a:hover, .header-container .header-main-nav .header-main-nav-menu .nav-item span > a:hover {
						color: #43a447;
						font-weight: 600;
					}

				.header-container .header-main-nav .header-main-nav-menu .navbar-nav .header-main-nav-menu-vertical-divider::before {
					color: #43a447;
					font-weight: 600;
					content: '|';
					position: relative;
				}

				/* make inline block */
				.header-container .header-main-nav .header-main-nav-menu .navbar-nav .nav-link {
					display: inline-block;
				}

				/* Style the menu item */
				.header-container .header-main-nav .header-main-nav-menu .navbar-nav .nav-item a {
					color: #414042;
				}

				/*--------------------------------------------------------------------------------------------------------------
				## Navigation Menu | Dropdown
				--------------------------------------------------------------------------------------------------------------*/
				.header-container .header-main-nav .header-main-nav-menu .dropdown:hover .dropdown-menu {
					/* Make dropdown menu hover (disable this to enable click drop down which leaves menu up when you click and inspect which helps with styling)
						https://www.tutorialrepublic.com/faq/how-to-open-bootstrap-dropdown-menu-on-hover-rather-than-click.php
						https://www.tutorialrepublic.com/codelab.php?topic=faq&file=make-bootstrap-dropdown-menu-on-hover
					*/
					display: block;
				}

				.header-container .header-main-nav .header-main-nav-menu .dropdown-menu {
					color: #414042;
					background-color: #b7b7b7;
					font-family: "Poppins", sans-serif;
					font-size: 11px;
					text-transform: uppercase;
					font-weight: 600;
					margin-top: -10px;
				}

				.header-container .header-main-nav .header-main-nav-menu .dropdown .dropdown-toggle {
				}
					/* Hide the drop down arrow that bootstrap wants to display */
					.header-container .header-main-nav .header-main-nav-menu .dropdown .dropdown-toggle::after {
						display: none;
					}

				.header-container .header-main-nav .header-main-nav-menu .dropdown-menu .dropdown-item {
					padding: 5px 10px;
					font-weight: 600;
				}

					.header-container .header-main-nav .header-main-nav-menu .dropdown-menu .dropdown-item::before {
						color: #414042;
						content: '\f105';
						font-family: "fontAwesome", sans-serif;
						font-weight: 500;
						left: -3px;
						position: relative;
					}

					/* Override hover */
					.header-container .header-main-nav .header-main-nav-menu .dropdown-menu .dropdown-item:hover {
						color: #ffffff;
						background-color: #b7b7b7;
					}
}

/* Smaller than Desktop Display */
@media only screen and (max-width:991px) { /*@media only screen and (max-width:991px) @media only screen and (min-width:11px) {*/
	.header-container {
		/* add shadow to bottom of the header */
		/* offset-x | offset-y | blur-radius | spread-radius | color */
		box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.15);
	}
		/*--------------------------------------------------------------------------------------------------------------
		### Header | .header-container | .responsive-header-main-nav
		--------------------------------------------------------------------------------------------------------------*/
		.header-container .responsive-header-main-nav {
		}
			/*----------------------------------------------------------------------------------------------------------------------------------------
			### Header | .header-container | .responsive-header-main-nav | Bootstrap overrides
			----------------------------------------------------------------------------------------------------------------------------------------*/

			/*----------------------------------------------------------------------------------------------------------------------------------------
			### Header | .header-container | .responsive-header-main-nav | .navbar-toggler | Bootstrap overrides
			----------------------------------------------------------------------------------------------------------------------------------------*/
			.header-container .responsive-header-main-nav .navbar-toggler {
				background-color: #000000;
			}

				/* align hamburger icon for bars and X */
				.header-container .responsive-header-main-nav .navbar-toggler .navbar-toggler-icon,
				.header-container .responsive-header-main-nav .navbar-toggler .navbar-close-icon {
					color: #e6e6e6; /*white*/
					width: 1em;
					height: 1em;
					display: grid;
					align-items: center;
					background-image: none;
				}

				/* hide close when hamburger menu hidden */
				.header-container .responsive-header-main-nav .navbar-toggler.collapsed .navbar-close-icon {
					display: none;
				}

				/* hide toggler (bars icon) when hamburger menu shown */
				.header-container .responsive-header-main-nav .navbar-toggler:not(.collapsed) .navbar-toggler-icon {
					display: none;
				}
			/*----------------------------------------------------------------------------------------------------------------------------------------
			### Header | .header-container | .responsive-header-main-nav | .responsive-header-main-nav-menu | Bootstrap overrides
			----------------------------------------------------------------------------------------------------------------------------------------*/
			.header-container .responsive-header-main-nav .responsive-header-main-nav-menu {
				background: #212121;
				position: fixed;
				top: 70px;
				left: 0;
				width: 100%;
			}
				/* Change Navigation Menu */
				.header-container .responsive-header-main-nav .responsive-header-main-nav-menu .navbar-nav {
				}
					/* Change Navigation Menu */
					.header-container .responsive-header-main-nav .responsive-header-main-nav-menu .navbar-nav .nav-item {
						font-family: "Poppins", sans-serif;
						font-size: 11px;
						text-transform: uppercase;
						/*border: 1px solid red;*/
					}

						.header-container .responsive-header-main-nav .responsive-header-main-nav-menu .navbar-nav .nav-item:hover {
							background-color: #3f3f3f;
						}


					/* Style Navigation Link */
					.header-container .responsive-header-main-nav .responsive-header-main-nav-menu .navbar-nav .nav-link {
						display: inline-flex;
						align-items: center;
						padding: 0 0 0 4%;
					}

					/* Style the menu item */
					.header-container .responsive-header-main-nav .responsive-header-main-nav-menu .navbar-nav .nav-item .nav-link,
					.header-container .responsive-header-main-nav .responsive-header-main-nav-menu .navbar-nav .nav-item .dropdown-toggle * {
						color: #ffffff;
						height: 40px;
					}

					/* Style the dropdown menu item */
					.header-container .responsive-header-main-nav .responsive-header-main-nav-menu .navbar-nav .nav-item .dropdown-menu * {
						color: #ffffff;
						height: 40px;
					}

					.header-container .responsive-header-main-nav .responsive-header-main-nav-menu .navbar-nav .nav-item .dropdown-menu .dropdown-item {
						padding: 0 0 0 8%;
						display: inline-flex;
						align-items: center;
					}

						.header-container .responsive-header-main-nav .responsive-header-main-nav-menu .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover {
							background-color: #3f3f3f;
						}

				/*----------------------------------------------------------------------------------------------------------------------------------------
				### Header | .header-container | .responsive-header-main-nav | .responsive-header-main-nav-menu | .dropdown | Bootstrap overrides
				----------------------------------------------------------------------------------------------------------------------------------------*/
				.header-container .responsive-header-main-nav .responsive-header-main-nav-menu .dropdown:hover .dropdown-menu {
					/* Make dropdown menu hover (disable this to enable click drop down which leaves menu up when you click and inspect which helps with styling)
						https://www.tutorialrepublic.com/faq/how-to-open-bootstrap-dropdown-menu-on-hover-rather-than-click.php
						https://www.tutorialrepublic.com/codelab.php?topic=faq&file=make-bootstrap-dropdown-menu-on-hover
					*/
					/*display: block;*/
				}

				.header-container .responsive-header-main-nav .responsive-header-main-nav-menu .dropdown .dropdown-menu {
					color: #ffffff;
					background: #212121;
					font-size: 11px;
					text-transform: uppercase;
					padding: 0;
					margin: 0;
					border: none;
				}

				.header-container .responsive-header-main-nav .responsive-header-main-nav-menu .dropdown .dropdown-toggle {
				}
					/* Hide the drop down arrow that bootstrap wants to display */
					.header-container .responsive-header-main-nav .responsive-header-main-nav-menu .dropdown .dropdown-toggle::after {
						display: none;
					}

					/* Use our own drop down arrow */
					.header-container .responsive-header-main-nav .responsive-header-main-nav-menu .dropdown .dropdown-toggle .responsive-menu-downarrow {
						display: inline-grid;
						align-items: center;
						padding: 0 10px;
						cursor: pointer;
					}

				.header-container .responsive-header-main-nav .responsive-header-main-nav-menu .dropdown .dropdown-menu .dropdown-item {
				}

					/* Override hover */
					.header-container .responsive-header-main-nav .responsive-header-main-nav-menu .dropdown .dropdown-menu .dropdown-item:hover {
						color: #ffffff;
						background-color: #b7b7b7;
					}
}

/*--------------------------------------------------------------------------------------------------------------
## Content | .content-container
--------------------------------------------------------------------------------------------------------------*/
.content-container {
	/* Push content below the menu height - this should be a mixin variable */
	margin-top: 60px;
}

/*--------------------------------------------------------------------------------------------------------------
## Footer  | .footer-container
## To place footer at bottom of screen we tried .footer-container{position: absolute}
## but that didn't work as it bled through when you scrolled. This approach did work
## https://css-tricks.com/couple-takes-sticky-footer/#there-is-flexbox
--------------------------------------------------------------------------------------------------------------*/
.footer-container {
	font-size: 13px;
	bottom: 0;
	width: 100%;
}

	.footer-container .fontawesome-icon {
		color: #63d968;
	}

	.footer-container a {
		color: #ffffff;
	}

		.footer-container a:hover {
			color: #63d968;
		}

	.footer-container ul {
		list-style-type: none;
	}

		.footer-container ul li {
		}

	/*--------------------------------------------------------------------------------------------------------------
	## Footer  | .footer-container | .footer-content
	--------------------------------------------------------------------------------------------------------------*/
	.footer-container .footer-content-background {
		background-color: #005598;
	}

	.footer-container .footer-content {
		color: #FFFFFF;
		padding: 10px 0;
		text-transform: uppercase;
	}

		.footer-container .footer-content .footer-logo {
			max-width: 150px;
		}

		.footer-container .footer-content .fa-icon-resize {
			height: 12px;
			width: 12px;
		}

		.footer-container .footer-content .footer-content-column {
		}

			.footer-container .footer-content .footer-content-column .social-media {
			}

				.footer-container .footer-content .footer-content-column .social-media li a {
					padding: 0 5px;
				}

				.footer-container .footer-content .footer-content-column .social-media .fontawesome-icon {
					color: #43a447;
				}

	/*--------------------------------------------------------------------------------------------------------------
	## Footer  | .footer-container | .footer-copyright
	--------------------------------------------------------------------------------------------------------------*/
	.footer-container .footer-copyright {
		background-color: #0f345f;
		color: #5c88bc;
	}

/*--------------------------------------------------------------------------------------------------------------
## Footer | .footer-container | media queries (mobile display)
--------------------------------------------------------------------------------------------------------------*/
/* Medium Devices and larger */
@media only screen and (min-width:576px) {
	.footer-container {
	}

		.footer-container .limit-max-width {
			max-width: 1200px;
		}

		.footer-container .footer-content {
			/* center the content */
			margin: 0 auto;
		}
}

/* Small Devices and larger */
@media only screen and (max-width: 575px) {
	.footer-container .footer-content {
		/*padding: 10px 0;*/
	}

		.footer-container .footer-content .footer-content-column {
			margin: 0 0 20px 0;
		}
}