
		<style>
			#loginForm, vp-iforgotpage #aVForm {
				width: auto;
				max-width: none;
			}

			#loginForm .container-fluid, vp-iforgotpage #aVForm .container-fluid {
				background-color: #020676;
				color: #FFFFFF;
				max-width: 400px;
				min-width: 400px;
				margin-bottom: 10px;
				padding-top: 12px;
				border-radius: 10px;
			}

				vp-iforgotpage #aVForm .container-fluid {
					padding-bottom: 20px;
				}

			#loginForm .row, vp-iforgotpage #aVForm .row {
				display: flex;
				flex-direction: column; /* Stack labels and inputs vertically */
			}

			/* Labels above inputs */
			#loginForm .vFormRow, vp-iforgotpage #aVForm .vFormRow {
				display: block;
				flex-direction: column;
				align-items: flex-start;
				margin-bottom: 15px;
			}

			#loginForm .vFormLabel, vp-iforgotpage #aVForm .vFormLabel {
				width: 100%;
				text-align: left;
				margin-bottom: 10px;
			}

			#loginForm .vFormElement, vp-iforgotpage #aVForm .vFormElement {
				width: auto;
				margin-bottom: 10px;
			}

			/* Specific styling for the last label and checkbox */
			.rememberUserIDLabel,
			.forceLogoutChkLabel {
				margin-left: 5%;
			}

			.rememberUserIDElement,
			.forceLogoutChkElement {
				display: flex;
				position: relative;
				top: -34px;
				height: 0;
						margin-bottom: 0;
			}

			#rememberUserID input[type="checkbox"]:hover,
			#forceLogoutChk input[type="checkbox"]:hover {
				cursor: pointer;
			}

			#passwordInput {
				width: 100%;
			}

			.checkbox-wrapper {
				display: flex;
				align-items: left;
				margin-bottom: 10px;
			}

			.form-element {
				margin-bottom: 10px;
			}

			.forgotten-password {
				font-family: ;
				font-size: 14px;
				color: black;
				text-align: left;
			}

			.forgotten-password a {
				font-family: ;
				font-size: 14px;
				color: #020676;
				text-decoration: none;
			}

				.forgotten-password a:hover {
						color: #FF495D;
					text-decoration: underline;
				}

			#login-button {
				;
				;
				font-family: ;
				border-radius: 5px;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10px;
				box-sizing: border-box;
				width: 100%;
				height: 38px;
			}

				#login-button:hover {
					background-color: #FF495D !important;
					cursor: pointer;
				}

				#login-button span {
					display: flex;
					flex-grow: 1;
					align-items: center;
					justify-content: center;
				}

				#login-button .login-button-arrow img {
					margin: 0;
					width: auto;
				}

			.microsoft-login-button {
				font-family: ;
				display: flex;
				margin-top: 10px;
				align-items: center;
				justify-content: center;
				padding: 8px 16px;
				border: none;
				background-color: #f3f3f3;
				cursor: pointer;
				font-size: 12px;
				transition: background-color 0.3s ease;
				border-radius: 8px;
				width: 100%;
			}

				.microsoft-login-button:hover {
					background-color: #e1e1e1;
				}

			.microsoft-logo {
				width: 20px;
				height: 20px;
				margin-right: 8px;
			}

			.vFormLabel {
				font-family: ;
				font-size: 15px;
				line-height: 1.5;
			}

			.login-error-message {
				font-family: ;
				font-size: 14px;
				font-weight: 600;
				color: red;
			}
		</style>


