.container {
	max-width: 1199px !important;
}

.btn {
	border-radius: 3px !important;
}

.btn-group {
	border-radius: 3px !important;
}

h2 {
	font-size: 19px;
	padding-bottom: 5px;
}

p small, p.small {
	font-size: 13px;
}

.text-secondary {
	color: #666666 !important;
}

.consolidated-xlsx-btn {
	padding-bottom: 5px !important;
	width: 200px !important;
}

.circle-tick {
	height: 8px;
	width: 8px;
	border-radius: 5px;
	display: inline-block;
	margin-top: 5px;
}

.missing-sn-button {
	border-radius: 5px;
}

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

.export-dropdown-toggle.btn-primary.dropdown-toggle {
	/* Hide the blue button outline when menu open */
	box-shadow: none !important;
	/*	background-color: #0050FF !important;*/
}

	.export-dropdown-toggle.btn-primary.dropdown-toggle:focus {
		/*		background-color: #0050FF !important;*/
		/* Make the blue outline disappear after losing focus */
		box-shadow: none !important;
	}

.export-dropdown-menu {
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 0;
	/*	margin-bottom: 0 !important;*/
	border-top: 0;
	top: 28px;
	left: -180px !important;
	min-width: 100% !important;
	border-radius: 0;
	border-top-width: 1px !important;
	border-top-style: solid;
	border-top-color: rgba(0, 0, 0, 0.15);
	font-size: 15px;
	/*background-color: #0050FF;*/
}

/* This reduces the wrapper BSDropdownItem from filling the whole row, so only the button will trigger action */
.export-dropdown-menu-item {
	width: 0;
	padding: 0;
}

.export-dropdown-menu-hr {
	/*	padding-left: 10px;
	padding-right: 10px;
	color: black;*/
}

.chart-widget-body {
	height: 191px; /* force height to stay the same when switching between pie and barchart */
}

.chart-widget {
	/* This forces the report view tables to auto-shift to new rows, if screen size reduced */
	/* not sure why I have to lock the width, otherwise ignored */
	
	/* As part of the boxxe rebrand, having changed the font from Raleway to Poppins, the widget */
	/* widths dropped from 368px width so for now I am using that (plus the border pixles) to mimix last brand */
	/*
		min-width: 26em;
		max-width: 26em;

	*/
	min-width: 368px;
	max-width: 368px;
}

	.chart-widget .card-header {
		height: 55px !important;
	}

.piechart-stop-disappearance-and-overflow-fixes {
	/* https://github.com/mariusmuntean/ChartJs.Blazor/issues/128 */
	/* 2024-10-28 Sometimes the height and/or width properties of canvas element and/or the same in the style drop to zero */
	width: 175px !important;
	height: 175px !important;

	/* The legend column can slightly overlap the piechart column, which then wraps a few legend fields. */
	/* I can't always use the absolute fix there because multi-row tr's condense down to one row */
	/* Instead, I can apply the absolute to the piechart col, since that resolves down to the same row */
	/* effectively sitting on top of the overlapped legend col, so everything looks correct */
	position: absolute;
}

.chart-content .row {
	margin: 0;
}

.chart-content canvas {
	width: 100% !important;
	height: 100% !important;
}

.card-title,
.card-subtitle,
.chart-widget--title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.chart-widget .chart-widget-title {
	font-size: 16px;
}

.chart-widget .chart-widget-subtitle {
	font-size: 12px;
}

