@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');

/* Fixes Bootstrap bug whereby portait/landscape layout choice disappears if you print within Chrome */
@page {
	size: auto
}

/* This stops the opening of a modal from shifting the parent page left. This might make sense only because of scrollbar-gutter: stable below */
.modal-open{
	padding-right: 0 !important;
}

html, body {
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	font-variant-numeric: lining-nums;
	/* This will allocate space for the vertical scrollbar in all cases, to stop the screen shifting left and right */
	scrollbar-gutter: stable;
}

.top-row a, .top-row .btn-link {
	color: black;
}

.login-large-boxxe-logo {
	padding-top: 50px;
	padding-bottom: 25px;
	width: 50% !important;
}

.large-boxxe-logo {
	padding-top: 25px;
	padding-bottom: 25px;
	width: 50% !important;
}

#boxxe-navbar-logo {
	height: 32px !important;
}

/* Shrink the nucleus svg which has extra padding */
.tile-nucleus-smaller {
	margin-top: -10px;
	margin-bottom: -10px;
	max-width: 55% !important;
}

/* Shrink the ni svg which has extra padding */
.tile-ni-smaller {
	margin-top: -10px;
	margin-bottom: -10px;
	max-width: 70% !important;
}

.tile-catalyst-smaller {
	margin-top: 20px;
	margin-bottom: 20px;
	max-width: 100% !important;
}

.tile-store-provisioner-smaller {
/*	margin-top: 10px;*/
/*	margin-bottom: 10px;*/
	margin-top: -10px;
	margin-bottom: -10px;
	max-width: 55% !important;
}

.tile-subscription-updater-smaller {
	margin-top: 10px;
	margin-bottom: 10px;
	max-width: 55% !important;
}

.btn-primary {
	color: white;
	background-color: #0050FF !important;
	border-color: #000;
	border-width: 0;
/*	border-radius: 0;*/
	border-radius: 3px;
	letter-spacing: 1px;
	font-size: 13px;
	font-weight: 600;
}

	.btn-primary:hover {
		background-color: #0050FF;
	}

	.btn-primary:active {
		background-color: white !important;
		border-color: #1861ac !important;
	}

.btn-secondary {
	border-width: 0;
	border-radius: 0;
	letter-spacing: 1px;
	font-size: 13px;
	font-weight: 500;
}

.btn-danger {
	border-color: #1861ac;
	border-width: 0;
	border-radius: 0;
	letter-spacing: 1px;
	font-size: 13px;
	font-weight: 500;
}

.form-control {
	border: 1px solid #e9e9e9;
	border-radius: 0;
	font-size: 16px;
	font-family: 'Poppins';
	font-weight: 400;
	height: unset;
	line-height: 18px;
	color: #000; /* makes text entry sharper */
	/*margin: 5px;
	padding: 15px;*/
}

/* Placeholders */
html .form-control::-webkit-input-placeholder {
	color: lightgray;
}

html .form-control:-moz-placeholder {
	color: lightgray;
}

html .form-control::-moz-placeholder {
	color: lightgray;
}

html .form-control:-ms-input-placeholder {
	color: lightgray;
}

app {
	position: relative;
	display: flex;
	flex-direction: column;
}

.top-row {
	height: 3.5rem;
	display: flex;
	align-items: center;
}

.main {
	flex: 1;
}

	.main .top-row {
		justify-content: flex-end;
		color: black;
		/* z-index must be greater than the stacked sustainability widgets */
		z-index: 10;
	}

/*.main .top-row > a
{
	margin-left: 1.5rem;
}*/

.sidebar {
	background-color: #0050FF;
}

	.sidebar .oi {
		width: 2rem;
		font-size: 1.1rem;
		vertical-align: text-top;
		top: -2px;
	}

.nav-item {
	font-size: 0.9rem;
	font-weight: 600;
/*	color: #0050FF;*/
color: black;
	padding-bottom: 0.5rem;
}

.nav-pills .nav-link {
	background-color: #0050FF;
	color: black;
}

	.nav-pills .nav-link:hover {
		background-color: #0050FF;
		/* background-color: #a840b5;*/
		color: white;
	}

	.nav-pills .nav-link.active {
		background-color: #0050FF;
		/* background-color: #c757d5;*/
		color: white;
	}

/* Make non-active nav-pills links black instead of blue */
.nav-pills .nav-link:not(.active) {
	background-color: black !important;
	color: white !important;
}

	.nav-pills .nav-link:not(.active):hover {
		background-color: #333 !important;
		color: white !important;
	}

	.nav-item:last-of-type {
		padding-bottom: 1rem;
	}

	.nav-item a {
		color: white;
		border-radius: 4px;
		font-size: 18px;
		font-weight: 500;
		letter-spacing: 2px;
		line-height: 36px;
		display: flex;
		align-items: center;
	}

		.nav-item a:hover {
			color: #6d7172;
/*			color: #0050FF !important;*/
		}