<style>
	/* Site style */
	html {
		font-size: 14px;
	}

	@media (min-width: 768px) {
		html {
			font-size: 16px;
		}
	}

	.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
		box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
	}

	html {
		position: relative;
		min-height: 100%;
	}

	body {
		margin-bottom: 60px;
		overflow-x: hidden;
	}

	.spacer {
		margin-top: 10px;
	}

	.main-template {
		min-height: 100%;
		display: flex;
		flex-direction: column;
		min-width: 440px;
	}

	.main-template:has(vp-termsandconditionspage) {
		min-width: 520px;
	}

	#page-content {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: row;
		margin-top: 0px;
		padding: 1%;
		padding: 0 60px;
		min-height: auto;
		auto;
	}

	.pageBreak {
		background-color: #020676;
		display: flex;
		top: 90px;
		left: 0;
		width: 100%;
		height: 20px;
		margin: 0;
		z-index: 1000;
		box-sizing: border-box;
		padding: 0 10px;
	}

	#page-break {
		margin: 0 auto;
		border: none;
		padding: 0 20px;
	}

		#page-break hr {
			border: 0;
			height: 0;
			border-top: 1px solid rgba(0, 0, 0, 0.1);
			border-bottom: 1px solid rgba(255, 255, 255, 0.3);
		}

	#logoImage {
		height: 120px;
		width: auto;
	}

		#logoImage:hover {
			cursor: pointer;
		}

	#titleContent {
		display: flex;
	}

	.theTitle {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32px;
		left: 0%;
		color: #000000;
		font-family: ;
		top: 90px;
		margin: 0 auto 0 auto;
		width: 40%;
	}

	#title-panel {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 10px;
	}

	.cookieContainer,
	.cookieSizeContainer {
		display: flex;
		justify-content: center;
		background-color: #f3f3f3;
		padding: 10px;
	}

	.cookieWarningPrompt,
	.cookieSizeWarningPrompt {
		margin-top: auto;
		margin-bottom: auto;
		margin-right: 10px;
	}

	.cookieContainer .nav-button {
		margin-top: auto;
		margin-bottom: auto;
	}

	#firstHr {
		border: 0;
		border-top: 1px solid #fff;
		width: min( 1200px, 90%);
		height: 1px;
		margin: -10px 0 70px 50px;
	}

	#secondHr {
		border: 0;
		border-top: 1px solid #ccc;
		width: min(1200px, 90%);
		height: 1px;
		margin: 15px auto;
	}

	#titleIcon {
		display: flex;
		color: #020676;
		width: 30px;
		height: auto;
		vertical-align: middle;
		align-self: center;
		margin-right: 10px;
	}

	#mid-section {
		flex: 1;
		margin: 0 auto;
		margin-top: 10px;
	}

	.footer {
		width: 100%;
		height: 40px;
		background-color: #020676;
		display: flex;
		align-items: center;
		justify-content: center;
		bottom: 0;
		left: 0;
		z-index: 1000;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	vw-section#footer {
		text-align: right;
	}

	.footer-text {
		color: white;
		font-family: ;
		margin-left: auto;
		padding-right: 20px;
		font-size: 11px;
		line-height: 20px;
	}

	input {
		width: 100%;
		padding: 5px;
		margin: 8px 0;
		box-sizing: border-box;
		border: 2px solid #ffffff;
		border-radius: 4px;
		font-size: 14px;
		text-rendering: auto;
		letter-spacing: normal;
		word-spacing: normal;
		line-height: normal;
		text-transform: none;
		text-indent: 0px;
		text-shadow: none;
		display: inline-block;
		text-align: start;
		appearance: auto;
		-webkit-rtl-ordering: logical;
		cursor: text;
	}


	/* SPINNER */
	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */
		z-index: 9999; /* Ensure the overlay is on top of other content */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.overlayContent {
		text-align: center;
	}

	vw-spinner img {
		width: 50px !important; /* possibly or attribute parameter driven */
		height: 50px !important;
	}

	/* DIALOG TEXT */
	.dialog {
		display: block;
		background-color: #EEEEEE;
		color: #000000;
	}

	/* BREADCRUMBS */

	#mid-section,
	#breadcrumbs {
		position: center;
		top: -20px;
	}

	#breadcrumbs {
		position: relative;
		justify-content: center;
		align-items: center;
		top: 20px;
	}

	#breadcrumbs {
		display: none;
		font-family: ;
		color: #020676;
		font-size: 1rem;
	}

		#breadcrumbs .breadcrumb-item.active {
			font-family: ;
			color: #0007bf;
			font-size: 1rem;
		}

	.breadcrumb {
		background-color: transparent;
		width: 84%;
		margin-left: auto;
		margin-right: auto;
	}

	.breadcrumb-item {
		font-size: 1rem;
		padding-right: 5px;
		margin-right: 5px;
		cursor: pointer;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 30px;
	}

	.title-item:nth-child(1) {
		overflow: visible;
		width: 30%;
		max-width: 30%;
	}

	.title-item:only-child {
		overflow: visible;
		width: 90% !important;
		max-width: 90% !important;
	}

	.title-item:nth-child(1):nth-last-child(2) {
		overflow: visible;
		width: 90% !important;
		max-width: 90% !important;
	}

	.title-item:nth-child(2):last-child {
		margin: 0 auto;
	}

	.title-itemr:nth-child(2):nth-last-child(3) {
		margin: 0 auto !important;
	}

	.title-item:nth-child(3) {
		width: 30%;
		max-width: 30%;
	}

	span.breadcrumb-item + span.breadcrumb-item::before {
		content: "/";
		font-size: 23px;
		line-height: 30px;
		vertical-align: top;
		font-family: serif;
		color: #020676;
		padding-right: 5px;
	}

	.breadcrumb-item, .breadcrumb-item::before {
		color: #020676;
	}

	span.breadcrumb-item.active {
		color: #0007bf;
	}

	span.breadcrumb-item:hover {
		color: #020676;
	}

	.breadcrumb-container {
		padding-left: 10px;
		margin-right: auto;
		.breadcrumb-item display: flex;
		width: 100%;
		max-width: 100%;
	}

	/* TABS */
	.tabsDiv {
		display: flex;
		width: min(1200px, 90%);
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 15px;
	}

	.tab {
		padding: 10px 10px;
		cursor: pointer;
		color: #020676;
		border-bottom: 1px solid #020676;;
	}

		.tab.active, .tab:hover {
			border-bottom: 3px solid #020676;;
		}

	/* GRID JS */
	.gridjs-container {
		border-radius: 5px;
		;
	}

	.gridjs .gridjs-wrapper {
		border-radius: 5px 5px 0 0;
	}

	.gridjs-table {
		border-radius: 5px;
		overflow: hidden;
		border-collapse: separate;
		border-spacing: 0;
	}

	th.gridjs-th, .gridjs-td {
		text-align: left;
		text-wrap: wrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	th.gridjs-th {
		background-color: #f7f7f7;
		line-height: 25px;
		padding: 6px !important;
	}

	th.gridjs-th.gridjs-th-sort {
		background-color: #020676;
		color: #ffffff;
		padding: 6px !important;
	}

	th.gridjs-th.gridjs-th-sort:focus,
	th.gridjs-th.gridjs-th-sort:hover {
		background-color: #020676;
	}

	th.gridjs-th-sort .gridjs-th-content {
		color: #020676;
	}

	td.gridjs-td {
		border-bottom: 1px solid #ddd;
		padding: 6px !important;
	}

	tr.gridjs-tr {
		border-bottom: 1px solid #ddd;
		line-height: 18px;
	}

	tr.gridjs-tr:nth-child(odd) td {
		background-color: #D9D9D9;
	}

	tr.gridjs-tr:nth-child(even) td {
		background-color: #FFFFFF;
	}

	.gridjs .gridjs-pages button:first-child {
		border-radius: 5px 0 0 5px;
		border: 1px solid #d2d6dc;
	}

	.gridjs .gridjs-pages button:last-child {
		border-radius: 0 5px 5px 0;
		border: 1px solid #d2d6dc;
	}

	.gridjs .gridjs-footer {
		border-radius: 5px;
	}

	.pagination-options {
		float: left;
		margin-left: 10px;
		margin-right: 10px;
		padding: 5px;
		border-radius: 5px;
		border: 1px solid #ccc;
	}

	.gridjs-resizable {
		width: 4px !important;
		background-color: #020676;
	}

	button.gridjs-sort-neutral,
	button.gridjs-sort-asc,
	button.gridjs-sort-desc {
		filter: invert(1);
	}

	th.gridjs-th[data-column-id="active"] {
		min-width: 80px !important;
		max-width: 80px !important;
		width: 80px !important;
	}

	th.gridjs-th[data-column-id="fullName"],
	td.gridjs-td[data-column-id="fullName"],
	th.gridjs-th[data-column-id="email"],
	td.gridjs-td[data-column-id="email"] {
		word-wrap: break-word;
	}

	.rowClickGrid tr:hover td {
		/* TA hover bg colour??? */
		background-color: #020676 !important;
		color: #FFFFFF !important;
		cursor: pointer;
	}

	.rowClickGrid tr td {
		/* current background colour */
		/* background-color: rgba(0,0,0,0) !important; */
	}

	/* MAIN MENU */
	.loginTextContainer {
		font-family: calibri;
		font-size: 12px;
		width: inherit;
	}

	h1 {
		text-transform: uppercase;
		text-align: center;
		font-size: 32px;
		color: #020676 !important;
	}

	.loginTextContainer p {
		color: #020676 !important;
	}

	.small,
	small {
		font-size: 12px !important;
	}

	h1 i.fa-user {
		margin-right: 10px;
	}

	.fullscreen-menu {
		display: none; /* Hidden by default */
	}

	.navBar {
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid white;
		top: 90px;
		left: 0;
		width: 100%;
		height: auto;
		margin: 0;
		z-index: 1000;
		box-sizing: border-box;
		padding: 0px;
	}

	.theLogo {
		display: flex;
		align-items: center;
		margin-right: auto;
		;
	}

	.theLogo a {
		text-decoration: none;
		color: #020676;
		font-size: 30px;
	}

	.nav-button {
		color: #020676;
		border-right: 1px solid white;
		background-color: rgb(242, 243, 243);
		font-size: 14px;
		margin: 3px;
		cursor: pointer;
		padding: 4px 20px;
		font-family: calibri;
		float: left;
		border-radius: 25px;
	}

	.nav-button#logOut-button {
		;
	}

	.nav-button.active {
		background-color: #020676;
		color: white;
	}

	.nav-button:hover {
		background-color: #020676;
		color: white;
	}

	.button-container {
		display: flex;
		margin-left: auto;
	}

	.nav-button i {
		margin-left: 8px;
	}

	.menuTile {
		color: #FFFFFF;
	}

	.color-1 {
		background-color: #020676;
	}

	.color-1:hover {
		background-color: #020676;
	}

	.color-2 {
		background-color: #020676;
	}

	.color-2:hover {
		background-color: #020676;
	}

	.color-3 {
		background-color: #020676;
	}

	.color-3:hover {
		background-color: #020676;
	}

	.color-4 {
		background-color: #020676;
	}

	.color-4:hover {
		background-color: #020676;
	}

	.color-5 {
		background-color: #020676;
	}

	.color-5:hover {
		background-color: #020676;
	}

	.color-6 {
		background-color: #020676;
	}

	.color-6:hover {
		background-color: #020676;
	}

	.mainMenuTable {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		row-gap: 5px;
		column-gap: 20px;
		margin: 0 auto;
		padding: 20px;
		width: 100%;
		margin-bottom: 35px;
	}

	.fa.menu-icon {
		font-size: 70px;
		margin-bottom: 10px;
		height: 70px;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: transform 0.3s ease;
	}

	.mainMenuTable a {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		color: white;
		text-decoration: none;
		text-align: center;
		border-radius: 30px;
		font-size: 16px;
		font-family: ;
		width: 290px;
		height: 270px;
		padding: 15px;
		margin: 10px 0 0 0;
		position: relative;
		transition: transform 0.3s ease;
	}

	.mainMenuTable a .title {
		margin-bottom: 10px;
		font-weight: bold;
		font-size: 20px;
		transition: transform 0.3s ease;
	}

	.mainMenuTable a .description {
		opacity: 0;
		font-size: 18px;
		margin-top: 0px;
		transition:
			opacity 0.3s ease,
			transform 0.3s ease;
		transform: translateY(-5px);
	}

	.mainMenuTable a:not(:hover) .menu-icon {
		transform: translateY(30px);
	}

	.mainMenuTable a:not(:hover) .title {
		transform: translateY(30px);
	}

	.mainMenuTable a:hover .title {
		transform: translateY(-10px);
	}

	.mainMenuTable a:hover .menu-icon {
		transform: translateY(-10px);
	}

	.mainMenuTable a:hover .description {
		opacity: 1;
		transform: translateY(-5px);
	}

	.mainMenuTable p {
		font-size: 13px;
		color: white;
		font-family: ;
		margin: 0;
		padding-top: 10px;
	}

	.mainMenuTable i {
		text-align: left;
		color: white;
		margin-right: 10px;
		margin-left: 10px;
		margin-top: 30px;
	}

	.mainMenuTable a:hover {
		cursor: pointer;
	}

	/* Adjust for smaller screens */
	@media (max-width: 1200px) {
		.mainMenuTable {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	/* Adjust nav bar for smaller screens */
	@media (max-width: 768px) {

		vw-div.dialogTextContainer {
			margin-top: 10px !important;
			width: 80% !important;
		}

		.loginContainer, .iForgotContainer, .TwoFaContainer {
			margin-top: 20px !important;
			width: 80% !important;
		}

		.welcomeTextContainer, .memWrdTextContainer .dialogTextContainer, .newPasswordTextContainer, .resetPassTextContainer {
			margin-top: 10px !important;
		}

		#mid-section{
			margin-left: -20px important!;
		}

		#page-content {
			flex-direction: column;
			align-items: center;
		}

		.theTitle {
			font-size: 24px;
			left: 0%;
			margin-left: 25%;
		}

		.mainMenuTable {
			grid-template-columns: repeat(1, 1fr);
		}

		.navBar {
			height: auto;
			top: 0px;
		}

		.theLogo {
			 margin-left: auto;
			margin-right: 10px;
		}

			.GBGEnd-Page .theLogo {
				margin-left: 0;
			}

		#secondHr {
			margin: 15px;
		}

		#changePassword-button,
		#serverVars-button {
			font-size: 14px;
		}

		.mainMenuTable {
			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		}

		.navBar {
			flex-direction: row;
			justify-content: space-between;
			padding: 10px;
			height: auto;
			position: relative;
		}

		.button-container {
			display: none;
			flex-direction: column;
			top: 60px;
			right: 300px;
			position: absolute;
			width: 200px;
			background-color: white;
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
		}

		.button-container.show {
			display: flex;
			animation: slideDown 0.3s ease forwards;
		}

		/* Burger Menu Icon */
		.burger-menu {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 30px;
			height: 24px;
			cursor: pointer;
		}

		.burger-menu div {
			width: 100%;
			height: 4px;
			background-color: #020676;
			border-radius: 2px;
			transition: all 0.3s ease;
			margin-left: 30px;
			font-family: ;
		}
		/* Animation for transforming burger icon to close icon */
		.burger-menu.active div:nth-child(1) {
			transform: rotate(45deg) translate(6px, 6px);
		}

		.burger-menu.active div:nth-child(2) {
			opacity: 0;
		}

		.burger-menu.active div:nth-child(3) {
			transform: rotate(-45deg) translate(5px, -6px);
		}

		/* GRID JS */
		.gridjs-pagination .gridjs-summary {
			display: none;
		}

		.gridjs-pagination .gridjs-pages {
			max-width: 75%;
		}

		.gridjs-pagination .pagination-options {
			width: min(50px, 15%);
			margin-left: 0;
			margin-right: 0;
		}

		/* Fullscreen Menu Styles */
		.burgerOverlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5); 
			display: none; 
			z-index: 999; /* Ensure it's above other content */
		}

		.fullscreen-menu {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: white;
			z-index: 1000; /* Ensure it's above the overlay */
			display: none; 
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-family: ;
		}

		.fullscreen-menu.show {
			display: flex; /* Show when the menu is active */
		}

		/* Close button styles */
		.close-button {
			position: absolute;
			font-weight: 1000;
			top: 20px;
			right: 20px;
			font-size: 70px;
			cursor: pointer;
			color: #020676;
			font-family: ;
			margin-right: 20px;
		}

		.menu-item{
			margin:auto;
		}

		/* Menu item styles */
		.fullscreen-menu-item {
			font-size: 26px;
			margin: 0;
			padding: 20px 0;
			cursor: pointer;
			color: white;
			background-color: #020676;
			width: 100%;
			text-decoration: none;
			text-align: center;
			justify-content: center;
			font-family: ;
			border-bottom: 1px solid;
			border-radius: 0px;
		}

		.fullscreen-menu-item:hover {
			background-color: ;
		}

		.fullscreen-menu-item i {
			margin-left: 10px;
			color: white;
		}

		.fa-2x {
			font-size: 1em;
		}

		.fullscreen-menu-item:first-of-type {
			border-top: 1px solid rgba(0, 0, 0, 0.1); /* Light grey top border */
		}

		.fullscreen-menu-item:active {
			background-color: #dfecf5; /* Light blue highlight */
			color: #020676; /* Ensure text remains blue */
		}

		@keyframes slideDown {
			from {
				opacity: 0;
				transform: translateY(-10px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}
	}


	/* TOAST STYLING */
	vw-toast {
		width: 100%;
	}

	.toastalert {
		display: flex;
		align-items: center;
		padding: 10px 10px;
		margin: 10px 0;
		border-radius: 5px;
		font-size: 12px;
		background-color: #deebf7;
		color: #31708f; 
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	@keyframes fadeIn {
		to {
			opacity: 1;
		}
	}

	/* Error Alert */
	.toastalert-error {
		background-color: #f2dede; /* Soft red */
		color: #d62734; /* Darker red text for contrast */
		border-left: 5px solid #d62734; /* Darker red border */
		display: flex; /* Use flexbox to control positioning */
		font-family: ;
	}

	/* Warning Alert */
	.toastalert-warning {
		background-color: #fff8e4; /* Soft yellow */
		color: #8a6d3b; /* Darker yellow/golden text for contrast */
		border-left: 5px solid #8a6d3b; /* Darker yellow/golden border */
		font-family: ;
	}

	/* Info Alert */
	.toastalert-info {
		background-color: #deebf7; /* Soft blue */
		color: #31708f; /* Darker blue text for contrast */
		border-left: 5px solid #31708f; /* Darker blue border */
		font-family: ;
	}

	/* Success Alert */
	.toastalert-success {
		background-color: #dff0d8; /* Soft green */
		color: #3c763d; /* Darker green text for contrast */
		border-left: 5px solid #3c763d; /* Darker green border */
		font-family: ;
	}

	/* Close button for dismissible alerts */
	.toastalert .close-btn {
		margin-left: auto;
		cursor: pointer;
		font-size: 18px;
		line-height: 1;
		padding: 0 5px 0 10px;
		color: inherit; /* Match the color of the alert */
	}

	.toastalert .toasticon {
		margin-right: 10px;
		font-size: 16px;
		vertical-align: middle;
	}

	/* Dismiss alert with fade-out */
	.toastalert.fade-out {
		opacity: 0;
		transition: opacity 0.5s ease-out; /* Smooth fade-out transition */
	}

	@font-face {
		font-family: "Source Sans Pro";
		src: url("/fonts/SourceSansPro/SourceSansPro-Light.ttf") format("truetype");
		font-weight: 300;
		font-style: normal;
		font-display: swap;
	}
	@font-face {
		font-family: "Source Sans Pro";
		src: url("/fonts/SourceSansPro/SourceSansPro-SemiBold.ttf") format("truetype");
		font-weight: 600;
		font-style: normal;
		font-display: swap;
	}
	@font-face {
		font-family: "Source Sans Pro";
		src: url("/fonts/SourceSansPro/SourceSansPro-ExtraLight.ttf")
			format("truetype");
		font-weight: 200;
		font-style: normal;
		font-display: swap;
	}
	@font-face {
		font-family: "Source Sans Pro";
		src: url("/fonts/SourceSansPro/SourceSansPro-SemiBoldItalic.ttf")
			format("truetype");
		font-weight: 600;
		font-style: italic;
		font-display: swap;
	}
	@font-face {
		font-family: "Source Sans Pro";
		src: url("/fonts/SourceSansPro/SourceSansPro-Bold.ttf") format("truetype");
		font-weight: bold;
		font-style: normal;
		font-display: swap;
	}
	@font-face {
		font-family: "Source Sans Pro";
		src: url("/fonts/SourceSansPro/SourceSansPro-BoldItalic.ttf")
			format("truetype");
		font-weight: bold;
		font-style: italic;
		font-display: swap;
	}
	@font-face {
		font-family: "Source Sans Pro";
		src: url("/fonts/SourceSansPro/SourceSansPro-Regular.ttf") format("truetype");
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}
	@font-face {
		font-family: "Source Sans Pro";
		src: url("/fonts/SourceSansPro/SourceSansPro-Black.ttf") format("truetype");
		font-weight: 900;
		font-style: normal;
		font-display: swap;
	}
	@font-face {
		font-family: "Source Sans Pro";
		src: url("/fonts/SourceSansPro/SourceSansPro-Italic.ttf") format("truetype");
		font-weight: normal;
		font-style: italic;
		font-display: swap;
	}
	@font-face {
		font-family: "Source Sans Pro";
		src: url("/fonts/SourceSansPro/SourceSansPro-LightItalic.ttf")
			format("truetype");
		font-weight: 300;
		font-style: italic;
		font-display: swap;
	}
	@font-face {
		font-family: "Source Sans Pro";
		src: url("/fonts/SourceSansPro/SourceSansPro-ExtraLightItalic.ttf")
			format("truetype");
		font-weight: 200;
		font-style: italic;
		font-display: swap;
	}
	@font-face {
		font-family: "Source Sans Pro";
		src: url("/fonts/SourceSansPro/SourceSansPro-BlackItalic.ttf")
			format("truetype");
		font-weight: 900;
		font-style: italic;
		font-display: swap;
	}

	/* WEBLOGIN STYLING */
	body {
		margin: 0;
		height: 100vh;
		position: relative;
	}

	#page-content {
		padding: 0;
	}

	input, vw-input#emailAddress {
			;
	}

	vw-div.loginTopDiv {
		margin-bottom: 30px;
		width: 100%;
	}

	.loginPage,
	.memorableWordMid,
	vp-twofapage,
	vp-twofaemailpage,
	vp-twofasmspage,
	vp-twofaenrollpage,
	vp-iforgotpage,
	vp-memorablewordpage,
	vp-memorablewordchangepage,
	vp-newpasswordpage,
	vp-termsandconditionspage,
	vp-logoutpage,
	vp-passwordresetpage {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: row;
		margin-top: 0px;
		padding: 1%;
		padding: 0 60px;
	}

	.memorableWordMid {
	margin-bottom: 30px;
}
	.welcomeTextContainer, .memWrdTextContainer .dialogTextContainer, .newPasswordTextContainer, .resetPassTextContainer {
		flex: 0 0 30%;
		float: left;
		padding: 0 10px 10px 10px;
		font-family: ;
		font-size: 14px !important;
		max-width: 400px;
		min-width: 400px;
		margin-top: 80px;
	}

		.welcomeTextContainer h2 {
			color: #000000;
		}

	.memorableWordContainer{
		flex: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		width: auto;
	}

	.loginContainer, .NewPasswordContainer, .iForgotContainer, .TwoFaContainer {
		flex: 50%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: 100%;
		max-width: 400px;
		margin-top: 80px;
	}

	

	vw-div.expireMessageContainer {
		color: red;
		margin-bottom: 20px;
	}

	/* Responsive adjustments */
	@media (max-width: 1200px) {
		#topLeftToolBar {
			height: 300px;
		}

		.theTitle {
			left: 0%;
		}

		.welcomeTextContainer {
			flex: 0 0 30%;
		}
	}

	@media (max-width: 992px) {
		.loginPage,
		.memorableWordMid,
		vp-memorablewordpage,
		vp-twofapage,
		vp-twofaemailpage,
		vp-twofasmspage,
		vp-twofaenrollpage,
		vp-iforgotpage,
		vp-memorablewordchangepage,
		vp-newpasswordpage,
		vp-termsandconditionspage,
		vp-logoutpage,
		vp-passwordresetpage {
			flex-direction: column;
			align-items: center;
			padding: 0;
		}

		.loginContainer, .NewPasswordContainer, .iForgotContainer, .TwoFaContainer, .welcomeTextContainer{
			margin-top: 0px;
		}

		#login-button, #microsoftLogin-button {
			width: 100%;
		}

		.welcomeTextContainer, .memWrdTextContainer .dialogTextContainer, .newPasswordTextContainer, .resetPassTextContainer, #loginForm .container-fluid, vp-iforgotpage #aVForm .container-fluid {
			min-width: 300px;
		}
	}

	#page-content {
		padding-bottom: 10px;
	}

	@media (max-width: 768px) {
		#topLeftToolBar {
			height: 200px;
			flex-direction: column;
			align-items: flex-start;
		}

		#page-content {
			padding: 10px;
		}

		.navbar {
			height: 40px;
		}

		.theTitle {
			left: 0%;
			display: flex;
			align-items: center;
			justify-content: center;
			top: 40px;
		}

		.welcomeTextContainer {
			flex: 0 0 30%;
		}
	}

	@media (max-width: 576px) {
		.navbar {
			top: 100px;
			height: 30px;
		}

		#page-content {
			margin-top: 0px;
		}

		.theTitle {
			margin-top: 0;
		}

		.footer-text {
			font-size: 10px;
		}
	}


	/* LOGOUT PAGE */
	.logOutDiv {
		font-family: ;
		display: inline-grid;
		max-width: 500px;
		margin: 50px auto;
		padding: 20px;
		/* border: 2px solid #FF495D;  */
		/* background-color: white;  */
		/* border-radius: 10px; */
		text-align: center;
		/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
	}

	.logOutDiv-text {
		font-size: 15px;
		font-weight: bold;
		color: #020676; /* text color */
		margin-bottom: 20px;
	}

	#toLoginPage {
		display: inline-block;
		padding: 10px 20px;
		background-color: #FF495D; /* background for the button */
		color: white;
		font-weight: bold;
		text-align: center;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

		#toLoginPage:hover {
			background-color: #020676;
		}

		#toLoginPage:focus {
			outline: none;
			box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.3);
		}



	/* LOGIN TOKEN IDV PAGE */
	body.LoginTokenIDV-Page {
		font-family: Arial, sans-serif;
		background-color: #ffffff;
		margin: 0;
		padding: 0;
	}

	/* Container styling */
	.LoginTokenIDVContainer {
		max-width: 400px;
		margin: auto;
		padding: 20px;
	}

	/* Header Styling */
	header {
		background-color: #0c1c68;
		color: white;
		padding: 15px;
		font-size: 20px;
		text-align: center;
	}

	/* Form styles */
	#LoginTokenIDVForm {
		background: white;
		border-radius: 5px;
		width: auto;
		max-width: none;
	}


	#LoginTokenIDVForm .row {
		display: flex;
		flex-direction: column;
	}

	#LoginTokenIDVForm .container-fluid {
		background-color: white;
		color: black;
		width: 400px;
		padding-top: 10px;
		border-radius: 10px;
		padding: 20px;
	}

	#LoginTokenIDVForm .vFormLabel {
		font-family: ;
		font-size: 16px;
		color: black;
		white-space: nowrap;
		display: inline-block;
	}

	#LoginTokenIDVForm input {
		background-color: #e2e2e2;
		border-bottom-color: #0c1c68;
	}


	.form-row {
		display: flex;
		flex-direction: column;
		margin-bottom: 15px;
		text-align: left;
	}

	.form-row label {
		font-size: 14px;
		margin-bottom: 5px;
		color: #333;
	}

	.form-row input {
		width: 100%;
		padding: 10px;
		font-size: 16px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}


	vw-button#calendarIDVbtn {
		font-size: 24px;
		color: #0c1c68;
		position: relative;
		top: -58px;
		left: 350px;
	}

	vw-button#calendarIDVbtn:hover {
		cursor: pointer;
	}


	/* Button */
	#NextButtonIDV {
		background-color: #0c1c68;
		color: white;
		border: none;
		font-size: 16px;
		border-radius: 5px;
		cursor: pointer;
		margin-left: 20px;
		margin-top: -10px;
		padding: 5px;
		display: flex;
		margin-right: 20px;
		justify-content: center;
	}

	#NextButtonIDV:hover {
		background-color: #092054;
	}

	#LoginTokenIDVForm .vFormElement.col-lg-3 {
		width: 100%;
	}



	/* MEMORABLE WORD PAGE */
	#memWrdForm {
		width: auto;
		max-width: none;
	}

		#memWrdForm .row {
		align-items: center;
	}

		#memWrdForm .vFormLabel {
		font-family: ;
		font-size: 16px;
		color: #FFFFFF;
		flex: 0 0 200px; /* Fixed width for the label */
		white-space: nowrap; /* Prevent label from wrapping */
		display: inline-block;
	}

		#memWrdForm .vFormElement {
		margin-bottom: 10px;
		margin-top: 10px;
		margin-left: auto;
	}

	#memWrdForm #char1Input,
		#memWrdForm #char2Input, #memWrdForm #char3Input, #memWrdForm #char4Input, #memWrdForm #char5Input, #memWrdForm #char6Input {
		width: 50px;
		display: inline-block;
	}

	.memWrdTextContainer h2, .resetPassTextContainer h2 {
		color: #000000;
	}

	vw-div.memWrdTextContainer, vw-div .resetPassTextContainer {
		max-width: 400px;
	}

	#memWrdForm .container-fluid {
		background-color: #020676;
		color: #FFFFFF;
		width: 400px;
		max-width: 400px;
		margin-bottom: 10px;
		margin-left: 0;
		margin-right: 0;
		padding: 20px;
		border-radius: 10px;
		border-collapse: collapse;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	@media (max-width: 576px) {
		#page-content {
			margin-top: 0px;
		}

		.memWrdTextContainer, .newPasswordTextContainer, .resetPassTextContainer {
			margin-left: 0%;
		}

		vw-div.memorableWordContainer {
			margin-bottom: 20px;
		}

		vp-memorablewordpage .row > * {
			width: auto;
		}
	}

	@media (max-width: 992px) {
		vp-memorablewordpage .row > * {
			width: auto;
		}
	}


	/* MEMORABLE WORD CHANGE PAGE */
	vw-div.memWrdTextContainer, vw-div.newPasswordTextContainer, vw-div.resetPassTextContainer {
		margin-right: 20px;
	}

	@media (max-width: 992px) {
		vw-div.memWrdTextContainer, vw-div.newPasswordTextContainer, vw-div.resetPassTextContainer {
			margin-right: 0;
		}
	}

	#memWrdChangeForm, #resetPassForm, #newPasswordForm {
		width: auto;
		max-width: none;
	}

		#memWrdChangeForm .vFormLabel, #resetPassForm .vFormLabel, #newPasswordForm .vFormLabel {
		font-family: ;
		font-size: 16px;
		color: #FFFFFF;
		flex: 0 0 200px;
		white-space: nowrap;
		margin-right: 10px;
		display: inline-block;
	}

		#memWrdChangeForm .vFormElement, #resetPassForm .vFormElement, #newPasswordForm .vFormElement {
		width: 100% !important;
		margin: 8px 0;
	}

		#memWrdChangeForm .container-fluid, #resetPassForm .container-fluid, #newPasswordForm .container-fluid {
		background-color: #020676;
		color: #FFFFFF;
		width: 400px;
		max-width: 400px;
		margin-bottom: 10px;
		padding: 20px;
		border-radius: 10px;
		border-collapse: collapse;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	#Help-button {
		font-family: ;
		font-size: 14px;
		display: inline-flex;
		align-items: center;
		justify-content: flex-start;
		margin-left: 0;
	}

		#Help-button i {
			margin-left: 8px;
		}

		#Help-button:hover {
			cursor: pointer;
		}

	vw-div.memorableWordChangeContainer, vw-div.NewPasswordContainer {
		display: inline-block;
		margin-bottom: 40px;
	}

	.memWrdhelpText-container, .passWrdhelpText-container {
		font-family: ;
		font-size: 14px;
		margin-top: 10px;
		border-radius: 4px;
		display: none; /* Initially hidden */
	}

		.memWrdhelpText-container ul, .passWrdhelpText-container ul {
			margin: 0;
			padding-left: 20px;
		}

	/* Custom styles for the button icon */
	.fa-plus-circle,
	.fa-minus-circle {
		transition: transform 0.2s;
	}

	#Update-button {
		;
		;
		font-family: ;
		display: flex;
		align-items: center;
		height: 35px !important;
		margin-left: auto;
		border-radius: 5px;
		box-sizing: border-box;
		width: 100%;
		justify-content: center;
		margin-bottom: 10px;
	}

		#Update-button:hover {
			background-color: #FF495D !important;
			cursor: pointer;
		}

	@media (max-width: 576px) {
		#page-content {
			margin-top: 0px;
		}

		.memWrdTextContainer, .newPasswordTextContainer, .resetPassTextContainer {
			margin-left: 0%;
		}

		vw-div.memorableWordChangeContainer {
			margin-bottom: 20px;
		}

		#Update-button {
			justify-content: center;
			width: 100%;
		}
	}

	/* MEMORABLE WORD CHANGE SUCCESS MESSAGE */
	vw-div#memChangeSuccessModal {
		z-index: 1060 !important;
		text-align: center;
	}

	vw-button.memChangeClosebtn {
		;
		z-index: 1070 !important;
		color: #ffffff;
		text-align: center;
	}

		vw-button.memChangeClosebtn:hover {
			cursor: pointer;
			color: #ffffff;
			background-color: #FF495D;
		}

	/* MODAL */
	.modal.fade {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* Ensure the modal content does not stretch beyond the viewport */
	.modal-content {
		max-width: 100%;
		max-height: 100%;
		overflow-y: auto; /* Enable scrolling if content overflows */
	}

	.modal-header {
		background-color: #020676;
		color: white;
		padding: 10px;
		text-align: center;
		border-radius: 0;
	}

		/* Center the title in the modal header */
		.modal-header .modal-title {
			margin: 0 auto;
			color: white; /* White 'Success' text */
		}

	/* Style for backdrop */
	.modal-backdrop {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3); /* Dim background with opacity */
		z-index: 1040 !important;
	}

	.modal-footer vw-button {
		color: #020676;
		border-right: 1px solid white;
		background-color: rgb(242, 243, 243);
		font-size: 14px;
		cursor: pointer;
		padding: 4px 20px;
		font-family: calibri;
		float: left;
		border-radius: 25px;
		height: auto;
		z-index: 1070 !important;
	}

		.modal-footer vw-button:hover {
			cursor: pointer;
			color: #ffffff;
			background-color: #FF495D;
		}

	/*TERMS AND CONDITIONS PAGE*/

	vw-div.TandCDiv {
		margin-bottom: 60px;
		max-width: 700px;
		min-width: 420px;
	}

	vw-div.TandCTextDiv-text h1 {
		padding-bottom: 15px;
		text-decoration: underline;
	}

	vw-div.TandCTextDiv-text {
		background-color: white !important;
		display: table;
		border: 2px solid #020676;
		width: 100%;
	}

	vw-div.TandCCheckInnerDiv {
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}

	.TandCCheckOuterDiv {
		width: 90%;
		display: flex;
		margin: auto;
		justify-content: center;
	}

	vw-input#tandcCheckbox :hover {
		cursor: pointer;
	}

	vw-div.TandCCheckTextDiv {
		font-size: 14px;
		font-weight: bold;
		min-width: fit-content;
	}

	vw-button.tandcContinuebtn {
		;
		;
		font-family: ;
		margin-left: 10px;
		font-size: 14px;
		height: 20px !important;
		justify-content: center;
		display: flex;
	}

		vw-button.tandcContinuebtn:hover {
			background-color: #FF495D !important;
			cursor: pointer;
		}

	.red-border {
		border: 2px solid red;
		padding: 5px; /* Adjust as necessary to make space for the border */
	}

	vw-input#tandcCheckbox {
		padding-left: 5px;
		padding-right: 4px;
	}

	/*TWO FACTOR ENROLL PAGE*/
	vw-div.dialogTextContainer {
		max-width: 400px;
		margin-right: 30px;
		font-size: 14px;
		margin-top: 80px;
	}

	@media (max-width: 992px) {
		vw-div.dialogTextContainer {
			margin-right: 0;
		}
	}

	vp-iforgotpage .dialogTextContainer {
		top: 60px;
	}

	vw-div.TwoFaEnrollContainer {
		position: relative;
		display: grid;
	}

	.qrCodeImage img {
		margin-bottom: 15px;
	}

	.TwoFaEnrollContainer img {
		border: 0.5px solid #6c757d;
	}

	vp-twofaenrollpage p {
		margin-top: 30px;
	}

	vp-twofaenrollpage vw-button#Continue-button {
		;
		z-index: 1070 !important;
		color: white;
		align-items: center;
		float: left;
		min-width: 50px;
		margin-right: 10px;
		margin-top: 10px;
		margin-bottom: 30px;
		width: 77%;
		height: 35px;
		display: flex;
		justify-content: center;
		border-radius: 5px;
	}

		vp-twofaenrollpage vw-button#Continue-button:hover {
			cursor: pointer;
			background-color: #FF495D;
		}


	/*TWO FACTOR PAGES*/
	vw-div.TwoFaContainer {
		margin-top: 60px;
		margin-bottom: 30px;
	}

	vp-twofapage,
	vp-twofaemailpage,
	vp-twofasmspage,
	vp-twofaenrollpage {
		#aVForm {
			width: auto;
			max-width: none;
		}

		#aVForm .vFormLabel {
			font-family: ;
			font-size: 16px;
			color: #FFFFFF;
			flex: 0 0 288px;
			white-space: nowrap;
			padding-right: 7px;
			display: inline-block;
		}

		#aVForm .vFormElement {
			margin-top: -5px;
		}


	@media (max-width: 992px) {
		#aVForm .vFormElement {
			margin-top: 10px;
		}
	}
	

		#aVForm .container-fluid {
			background-color: #020676;
			color: #FFFFFF;
			width: 400px;
			max-width: 400px;
			margin-bottom: 8px;
			margin-top: 0;
			padding: 20px;
			border-radius: 10px;
			border-collapse: collapse;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}

		vp-twofapage input[type="password"] {
			width: 70px;
		}
	}

	vw-button#Submit-button {
		;
		;
		width: 100%;
		font-family: ;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		height: 35px;
	}

	#Submit-button:hover {
		background-color: #FF495D !important;
		cursor: pointer;
	}

	vw-button#TwoFaEmail-resendCodeButton, 
	vw-button#TwoFaSMS-resendCodeButton {
		color: #020676;
		font-weight: 600;
	}

		vw-button#TwoFaEmail-resendCodeButton:hover, 
		vw-button#TwoFaSMS-resendCodeButton:hover {
			cursor: pointer;
			text-decoration: underline;
		}

	vp-twofaemailpage #aVForm .container-fluid, 
	vp-twofasmspage #aVForm .container-fluid, 
	vp-twofapage #aVForm .container-fluid {
		margin-top: 20px;
	}

	vp-twofaemailpage input, 
	vp-twofasmspage input{
		width: 70px;
	}

	.offlineContainer {
		margin-top: 60px;
		display: flex;
		justify-content: center;
	}

	.offline-text {
		padding: 28px;
		font-family: Arial, sans-serif;
		color: black;
		max-width: 600px;
		text-align: center;
		margin-top: 100px;
		background-color: #ededed;
		border-radius: 8px;
	}

	.offline-text h1 {
		font-size: 24px;
		margin-bottom: 10px;
		color: #003366;
	}

	.offline-text p {
		font-size: 14px;
		line-height: 1.5;
		margin-bottom: 10px;
		text-align: center;
	}

	.offline-text a {
		font-size: 14px;
		line-height: 1.5;
		margin-bottom: 10px;
		text-decoration: none;
	}

	.offline-text a:hover {
		text-decoration: underline;
	}

	.offlineNavBar {
		 display: flex;
		 align-items: center;
		 background-color: white;
		 border-bottom: 20px solid #020676;
	}

	.offlineLogoImage {
		display: flex;
	}
</style>