.legend-table {
	/* Simple workaround to prevent center-donut text from appearing too low in some widgets, because its position is relative to the height of this table */
	margin-bottom: -20px !important;
	height: 185px !important;
}

	.legend-table td {
		padding: 0;
		padding-right: 0.5em;
		font-size: 0.7em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

.widget-legend-table-row-values {
	font-size: 1.0em;
}

.widget-legend-percentages {
	/* make the text less bold */
	font-weight: 500;
	/* make the text less tall */
	font-size: 0.92em;
	padding-left: 2px;
}

.piechart-center-prefix {
	padding-right: 1px;
}

.piechart-center-suffix-row-br {
	line-height: 12px !important;
/*	padding: 0px !important;*/
	padding-top: 2px;
}

.piechart-center-suffix-row {
	padding: 0 !important;
	font-size: 0.7em;
}

.legend-table-allow-overflow {
	/* Allow text to overflow the piechart a little for sentences that are just over the width of the cell */
	position: absolute;
}

.bar-chart-container {
	/* This ensures the dashboard single col has a height, so that the bar-chart canvas has a value to stretch its 100% height to. */
	/* .barchart-maintain-aspect-ratio-fix is also critical for the div that wraps the barchart */
	height: 135px;
}

/* https://github.com/mariusmuntean/ChartJs.Blazor/issues/128 */
/* 2024-02-21 After upgrading to the latest fork, barcharts won't render when maintainaspectratio is set to false, unless apply this to wrapper div */
.barchart-maintain-aspect-ratio-fix {
	position: relative;
	height: 135px;
}

.bar-chart-container-with-y1 {
	margin-left: 12px;
}

.bar-chart-container-with-y1-y2 {
	margin-left: 12px;
	margin-right: 15px;
}

.bar-chart-container-without-y{

}

.barchart-y1-description {
	font-size: 8pt;
	position: absolute;
	top: -5px;
	left: -3px;
	writing-mode: vertical-lr; /* This gets the text vertical but top down */

	/* and these then make bottom up */
	-webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */
	transform: rotate(-180deg);

	white-space: nowrap;
	height: 115px !important; /* This must be just beyond the longest widget text len! */
	text-align: center !important;

/*	border-color: red;
	border-width: 1px;
	border-style: solid;*/
}

	.barchart-y1-description i {
		color: gray;
		padding-right: 2px;
		font-size: 8px;
		vertical-align: baseline;
	}

.barchart-y2-description {
	font-size: 8pt;
	position: absolute;
	color: gray;
	top: -5px;
	right: -0px;
	writing-mode: vertical-lr; /* This gets the text vertical but top down */

	/* and these then make bottom up */
	-webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */
	transform: rotate(-180deg);

	white-space: nowrap;
	height: 115px !important; /* This must be just beyond the longest widget text len! */
	text-align: center !important;

/*	border-color: red;
	border-width: 1px;
	border-style: solid;*/
}

	.barchart-y2-description i {
		color: black;
		font-size: 6px;
		vertical-align: baseline;
	}

.bar-chart-legend {
	height: 22px !important;
	position: relative;
	margin-bottom: 2px;
	left: 35px;
	top: 3px;
	font-size: 15px;
	line-height: 110% !important;
	height: 38px !important;
}

.bar-chart-legend-entry {
	display: inline-block;
	width: 150px !important;
	padding: 0;
	padding-top: 0px !important;
	padding-right: 0.9em;
	vertical-align: top !important;
	font-size: 0.8em;
	white-space: nowrap;
	overflow: hidden;
	/*text-overflow: ellipsis;*/
}


.widget-footer-note1 {
	position: absolute;
	top: 152px;
	left: 10px;
}

.widget-footer-note2 {
	position: absolute;
	top: 196px;
	left: 10px;
}

.widget-footer-note-title {
	font-weight: bold;
	font-size: 13px;
}

.widget-footer-note-value {
	font-size: 13px;
}

.widget-org-region {
	position: absolute;
	left: 0px;
/*	padding-right: 13px;*/
	top: 75px;
	width: 100%;
	text-align: center;
}

.widget-org-region-value {
	display: inline-block;
	font-size: 20px;
/*	padding-top: 10px;*/
	padding-bottom: 10px;
	vertical-align: text-bottom !important;
}

.widget-5yfv-assessment {
	left: 0px;
	position: absolute;
	top: 75px;
	width: 100%;
	text-align: center;
}

.widget-org-globe {
	text-shadow: 0 0 2px #000;
}

.widget-configs-download-description {
	margin-top: -10px !important;
	margin-bottom: 0;
	font-size: 14px;
}

.widget-configs-download-image {
	margin-top: -10px;
	text-shadow: 0 0 2px #000;
}

.widget-configs-download-button{
	margin-top: 15px;
}

.energy-footer-feedback-messages {
	align-content: center;
}

.donut-text {
	font-weight: bold;
	font-size: 1.5em;
	top: 85px;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	transform: translateY(-50%);
}

.left-legend-img-holder {
	font-weight: bold;
	font-size: 1.5em;
	top: 85px;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	transform: translateY(-50%);
}

.left-legend-img {
	height: 130px;
}

.center-img-holder {
	font-weight: bold;
	font-size: 1.5em;
	top: 85px;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	vertical-align: middle;
	position: absolute;
	transform: translateY(-50%);
}

.center-img {
	height: 130px;
}

.relative-container{
	position: relative;
	padding: 0 !important;
	margin: 0 !important;
}

.toggled-widget-front {
	position: absolute;
	top: 0;
	z-index: 2;
	width: 100% !important;
}

.toggled-widget-back {
	position: absolute;
	top: 0;
	z-index: 1;
}

.widget-toggle-1-pixel-x-filler {
	/* This is a hack to stop all of the absolute positioned widgets appearing overlaid like a spread pack of cards */
	/* This 1-pixel hr pushes the relatively positioned card width out to where it would normally be, so that the */
	/* card-deck can move dynamically as normal */
	/* Importantly, by being 1 pixel, when used with the 1px y line, the contents of the card are not covered and remain clickable */
	position: relative;
	z-index: 3;
	width: 398px;
	height: 1px;
	/* Use this to make it more obvious what's going on */
	/*	background-color: red;*/
}

.widget-toggle-1-pixel-y-filler {
	/* This is a hack to stop all of the absolute positioned widgets appearing overlaid like a spread pack of cards */
	/* This 1-pixel veritcal hr pushes the relatively positioned card height out to where it would normally be, so that the */
	/* card-deck can move dynamically as normal */
	/* Importantly, by being 1 pixel, when used with the 1px x line, the contents of the card are not covered and remain clickable */
	position: relative;
	z-index: 3;
	width: 1px;
	/* The height of the widget plus the gap under it needs to be 248px, this is the y filler line (236) plus the toggle*/
	/* button under it (26??), which is then moved up */
	height: 236px;
	/* Use this to make it more obvious what's going on */
/*	background-color: red;*/
}

.widget-toggle {
	position: relative;
	/* The toggle is rendered underneath .widget-toggle-1-pixel-x-filler, so needs moving up a bit to be inside the widget */
	top: -18px;
	left: 23px;
	z-index: 2;
	width: 200px;
	height: 26px;
	/*	background-color: yellow;*/
}

	/* Remove the glow around toggle when has focus but not set */
	.widget-toggle .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
		border-color: darkgrey;
		outline: none;
		box-shadow: none;
	}

	/* Remove the glow when checked */
	.widget-toggle .custom-control-input:checked ~ .custom-control-label::before {
		background-color: #0050FF;
		border-color: #0050FF;
		outline: none;
		box-shadow: none;
	}