.content {
	padding-top: 1.1rem;
}

.navbar-toggler {
	background-color: rgba(255, 255, 255, 0.1);
}

.valid.modified:not([type=checkbox]) {
	outline: 1px solid #26b050;
}

.invalid {
	outline: 1px solid red;
}

.validation-message {
	color: red;
}

/* Account Settings*/
.account-page-head th {
	vertical-align: text-top !important
}

.accounts-table {
	font-size: small;
}

/* pulsate notification alert */
.notification-alert {
	font-size: 8px;
	color: orangered;
	display: block;
	position: absolute;
	top: 7px;
	right: 9px;
	animation-name: pulsate-icon;
	animation-iteration-count: infinite;
	animation-duration: 3s;
}

/* Top Nav buttons */

.nav-button-pressed :active {
	background-color: yellow;
}

.faq-button {
	width: 80px !important;
	margin-right: 0px;
	/* hide the blue border after clicking */
	box-shadow: none !important;
	background-color: white !important;
	color: black !important;
}

.help-button {
	width: 80px !important;
	margin-right: 0px;
	/* hide the blue border after clicking */
	box-shadow: none !important;
	background-color: white !important;
	color: black !important;
}

.admin-button {
	/* different to help-button because the button type is a link so need to fix a few things */
	margin-left: 0 !important;
	margin-right: 0;
	/* hide the blue border after clicking */
	box-shadow: none !important;
	background-color: white !important;
	color: black !important;
}

.top-nav-dropdown-toggle {
	/* Hide the blue button outline when menu open */
	box-shadow: none !important;
	background-color: white !important;
	color: black !important;
}

	.top-nav-dropdown-toggle:focus {
		background-color: white !important;
		color: black;
		/* Make the blue outline disappear after losing focus */
		box-shadow: none !important;
	}

.top-nav-dropdown-menu {
	border-top: 0;
	top: 39px;
	color: black !important;
	background-color: white !important;
	border-radius: 0;
}

	div.dropdown-menu.show.top-nav-dropdown-menu {
		/*	make the width reach to right edge	*/
		min-width: 100% !important;
	}

.top-nav-dropdown-item-hover {
	color: black !important;
	background-color: white !important;
	padding-top: 6px;
	padding-bottom: 6px;
	/* Make the blue outline disappear after losing focus */
	box-shadow: none !important;
}

	.top-nav-dropdown-adjust-profile {
		padding-right: 1px;
	}

	.top-nav-dropdown-adjust-updates {
		margin-left: -1px;
	}

	.top-nav-dropdown-adjust-logout {
		/*	padding-right: 0px;*/
	}

	@keyframes pulsate-icon {
		/* Delay is part of animation */
		0%, 20% {
			/*		opacity: 1;*/
			/*		font-size: 8px;
		top: 7px;*/
			transform: scale(0.9);
		}

		50% {
			/*		opacity: 0.4;*/
			/*		font-size: 6px;
		top: 8px;*/
			transform: scale(1.1);
		}

		80%, 100% {
			/*		opacity: 1;*/
			/*		font-size: 8px;
		top: 7px;*/
			transform: scale(0.9);
		}
	}
	/*
	To debug the reconnection logic quicker, see CAEP-1690 for the reconnection overrides
*/
	/* div element with black background and 50% opacity set */
	.components-reconnect-blur-overlay {
		display: none;
		position: fixed;
		z-index: 1049;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.3;
		filter: alpha(opacity = 30); /* required for opacity to work in IE */
	}
	/* Hide the main reconnection modal by default */
	#components-reconnect-modal {
		display: none;
		/*	display: flex !important;*/
		opacity: 1 !important;
		background-color: rgb(255 255 255 /80%) !important;
	}

		#components-reconnect-modal::before {
			display: none;
			/* The header is 20px high but the content must fill the body area, otherwise there'll
			be a narrow gap between the header and the content
		*/
			height: 20px;
			content: "";
			width: 350px;
			position: fixed;
			top: 40%;
			left: 50%;
			z-index: 1050;
			transform: translate(-50%, -50%);
			border-radius: 20px 20px 0px 0px;
			background: white;
		}

		#components-reconnect-modal h5 {
			/* This ensures we touch the bottom of #components-reconnect-modal::before based on it's height */
			margin-top: 76px !important;
			display: none;
			height: 132px;
			width: 350px;
			position: fixed;
			top: 40%;
			left: 50%;
			z-index: 1050;
			background-color: white;
			padding: .75rem 1.25rem;
			transform: translate(-50%, -50%);
			border-radius: 0px 0px 20px 20px;
			color: #444;
			box-shadow: 4px 10px 10px 0px hsl(0deg 0% 0% / 20%);
			padding-top: 0;
			padding-bottom: 0;
		}

			#components-reconnect-modal h5 p {
				/* Gap beneath the h5 title*/
				padding-top: 20px;
				font-size: 16px;
				/* So that 2nd p fits */
				margin-bottom: 0;
			}
	/* Hide the three reconnection message divs by default */
	div.reconnecting {
		display: none;
	}

	div.failedToConnect {
		display: none;
	}

	div.connectionRejected {
		display: none;
	}
	/* By default, this class being present will hide the modal in center of screen */
	#components-reconnect-modal.components-reconnect-hide {
		display: none;
	}
	/* Unhide the modal and 'Attempting reconnect' message if components-reconnect-show is present */
	#components-reconnect-modal.components-reconnect-show {
		display: block;
	}

		#components-reconnect-modal.components-reconnect-show::before {
			display: block;
		}

		#components-reconnect-modal.components-reconnect-show div.components-reconnect-blur-overlay {
			display: block;
		}

		#components-reconnect-modal.components-reconnect-show h5 {
			display: block;
		}

			#components-reconnect-modal.components-reconnect-show h5 p {
				display: block;
			}

		#components-reconnect-modal.components-reconnect-show div.reconnecting {
			display: block;
		}
	/* Unhide the modal and 'Failed to connect' message if components-reconnect-failed is present */
	#components-reconnect-modal.components-reconnect-failed {
		display: block;
	}

		#components-reconnect-modal.components-reconnect-failed div.components-reconnect-blur-overlay {
			display: block;
		}

		#components-reconnect-modal.components-reconnect-failed::before {
			display: block;
		}

		#components-reconnect-modal.components-reconnect-failed h5 {
			display: block;
		}

			#components-reconnect-modal.components-reconnect-failed h5 p {
				display: block;
			}

		#components-reconnect-modal.components-reconnect-failed div.failedToConnect {
			display: block;
		}
	/* Unhide the modal and 'Connection rejected' message if components-reconnect-rejected is present */
	/*
#components-reconnect-modal.components-reconnect-rejected {
	display: block;
}
	#components-reconnect-modal.components-reconnect-rejected div.components-reconnect-blur-overlay {
		display: block;
	}
	#components-reconnect-modal.components-reconnect-rejected::before {
		display: block;
	}
	#components-reconnect-modal.components-reconnect-rejected h5 {
		display: block;
	}
		#components-reconnect-modal.components-reconnect-rejected h5 p {
			display: block;
		}
	#components-reconnect-modal.components-reconnect-rejected div.connectionRejected {
		display: block;
	}
*/
	/* Modal text is white on white */
	/* Shared with Platform Prerequisites */
	.eula-modal {
		color: black !important;
		height: 66%;
		max-height: 66%;
		/* set height to center of screen */
		position: fixed !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%);
		font-size: 15px;
	}

		.eula-modal li p {
			padding-top: 10px;
		}

		.eula-modal .modal-footer .eula-modal-footer-close-button {
			float: right;
		}

	.faqs-contents-page a {
		color: darkblue !important;
	}

	.faqs-contents-page ol li {
		color: darkblue !important;
	}
	/*#toc_container {
	background: #f9f9f9 none repeat scroll 0 0;
	border: 1px solid #aaa;
	display: table;
	font-size: 95%;
	margin-bottom: 1em;
	padding: 20px;
	width: auto;
}

	#toc_container li {
		padding: 5px 10px !important;
	}

.toc_title {
	font-weight: 500;
	text-align: center;
}

#toc_container li, #toc_container ol, #toc_container ol li {
	list-style: outside none none !important;
}*/
	/* Modal text is white on white */
	.faqs-modal {
		color: black !important;
		height: 66%;
		max-height: 66%;
		/* set height to center of screen */
		position: fixed !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%);
		font-size: 14px;
	}

	.faqs-hr {
	}

	.faqs-title {
		text-align: center;
		font-size: 17px !important;
	}

	.faqs-modal ol > li::marker {
		content: counters(list-item, '.') '. ';
	}

	.faqs-modal li p {
		padding-top: 6px;
		padding-bottom: 0px;
	}

	.faqs-modal .section {
		margin-top: 25px;
		margin-bottom: 10px;
		margin-left: 25px;
	}
	/* FAQ Item 'Platform Prequisites' -> 'Cisco Networking Cloud' table */
	.faqs-modal #platform-prequisites ol li table {
		font-size: 13px;
		margin-top: -20px;
		margin-bottom: -15px;
		padding-top: 0;
		padding-bottom: 0;
	}

	.faqs-modal #platform-prequisites ol li td {
		vertical-align: top;
		padding-top: 0;
		padding-right: 10px;
	}

		.faqs-modal #platform-prequisites ol li td:first-child {
			font-weight: bold;
			color: #202020;
		}

	.faqs-modal #platform-prequisites ul {
		font-size: 13px;
		margin-top: -5px;
		margin-bottom: -15px;
	}
	/* FAQ Item 'Platform Prequisites' -> 'Cisco Networking On-Premise machine spec */
	.faqs-modal #platform-prequisites ol li table {
		margin-top: -20px;
		margin-bottom: -15px;
		padding-top: 0;
		padding-bottom: 0;
	}
	/* FAQ Item 'Platform Notifications' */
	.faqs-modal #ni-notifications ul li {
		font-size: 13px;
		margin-bottom: 15px;
	}

	.faqs-modal .modal-footer .faqs-modal-footer-close-button {
		float: right;
	}

	.faq-item {
		position: relative;
		left: 20px;
		margin-right: 30px;
	}
	/* Modal text is white on white */
	.new-notifications-modal {
		color: black !important;
	}

		.new-notifications-modal .modal-dialog-centered.modal-dialog-scrollable .modal-content {
			height: 66%;
			max-height: 500px;
		}

		.new-notifications-modal .new-notification-body {
			/*		height: 100% !important;*/
			font-size: 13px;
		}

			.new-notifications-modal .new-notification-body a {
				/*		height: 100% !important;*/
				color: #007bff;
			}

		.new-notifications-modal .new-notification-publish-date {
			margin-left: 12px;
			font-size: 13px;
			vertical-align: middle;
		}

		.new-notifications-modal .modal-footer {
			display: unset;
		}

		.new-notifications-modal .new-notification-footer-tally {
			/*		font-size: 16px;*/
		}

		.new-notifications-modal .modal-footer .new-notification-footer-close-button {
			float: right;
		}
	/* Modal text is white on white */
	.notifications-modal {
		color: black !important;
		max-height: 800px;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.notifications-accordion-card {
		position: relative;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		min-width: 0;
		word-wrap: break-word;
		background-color: #fff;
		background-clip: border-box;
		border: 1px solid rgba(0,0,0,.125);
		border-radius: 0.25rem;
	}

		.notifications-accordion-card .my-btn-link {
			color: #007BFF;
			width: 100%;
		}

		.notifications-accordion-card button.btn.my-btn-link {
			/*	remove the blue outline on focus */
			box-shadow: 0 0 0 0 !important;
			text-align: left;
		}

	.notifications-accordion-card-header {
		padding: 0.25rem 0.25rem;
		padding-left: 8px !important;
		margin-bottom: 0;
		background-color: rgba(0,0,0,.03);
		border-bottom: 1px solid rgba(0,0,0,.125);
	}

		.notifications-accordion-card-header h5 {
			margin: 0;
			vertical-align: !important;
		}

			.notifications-accordion-card-header h5 button {
				color: black !important;
			}

		.notifications-accordion-card-header .notification-new {
			/* Trying to align this with the publish-date wasn't possible hence absolute*/
			/*
			position: absolute;
			right: 120px;
			top: 9px;
			font-size: 13px !important;
			padding-top: 3px;*/
			margin-left: 10px;
			font-size: 13px;
			padding-top: 3px;
		}

		.notifications-accordion-card-header .notification-publish-date {
			margin-left: 10px;
			font-size: 13px;
			vertical-align: middle;
			/*		color: dodgerblue;*/
		}

	.notifications-accordion-card-body {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		padding: 1.25rem;
		font-size: 13px;
	}

		.notifications-accordion-card-body a {
			/* Change back to default blue from white */
			color: #007bff;
		}

	.notification-action-buttons {
		width: 90px;
	}
	/* This is necesary to solve two problems
1. The new plus or minus icon appears immediate, but the one to disappear only occurs at the end of collapse,
	so if transition not immediate then you briefly see both icons
2. When this class was called notifications-accordion-card-header, there was the smooth collapse/expand of body
	but if you fast clicked the plus or minus, the icons transitioned faster than the animation and theb were out of sync
	so renamed class to card so both icon transitions and body collapse are immediate. */
	.notifications-accordion-card .collapsing {
		transition: none !important;
	}

	.notifications-accordion-card-header .fa-minus {
		margin-right: 0.265em !important;
		color: dimgrey !important;
		/*color: #0050FF !important;*/ /* royal blue */
	}

	.notifications-accordion-card-header .fa-plus {
		margin-right: 0.53em !important;
		color: dimgrey !important;
		/*color: #0050FF !important;*/ /* royal blue */
	}
	/* Due to the plus/minus icons swapping, the title text needs to be absolute to stop jittering left right occasionally */
	.notifications-accordion-card-header-avoid-icon-jitter {
		position: absolute;
		left: 2.3em !important;
	}
	/* Feedback modal - after .Net 6 remove from here and use LoginDisplay.css */
	/* Modal text is white on white */
	.feedback-modal {
		color: black !important;
	}

		.feedback-modal label {
			padding-top: 15px;
		}

		.feedback-modal #priority-toggle {
			border-width: 1px !important;
			background-color: #f8f9fa;
			border-color: #d3d9df;
			color: black;
			box-shadow: 0 0 0 0.1rem rgb(130 138 145 / 50%);
		}

			.feedback-modal #priority-toggle:hover {
				color: black;
				background-color: #e2e6ea;
				border-color: #dae0e5;
			}
	/* Reduce thickness around priority dropdown when clicked or post-clicked */
	.show > .btn-secondary.dropdown-toggle:focus {
		box-shadow: 0 0 0 0.1rem rgb(130 138 145 / 50%);
	}

	.btn-secondary:focus {
		box-shadow: 0 0 0 0.1rem rgb(130 138 145 / 50%);
	}
	/* Priority dropdown button */
	.feedback-modal #priority-toggle.btn-secondary {
		border-width: 0 !important;
		border-radius: .25rem !important;
		font-weight: 400 !important;
		font-size: 1rem;
		padding-left: 0;
		border: 1px solid transparent !important;
		line-height: 1.5;
	}
	/* Support Request - revert the squared look from primary */
	.feedback-modal #support.btn.btn-primary {
		border-width: 0 !important;
		border-radius: .25rem !important;
		font-weight: 400 !important;
		font-size: 1rem;
		border: 1px solid transparent !important;
		line-height: 1.5;
		background-color: #007BFF !important;
		border-color: #007BFF !important;
		letter-spacing: normal;
	}
	/* Bug - revert the squared look from danger */
	.feedback-modal #bug.btn.btn-danger {
		border-width: 0 !important;
		border-radius: .25rem !important;
		font-weight: 400 !important;
		font-size: 1rem;
		border: 1px solid transparent !important;
		line-height: 1.5;
		/*		background-color: #007BFF !important;
		border-color: #007BFF !important;*/
		letter-spacing: normal;
	}
	/* dropdown items are white/not visible */
	.feedback-modal a.dropdown-item {
		color: black !important;
		left: 0;
		float: left;
		padding: 0 !important;
	}

	.feedback-modal .feedback-priority-icon {
		display: inline-block;
		height: 22px;
		margin-left: 0.5em;
		width: 22px;
	}

	.feedback-modal .feedback-priority-icon-in-button {
		display: inline-block;
		height: 22px;
		margin: 0;
		margin-left: -0.5em;
		width: 22px;
	}

	.feedback-modal .feedback-priority-option-span {
		cursor: pointer;
		display: initial;
	}

	.feedback-modal #feedback-priority-dropdown-button {
		margin-bottom: 5px;
	}

	.feedback-modal #feedbackDescriptionInput {
		height: 100px !important;
	}
	/* File Drag/Drop */
	.drag-drop-zone {
		border: 3px dashed #0050FF;
		padding: 0.2rem;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #eee;
		box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
		color: #aeaeae;
		font-size: 1.5rem;
		cursor: pointer;
		position: relative;
	}

		.drag-drop-zone:hover {
			background-color: #f5f5f5;
		}

		.drag-drop-zone input[type=file] {
			position: absolute;
			width: 100%;
			height: 100%;
			opacity: 0;
			cursor: pointer;
		}
	/* Subscription Updater */

	.row-title {
		width: 400px;
	}

	.row-result {
		width: 200px;
		text-align: right;
	}
	/* AIR Dashboard */

	.buttons-float-right .btn {
		height: 31px;
		width: 110px;
	}
	/* AIR Reports */

	.badge-report-data-old {
		padding: 13px;
		font-size: 11px;
		color: white !important;
		border: 1px lightgrey solid;
		background-color: #A72448;
		cursor: pointer;
	}

	.badge-report-data-valid {
		padding: 13px;
		font-size: 11px;
		color: black !important;
		border: 1px lightgrey solid;
		background-color: #D1D2DC;
	}

	.text-fix-data-now {
		font-size: 13px;
		color: #A72448;
	}

	.text-data-ok {
		font-size: 13px;
		/*	color: rebeccapurple;*/
	}

	.fa-exclamation-triangle {
		font-size: 20px;
		padding-right: 5px;
	}

	.link-issues-contact-account-manager {
		/* colour etc comes from btn-link */
		font-family: 'Poppins', sans-serif;
		font-size: 16px;
		vertical-align: inherit;
		padding-top: 5px;
		padding-left: 6px;
	}
	/* Fade the 'old data' icon in and out */
	.cycle-fade {
		/*	animation-delay: 1s;*/
		animation-name: fade-icon;
		animation-iteration-count: infinite;
		animation-duration: 3s;
	}

	.energy-usage-footer-email-link {
		/* colour etc comes from btn-link */
		font-family: 'Poppins', sans-serif;
		font-size: 14px;
		vertical-align: inherit;
		padding-top: 0px;
		padding-left: 6px;
	}

	@keyframes fade-icon {
		/* Delay is part of animation */
		0%, 20% {
			opacity: 1;
		}

		50% {
			opacity: 0.4;
		}

		80%, 100% {
			opacity: 1;
		}
	}
	/* End of fade */

	.fa-exclamation-triangle {
		color: #0050FF;
	}

	.password-requirements {
		font-size: 14px;
		padding-left: 20px;
	}

	.password-reset-form-errors {
		font-size: 14px;
		padding-left: 20px;
	}

	.password-reset-field-errors {
		font-size: 14px;
		padding-top: 5px;
	}

	.user-admin-fields td {
		font-size: 13px !important;
	}

	.max-width {
		width: 100%;
	}
	/* BOXXE */
	/* COLOURS */
	.boxxe-royal-blue-fill {
		background-color: #0050FF;
	}

	.boxxe-grey-fill {
		background-color: #6D7172;
	}

	.boxxe-black-fill {
		background-color: #000000;
	}

	.boxxe-white-fill {
		background-color: #FFFFFF;
	}

	.boxxe-grey-text {
		color: #6D7172;
	}

	#boxxe-navbar-logo {
		height: 25px;
	}

	h2, h3, h4, h5, h6 {
		margin-top: 1rem;
	}

	table ul {
		margin-bottom: 0;
	}

	.table-striped tbody tr:nth-of-type(odd) {
		background-color: rgba(125, 49, 137, 0.09);
	}

	a .card {
		color: #000000;
	}