.widget-toggle-text {
	padding-top: 2px;
	font-size: 14px;
	color: grey;
	user-select: none;
}

.energy-usage-ellipsis-switch {
	/* absolute only on the network name (RH Note how the table didn't need absolute */
	/*	position: absolute;*/
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	width: 265px !important; /* Specify width in % etc using calc method */
	max-width: 265px;
}

.energy-usage-ellipsis-network {
	position: absolute;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	width: 340px !important; /* Specify width in % etc using calc method */
	max-width: 340px;
}

.table-energy-usage-ellipsis-switch-network {
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	width: 290px !important; /* Specify width in % etc using calc method */
	max-width: 290px;
}

.table-energy-usage-ellipsis-top5 {
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	width: 290px !important; /* Specify width in % etc using calc method */
	max-width: 290px;
}

.table-energy-usage-ellipsis-top5-report-view {
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	width: 140px !important; /* Specify width in % etc using calc method */
	max-width: 140px;
}

.energy-usage-relative-table
{
	margin-top: -3px !important;
}
	.energy-usage-relative-table td {
		vertical-align: middle !important;
		padding-bottom: 5px !important;
	}

/*.energy-usage-relative-title {
	text-align: center;
	padding-bottom: 10px !important;
}*/

.energy-usage-relative-icon {
	margin-left: -2px;
	color: #30B601;
	text-align: center !important;
	vertical-align: middle;
	width: 35px;
}

.energy-usage-relative-text {
	width: 100%;
}

.energy-usage-relative-values {
	text-align: right;
	font-weight: bold;
}

.combined-power-users-table {
	margin-top: -5px;
	font-size: 12px;
	line-height: 0px;
}

.combined-power-users-table td {
	padding: 12px 12px 6px 12px;
}

.combined-power-users-index {
	padding-left: 16px !important;
}

.combined-power-users-name {
	/* KEEP for the ellipsis to work. absolute only on the email name (RH Note how the table didn't need absolute */
	/*	position: absolute;*/
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	width: 290px !important;
	max-width: 290px;
}

.combined-power-users-email {
	position: absolute;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	width: 340px !important;
	max-width: 340px;
	font-size: 11px !important;
}

.combined-power-customers-table {
	margin-top: -5px;
	font-size: 12px;
	line-height: 0px;
}

	.combined-power-customers-table td {
		padding: 12px 12px 6px 12px;
	}

.combined-power-customers-index {
	padding-left: 16px !important;
}

.combined-power-customers-name {
	/* KEEP for the ellipsis to work. absolute only on the email name (RH Note how the table didn't need absolute */
	/*	position: absolute;*/
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	width: 290px !important;
	max-width: 290px;
}

.combined-power-customers-email {
	position: absolute;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	width: 340px !important;
	max-width: 340px;
	font-size: 11px !important;
}

.stale-dashboard-header {
	line-height: 37px;
	padding-top: 4px;
	padding-bottom: 4px;
}

.sitewide-message-dashboard-header-border {
	border-width: 1px !important;
	border-color: orange !important;
}

.sitewide-message-dashboard-header {
	line-height: 37px;
	padding-top: 4px;
	padding-bottom: 4px;
}

@keyframes rotating {
	0% {
		transform: rotate(0deg) translate(0,0);
	}

	100% {
		transform: rotate(8deg) translate(0,3px);
	}
}

span .widget-leaf {
	/*	animation: rotating 2s linear infinite alternate !important;*/
	position: absolute;
	top: -4px;
	left: 60px;
	padding-right: 50px;
	color: #30B601;
	font-size: 22px;
	animation-name: rotating;
	animation-duration: 1s;
	/*	animation-delay: 10s;*/
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
	padding: 0;
}

	span .widget-leaf:hover {
		cursor: pointer;
		font-size: 23px;
		top: -5px;
		left: 59px;
	}

.green-leaf {
	color: #30B601;
}

.selected-items-processor-modal {
/*		width: 100px;*/
/*	padding-left: 200px !important;*/
/*	padding-right: 200px !important;*/
}

.selected-items-processor-modal h4 {
	margin-top: 5px;
	margin-bottom: 20px;
}

.selected-items-processor-modal .input-text {
}

.selected-items-processor-modal .selected-items-processor-apply-button-note {
	float: left;
	position: absolute;
	left: 15px;
	font-size: smaller;
}

.selected-items-processor-empty-table {
	height: 260px;
	border: 1px solid #ced4da;
	padding: 0 !important;
	margin: 0 !important;
}

/* Fixed header table container without scrollbars */
.selected-items-processor-table-fixed-header-container.table-responsive {
	border: 1px solid #ced4da;
	height: 32px;
	max-height: 32px;
	overflow: hidden;
}

/* Adds scrollbars - table-responsive is a bootstrap class, and restricted to the container */
.selected-items-processor-table-container.table-responsive {
	height: 228px;
	border: 1px solid #ced4da;
}

.selected-items-processor-table {
	border: 1px lightgray solid;
	font-size: smaller;
	margin-bottom: 0px;
}

	.selected-items-processor-table td {
		vertical-align: top;
		padding-left: 5px;
		padding-right: 5px;
	}

	.selected-items-processor-table button {
		width: 85px;
	}

	/* Hide the left/top/right cell borders that overlap with the table */
	.selected-items-processor-table .left-cell {
		border-left-width: 0;
		vertical-align: middle;
	}

	.selected-items-processor-table .right-cell {
		border-right-width: 0;
	}

	.selected-items-processor-table .expand-width {
		display: table-cell;
		width: 100%;
	}

	.selected-items-processor-table tr:first-child td {
		border-top-width: 0;
	}

.selected-items-processor-sort-direction-icon-active {
	padding-left: 4px !important;
}

.selected-items-processor-sort-direction-icon {
	color: darkgrey;
	padding-left: 4px !important;
}

.selected-items-processor-header {
	text-align: center;
	white-space: nowrap !important;
	/*	overflow: hidden;
	text-overflow: ellipsis;*/
}