/*
	2025-01-15 Change the card header/footers to faded blue. Not sure about this

	.card-header{
		background-color: #0050FF15;
	}

	.card-footer {
		background-color: #0050FF15;
	}
*/

	.dynamic-table {
		width: 100%;
	}
	/* Stop default bootstrap.css removal of card bottom margin if there's >1 column of cards */
	.card-deck .card {
		margin-bottom: 15px !important;
	}

/* Remove underline from card headers and footers - including hover states */
.card-deck a:hover
{
	text-decoration: none !important;
}

/* CAEP-2033 2025-01-15 Make buttons in card headers black. Might be too general, will see. */
.card-header button,
.card-header .btn {
	background-color: black !important;
}

	.card-header button:hover,
	.card-header .btn:hover {
		background-color: black !important;
		text-decoration: none !important;
	}

/* To fix nav pills */
.nav-pills .nav-link {
	background-color: #0050FF;
	color: white;
}

	.nav-pills .nav-link:hover {
		background-color: #0050FF;
		/* background-color: #a840b5;*/
		color: white;
	}

	.nav-pills .nav-link.active {
		background-color: #0050FF;
		/* background-color: #c757d5;*/
		color: white;
	}

/* Make non-active nav-pills links black instead of blue */
.nav-pills .nav-link:not(.active) {
	background-color: black !important;
	color: white !important;
}

	.nav-pills .nav-link:not(.active):hover {
		background-color: #333 !important;
		color: white !important;
	}

	.results-grid {
		border-top: 1px solid #e9e9e9;
		border-left: 1px solid #e9e9e9;
		padding: 0;
		width: 100%;
	}
	/* Gap at top of all admin tabs*/
	.tab-selected-content {
		padding-top: 20px;
	}

	.results-table {
		font-size: 11pt;
	}
	/* stop the rows from overflowing page */
	.results-grid .row {
		width: 100%;
		margin-left: 0px;
	}

	.results-grid-cell {
		/*border: 1px solid grey;*/
		padding: 10px !important;
		border-bottom: 1px solid #e9e9e9;
		border-right: 1px solid #e9e9e9;
	}

	.results-grid-cell-key {
		background-color: rgba(125, 49, 137, 0.09);
	}

	.mask-2fa {
		margin-top: -20px;
		height: 65px;
		/*	background-color: red !important;*/
		font-size: 42px;
		font-family: 'Roboto Mono', monospace;
		margin-bottom: 12px !important;
		border-bottom: 0 !important;
		padding-bottom: 0px;
		letter-spacing: 8px;
		/*	caret-color: transparent;*/
		/*caret: black underscore !important;*/

		color: #212529 !important;
		opacity: 0.75 !important;
	}

		.mask-2fa:focus {
			box-shadow: none !important;
		}
	/* Reduce the input width to control the width of the dashes */
	/* keep these two the same as in input#partitioned */
	input#partitioned.form-control.mask-2fa {
		width: 199px;
		margin-right: 0;
	}
	/* These 3 handle the dashes under the 2FA entry */
	#partitioned {
		/* center the content */
		display: inline-block;
		padding-left: 0px;
		padding-right: 0px;
		border: 0;
		background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
		background-position: bottom;
		/* width and thickness/height of the individual dashes */
		background-size: 33px 2px;
		background-repeat: repeat-x;
		background-position-x: 24px;
		/* controls the length of the input - long enough that the entered chars don't shuffled off to the left */
		/* keep these two the same as in input#partitioned.form-control.mask-2fa */
		width: 199px !important;
		min-width: 199px !important;
		outline: none;
	}

	#divInner {
		left: 0;
		position: sticky;
	}

	#divOuter {
		/* Truncates the input so that you can't see the dashes after the 6 */
		/*	width: 302px;*/
		overflow: hidden;
		margin-left: 8px;
		margin-top: 10px; /* moves the authenticator code text away from the entry code */
	}

	.label-2fa {
		/* hack to hide the label without the input disappearing */
		display: none;
	}

	.aggregations-selector-min-width {
		min-width: 120px;
	}