.selected-items-processor-row {
	white-space: nowrap !important;
	min-width: 60px;
}

.selected-items-processor-sort-button, .selected-items-processor-sort-button:hover, .selected-items-processor-sort-button:focus, .selected-items-processor-sort-button:active {
	background-color: white !important;
	color: black !important;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.widget-selected-items-processor-button {
	position: absolute;
	top: 205px;
	left: 8px;
	border-radius: 3px !important;
}

.emission-savings-footer-header {
	/* basicly remove the bold */
	font-weight: 500 !important;
	font-size: 11px !important;
	/* Shift the text down */
	position: relative;
	top: 9px;
}

.emission-savings-footer-text {
	font-size: 11px !important;
	/* Shift the text down */
	position: relative;
	top: 6px;
}

/* Start of Assure widget tweaks */

.ni_assure_logo_reposition {
	position: relative;
	height: 110px !important;
	top: -25px !important;
}

.assure-footer-text-row2 {
	position: relative;
	font-size: 12px !important;
	/* Shift the text down */
	position: relative;
	top: 10px;
}

.assure-footer-text-row3 {
	/* basicly remove the bold */
	font-weight: 500 !important;
	font-size: 12px !important;
	/* Shift the text down */
	position: relative;
	top: 7px;
}

.assure-footer-text-row4 {
	font-size: 12px !important;
	/* Shift the text down */
	position: relative;
	top: 4px;
}

/* End of Assure widget tweaks */

/* Start of Assessment widget tweaks */

.assessment-5yfv-logo-reposition {
	position: relative;
	height: 115px !important;
	top: -28px !important;
	left: -295px;
	padding-right: 8px;
}

.assessment-5yfv-footer-text {
	position: relative;
	font-size: 12px !important;
	/* Shift the text down */
	left: 60px;
}

.assessment-5yfv-footer-text-row1 {
	top: -20px;
	padding-right: 15px;
}

.assessment-5yfv-footer-text-row2 {
	top: -22px;
	padding-right: 15px;
}

.assessment-5yfv-footer-text-row3 {
	top: -24px;
	padding-right: 15px;
}

.assessment-5yfv-footer-text-row4 {
	top: -26px;
	padding-right: 15px;
}

.assessment-5yfv-button {
	position: relative;
	left: 60px;
	top: -22px;
}

/* End of Assessment widget tweaks */
/* Exclusions modal - add search icon to the search input */
.input-group {
	margin-top: 1rem;
}

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

	.input-group input {
		border-color: #ced4da;
		border-top-left-radius: 3px;
		border-bottom-left-radius: 3px;
	}

	.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;
	}

.table-widget {
	/* This forces the report view tables to auto-shift to new rows, if screen size reduced */
	/* not sure why I have to lock the width, otherwise ignored */
	/* width: 14em; */
	min-width: 23em;
	max-width: 23em;
}

	.table-widget td {
		padding-top: 0 !important;
		padding-bottom: .7rem !important;
	}

	.table-widget .table-left-col {
		padding-left: 10px;
		padding-right: 0;
	}

	.table-widget .table-right-col {
		padding-left: 0;
		padding-right: 10px;
	}

	.table-widget .card-header {
		height: 55px !important;
	}

.table-content .row {
	margin: 0;
}

.table-content canvas {
	width: 100% !important;
	height: 100% !important;
}

.section-logos-boxxe-labs {
	margin-top: 2px;
	width: 4rem;
	margin-bottom: 4px;
	padding-right: 5px;
}

.section-logos-cisco-enterprise {
	/*	border-radius: 3px;*/
	margin-top: 2px;
	width: 2rem;
	height: 2rem;
	margin-bottom: 4px;
	padding-right: -100px;
}

.section-logos-cisco-meraki {
	border-radius: 3px;
	width: 1.4rem;
	height: 1.4rem;
	margin-bottom: 4px;
}

.card-company-title {
	/*	text-align: center !important;*/
	font-weight: bold !important;
	font-size: 18px;
	color: #0050FF;
	/*	background-color: rgba(125,49,137,.3);*/
	padding-top: 8px;
	padding-left: 8px;
	/*	border-radius: 3px;*/
	border-bottom: 1px solid lightgrey;
}

	.card-company-title ~ .card-company-title {
		padding-top: 18px;
	}