img.ni-logo {
	padding-right: 10px;
	max-height: 40px !important;
	margin-top: 5px !important;
	margin-bottom: 15px;
}

img.ni-network-intelligence-stacked {
	margin-top: 5px !important;
	max-height: 40px !important;
	margin-bottom: 15px;
}

.suggest-new-user-button {
	padding-top: 7px;
}

@media (max-width: 560px) {
		/* Reduce the padding/margins so there is more room for buttons */
		.main .top-row {
			margin: 0 !important;
			padding-left: 10px;
			padding-right: 10px;
		}
			/* Reduce the font and padding of the top row buttons and logo */
			.main .top-row .btn {
				font-size: 9pt !important;
				padding: 8px 5px 8px 5px !important; /* t r b l*/
			}

		.login-large-boxxe-logo {
			padding-top: 50px;
			width: 50% !important;
		}

		.large-boxxe-logo {
			padding-top: 0 !important;
			width: 60% !important;
			padding-bottom: 25px;
		}

		#boxxe-navbar-logo {
			padding-left: 6px;
			margin-bottom: 0px;
			height: 28px !important;
			/*		width: 80% !important;*/
		}
		/* Shrink the nucleus svg which has extra padding */
		.tile-nucleus-smaller {
			margin-top: -10px;
			margin-bottom: -10px;
			max-width: 35% !important;
		}
		/* Shrink the ni svg which has extra padding */
		.tile-ni-smaller {
			margin-top: -10px;
			margin-bottom: -10px;
			max-width: 50% !important;
		}
		/* Shrink the catalyst svg which has extra padding */
		.tile-catalyst-smaller {
			margin-top: -15px;
			margin-bottom: -15px;
			max-width: 40% !important;
		}
		/* Force the logged in user's email address to disappear, to prevent using up the row space. Show Account instead */
		.main .show-user-email {
			display: none;
		}

		.main .show-account {
			display: normal;
		}

		.admin-button {
			/* different to help-button because the button type is a link so need to fix a few things */
			/*		margin-left: 4px !important;*/
			margin-right: 12px !important;
			/*	box-shadow: none !important;*/
		}

		.top-nav-dropdown-menu {
			left: -47px;
			right: -10px;
			/*		padding-left: 4px;*/
			/*		padding-right: 4px;*/
		}

		.top-nav-dropdown-adjust-profile {
			padding-left: 3px !important;
		}

		.top-nav-dropdown-adjust-updates {
			padding-left: 3px !important;
		}

		.top-nav-dropdown-adjust-logout {
			padding-left: 3px !important;
		}

		div.dropdown-menu.show.top-nav-dropdown-menu {
			/*	stop the menu from pushing over the right edge and adding a scrollbar	*/
			/*		min-width: 103px !important;*/
		}

		.new-notifications-modal .new-notification-publish-date {
			font-size: 11px;
			vertical-align: unset;
		}
		/* Reduce the size on devices */
		h1 {
			font-size: 1.6rem;
		}
		/* Reduce the size on devices */
		h4 {
			font-size: 1.1rem;
		}
		/* Add padding within the container as seen on the login page */
		.main .container {
			padding-top: 5px !important;
		}
		/* Remove padding within the content as seen after login page */
		.content {
			padding: 0 !important;
		}
		/* Force the tenant and application dropdowns on to separate rows*/
		.app-cards-dropdown {
			min-width: 300px;
		}

		.main .row .col {
			margin-top: 0 !important;
			font-size: smaller; /* Note: CAEP-544 Reduces table row size on small devices - can be moved further up dom if other text reductions removed */
		}

		.main .row select {
			margin-bottom: 5px !important;
		}
		/* Reduce size of tab headings on Admin->Settings page */
		.nav-item {
			font-size: 9pt;
			padding: 6px;
		}
		/* Add bottom padding so if delete button follows it, there is a gap. */
		.edit-button {
			margin-bottom: 5px;
		}

		.buttons-float-right {
			text-align: center !important;
		}

		.card-deck {
			width: 100%;
		}

		.chart-widget, .table-widget {
			max-width: 100% !important;
		}

		#components-reconnect-modal h5 {
			font-size: 19px !important;
		}
	}

	@media (min-width: 560.02px) {
		.main .top-row > a {
			margin-left: 1.5rem;
		}

		.main .show-user-email {
			display: normal;
		}

		.main .show-account {
			display: none;
		}

		.buttons-float-right {
			float: right;
		}
	}

	@media (max-width: 767.98px) {
		.main .top-row {
			display: none;
		}
		/* Gap at top of all admin tabs*/
		.tab-selected-content {
			padding-top: 15px !important;
		}

		.hide-on-device {
			display: none;
		}
		/*.show-on-device {
		display: normal;
	}*/

		.results-grid-cell-key {
			padding: 5px !important;
		}

		.results-grid-cell-value {
			font-size: 11pt !important;
			padding: 5px !important;
			/*padding-bottom: 15px !important;*/
		}
		/* reduce the font size of text in the results table on each admins tab */
		.results-table {
			font-size: 11pt;
		}
		/* reduce the magnifying icon size on the front page cards */
		.appcard .fa-5x {
			font-size: 22pt;
		}
	}

	@media (min-width: 768px) {
		app {
			flex-direction: row;
		}

		.sidebar {
			width: 250px;
			height: 100vh;
			position: sticky;
			top: 0;
		}

		.main .top-row {
			position: sticky;
			top: 0;
		}

		.main > div {
			padding-left: 2rem !important;
			padding-right: 1.5rem !important;
		}

		.navbar-toggler {
			display: none;
		}

		.sidebar .collapse {
			/* Never collapse the sidebar for wide screens */
			display: block;
		}

		.show-on-large {
			display: normal;
		}

		.hide-on-large {
			display: none;
		}

		.results-table-cell-value {
			/*font-size: 11pt !important;*/
		}
	}
	/* reduce left margin on the tenant-app li items */
	.user-tenant-apps {
		padding-inline-start: 15px !important;
	}

	.input-group {
		margin-top: 1rem;
	}

		.input-group > .input-group-prepend {
			flex: 0 0 20%;
		}

		.input-group > .input-group-append {
			flex: 0 0 0 20%;
		}

		.input-group > .input-group-prepend > .input-group-text {
			width: 100%;
		}

		.input-group > .input-group-append > .input-group-text {
			width: 100%;
			margin-bottom: 0;
		}

	.setting-value {
		font-family: 'Roboto Mono', monospace;
	}

	.tenantapp-config {
		font-family: 'Roboto Mono', monospace;
		font-size: 16px;
	}

	.appcard {
		width: 14em;
	}

	.issue_ready-for-test {
		background-color: lightyellow;
	}

	.issue_closed {
		background-color: lightgreen;
	}

	.issue_future-release {
		font-style: italic;
	}
	/* Catalyst Converter*/

	.cc-config-text {
		font-family: Lucida Console,Lucida Sans Typewriter,monaco,Bitstream Vera Sans Mono,monospace;
		width: 100%;
		text-align: left;
	}

	.cc-target-spacer {
		margin-top: 6px;
	}
	/* Sites */

	.ui-log {
		overflow-y: scroll;
		resize: none;
		font-family: Courier New, Courier, monospace;
	}

	.analysis-modal {
		overflow-y: scroll;
		resize: none;
	}

	.file-import-modal-buttons {
		width: 100px;
	}
	/* TOASTER Overrides */
	#toast-container > div {
		padding: 15px 15px 15px 50px;
		width: 25em
	}

	@media all and (max-width:240px) {
		#toast-container > div {
			padding: 8px 8px 8px 50px;
			width: 11em
		}

			#toast-container > div.rtl {
				padding: 8px 50px 8px 8px
			}

		#toast-container .toast-close-button {
			right: -.2em;
			top: -.2em
		}

		#toast-container .rtl .toast-close-button {
			left: -.2em;
			right: .2em
		}
	}

	@media all and (min-width:241px) and (max-width:480px) {
		#toast-container > div {
			padding: 8px 8px 8px 50px;
			width: 18em
		}

			#toast-container > div.rtl {
				padding: 8px 50px 8px 8px
			}

		#toast-container .toast-close-button {
			right: -.2em;
			top: -.2em
		}

		#toast-container .rtl .toast-close-button {
			left: -.2em;
			right: .2em
		}
	}

	@media all and (min-width:481px) and (max-width:768px) {
		#toast-container > div {
			padding: 15px 15px 15px 50px;
			width: 25em
		}

			#toast-container > div.rtl {
				padding: 15px 50px 15px 15px
			}
	}

	@media print {
		.pagebreak {
			page-break-before: always;
		}
		/* page-break-after works, as well */
	}

/*	 Fix NI logo alignment between 514-560px */
	@media (min-width: 1200px) {
		img.ni-logo {
			margin-top: 5px;
		}

		img.ni-network-intelligence-stacked {
			margin-top: 5px !important;
		}

		.suggest-new-user-button {
/*			vertical-align: top;*/
			margin-top: -12px !important;
			padding-top: 0 !important;
		}
	}

/* Reduce font sizes on smaller devices */
@media (max-width: 1200px) {
	div.content {
		padding: 8px !important;
		/*		margin: 8px;*/
	}

	h1 {
		font-size: 26px !important;
		/*		background-color: red;*/
	}
	/* Moved to nucleus, was breaking NI widget piecharts layout on small devices */
	/*	.container {
		font-size: smaller;
	}*/

	img.nucleus-logo {
		width: 75px;
	}

}