.report-view-company-title {
	/*	text-align: center !important;*/
	font-weight: bold !important;
	font-size: 18px;
	color: #0050FF;
	/*	background-color: rgba(125,49,137,.3);*/
	padding-top: 24px;
	padding-left: 8px;
	/*	border-radius: 3px;*/
	border-bottom: 1px solid lightgrey;
}

.card-title,
.card-subtitle,
.table-widget--title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.table-widget .table-widget-title {
	font-size: 17px;
}

.table-widget .table-widget-subtitle {
	font-size: 13px;
}

.legend-table {
	/* Simple workaround to prevent center-donut text from appearing too low in some widgets, because its position is relative to the height of this table */
	margin-bottom: -20px !important;
}

	.legend-table td {
		font-size: 13px !important;
	}

.exclude-cae-checkbox {
	color: #0050FF;
}

.full-width-col {
	width: 100%;
}

.logging-jobs-radio-btn {
	padding-left: 0px;
	padding-right: 0px;
	width: 100px;
}

.logging-jobs-radio-btn-all {
	width: 70px !important;
}

.logging-jobs-radio-circle {
	padding-left: 5px;
	color: #0050FF;
}

.status-board-radio-btn {
	padding-left: 0px;
	padding-right: 0px;
	width: 100px;
}

.status-board-radio-btn-all {
	width: 70px !important;
}

.status-board-radio-circle {
	padding-left: 5px;
	color: #0050FF;
}

.status-board-new {
	color: orange;
}

.status-board-offline {
	color: red;
}

.status-board-online {
	color: lightgreen;
}

.table-service-request-created .col {
	padding: 0 !important;
	font-size: 14px;
}

.table-service-request-created .left-col {
	text-align: right;
}

.table-service-request-created .right-col {
	text-align: left;
	padding-left: 5px !important;
}

.table-service-request-created-servicenow{
	padding-left: 34px;
}

.add-license-modal-table {
	width: 100% !important;
	margin-bottom: 20px;
	font-size: 11pt;
}

	.add-license-modal-table th {
		/*		padding-top: 0 !important;
		padding-bottom: .7rem !important;*/
		text-align: right;
		background-color: #E9ECEF;
		padding-right: 10px;
	}

	.add-license-modal-table tr {
		width: 100%;
	}

	.add-license-modal-table td {
		/*		padding-left: 10px;
		padding-right: 0;*/
		padding-right: 10px;
	}

	.add-license-modal-table .table-tally-col {
		/*		padding-left: 0;
		padding-right: 10px;*/
		text-align: right;
	}

	.add-license-modal-table .exceeds-license-count {
		font-weight: bold;
		color: red;
	}

/* On mobile, the two halves of the logo need to wrap,
		so img is split.
	*/
.ni-logo {
	max-height: 25px;
}

.ni-network-intelligence-stacked {
	max-height: 25px;
}

/* For all screens that aren't dashboard, the images don't need to wrap until xs */
.ni-logo-network {
	max-height: 25px;
}

.ni-logo-intelligence {
	max-height: 25px;
}

.dashboard-section-button-group {
	margin-top: 15px;
	/*	align-content: center;*/
	margin-bottom: 15px;
}

.dashboard-section-button {
	width: 150px;
	margin-top: 6px;
	margin-left: 6px !important;
	border-radius: 5px;
	background-color: black !important;
	padding-left: 0px !important;
	padding-right: 0px !important;
}

/*	 Remove the light blue border around the buttons */
	.dashboard-section-button:focus, .dashboard-section-button:active {
		outline: none !important;
		box-shadow: none !important;
		background-color: #0050FF !important;
	}

button.btn.btn-primary.dashboard-section-button.active {
	/*background-color: #2f00ff;*/ /*Darker royal blue? */
	background-color: #0050FF !important;
}

.dashboard-section-icons {
	font-size: 12px;
}

.agent-logging-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;
}

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

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

.agent-logging-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);
}

	.agent-logging-accordion-card-header h5 {
		margin: 0;
/*		vertical-align: !important;*/
	}

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

	.agent-logging-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;
	}

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

.agent-logging-accordion-card-body {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	padding: 1.25rem;
	padding-bottom: 0;
	font-size: 12px;
}

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

/* 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. */
.agent-logging-accordion-card .collapsing {
	transition: none !important;
}

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

.agent-logging-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 */
.agent-logging-accordion-card-header-avoid-icon-jitter-label {
	position: absolute;
	left: 2.8em !important;
}

.agent-logging-accordion-card-header-avoid-icon-jitter {
	position: absolute;
	left: 2.4em !important;
/*	font-size: 11pt;*/
}

.agent-logging-task-header th {
	vertical-align: middle !important;
	padding: 8px;
}

.agent-logging-change-state {
	/*	padding: 0 !important;*/
}

.agent-logging-status-ok {
	color: lightgreen;
}

.agent-logging-status-error {
	color: red;
}

.agent-logging-status-warning {
	color: orange;
}

.agent-logging-status-unset {
	color: white;
}

.agent-logging-chart-icon {
	font-size: 15px;
	padding-right: 4px;
	vertical-align: middle;
}

.agent-logging-fixed-error-width {
	word-break: break-word;
	max-width: 300px;
	overflow-wrap: break-word;
}

.table-component-accordion-expanded-row td:first-child {
	padding-right: 0;
	background-color: white !important;
}

/* These 3 are instead of table-component-accordion-expanded-row when in report view so that fit in widget */
.table-component-accordion-expanded-row-report-view th {
	font-size: 10px;
}

.table-component-accordion-expanded-row-report-view td {
	font-size: 10px;
}

	.table-component-accordion-expanded-row-report-view td:first-child {
		padding-right: 0;
		background-color: white !important;
	}

.table-component-accordion-toggle-button {
	color: #495057;
}

.table-component-accordion-nested-table{
	font-size: 14px;
	line-height: 14px;
}

	.table-component-accordion-nested-table tr {
		background-color: white !important;
	}

	.table-component-accordion-nested-table tr td:first-child {
		background-color: white !important;
	}




@media (min-width: 560px) {
	/* I don't entirely understand why this fix is necessary, but without the below
		the card-deck shifts left 16px if the card-deck doesn't wrap on to a new row
		so you'll see shifting if one tab does and the next doesn't. Setting the padding
		fixes it
	*/
	div .card-deck.justify-content-center {
		padding-left: 16px !important;
		padding-right: 18px;
	}
}

@media (max-width: 1050px) {

	.ni-logo {
		float: left;
		max-height: 25px;
	}

	.ni-network-intelligence-stacked {
		margin-top: -10px !important;
		max-height: 25px;
	}
}

@media (max-width: 560px) {
	.main .row .col {
		font-size: 13px;
	}

	.card-deck {
		padding-left: 5px !important;
		padding-right: 5px !important;
	}

	/*  For xs, images wrap and need to squeeze up next to the button on their right.
	*/
	.ni-logo {
		float: left;
		margin-top: 5px !important;
/*		max-height: 17px;*/
		max-width: 140px;
		/*		margin-left: -5px !important;*/
	}

	.ni-network-intelligence-stacked {
		margin-top: -2px !important;
/*		max-height: 17px;*/
		max-width: 192px;
		/*		margin-left: -5px !important;*/
	}

	h5 {
		font-size: 1rem !important;
	}

	.card-subtitle {
		font-size: 12px !important;
	}

	.report-card-h2 {
		padding-left: 5px;
	}

	.legend-table td {
		font-size: 13px !important;
	}

	.col {
		/* Disabled - Stopped card contents from exceeding the card width on report view page */
		/*		padding-right: 5px;
		padding-left: 5px;*/
	}

	.donut-text {
		font-size: 23px !important;
	}

	.export-dropdown-menu {
		left: 0;
	}

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

	/* For all screens that aren't dashboard, the images don't need to wrap until xs */
	.ni-logo-network {
		max-height: 25px;
	}

	.ni-logo-intelligence {
		max-height: 25px;
	}

	.dashboard-section-button {
		margin-top: 6px;
		margin-left: 6px !important;
		width: 160px;
		border-radius: 5px;
	}

	/* Ryan 2024-05-14 I found these at the end of the media, wrapped in another matching media so maybe they haven't been in use? I'll comment them out */
	/* On mobile, the two halves of the logo need to wrap,
	so img is split.*/
	/*
	.ni-logo-network {
		max-height: 16px;
	}

	.ni-logo-intelligence {
		max-height: 16px;
	}*/

	.widget-toggle {
		left: 8px !important;
	}
}