/* 
 * Usage example (.css file and inline):
 * 
 * .my-css.class {
 *   color: var(--color-info);
 * }
 * 
 * <span style="color: var(--color-info)"></span>
 */

:root {
	--color-primary-light: #a10f6e;
	--color-primary-medium: #820c59;
	--color-primary-dark: #630944;
	--color-primary-disabled: #cb92b7;
	--color-primary-background: #c082a8;
	--color-primary-background-darker: #ae6291;
	--color-primary-background-light: #efdde8;

	--color-neutral-black: #000000;
	--color-neutral-super-dark: #333333;
	--color-neutral-dark: #555555;
	--color-neutral-darker: #9b9b9b;
	--color-neutral-medium-dark: #bbb;
	--color-neutral-medium: #ccc;
	--color-neutral-lighter: #e6e6e6;
	--color-neutral-light: #eee;
	--color-neutral-super-light: #f7f7f7;
	--color-neutral-white: #fff;

	--color-primary-05: #a10f6e0c;
	--color-primary-20: #a10f6e33;
	--color-neutral-black-80: rgba(0, 0, 0, 0.8);
	--color-neutral-black-60: rgba(0, 0, 0, 0.6);
	--color-neutral-black-40: rgba(0, 0, 0, 0.4);
	--color-neutral-black-20: rgba(0, 0, 0, 0.2);
	--color-neutral-medium-20: hsla(0, 0%, 60%, 0.2);
	--color-neutral-lighter-20: rgba(216, 221, 227, 0.15);
	--color-neutral-white-80: rgba(255, 255, 255, 0.8);
	--color-neutral-white-60: rgba(255, 255, 255, 0.6);

	--color-button-background: #eaeaea;
	--color-button-background-hover: #e1e1e1;
	--color-button-background-disabled: #f1f1f1;

	--color-border: #eee;
	--color-shadow: rgba(0, 0, 0, 0.2);
	--color-inset-shadow: rgba(0, 0, 0, 0.075);

	--color-error: #d11920;
	--color-warning: #eb7921;
	--color-attention: #deae2a;
	--color-success: #339966;
	--color-info: #428196;

	--color-error-background: #f8dfe0;
	--color-warning-background: #f8e7db;
	--color-success-background: #e0f9ed;
	--color-info-background: #dcf0f7;

	--color-warning-shadow: #eb792133;

	--color-plot-band-warning: #f6e7bf;
	--color-plot-band-violation: #f1cbcc;

	--color-plot-line-violation: #d11920;
	--color-plot-line-warning: #deae2a;
	--color-plot-line-correct: #339966;
	--color-connected: #66a5bd;

	--color-plot-line-violation-60: #d1192060;

	--color-quantile-plot-outer: #779aaf;
	--color-quantile-plot-inner: #2d556e;
	--color-quantile-plot-median: #000;

	--color-power-flow-arrow: #a10f6e;
	--color-path-to-feeder: #eb7921;

	--color-remove: #d11920;
	--color-add: #339966;
	--color-modify: #5a8199;

	--color-grid-0: #49c5ff;
	--color-grid-1: #67e63d;
	--color-grid-2: #fbe342;
	--color-grid-3: #ff6bcb;
	--color-grid-4: #69a6c5;
	--color-grid-5: #00d39e;
	--color-grid-6: #ff6700;
	--color-grid-7: #b654ff;
	--color-grid-8: #014f7a;
	--color-grid-9: #2d864c;
	--color-grid-10: #910024;
	--color-grid-11: #552799;

	/* Lighter shades for phases (Phase B) */
	--color-grid-0-shade1: #7dd6ff;
	--color-grid-1-shade1: #8ef069;
	--color-grid-2-shade1: #fdef79;
	--color-grid-3-shade1: #ff9adb;
	--color-grid-4-shade1: #91c1d7;
	--color-grid-5-shade1: #34e4b8;
	--color-grid-6-shade1: #ff8f34;
	--color-grid-7-shade1: #cc86ff;
	--color-grid-8-shade1: #3d7ba0;
	--color-grid-9-shade1: #5cae7a;
	--color-grid-10-shade1: #ba3c53;
	--color-grid-11-shade1: #7f5ab5;

	/* Lighter shades for phases (Phase C) */
	--color-grid-0-shade2: #b1e6ff;
	--color-grid-1-shade2: #b5faa1;
	--color-grid-2-shade2: #fef7b0;
	--color-grid-3-shade2: #ffc7eb;
	--color-grid-4-shade2: #b7dbe9;
	--color-grid-5-shade2: #77f0d1;
	--color-grid-6-shade2: #ffb86d;
	--color-grid-7-shade2: #e2b6ff;
	--color-grid-8-shade2: #74a8c5;
	--color-grid-9-shade2: #8ad8a9;
	--color-grid-10-shade2: #e47382;
	--color-grid-11-shade2: #aa8dd2;

	--color-rainbow-0: #770406;
	--color-rainbow-1: #b10609;
	--color-rainbow-2: #d4520c;
	--color-rainbow-3: #f8961e;
	--color-rainbow-4: #f8bf3a;
	--color-rainbow-5: #89b964;
	--color-rainbow-6: #46af8f;
	--color-rainbow-7: #478583;
	--color-rainbow-8: #4d6880;
	--color-rainbow-9: #2f3f4c;
	--color-rainbow-10: #000000;
}

.charttable {
	height: 250px;
	overflow-y: auto;
}

.chart-table {
	border-collapse: collapse;
	page-break-inside: avoid;
	width: 100%;
}

.chart-table .number {
	width: 15%;
}

.chart-table thead,
.chart-table tbody {
	border-top: 1px solid var(--color-neutral-black);
	border-bottom: 2px solid var(--color-neutral-black);
}
.chart-table tbody tr:not(:last-child) {
	border-bottom: 1px solid var(--color-border);
}

.plot-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	background: var(--color-neutral-white-80);
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.elementHighlight,
.elementHighlight button {
	background-color: var(--color-attention) !important;
}

.bgfade {
	transition: background-color 1s linear;
}

.grid-legend {
	position: absolute;
	left: 10px;
	top: 55px;
	max-height: calc(100% - 65px);
	pointer-events: none;
	margin: 0;
	background-color: transparent;
	z-index: 1001;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	width: 200px;
}

.grid-legend * {
	pointer-events: all;
}

.grid-legend-item {
	position: relative;
	padding: 10px 15px;
	margin-right: 10px;
	margin-bottom: 10px;
	background-color: var(--color-neutral-white-80);
	box-shadow: 0 0 8px var(--color-shadow);
	width: 100%;
}

.grid-legend-item > :not(label) {
	font-size: 0.9em;
}

.grid-legend-item.show-legend-button {
	background-color: var(--color-neutral-lighter);
	background-image: linear-gradient(to bottom right, var(--color-primary-medium), var(--color-primary-background-light));
	color: var(--color-neutral-white);
	font-size: 2em;
	width: 34px;
	height: 34px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	cursor: pointer;
}

.grid-legend-item.show-legend-button:hover {
	background-color: var(--color-neutral-medium);
	background-image: linear-gradient(to bottom right, var(--color-primary-dark), var(--color-primary-background-light));
}

.grid-legend-item .round-button.top-right {
	position: absolute;
	top: 0;
	right: 0;
	height: 20px;
	margin-top: -5px;
	margin-right: -10px;
	width: 20px;
}

.grid-search {
	flex: 1;
	z-index: 2001;
	pointer-events: none !important;
}

.grid-search .form-control {
	height: 32px;
}

.grid-search input {
	border: none;
}

.grid-search .btn {
	width: 34px;
	height: 32px;
	padding: 0;
	border: none;
}

.grid-search .btn i {
	position: relative;
	top: -1px;
}

.grid-legend .disabled {
	pointer-events: none;
	cursor: default;
	opacity: 0.4;
}

.grid-legend img {
	width: 20px;
	height: 100px;
}

.grid-legend .input-group {
	max-width: 80px;
}

.grid-legend div[color-legend] {
	margin-top: 5px;
}

.grid-viewer {
	position: relative;
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	padding: 0;
	border: 1px solid var(--color-border);
	outline: none;
	overflow: hidden;
}

.grid-viewer svg:focus {
	outline: none;
}

.grid-viewer.no-grid-consistency-check .grid-search {
	width: 280px;
}

.grid-viewer:not(.always-show-inspector) .grid-toolbar {
	/* Make the toolbar hide the inspector's shadow */
	z-index: 1002;
}

.grid-viewer.no-toolbar .grid-toolbar {
	position: absolute;
	right: 0;
	top: 0;
	background: transparent;
	border: none;
}

.grid-viewer:not(.always-show-inspector) .grid-toolbar-bottom.is-inspector-open {
	right: 310px;
}

.schematic-grid-viewer.disabled {
	opacity: 0.2;
	pointer-events: none;
}

.grid-viewer.no-toolbar .grid-element-inspector {
	padding-top: 58px;
}

.grid-toolbar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	min-height: 34px;
	box-sizing: content-box;
	padding: 10px;
	background-color: transparent;
	pointer-events: none;
}

.grid-toolbar * {
	pointer-events: all;
}

.grid-toolbar grid-consistency-check {
	pointer-events: none;
}

.grid-toolbar-buttons {
	display: flex;
	flex-direction: row;
	box-shadow: 0 0 8px var(--color-shadow);
}

.grid-toolbar-search {
	display: flex;
	flex-direction: row;
	margin-left: 5px;
	flex-basis: 280px;
	pointer-events: none;
}

.grid-toolbar .btn-icon {
	border: none !important;
}

.grid-toolbar input[type="text"],
.grid-toolbar input[type="number"] {
	width: 60px;
	text-align: center;
	font-size: 12px;
}

.grid-toolbar .show-options {
	display: flex;
}

.grid-toolbar .show-options.disabled {
	cursor: default;
}

.grid-toolbar .show-options .options-dropdown {
	height: 100%;
	padding: 0 4px 0 2px;
	background-color: var(--color-button-background);
	border-right: 1px solid var(--color-button-background);
	border-top: 1px solid var(--color-button-background);
	border-bottom: 1px solid var(--color-button-background);
	line-height: 28px;
	color: var(--color-neutral-dark);
	cursor: pointer;
}

.grid-toolbar .show-options .dropdown-menu {
	margin: 0;
	font-size: 12px;
}

.grid-toolbar .show-options:not(.disabled):hover .options-dropdown {
	color: var(--color-neutral-super-dark);
	background-color: var(--color-button-background-hover);
	border-color: var(--color-button-background-hover);
}

.grid-toolbar .show-options:not(.disabled):hover .dropdown-menu {
	display: block;
}

.grid-toolbar .show-options .dropdown-menu li a:hover span.shortcut {
	color: var(--color-neutral-white);
}

.grid-toolbar .show-options .dropdown-menu li a span.shortcut {
	color: var(--color-neutral-darker);
	margin-left: 20px;
	text-transform: uppercase;
}

.grid-toolbar .dropdown-menu.checkmarks > li > a {
	padding-left: 10px;
}

.grid-toolbar .dropdown-menu.checkmarks .fa-check {
	pointer-events: none;
}

.grid-toolbar .dropdown-menu.checkmarks > li > ul:not(.sub-menu) > li > a {
	padding-left: 30px;
}

.grid-toolbar .dropdown-menu.checkmarks > li > ul:not(.sub-menu) > li > ul > li > a {
	padding-left: 50px;
}

.grid-toolbar .with-caret {
	width: 48px;
	padding-right: 9px !important;
	text-align: left;
}

.grid-toolbar .with-caret::after {
	content: "";
	position: absolute;
	display: block;
	left: 32px;
	top: 15px;
	width: 0;
	height: 0;
	border-top: 4px solid;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}

.grid-toolbar .btn-success,
.grid-toolbar .btn-warning,
.grid-toolbar .btn-danger {
	color: var(--color-neutral-white);
}

.grid-add-element-toolbar {
	position: absolute;
	display: flex;
	flex-direction: column;
	left: 10px;
	top: 55px;
	z-index: 1001;
	box-shadow: 0 0 8px var(--color-shadow);
}

.grid-add-element-toolbar .btn {
	position: relative;
	width: 34px;
	height: 34px;
	padding: 0;
	border: none !important;
	outline: none;
}

.grid-add-element-toolbar .btn svg {
	width: 100%;
	height: 100%;
}

.grid-add-element-toolbar .tooltip-inner {
	max-width: none;
	white-space: nowrap;
}

.grid-add-element-toolbar use.icon {
	stroke: var(--color-neutral-dark);
	fill: var(--color-neutral-dark);
}

.grid-add-element-toolbar .btn-primary use.icon,
.grid-add-element-toolbar .sticky-add-mode use.icon {
	stroke: var(--color-neutral-white);
	fill: var(--color-neutral-white);
}

.keyboard-shortcut {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 12px;
	height: 12px;
	text-transform: uppercase;
	color: var(--color-neutral-white);
	background-color: var(--color-neutral-black-20);
	font-size: 9px;
}

.grid-element-inspector,
.grid-element-inspector.ng-invalid,
grid grid-flicker-source {
	position: absolute;
	display: flex;
	flex-direction: column;
	top: 0;
	right: 0;
	bottom: 0;
	width: 300px;
	padding: 58px 0 10px 0;
	transform: translate3d(300px, 0, 0);
	background-color: var(--color-neutral-super-light) !important;
	overflow-y: auto;
	overflow-x: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	z-index: 1001;
}

.grid-element-inspector.is-visible,
grid grid-flicker-source.is-visible {
	transform: translate3d(0, 0, 0);
}

grid grid-flicker-source.is-visible {
	box-shadow: 0 0 15px var(--color-shadow);
}

.grid-element-inspector table {
	margin: 10px 0;
}

.grid-element-inspector td,
.grid-element-inspector th {
	font-size: 0.9em;
}

.grid-element-inspector tr:last-child td {
	border-bottom: 1px solid var(--color-border);
}

.grid-element-inspector ul {
	padding: 0 0 0 16px;
	margin: 0;
	font-size: 12px;
	list-style-type: square;
	max-width: 280px;
}

.grid-element-inspector ul li {
	margin: 2px 0;
}

.grid-element-inspector ul li a {
	text-overflow: ellipsis;
	overflow-x: hidden;
}

.grid-element-inspector .bus-selector span.filter-option {
	max-width: 70px;
	text-overflow: ellipsis;
}

.grid-toolbar .show-options .dropdown-menu .sub-menu {
	top: -28px;
}

.grid-toolbar-bottom {
	display: flex;
	align-items: end;
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 1000;
}

body.has-map-layers .grid-toolbar-bottom {
	left: 50px;
}

.grid-style-selector {
	flex-shrink: 0;
}

.grid-style-selector.grid-missing-gis {
	position: absolute;
	right: 10px;
	bottom: 10px;
	height: 31px;
	width: 31px;
	margin-left: 10px;
	padding: 5px 8px;
	background-color: var(--color-neutral-white);
}

.grid-style-selector.grid-missing-gis.is-inspector-open {
	right: 310px;
}

.grid-style-selector li {
	margin: 0 !important;
}

.grid-style-selector li:not(:first-child) {
	border-left: 1px solid var(--color-border);
}

.grid-style-selector {
	left: 12px;
	bottom: 12px;
	background-color: var(--color-neutral-white-80);
	box-shadow: 0 0 8px var(--color-shadow);
}

.grid-element-inspector .header {
	display: block;
	padding: 5px 0;
	border-top: 1px solid var(--color-neutral-darker);
	border-bottom: 1px solid var(--color-neutral-darker);
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.grid-element-inspector label.checkbox,
.grid-element-inspector label.radio {
	margin: 0;
}

.grid-element-inspector .btn.ui-select-toggle,
.grid-element-inspector .ui-select-search {
	height: 22px;
	padding: 0 16px 0 4px;
	font-size: 13.5px;
}

.grid-element-inspector .ui-select-bootstrap .ui-select-match-text {
	padding-right: 0;
}

.grid-element-inspector .ui-select-bootstrap .ui-select-toggle > span {
	text-overflow: ellipsis;
	overflow: hidden;
}

.grid-element-inspector .ui-select-bootstrap .ui-select-toggle > .caret {
	right: 4px;
	float: none !important;
}

/* ********** SGI: Grid Viewer ********** */
.grid-container-wrapper {
	display: flex;
	position: relative;

	min-height: 400px;
	flex-grow: 1;
}

/* Grid Viewer is not resizable in IE11, so min-height needs to be larger */
.is-ie11 .grid-container-wrapper {
	min-height: 500px;
}

@media (min-height: 1500px) {
	.grid-container-wrapper {
		min-height: 500px;
	}
}

#mda .grid-container-wrapper {
	min-height: unset;
}

.grid-container-wrapper.is-inspector-open .grid-messages {
	right: 290px;
}

.grid-container {
	flex-grow: 1;
	display: flex;
	flex-direction: column-reverse;
}

/* ts only */
body.no-fixed-grid .grid-container,
body:not(.no-fixed-grid) .grid-master.fullscreen .grid-container {
	flex-direction: row;
}

.always-show-inspector .grid-container {
	padding-right: 300px;
}

.map-grid-viewer,
.schematic-grid-viewer {
	flex-grow: 1;
	flex-basis: 0;
}

.grid-viewer.always-show-inspector .grid-element-inspector {
	border-left: 1px solid var(--color-border);
}

.grid-viewer:not(.always-show-inspector) .grid-element-inspector.is-visible {
	box-shadow: 0 0 15px var(--color-shadow) !important;
}

.has-submenu::after {
	content: "\f0da";
	font-family: FontAwesome;
	position: absolute;
	right: 8px;
	color: var(--color-neutral-darker);
}

.has-submenu:hover::after {
	color: var(--color-neutral-white);
}

.button-with-flyout-menu {
	position: relative;
}

.flyout-menu {
	position: absolute;
	display: none;
	flex-direction: row;
	left: 100%;
	top: 0;
}

.button-with-flyout-menu:hover .flyout-menu {
	display: flex;
}

.color-select a {
	padding-top: 4px !important;
	padding-bottom: 0 !important;
}

.color-select span.text {
	width: 100%;
}

.color-select .color-swatch {
	height: 20px;
}

.color-select .default-color-swatch .text {
	border: 1px solid var(--color-border);
	padding: 2px;
	margin-bottom: 2px;
	line-height: 16px;
	text-align: center;
}

.color-select .filter-option {
	padding-right: 24px !important;
}

.grid-element-inspector .ng-select {
	font-size: 12px;
}

.grid-element-inspector .ng-select.ng-select-single .ng-select-container {
	height: 22px;
	min-height: 22px;
}

.grid-element-inspector .ng-select .ng-select-container .ng-value-container {
	position: relative;
}

.grid-element-inspector .ng-select .ng-arrow-wrapper .ng-arrow {
	border-width: 4px 4px 2px;
}

.grid-element-inspector .ng-select.ng-select-opened > .ng-select-container .ng-arrow {
	border-width: 0 4px 4px;
}

.grid-element-inspector .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
	top: 0;
}

.grid-element-inspector .ng-select .ng-spinner-loader {
	width: 12px;
	height: 12px;
	margin-right: 0;
}

.grid-element-inspector .ng-select .ng-clear-wrapper {
	margin-right: -8px;
}

.grid-element-inspector unmetered-dropdown > div {
	display: block;
}

.grid-element-inspector unmetered-dropdown .ng-select {
	width: 100%;
}

.grid-element-inspector unmetered-dropdown .ng-select:not(:last-child) {
	margin-bottom: 2px;
}

.grid-consistency-check-action {
	position: relative;
	z-index: 2001;
	margin-left: 5px;
}

.handsontable {
	font-family: "Open Sans", Calibri, Candara, Arial, sans-serif;
}

.modal .handsontable .handsontableEditor.listbox table {
	position: absolute;
}

.hot-container {
	overflow: hidden;
}

.hot-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.htContextMenu {
	z-index: 10500060;
}

.htAutocompleteArrow {
	position: relative;
}

.handsontable .htDimmed .htAutocompleteArrow:hover {
	color: #eee;
}

.htNumeric {
	font-variant-numeric: tabular-nums;
}

.htDropdownMenu:not(.htGhostTable),
.htFiltersConditionsMenu:not(.htGhostTable) {
	z-index: 10500001;
}

.handsontable a {
	color: var(--color-primary-light);
}

.handsontable a:hover {
	color: var(--color-primary-medium);
}

.handsontable td.area-1:before,
.handsontable td.area-2:before,
.handsontable td.area-3:before,
.handsontable td.area-4:before,
.handsontable td.area-5:before,
.handsontable td.area-6:before,
.handsontable td.area-7:before,
.handsontable td.area:before {
	background: var(--color-primary-light);
}

.wtBorder.current,
.wtBorder.fill,
.wtBorder.area {
	background: var(--color-primary-light) !important;
}

.handsontableInput {
	box-shadow: inset 0 0 0 2px var(--color-primary-light) !important;
}

.handsontable .htUIInput input {
	border-radius: 0;
	border: none;
}

.handsontable .htUIInput.htUIButtonOK input {
	background-color: var(--color-primary-light);
}

.handsontable tbody th.ht__active_highlight,
.handsontable thead th.ht__active_highlight {
	color: var(--color-neutral-white);
	background-color: var(--color-primary-light);
}

.handsontable .manualColumnResizer.active,
.handsontable .manualColumnResizer:hover,
.handsontable .manualRowResizer.active,
.handsontable .manualRowResizer:hover {
	background-color: var(--color-primary-background);
}

.handsontable td.result-column {
	background-color: var(--color-primary-05);
}

.handsontable td {
	white-space: nowrap;
}

.handsontable.listbox {
	box-shadow: -6px -2px 6px -4px var(--color-shadow);
}

.handsontable.listbox .htCore {
	box-shadow: 0 6px 12px var(--color-shadow);
}

.handsontable td.htInvalid {
	background-color: var(--color-warning-shadow) !important;
}

/* workaround for https://github.com/handsontable/handsontable/issues/4648 */
.handsontable .htCore thead th:nth-child(1) {
	height: auto !important;
}

/* ts only */
.protection-computation-page .handsontable th div.ht_nestingButton {
	right: 3px;
}

.handsontable th div.ht_nestingButton.ht_nestingExpand::after {
	content: "\f105";
	font-family: FontAwesome;
}

.handsontable th div.ht_nestingButton.ht_nestingCollapse::after {
	content: "\f107";
	font-family: FontAwesome;
}

param-editor-hot:not(.nowrap) .handsontable thead th {
	white-space: pre-line !important;
	font-size: 0.9em;
}

.handsontable .changeType,
.handsontable .changeType:hover,
.handsontable .htFiltersActive .changeType {
	border: 0;
}

.handsontable .changeType::before {
	content: "\f0b0";
	font-family: "FontAwesome" !important;
	font-size: 1.5em;
}

/* Color table cell grey if either it is diabled or not-editable */
param-editor-hot td.disabled,
param-editor-hot td.no-editor,
param-editor-hot td.htInvalid.disabled {
	color: var(--color-neutral-darker);
	background-color: var(--color-neutral-lighter) !important;
}

.time-selector {
	display: flex;
	justify-content: space-between;
	margin-top: 5px;
}

.table-legend {
	font-size: 14px;
	display: -ms-grid;
	display: grid;
	grid-auto-rows: 1fr;
	grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
	align-items: center;
}

.table-legend-item {
	padding: 1px 0;
	display: flex;
}

.table-legend-item .explanation {
	margin-left: 10px;
	margin-right: 10px;
	color: var(--color-neutral-darker);
}

table.report thead .fa,
table.report .fa + br,
.table-legend-item .fa,
.table-legend-item br {
	display: none;
}

.math-container {
	white-space: nowrap;
}

.background-task-error {
	margin-bottom: 10px;
	display: flex;
	align-items: baseline;
}

.background-task-error .fa {
	margin-right: 5px;
}

.background-task-error .fa.error {
	color: var(--color-error);
}

.project-settings multiple-select {
	display: block;
	width: 842px;
}

.duration-inputs {
	display: flex;
	gap: 10px;
	margin-bottom: 5px;
}

.sort-handle {
	cursor: move;
}

.selectitem-container > div {
	height: 34px;
	align-items: flex-end;
}

.help-table-of-contents h2 {
	display: block;
}

.help-table-of-contents cce + h2,
.help-table-of-contents highlight-pagehelp h2 {
	display: inline;
}

.help-table-of-contents .section-title {
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
}

.help-table-of-contents .section-title .fa {
	color: var(--color-neutral-dark);
	margin-right: 10px;
}

body.report .help-table-of-contents .space {
	border-bottom: solid 2px var(--color-neutral-darker);
	padding-bottom: 10px;
	font-size: 22px;
}

body.report .help-table-of-contents p.space > span:first-of-type {
	font-size: 22px;
}

body.report .help-table-of-contents .section-title {
	font-size: 22px !important;
	font-style: normal;
	font-weight: normal;
	margin-top: 50px;
}

body.report .help-title {
	font-size: 22px !important;
}

.help-container {
	padding: 0 10px 10px 25px;
	background-color: var(--color-neutral-white);
}

body.report .help-container {
	padding: 0;
	pointer-events: none !important;
}

body.report .help-container hr {
	display: none;
}

.project-home monitoring-time-navigation {
	position: absolute;
	bottom: 0;
	padding: 15px;
	left: 0;
	right: 0;
	background-color: var(--color-neutral-super-light);
}

.project-home .entry snapshot-additional-elements .row.entry .actions a:not(:first-child) {
	padding-left: 12px;
}

snapshot-additional-elements .row.entry:hover .actions,
.project-home .entry:hover .actions,
.project-home .entry.active .actions {
	display: flex;
}

body:not(.report) .project-home {
	height: 100%;
}

.project-home .popover {
	max-width: 400px;
}

.project-home .entry .dropdown-menu link-to {
	width: 100%;
}

.project-home .pagination {
	position: fixed;
	bottom: 0;
	margin-left: -15px;
}

.grid-integration-settings-selection {
	display: flex;
	flex-direction: row;
}

.grid-integration-settings-selection selectitem {
	flex-grow: 1;
}

.grid-integration-settings-selection > button {
	height: 35px;
	margin: 0 0 5px 5px;
}

.grid-upgrade-name {
	display: none;
}

#imt .comparisons {
	display: flex;
	flex-direction: column;
	padding: 15px;
	margin-top: 0;
}

#imt .comparison-page {
	padding: 15px;
	margin: 0 0 15px 0;
	background-color: var(--color-neutral-white);
	box-shadow: 0 3px 12px var(--color-shadow);
	overflow-x: hidden;
}

.report #imt .comparisons {
	padding: 15px 0px;
	flex-direction: column;
	overflow: hidden;
}

.report #imt .comparison-page {
	max-width: 100%;
	margin: 0;
	overflow: hidden;
}

.report .grid-upgrade-name {
	display: block;
}

@media (min-width: 1400px) {
	#imt .comparisons {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: -ms-autohiding-scrollbar;
	}

	#imt .comparison-page {
		flex: 0 0 auto;
		width: 60vw;
		height: 100%;
		max-width: 700px;
		margin: 0 15px 0 0;
		overflow-y: auto;
	}
}

#imt .comparison-page h3 {
	margin-bottom: 0;
}

#imt .comparison-page h4 {
	padding-top: 15px;
	margin: 15px 0;
	border-top: solid 1px var(--color-border);
}

#imt .comparison-page edit-grid-tables h4 {
	padding: 2px 0 0;
	margin-top: 0;
	font-size: 15px;
	font-weight: bold;
	border: none;
}

#imt .comparison-page edit-grid-tables grid-upgrade-costs .row {
	margin-top: 0;
}

#imt .comparison-page p {
	margin: 10px 0;
}

#imt .comparison-page .flex selectsearch {
	flex-grow: 1;
	margin-right: 5px;
}

#imt .comparison-page .stresstest-overview-header h5 {
	text-align: center;
	margin: 0;
}

#imt .comparison-page .highcharts-container {
	border: none;
}

.protection-decision {
	border: solid 2px !important;
}

.protection-decision.correct {
	background-color: var(--color-plot-line-correct);
	border-color: var(--color-plot-line-correct) !important;
}

.protection-decision.warning {
	background-color: var(--color-plot-line-warning);
	border-color: var(--color-plot-line-warning) !important;
}

.protection-decision.violation {
	background-color: var(--color-plot-line-violation);
	border-color: var(--color-plot-line-violation) !important;
}

.protection-decision.connected {
	background-color: var(--color-connected);
	border-color: var(--color-connected) !important;
}

.protection-decision.not-connected,
.protection-decision.no-limit {
	background-color: var(--color-neutral-lighter);
	border-color: var(--color-neutral-lighter) !important;
}

.protection-decision.not-disconnected {
	background-color: var(--color-plot-line-violation);
	border-color: var(--color-plot-line-violation) !important;
	content: url(/img/icons/short-circuit-icon.svg);
}

.protection-decision {
	height: 12px;
	width: 36px;
	padding: 0 12px;
	border-radius: 3px;
	border: none;
	display: inline-block;
}

td .protection-decision {
	width: 12px;
}

.reliability-index {
	margin: 0 5px;
	border-top: solid 4px var(--color-primary-light);
	background-color: var(--color-neutral-white);
	text-align: center;
	padding: 5px;
	transition: transform 0.2s ease;
}

.reliability-index:hover {
	transform: scale(1.1);
	box-shadow: 0 0 10px var(--color-shadow);
}

.reliability-index:first-child {
	margin-left: 0;
}

.reliability-index:last-child {
	margin-right: 0;
}

.reliability-index-title {
	color: var(--color-neutral-darker);
}

.reliability-index-value {
	font-size: 1.5em;
}

.alerts-all {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
}

.alerts-all > div {
	width: 100%;
}

@media (min-width: 1400px) {
	.alerts-all > div {
		width: 50%;
	}

	.alerts-all > div:nth-of-type(odd) {
		padding-right: 10px;
	}

	.alerts-all > div:nth-of-type(even) {
		padding-left: 10px;
	}
}

.hierarchical-simulation-plot {
	margin-top: 10px;
	height: 35vh;
	display: flex;
}

#hierarchical-simulation-alerts {
	height: calc(100% - 35vh - 56px - 34px - 10px);
}

#hierarchical-simulation-health {
	height: calc(100% - 56px - 34px - 10px);
	overflow-y: auto;
}

.hierarchical-simulation-plot .chart {
	height: 100%;
}

alerts-summary {
	overflow-y: inherit !important;
}

alerts-summary .content-placeholder {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border: none;
	flex-direction: column;
	padding: 10px;
}

alerts-summary .list-with-action-buttons .entry,
grid-alerts-summary .list-with-action-buttons .entry {
	padding: 5px 10px;
}

.hierarchical-simulation .log {
	padding: 10px;
	overflow-x: hidden;
}

.hierarchical-simulation .log-container {
	overflow-y: auto;
	max-height: calc(100vh - 140px);
}

.hover-invert-red:hover {
	background-color: var(--color-error);
	color: var(--color-neutral-white);
}

.scrollable-menu {
	height: auto;
	max-height: 80vh;
	overflow-x: hidden;
}



/* BASICS */

.CodeMirror {
	/* Set height, width, borders, and global font properties here */
	font-family: monospace;
	height: 300px;
	color: black;
	direction: ltr;
	resize: vertical;
	overflow: auto !important;
}

/* PADDING */

.CodeMirror-lines {
	padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
	padding: 0 4px; /* Horizontal padding of content */
}

.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
	background-color: white; /* The little square between H and V scrollbars */
}

/* GUTTER */

.CodeMirror-gutters {
	border-right: 1px solid #ddd;
	background-color: #f7f7f7;
	white-space: nowrap;
}

.CodeMirror-linenumber {
	padding: 0 3px 0 5px;
	min-width: 20px;
	text-align: right;
	color: #999;
	white-space: nowrap;
}

.CodeMirror-guttermarker {
	color: black;
}
.CodeMirror-guttermarker-subtle {
	color: #999;
}

/* CURSOR */

.CodeMirror-cursor {
	border-left: 1px solid black;
	border-right: none;
	width: 0;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
	border-left: 1px solid silver;
}
.cm-fat-cursor .CodeMirror-cursor {
	width: auto;
	border: 0 !important;
	background: #7e7;
}
.cm-fat-cursor div.CodeMirror-cursors {
	z-index: 1;
}
.cm-fat-cursor .CodeMirror-line::selection,
.cm-fat-cursor .CodeMirror-line > span::selection,
.cm-fat-cursor .CodeMirror-line > span > span::selection {
	background: transparent;
}
.cm-fat-cursor .CodeMirror-line::-moz-selection,
.cm-fat-cursor .CodeMirror-line > span::-moz-selection,
.cm-fat-cursor .CodeMirror-line > span > span::-moz-selection {
	background: transparent;
}
.cm-fat-cursor {
	caret-color: transparent;
}
@-moz-keyframes blink {
	0% {
	}
	50% {
		background-color: transparent;
	}
	100% {
	}
}
@-webkit-keyframes blink {
	0% {
	}
	50% {
		background-color: transparent;
	}
	100% {
	}
}
@keyframes blink {
	0% {
	}
	50% {
		background-color: transparent;
	}
	100% {
	}
}

/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror-overwrite .CodeMirror-cursor {
}

.cm-tab {
	display: inline-block;
	text-decoration: inherit;
}

.CodeMirror-rulers {
	position: absolute;
	left: 0;
	right: 0;
	top: -50px;
	bottom: 0;
	overflow: hidden;
}
.CodeMirror-ruler {
	border-left: 1px solid #ccc;
	top: 0;
	bottom: 0;
	position: absolute;
}

/* DEFAULT THEME */

.cm-s-default .cm-header {
	color: blue;
}
.cm-s-default .cm-quote {
	color: #090;
}
.cm-negative {
	color: #d44;
}
.cm-positive {
	color: #292;
}
.cm-header,
.cm-strong {
	font-weight: bold;
}
.cm-em {
	font-style: italic;
}
.cm-link {
	text-decoration: underline;
}
.cm-strikethrough {
	text-decoration: line-through;
}

.cm-s-default .cm-keyword {
	color: #708;
}
.cm-s-default .cm-atom {
	color: #219;
}
.cm-s-default .cm-number {
	color: #164;
}
.cm-s-default .cm-def {
	color: #00f;
}
.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {
}
.cm-s-default .cm-variable-2 {
	color: #05a;
}
.cm-s-default .cm-variable-3,
.cm-s-default .cm-type {
	color: #085;
}
.cm-s-default .cm-comment {
	color: #a50;
}
.cm-s-default .cm-string {
	color: #a11;
}
.cm-s-default .cm-string-2 {
	color: #f50;
}
.cm-s-default .cm-meta {
	color: #555;
}
.cm-s-default .cm-qualifier {
	color: #555;
}
.cm-s-default .cm-builtin {
	color: #30a;
}
.cm-s-default .cm-bracket {
	color: #997;
}
.cm-s-default .cm-tag {
	color: #170;
}
.cm-s-default .cm-attribute {
	color: #00c;
}
.cm-s-default .cm-hr {
	color: #999;
}
.cm-s-default .cm-link {
	color: #00c;
}

.cm-s-default .cm-error {
	color: #f00;
}
.cm-invalidchar {
	color: #f00;
}

.CodeMirror-composing {
	border-bottom: 2px solid;
}

/* Default styles for common addons */

div.CodeMirror span.CodeMirror-matchingbracket {
	color: #0b0;
}
div.CodeMirror span.CodeMirror-nonmatchingbracket {
	color: #a22;
}
.CodeMirror-matchingtag {
	background: rgba(255, 150, 0, 0.3);
}
.CodeMirror-activeline-background {
	background: #e8f2ff;
}

/* STOP */

/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */

.CodeMirror {
	position: relative;
	overflow: hidden;
	background: white;
}

.CodeMirror-scroll {
	overflow: scroll !important; /* Things will break if this is overridden */
	/* 50px is the magic margin used to hide the element's real scrollbars */
	/* See overflow: hidden in .CodeMirror */
	margin-bottom: -50px;
	margin-right: -50px;
	padding-bottom: 50px;
	height: 100%;
	outline: none; /* Prevent dragging from highlighting the element */
	position: relative;
	z-index: 0;
}
.CodeMirror-sizer {
	position: relative;
	border-right: 50px solid transparent;
}

/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actual scrolling happens, thus preventing shaking and
   flickering artifacts. */
.CodeMirror-vscrollbar,
.CodeMirror-hscrollbar,
.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
	position: absolute;
	z-index: 6;
	display: none;
	outline: none;
}
.CodeMirror-vscrollbar {
	right: 0;
	top: 0;
	overflow-x: hidden;
	overflow-y: scroll;
}
.CodeMirror-hscrollbar {
	bottom: 0;
	left: 0;
	overflow-y: hidden;
	overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
	right: 0;
	bottom: 0;
}
.CodeMirror-gutter-filler {
	left: 0;
	bottom: 0;
}

.CodeMirror-gutters {
	position: absolute;
	left: 0;
	top: 0;
	min-height: 100%;
	z-index: 3;
}
.CodeMirror-gutter {
	white-space: normal;
	height: 100%;
	display: inline-block;
	vertical-align: top;
	margin-bottom: -50px;
}
.CodeMirror-gutter-wrapper {
	position: absolute;
	z-index: 4;
	background: none !important;
	border: none !important;
}
.CodeMirror-gutter-background {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 4;
}
.CodeMirror-gutter-elt {
	position: absolute;
	cursor: default;
	z-index: 4;
}
.CodeMirror-gutter-wrapper ::selection {
	background-color: transparent;
}
.CodeMirror-gutter-wrapper ::-moz-selection {
	background-color: transparent;
}

.CodeMirror-lines {
	cursor: text;
	min-height: 1px; /* prevents collapsing before first draw */
}
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
	/* Reset some styles that the rest of the page might have set */
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	border-width: 0;
	background: transparent;
	font-family: inherit;
	font-size: inherit;
	margin: 0;
	white-space: pre;
	word-wrap: normal;
	line-height: inherit;
	color: inherit;
	z-index: 2;
	position: relative;
	overflow: visible;
	-webkit-tap-highlight-color: transparent;
	-webkit-font-variant-ligatures: contextual;
	font-variant-ligatures: contextual;
}
.CodeMirror-wrap pre.CodeMirror-line,
.CodeMirror-wrap pre.CodeMirror-line-like {
	word-wrap: break-word;
	white-space: pre-wrap;
	word-break: normal;
}

.CodeMirror-linebackground {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 0;
}

.CodeMirror-linewidget {
	position: relative;
	z-index: 2;
	padding: 0.1px; /* Force widget margins to stay inside of the container */
}

.CodeMirror-widget {
}

.CodeMirror-rtl pre {
	direction: rtl;
}

.CodeMirror-code {
	outline: none;
}

/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

.CodeMirror-measure {
	position: absolute;
	width: 100%;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

.CodeMirror-cursor {
	position: absolute;
	pointer-events: none;
}
.CodeMirror-measure pre {
	position: static;
}

div.CodeMirror-cursors {
	visibility: hidden;
	position: relative;
	z-index: 3;
}
div.CodeMirror-dragcursors {
	visibility: visible;
}

.CodeMirror-focused div.CodeMirror-cursors {
	visibility: visible;
}

.CodeMirror-selected {
	background: #d9d9d9;
}
.CodeMirror-focused .CodeMirror-selected {
	background: #d7d4f0;
}
.CodeMirror-crosshair {
	cursor: crosshair;
}
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
	background: #d7d4f0;
}
.CodeMirror-line::-moz-selection,
.CodeMirror-line > span::-moz-selection,
.CodeMirror-line > span > span::-moz-selection {
	background: #d7d4f0;
}

.cm-searching {
	background-color: #ffa;
	background-color: rgba(255, 255, 0, 0.4);
}

/* Used to force a border model for a node */
.cm-force-border {
	padding-right: 0.1px;
}

@media print {
	/* Hide the cursor when printing */
	.CodeMirror div.CodeMirror-cursors {
		visibility: hidden;
	}
}

/* See issue #2901 */
.cm-tab-wrap-hack:after {
	content: "";
}

/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext {
	background: none;
}

.CodeMirror-foldmarker {
  color: blue;
  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
  font-family: arial;
  line-height: .3;
  cursor: pointer;
}
.CodeMirror-foldgutter {
  width: .7em;
}
.CodeMirror-foldgutter-open,
.CodeMirror-foldgutter-folded {
  cursor: pointer;
}
.CodeMirror-foldgutter-open:after {
  content: "\25BE";
}
.CodeMirror-foldgutter-folded:after {
  content: "\25B8";
}

.highcharts-grid-line {
	pointer-events: none;
}

.navigator-container {
	height: 54px;
	overflow: hidden;
}

.navigator-container .highcharts-container {
	top: -84px !important;
}

@font-face {
	font-family: "adt";
	src: url("/fonts/adt.eot?9meaav");
	src: url("/fonts/adt.eot?9meaav#iefix") format("embedded-opentype"), url("/fonts/adt.ttf?9meaav") format("truetype"),
		url("/fonts/adt.woff?9meaav") format("woff"), url("/fonts/adt.svg?9meaav#adt") format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

[class^="adt-"],
[class*=" adt-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: "adt" !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.adt-average:before {
	content: "\e900";
}
.adt-boxplot:before {
	content: "\e901";
}
.adt-column-gauss:before {
	content: "\e902";
}
.adt-deflate:before {
	content: "\e903";
}
.adt-duration:before {
	content: "\e904";
}
.adt-euclidian:before {
	content: "\e905";
}
.adt-inflate:before {
	content: "\e906";
}
.adt-line:before {
	content: "\e907";
}
.adt-manhattan:before {
	content: "\e908";
}
.adt-pq:before {
	content: "\e909";
}
.adt-quantile:before {
	content: "\e90a";
}
.adt-single:before {
	content: "\e90b";
}
.adt-sum:before {
	content: "\e90c";
}
.adt-table:before {
	content: "\e90d";
}
.adt-wifi-slash:before {
	content: "\e90e";
}

.leaflet-map-pane .leaflet-canvas-icon-layer {
	z-index: 101;
	pointer-events: none;
}

.leaflet-container {
	background-color: var(--color-neutral-white);
}

.leaflet-control-attribution {
	opacity: 0.5;
}

.leaflet-popup-content-wrapper {
	border-radius: 3px;
}

.leaflet-popup-content {
	margin: 0;
}

.leaflet-popup-content h1 {
	border-bottom: 1px solid var(--color-neutral-black);
	font-size: 14px;
	margin: 0;
	padding: 5px;
}

.leaflet-popup-content .content-container {
	padding: 5px;
}

.leaflet-popup-content .content-container th {
	padding-right: 5px;
}

.leaflet-control-container .leaflet-left.leaflet-bottom {
	z-index: 10000;
}

.leaflet-control-layers,
.leaflet-bar {
	border: 1px solid var(--color-border) !important;
	border-radius: 2px;
}

.leaflet-touch .leaflet-control-layers-toggle {
	width: 34px;
	height: 34px;
	background-size: 75%;
}

.leaflet-touch .leaflet-control-layers {
	border: none !important;
	box-shadow: 0 0 8px var(--color-shadow) !important;
}

.map .leaflet-control-zoom {
	border: none !important;
	box-shadow: 0 0 8px var(--color-shadow);
}

.leaflet-bar a {
	border-bottom-color: var(--color-border);
}

.leaflet-draw-tooltip {
	display: none;
}

img.leaflet-image-layer.leaflet-zoom-animated {
	z-index: 1 !important;
}

.leaflet-marker-icon svg {
	width: 16px;
	height: 16px;
}

/* * Fix file paths for new file structure */
.leaflet-default-icon-path {
	background-image: url(/images/marker-icon.png);
}

.leaflet-control-layers-toggle {
	background-image: url(/js/lib/leaflet/images/layers.png);
}

.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(/js/lib/leaflet/images/layers-2x.png);
}

.leaflet-container.ew-resize .leaflet-interactive {
	cursor: ew-resize !important;
}

.leaflet-container.ns-resize .leaflet-interactive {
	cursor: ns-resize !important;
}

/* (All CSS files are concatenated by gulp, no need to import) */
/*
@import url(highcharts.css);
@import url(icons.css);
@import url(leaflet.css);
@import url(spectrum.css);
@import url(toast.css);
@import url(trix.css);

@import url(app/alert-rules/alert-rules.component.css);
@import url(app/connection-requests-table/connection-requests-table.component.css);
@import url(app/shared/permit/permit.component.css);

@import url(directives/common/helphighlight.css);

@import url(directives/chart/chart.css);
@import url(directives/charts/losses-overview.css);
@import url(directives/charts/mda-chartdragdrop.css);
@import url(directives/grid/grid.css);
@import url(directives/grid-consistency-check/grid-consistency-check.css);
@import url(directives/grid-messages/grid-messages.css);
@import url(directives/handsontable/Handsontable.css);
@import url(directives/load-situation/load-situation-modal.css);
@import url(directives/monitoring-time-navigation/monitoring-time-navigation.css);
@import url(directives/param-editor-hot/param-editor-hot-print.css);
@import url(directives/project-settings/project-settings-connectionrequestapp.css);
@import url(directives/reports/report-block.css);
@import url(directives/search-grid-element/search-grid-element.css);
@import url(directives/selectitem/selectitem.css);

@import url(dialogs/config-splitting.css);
@import url(dialogs/matrix-editor-dialog.css);

@import url(controllers/grids/grid-upgrade/grid-upgrade.css);
@import url(controllers/help/general-help-template.css);
@import url(controllers/project/project.css);
@import url(controllers/static-calculations/protection/protection-help.css);
@import url(controllers/static-calculations/reliability/reliability.css);
@import url(controllers/static-calculations/stress-test/stress-test.css);
@import url(controllers/time-series-simulations/modularsim/modularsim.css);
*/

@font-face {
	font-family: "Open Sans";
	/*src: url("/fonts/opensans/Regular/OpenSans-Regular.woff2?v=1.101") format("woff2"),
        url("/fonts/opensans/Regular/OpenSans-Regular.woff?v=1.101") format("woff");*/
	src: url("/fonts/KohinoorDevanagari-Regular.woff");
	font-weight: normal;
	font-style: normal;
}

/*
@font-face {
	font-family: "Open Sans";
	src: url("/fonts/opensans/Italic/OpenSans-Italic.woff2?v=1.101") format("woff2"), url("/fonts/opensans/Italic/OpenSans-Italic.woff?v=1.101") format("woff");
	font-weight: normal;
	font-style: italic;
}*/

@font-face {
	font-family: "Open Sans";
	/*src: url("/fonts/opensans/Bold/OpenSans-Bold.woff2?v=1.101") format("woff2"),
        url("/fonts/opensans/Bold/OpenSans-Bold.woff?v=1.101") format("woff");*/
	src: url("/fonts/KohinoorDevanagari-Medium.woff");
	font-weight: bold;
	font-style: normal;
}

/*
@font-face {
	font-family: "Open Sans";
	src: url("/fonts/opensans/BoldItalic/OpenSans-BoldItalic.woff2?v=1.101") format("woff2"), url("/fonts/opensans/BoldItalic/OpenSans-BoldItalic.woff?v=1.101") format("woff");
	font-weight: bold;
	font-style: italic;
}*/

/* avoid scroll bounce */
html {
	overflow: hidden;
	height: 100%;
}

body {
	position: relative;
	display: flex;
	height: 100%;
	background: var(--color-neutral-white);
}

a:hover,
a:focus,
.btn-link:hover,
.btn-link:focus {
	color: var(--color-primary-dark);
}

iframe {
	border: none;
}

.clearfix::after {
	display: block;
	width: 0;
	height: 0;
	clear: both;
	content: "";
}

.panel-heading.clickable:hover {
	border-bottom: solid 4px var(--color-neutral-lighter);
}

.panel-heading.clickable.active {
	border-bottom: solid 4px var(--color-border);
	font-weight: bold;
}

.panel {
	border: 0;
	display: block;
}

.panel > .panel-heading {
	background-color: var(--color-neutral-white);
	border-color: var(--color-border);
	font-size: 21px;
}

.panel > .panel-heading-small-dark {
	background-color: var(--color-neutral-super-light);
	border-color: var(--color-border);
	font-size: 1em;
	font-weight: bold;
}

.panel > .panel-footer {
	background-color: var(--color-neutral-white);
	border-color: var(--color-border);
	font-size: 16px;
	border-radius: 0;
}

.panel.panel-inner {
	border: 1px solid var(--color-border);
}

.panel > .panel-heading.panel-inner {
	color: var(--color-neutral-super-dark);
	background-color: var(--color-neutral-super-light);
	border-color: var(--color-border);
	border-bottom: 1px solid transparent;
	font-size: 16px;
}

.panel > .panel-heading.panel-progress {
	color: var(--color-neutral-super-dark);
	background-color: var(--color-neutral-white);
	border-color: var(--color-border);
	border-bottom: 1px solid transparent;
	font-size: 16px;
}

.panel-group .panel.reference-upload-panel {
	overflow: visible;
}

.fa-exclamation-triangle,
.fa.warning:not(.default),
.bs-warning,
log .color-warning {
	color: var(--color-warning) !important;
}

.fa-exclamation-circle,
.fa.info,
.bs-info {
	color: var(--color-info);
}

.fa.success,
.bs-success,
.fa-check-circle {
	color: var(--color-success);
}

button:disabled .fa.success,
button:disabled .bs-success,
button:disabled .fa-check-circle {
	color: var(--color-neutral-medium-dark);
}

.fa.primary,
.bs-primary {
	color: var(--color-primary-light);
}

log .color-info {
	color: var(--color-info);
}

log .color-error,
.fa-times-circle,
.limit-ignored .fa-exclamation-triangle,
.fa.danger,
.bs-danger {
	color: var(--color-error);
}

log .border-info {
	border-left: 3px solid var(--color-info);
}

log .border-warning {
	border-left: 3px solid var(--color-warning);
}

log .border-error {
	border-left: 3px solid var(--color-error);
}

.border-gray {
	border: 1px solid var(--color-neutral-medium-dark);
}

.border-light-gray {
	border: 1px solid var(--color-neutral-medium);
}

.border-warning {
	border: 1px solid var(--color-warning);
}

#navigation li > link-to {
	display: block;
}

.crop-long-values {
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline-block;
}

.bus-filter {
	overflow: hidden;
	text-overflow: ellipsis;
}

.is-invalid,
body .ng-invalid,
body .btn.ng-invalid,
body select.ng-invalid + .btn,
body select.ng-invalid + .btn:hover {
	border: var(--color-warning) solid 1px;
	box-shadow: inset 0 0 0 1px var(--color-warning-shadow);
}

/** Don't mark the whole form as invalid */
form.ng-invalid {
	border: inherit !important;
	box-shadow: inherit !important;
	background-color: inherit !important;
}

.statusbar {
	margin: 5px 0;
	min-height: 22px;
}

.g5 {
	gap: 5px;
}

.m0 {
	margin: 0px;
}

.ml4 {
	margin-left: 4px;
}

.ml16 {
	margin-left: 16px;
}

.ml20 {
	margin-left: 20px;
}

.ml25 {
	margin-left: 25px;
}

.ml10 {
	margin-left: 10px !important;
}

.ml15 {
	margin-left: 15px;
}

.ml155 {
	margin-left: 155px;
}

.mlauto {
	margin-left: auto;
}

.mr0 {
	margin-right: 0;
}

.mr5 {
	margin-right: 5px !important;
}

.mr7 {
	margin-right: 7px;
}

.mr10 {
	margin-right: 10px;
}

.mr15 {
	margin-right: 15px;
}

.mr20 {
	margin-right: 20px;
}

.mx-10 {
	margin-left: -10px;
	margin-right: -10px;
}

.ml-20 {
	margin-left: -20px;
}

.pt0 {
	padding-top: 0px !important;
}

.pt3 {
	padding-top: 3px;
}

.pt7 {
	padding-top: 7px;
}

.pt10 {
	padding-top: 10px;
}

.pt80 {
	padding-top: 80px;
}

.fs70p {
	font-size: 70%;
}

.fs100p {
	font-size: 100%;
}

.fs140p {
	font-size: 140%;
}

.ptb5 {
	padding: 5px 0 !important;
}

.p0 {
	padding: 0 !important;
}

.p20 {
	padding: 20px;
}

.pl0 {
	padding-left: 0 !important;
}

.pl15 {
	padding-left: 15px !important;
}

.pr0 {
	padding-right: 0;
}

.pr5 {
	padding-right: 5px;
}

.pr10 {
	padding-right: 10px;
}

.pr15 {
	padding-right: 15px;
}

.pr {
	position: relative;
}

.pa {
	position: absolute;
}

.po {
	position: absolute;
	background-color: var(--color-neutral-white-80);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 10;
}

.pl20 {
	padding-left: 20px !important;
}

.pr12 {
	padding-right: 12px !important;
}

.pl12 {
	padding-left: 12px !important;
}

.ptb0lr15 {
	padding: 0 15px;
}

.ptb2lr7 {
	padding: 2px 7px;
}

.white {
	color: var(--color-neutral-white);
}

.bg-white {
	background: var(--color-neutral-white) !important;
}

.mtm20 {
	margin-top: -20px;
	padding-top: 80px;
}

.bgwt {
	background-color: var(--color-neutral-white-80);
}

.minh600 {
	min-height: 600px;
}

.minh700 {
	min-height: 700px;
}

.ofya {
	overflow-y: auto;
}

/* ts only */
.ofyh {
	overflow-y: hidden;
}

.por {
	position: relative;
}

.abs-fill {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.maxh1000 {
	max-height: 1000px;
}

.h100p {
	height: 100%;
}

.h90vh {
	height: 90vh;
}

.pt3 {
	padding-top: 3px;
}

.pl2 {
	padding-left: 2px;
}

.pl8 {
	padding-left: 8px !important;
}

.pl10 {
	padding-left: 10px !important;
}

.pb0 {
	padding-bottom: 0px;
}

.pb5 {
	padding-bottom: 5px;
}

.pb10 {
	padding-bottom: 10px;
}

.pb15 {
	padding-bottom: 15px;
}

.pb20 {
	padding-bottom: 20px;
}

.pb25 {
	padding-bottom: 25px;
}

.lh140 {
	line-height: 1.4;
}

.mw0 {
	min-width: 0;
}

.mw300px {
	max-width: 300px;
}

.alert-info {
	background-color: var(--color-info);
	border-color: var(--color-info);
}

.alert-success {
	background-color: var(--color-success);
	border-color: var(--color-success);
}

.alert-warning {
	background-color: var(--color-warning);
	border-color: var(--color-warning);
}

.alert-danger {
	background-color: var(--color-error);
	border-color: var(--color-error);
}

.inline-alert {
	position: static;
}

.alerts .alert {
	margin-bottom: 0;
}

.alert-white {
	background-color: var(--color-neutral-white);
	border-color: var(--color-neutral-white);
}

.warning-text {
	color: var(--color-warning);
	font-size: 25px;
}

.display-block {
	display: block;
}

li.disabled,
i.disabled {
	opacity: 0.65;
}

.disabled {
	pointer-events: none !important;
}

.disabled-container {
	pointer-events: none !important;
	background-color: var(--color-neutral-light);
	color: var(--color-neutral-darker);
}

a.disabled {
	pointer-events: none !important;
	color: var(--color-neutral-darker);
	cursor: not-allowed;
	opacity: 0.5;
}

.form-control {
	box-shadow: none !important;
}

.form-control:focus {
	border-color: var(--color-primary-light);
}

.form-control[disabled],
.form-control[disabled] + .input-group-addon,
.input-group.disabled > .input-group-addon {
	background-color: var(--color-button-background-disabled);
	color: var(--color-neutral-darker);
	border: var(--color-button-background-disabled) solid 1px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 30px var(--color-primary-background-light) inset !important;
}

::selection {
	color: var(--color-neutral-white);
	background-color: var(--color-primary-light);
}

.fl {
	float: left;
}

.fr {
	float: right;
}

.tl {
	text-align: left !important;
}

.tr {
	text-align: right;
}

.underline {
	text-decoration: underline !important;
}

.overline {
	text-decoration: overline !important;
}

.modal {
	z-index: 10500000 !important;
}

.modal-xl {
	width: calc(100% - 30px);
}

@media (min-width: 768px) {
	.modal-xl {
		width: 1200px;
		max-width: 80%;
	}

	.modal-l {
		width: 800px;
		max-width: 80%;
	}
}

.pageslidehelp {
	padding-top: 0;
	height: auto !important;
	overflow-y: auto !important;
}

.pageslidehelp ul {
	padding-left: 20px;
}

.help-container pre {
	margin-top: 10px;
}

.help-fake-btn {
	padding: 3px;
	background: var(--color-neutral-light);
}

.json {
	height: auto;
	overflow-y: scroll;
	max-height: 400px;
}

body.report .help-container img,
.pageslidehelp img {
	width: 100%;
	display: block;
	margin: 10px 0;
}

body.report .help-container img:not(.w100p),
.pageslidehelp.pageslidelarge img:not(.w100p) {
	width: 50%;
	margin-left: 25%;
}

.value-of-cosphi {
	width: 75% !important;
	display: grid;
}

cce i.fa {
	width: 15px;
}

.modal-backdrop {
	z-index: 10400000 !important;
	background-color: var(--color-neutral-black-80);
}

.modal-header h3 {
	margin: 0;
}

.modal-footer div {
	flex-grow: 1;
}

.footer-layout-bsb .modal-footer button:nth-child(1) {
	float: left;
}

.extra-small-text {
	font-size: xx-small;
}

.gray-text {
	color: var(--color-neutral-darker);
}

.small-text {
	font-size: small;
}

.small-gray-text {
	font-size: small;
	color: var(--color-neutral-darker);
}
.pointer.small-gray-text:hover {
	color: var(--color-neutral-super-dark);
}

.info-text {
	font-size: small;
	color: var(--color-neutral-darker);
}

.pointer {
	cursor: pointer;
}

.pointer.black {
	color: var(--color-neutral-super-dark);
}

.pointer.gray {
	color: var(--color-neutral-dark) !important;
}

.light-gray,
.pointer.light-gray {
	color: var(--color-neutral-medium-dark);
}

.pointer.white {
	color: var(--color-neutral-white);
}

.pointer.gray-hover-blue {
	color: var(--color-neutral-dark);
}

.pointer.black:hover {
	color: var(--color-neutral-dark);
}

.pointer.gray:hover {
	color: var(--color-primary-medium) !important;
}

.pointer.light-gray:hover {
	color: var(--color-neutral-dark);
}

.pointer.white:hover {
	color: var(--color-neutral-light);
}

.pointer.light-gray.active,
.pointer.gray-hover-blue:hover {
	color: var(--color-primary-light) !important;
}

slider span.pointer {
	cursor: pointer;
	width: 16px;
	height: 16px;
	top: -5px;
	left: -4px;
}

slider span.pointer::after {
	top: 3px;
	left: 3px;
}

slider span.pointer.active::after {
	background-color: var(--color-neutral-black);
}

.change-device-power slider {
	margin-left: 0;
	margin-right: 0;
}

.legend-container {
	margin-top: 40px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	row-gap: 50px;
	column-gap: 100px;
}

.legend-title {
	overflow-wrap: break-word;
	white-space: normal;
	margin: 0px;
	width: 373px;
	font-weight: bold;
}

.legend-column-selector {
	width: 440px;
	margin-top: -15px;
	margin-left: 15px;
}

.row {
	margin-top: 15px;
}

.w15 {
	width: 15px !important;
}

.w20 {
	width: 20px !important;
}

.w40 {
	width: 40px !important;
}

.w45 {
	width: 45px !important;
}

.w80 {
	width: 80px !important;
}

.w200 {
	width: 200px !important;
}

.w10p {
	width: 10% !important;
}

.w15p {
	width: 15% !important;
}

.w20p {
	width: 20% !important;
}

.w25p {
	width: 25% !important;
}

.w30p {
	width: 30% !important;
}

.w40p {
	width: 40% !important;
}

.w50p {
	width: 50% !important;
}

.w50p-col {
	width: calc(50% - 15px);
}

.w60 {
	width: 45px !important;
}

.w100p {
	width: 100% !important;
}

.w80pm1200 {
	width: 80% !important;
	min-width: 1200px;
}

.w150px {
	width: 150px !important;
}

.w50px {
	width: 50px !important;
}

.dn {
	display: none;
}

.dib {
	display: inline-block;
}

.mt0 {
	margin-top: 0 !important;
}

.mt5 {
	margin-top: 5px !important;
}

.mt10 {
	margin-top: 10px !important;
}

.mt15 {
	margin-top: 15px !important;
}

.mt20 {
	margin-top: 20px !important;
}

.mt30 {
	margin-top: 30px !important;
}

.mt33 {
	margin-top: 33px !important;
}

.mt40 {
	margin-top: 40px !important;
}

.mt-6 {
	margin-top: -6px !important;
}

.mt-10 {
	margin-top: -10px !important;
}

.mb0 {
	margin-bottom: 0 !important;
}

.mb5 {
	margin-bottom: 5px !important;
}

.mb10 {
	margin-bottom: 10px !important;
}

.mb15 {
	margin-bottom: 15px !important;
}

.mb20 {
	margin-bottom: 20px !important;
}

.mb40 {
	margin-bottom: 40px !important;
}

.mb50 {
	margin-bottom: 50px !important;
}

.ml0 {
	margin-left: 0 !important;
}

.ml5 {
	margin-left: 5px !important;
}

.smallerfont {
	font-size: smaller;
}

.xlargefont {
	font-size: x-large;
}

.panel-group .panel + .panel.mt10 {
	margin-top: 10px;
}

.h0 {
	height: 0;
	display: block;
}

.maxh200 {
	max-height: 200px;
}

.op40 {
	opacity: 0.4;
}

.op60 {
	opacity: 0.6;
}

.white-space-no-wrap {
	white-space: nowrap;
}

.white-space-normal {
	white-space: normal;
}

.break-word {
	word-wrap: break-word;
}

.grid-legend-label {
	max-width: 200px;
	margin: 0;
	overflow-wrap: anywhere;
}

.grid-legend-label > div,
.input-group.flex span.form-control {
	overflow: hidden;
	text-overflow: ellipsis;
	flex-grow: 1;
}

label.grid-legend-label.checkbox {
	font-weight: bold;
}

.flex-grow {
	flex-grow: 1;
}

#navigation {
	position: relative;
	flex-shrink: 0;
	width: 75px;
	background: var(--color-neutral-white);
	box-shadow: -10px 0 30px var(--color-neutral-super-dark);
	z-index: 5002;
}

#full-navigation {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 300px; /* transition: transform 0.1s ease 0.2s; */
	transform: translateX(-320px);
	background: var(--color-neutral-white);
	border-right: 1px solid var(--color-border);
	z-index: 101;
}

#navigation.admin,
.admin #full-navigation {
	background: var(--color-neutral-black);
}

.navigation-pinned #navigation #full-navigation {
	transform: translateX(0);
}

#navigation ul.icons {
	position: relative;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	background: var(--color-neutral-white);
	z-index: 101;
}

#navigation ul.icons.secondary {
	position: absolute;
	margin: 0 0 20px;
	height: auto;
	background: transparent;
	z-index: 100;
}

#navigation ul.icons > li {
	position: relative;
	text-align: center;
	display: block;
	margin-bottom: 1px;
}

.warning-flex {
	margin: 0;
	padding: 5px;
	text-align: left;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
}

.nav-icon-alert {
	margin-top: 4px;
	margin-right: 10px;
}

.nav-icon-wifi-slash {
	font-size: 20px;
	margin-top: 2px;
	margin-right: 7px;
}

#navigation ul.icons > li > a,
#navigation ul.icons > li > link-to > a,
#navigation ul.icons > li > span,
#navigation ul.icons > li > is-offline > div > span {
	color: var(--color-neutral-darker);
	margin: 0 auto;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1em;
	border-radius: 50%;
}

#navigation ul.icons > li > a:hover,
#navigation.open-on-hover ul.icons > li.hover > a {
	color: var(--color-primary-medium);
	background-color: var(--color-primary-background-light);
}

#navigation ul.icons .adt-pq {
	font-size: 24px;
}

#navigation ul.icons ul {
	font-size: 13px;
	display: none;
	list-style: none;
	margin: 0;
	padding: 10px 0;
	position: absolute;
	width: 240px;
	top: -46px;
	text-align: left;
	background: var(--color-neutral-white);
	box-shadow: 3px 3px 6px 1px var(--color-shadow);
}

#navigation ul.icons ul.wide {
	width: 350px;
}

input {
	accent-color: var(--color-primary-light);
}

#navigation ul.icons.secondary ul {
	top: unset;
	bottom: 0;
}

#navigation ul.icons ul.many-links {
	top: -294px;
}

#navigation ul.icons ul.sub-menu {
	z-index: 100;
}

#navigation ul.icons:not(.secondary) .sub-menu {
	max-height: calc(100vh - 60px);
	overflow: auto;
}

#navigation.open-on-hover ul.icons li.hover ul {
	display: block;
}

#navigation.open-on-hover ul.icons li ~ div.tooltip {
	z-index: 99;
}

#navigation div.tooltip .tooltip-inner {
	max-width: none;
	white-space: nowrap;
}

/* it will be applied on infoimage */
infotext.tooltip-img .tooltip-inner {
	max-width: none;
	padding: 4px;
}

infotext.tooltip-img div.tooltip.in {
	opacity: 1;
}

.dropdown-menu a:hover infotext > i {
	color: var(--color-neutral-white) !important;
}

#navigation ul.icons a,
#navigation ul.icons ul a {
	text-decoration: none;
}

#navigation ul.icons li {
	position: relative;
	z-index: 101;
}

#navigation ul.icons a {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

#navigation ul.icons .heading,
#navigation ul.icons ul a {
	padding: 10px 20px 10px 30px;
}

#navigation ul.icons .heading {
	text-transform: uppercase;
	color: var(--color-neutral-medium);
	display: flex;
	justify-content: space-between;
}

#navigation .primary .has-links {
	text-transform: none;
	display: flex;
	justify-content: space-between;
}

#navigation ul.icons .heading a,
#navigation .primary .has-links a {
	color: var(--color-primary-medium) !important;
	background: transparent !important;
	padding: 0;
}

#navigation ul.icons .heading a:hover,
#navigation .primary .has-links a:hover {
	color: var(--color-primary-medium);
	background: transparent;
	text-decoration: underline;
}

#navigation ul.icons ul a {
	display: block;
}

#navigation .primary li ul {
	display: none;
}

#navigation .primary li.open > ul /*,
#navigation .primary li.stay-open > ul*/ {
	display: block;
}

#navigation .primary ul ul a {
	padding-left: 54px;
	font-size: 13px;
}

#navigation .open > .pseudo-link {
	background: var(--color-neutral-lighter);
}

#navigation a,
#navigation .pseudo-link {
	color: var(--color-neutral-super-dark);
	cursor: pointer;
}

#navigation .dropdown-toggle:focus {
	background: transparent;
}

#navigation.admin a {
	color: var(--color-neutral-light);
}

#navigation .pseudo-link:hover,
#navigation a:hover,
#navigation a:active,
#navigation .open > a,
#navigation .open > a:focus,
#navigation .dropdown-toggle:focus:hover,
#navigation .primary .no-active-state .is-active:hover,
#navigation.open-on-hover li.hover > a {
	background: var(--color-neutral-medium-20);
	color: var(--color-neutral-black);
}

#navigation.admin a:hover {
	color: var(--color-neutral-white);
}

#navigation .primary a.is-active,
#navigation .primary a.is-active .fa,
#navigation .primary a.is-active:hover {
	background: var(--color-primary-light);
	color: var(--color-neutral-white);
}

#navigation .primary .no-active-state .is-active {
	background: transparent;
	color: var(--color-neutral-black);
}

#navigation .primary {
	position: absolute;
	top: 70px;
	right: 0;
	bottom: 50px;
	left: 0;
	padding: 10px 0;
	overflow-y: auto;
}

#navigation .fa {
	width: 24px;
}

#navigation #full-navigation::before,
#navigation #full-navigation::after {
	content: "";
	position: absolute;
	background: linear-gradient(to bottom, var(--color-neutral-white), transparent);
	height: 10px;
	width: 100%;
	left: 0;
	top: 70px;
	z-index: 1;
	pointer-events: none;
}

#navigation #full-navigation::after {
	top: auto;
	bottom: 50px;
	background: linear-gradient(to top, var(--color-neutral-white), transparent);
}

#navigation.admin #full-navigation::before {
	background: linear-gradient(to bottom, var(--color-neutral-black), transparent);
}

#navigation.admin #full-navigation::after {
	background: linear-gradient(to top, var(--color-neutral-black), transparent);
}

#navigation .primary > ul > li > a,
#navigation .primary > ul > li > span,
#navigation .primary > ul > li > link-to > a {
	padding: 10px 15px 10px 20px;
}

#navigation .secondary {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	height: 40px;
}

#navigation .secondary > ul {
	display: flex;

	height: 100%;
}

#navigation .secondary > ul > li {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 0;
}

#navigation .secondary > ul > li > a {
	display: flex;
	height: 100%;
	justify-content: center;
	align-items: center;
	color: var(--color-neutral-dark);
	padding: 10px 0;
}

#navigation ul ul .is-selected a,
#navigation ul ul a.is-selected {
	position: relative;
	font-weight: bold;
}

#navigation ul ul .is-selected a::before,
#navigation ul ul a.is-selected::before {
	position: absolute;
	left: 12px;
	top: 10px;
	font-family: FontAwesome;
	content: "\f058";
	color: var(--color-primary-dark);
}

.navigation-pinned #navigation ul ul .is-selected a::before,
.navigation-pinned #navigation ul ul a.is-selected::before {
	left: 32px;
}

#navigation .secondary > ul > li > a:hover {
	color: var(--color-neutral-black);
}

#navigation.admin .secondary > ul > li > a {
	color: var(--color-neutral-darker);
}

#navigation.admin .secondary > ul > li > a:hover {
	color: var(--color-neutral-medium);
}

#navigation.admin .secondary .dropdown-menu {
	border: none;
}

#navigation.admin .secondary .dropdown-menu li a {
	background: var(--color-neutral-super-dark);
}

#navigation.admin .secondary .dropdown-menu li a:hover {
	background: var(--color-neutral-dark);
}

.navigation-pinned .if-navigation-not-pinned {
	display: none !important;
}

/* Put the 'fa-primary-hover-white' class on the thing that when hovered 
 * changes the color or the wrapped fa-icon to white.
 *
 * Example:
 * <li class="fa-primary-hover-white">
 *   <i class="fa fa-check-circle"></i>
 *	 <span>Team 1</span>
 * </li>
 */
.fa-primary-hover-white > .fa {
	color: var(--color-primary-dark);
}

.fa-primary-hover-white:hover > .fa {
	color: var(--color-neutral-white);
}

.company-logo {
	display: block;
	text-align: center;
}

.company-logo > a {
	display: block;
	padding: 15px 15px;
	height: 66px;
}

.company-logo a:hover {
	background: transparent !important;
}

.company-logo img {
	width: auto;
	max-width: 100%;
	max-height: 100%;
}

#content {
	top: 0;
	flex-grow: 1;
	position: absolute;
	right: 0;
	bottom: 0;
}

body.report #content {
	left: 0;
	position: relative;
}

body.report page-divider {
	display: none;
}

/* ts only */
body:not(.is-fullscreen-grid) #scrolling {
	visibility: visible;
}

/* ts only */
body.is-fullscreen-grid #scrolling {
	visibility: hidden;
	z-index: -1;
}

/* ts only */
body.is-fullscreen-grid #scrolling g.highcharts-navigator {
	visibility: hidden;
	z-index: -1;
}

/* ts only */
body.ofyh #scrolling {
	overflow-y: hidden !important;
}

#content > .scrolling {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0 15px 15px;
	background: var(--color-neutral-super-light);
}

/* ts only */
body.is-collapsed-grid #content > .scrolling:not(expansion-chart-filters) {
	right: 15px;
}

/* ts only */
body.is-collapsed-grid #content > .scrolling:has(expansion-chart-filters) {
	right: 400px;
}

/* ts only */
.no-bottom-margin #content > .scrolling {
	padding-bottom: 0;
}

/* ts only */
body.no-fixed-grid .grid-master {
	visibility: hidden;
}

/* ts only */
body.no-fixed-grid.report .grid-master {
	display: block;
	visibility: visible;
}

/* ts only */
body:not(.no-fixed-grid) #content > .scrolling {
	right: 50%;
}

page-divider {
	right: calc(50% - 15px);
	position: absolute;
	top: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
}

page-divider .divider.divider-vertical {
	position: relative;
}

/* ts only */
body.is-fullscreen-grid page-divider {
	right: calc(100% - 15px);
}

/* ts only */
body.is-collapsed-grid page-divider {
	right: 0;
}

.navbar ul li label.caps {
	padding: 3px 15px 4px;
	margin-bottom: 0;
	display: block;
	pointer-events: none;
}

.navbar ul.dropdown-menu li:not(:first-child) label.caps {
	border-top: solid 1px var(--color-border);
	margin-top: 5px;
}

a.plainlink,
.plainlink a {
	text-decoration: none;
}

.lmr3 a {
	margin-right: 3px;
}

.lmr6 a {
	margin-right: 6px;
}

.overflowHidden {
	overflow: hidden;
}

.overlay {
	position: fixed;
	top: 0;
	background: var(--color-neutral-white);
	z-index: 5000;
	border-bottom: solid 1px var(--color-border);
}

.overlay {
	width: 50%;
	height: 60% !important;
	left: 10px;
}

.center-text {
	text-align: center;
}

@media (max-width: 868px) {
	.navbar-nav li a {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* Make text of navbar list elements hidden or visible at custom screen size to avoid multi-line navbar */
@media (min-width: 1200px) {
	.navbar-default .visible-xlg {
		display: inline-block !important;
	}

	.navbar-default .hidden-xlg {
		display: none !important;
	}
}

.navbar-default .navbar-nav .open .dropdown-menu > li label.caps {
	background-color: var(--color-neutral-white);
	padding: 3px 15px 4px;
	margin-top: 0 !important;
	pointer-events: none;
}

.navbar-default .navbar-nav .open .dropdown-menu > li a {
	background-color: var(--color-neutral-white);
	color: var(--color-neutral-super-dark);
	padding: 3px 15px 4px;
}

.navbar-default .navbar-nav .open .dropdown-menu > li a:hover {
	background-color: var(--color-primary-light);
	color: var(--color-neutral-white);
}

/* Text and caret of navbar list dropdown elements must be displayed inline */
.navbar-default .visible-xs {
	display: inline-block !important;
}

.row-fluid {
	margin-top: 15px;
}

.gray {
	color: var(--color-neutral-dark);
}

.bold {
	font-weight: bold;
}

.uppercase {
	text-transform: uppercase;
}

/* =======
 Console style logger for (websocket) messages
 ===== */
table.logger tbody {
	max-height: 200px;
	overflow: auto;
}

/* =======
 Grid Display Styles
 ===== */
.leaflet-custom-tooltip,
.leaflet-custom-tooltip::before {
	background: transparent;
	border: none;
	box-shadow: none;
	pointer-events: none !important;
	font-size: 1.1em;
}

gridmap .leaflet-custom-tooltip.bus {
	margin-left: 20px;
}

gridmap .leaflet-custom-tooltip.transformer {
	margin-top: 15px;
}

.leaflet-toolbar-tip-container {
	pointer-events: none;
}

.bus .label {
	transform: translate(14px, 5px);
}

.slackbus .label {
	transform: translate(6px, 4px);
}

.load .label {
	transform: translate(13px, -4px);
}

.generator .label {
	transform: translate(19px, -3px);
}

.hide-load .load,
.hide-load .loadLink {
	display: none;
}

.hide-generation .generator,
.hide-generation .generatorLink {
	display: none;
}

.bus rect,
.bus path,
.bus circle,
.slackbus rect,
.networkFeeder rect,
.load use,
.generator use {
	transition: transform 0.2s ease;
}

.generator use {
	transform-origin: 8px 0;
}

.load use {
	transform-origin: 6px 0;
}

.load.up use {
	transform: rotate(180deg) translate(2px, -4px);
}

grid {
	background: var(--color-neutral-white);
}

/* ts only */
body:not(.no-fixed-grid) .grid-master .grid-viewer {
	border: none;
}

.btn-icon {
	width: 34px;
	height: 34px;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dropdown-menu.checkmarks a {
	cursor: pointer;
}

.dropdown-menu .status {
	position: relative;
	display: inline-block;
	width: 16px;
}

/* ts only */
body:not(.is-collapsed-grid).no-fixed-grid page-divider .divider {
	display: none;
}

.divider {
	z-index: 1;
	background: var(--color-neutral-light);
	border-left: 1px solid var(--color-border);
	border-right: 1px solid var(--color-border);
	cursor: pointer;
}

.divider:hover {
	background: var(--color-neutral-lighter);
}

.divider::after {
	content: "\f104";
	font-family: FontAwesome;
	display: block;
	position: absolute;
	top: 50%;
	height: 20px;
	width: 100%;
	margin-top: -10px;
	text-align: center;
}

.divider[disabled]::after {
	color: var(--color-neutral-medium);
}

.divider.right::after {
	content: "\f105";
}

.pageslidehelp.pageslidelarge .divider::after {
	content: "\f105";
}

.divider-vertical {
	width: 15px;
	height: 100%;
	position: absolute;
}

/* ts only */
body:not(.no-fixed-grid) grid > div.flex {
	margin-left: 15px;
}

grid .mode-selection {
	cursor: crosshair;
}

@keyframes dash {
	to {
		stroke-dashoffset: -10;
	}
}

.grid-consistency-check-results section > div {
	margin-bottom: 10px;
}

.failures-list .fa-info-circle {
	color: var(--color-info);
}

.grid-consistency-check-results .category {
	position: relative;
}

.grid-consistency-check-results .category-name {
	padding: 5px 0 5px 12px;
	border-bottom: 1px solid var(--color-border);
	cursor: pointer;
}

.grid-consistency-check-results .results ul {
	padding: 5px 0;
	border-bottom: 1px solid var(--color-border);
}

.grid-consistency-check-results .collapse {
	display: block;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}

.grid-consistency-check-results .collapse.in {
	max-height: 10000px;
	transition: max-height 2s ease;
}

.grid-consistency-check-results .collapse::before {
	content: "\f105";
	position: absolute;
	left: 2px;
	top: 5px;
	font-family: FontAwesome;
	transition: transform 0.1s ease;
	pointer-events: none;
}

.grid-consistency-check-results .collapse.in::before {
	transform: rotate(90deg);
}

.overflow-ellipsis,
.grid-name {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.grid-element-inspector-body .grid-name.overflow-ellipsis {
	width: 100%;
}

.grid-element-inspector-header {
	padding: 0 10px;
	margin: 0 0 5px;
}

.grid-element-inspector-header .btn,
.grid-element-inspector-header-full .btn,
.expansion-chart-filters-header .btn {
	width: 24px;
	height: 24px;
	line-height: 22px;
	vertical-align: top;
	flex-shrink: 0;
}

.grid-element-inspector-header .btn.toggle,
.grid-element-inspector-header-full .btn.toggle {
	padding: 0 5px;
}

.grid-element-inspector-header .btn:not(.toggle),
.grid-element-inspector-header-full .btn:not(.toggle),
.expansion-chart-filters-header .btn {
	padding: 0;
}

.grid-element-inspector-element-actions .btn {
	margin-left: 2px;
}

.checkbox-for-split-grid {
	margin-left: 1px !important;
}

.grid-element-inspector-header .grid-element-info {
	flex-grow: 1;
	margin: 5px 0 0 0;
	line-height: 24px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.grid-element-inspector-header-full {
	padding: 0 10px;
	margin: 0 0 10px;
}

.grid-element-inspector-body {
	flex-grow: 1;
	padding: 0 10px 10px;
	font-size: 0.9em;
	overflow-x: hidden;
	overflow-y: auto;
}

.grid-element-inspector-body .action-buttons {
	text-align: right;
}

.grid-element-inspector-body p {
	margin: 0;
}

.grid-element-inspector-body .input-group input,
.grid-element-inspector-body .input-group input + .input-group-btn {
	vertical-align: bottom;
}

grid grid-flicker-source h4 {
	margin-top: 0;
	line-height: 1.4em;
}

.label {
	stroke: none;
	font-size: xx-small;
}

.label.round {
	display: inline-block;
	font-size: small;
	border-radius: 12px;
	overflow: hidden;
	height: 24px;
	line-height: 24px;
	padding: 0 8px;
	vertical-align: bottom;
	margin-top: -4px;
}

.label.round.label-default {
	background-color: var(--color-neutral-light);
	color: var(--color-neutral-dark);
}

/* **************** item tree *************** */
ul.tree {
	list-style-type: none;
	margin-left: 10px;
	margin-bottom: 0;
	padding-left: 10px;
}

.tree a {
	display: inline-block;
	width: 16px;
	height: 16px;
	color: var(--color-neutral-black);
}

ul.tree li {
	margin-left: 10px;
}

.navbar-fixed-top,
.navbar-fixed-bottom {
	z-index: 2000000;
}

/* *************** bootstrap cosmo 3 customizations ************* */
.input-xs {
	height: 22px !important;
	padding: 1px !important;
	font-size: 12px;
	line-height: 1.5;
}

.btn-success {
	border-color: var(--color-success) !important;
	background-color: var(--color-success) !important;
}

.btn-danger {
	border-color: var(--color-error) !important;
	background-color: var(--color-error) !important;
}

.btn-success:disabled,
.btn-danger:disabled {
	opacity: 0.65 !important;
}

.label-success {
	background-color: var(--color-success);
}

.label-danger {
	background-color: var(--color-error);
}

.btn-xs {
	height: 22px !important;
	padding: 1px 4px !important;
	font-size: 12px;
	line-height: 1.5;
}

/* Slightly modify btn-xs style, so that it fits in handsontable cells */
hot-table td .btn-xs {
	height: 18px !important;
	padding: 0px 3px !important;
	margin-top: -2px !important;
}

.input-group-xs > .form-control,
.input-group-xs > .input-group-addon,
.input-group-xs > .input-group-btn > .btn {
	height: 22px;
	padding: 4px;
	font-size: 12px;
	line-height: 1.5;
	transition: none;
}

.input-group-xs .input-group-btn selectsearch .btn-xs {
	padding-right: 14px !important;
}

.input-group-xs .input-group-btn selectsearch .btn-xs .caret {
	right: 4px;
}

.input-group-xs > .input-group-addon {
	padding-top: 0;
	padding-bottom: 0;
}

.input-group-addon {
	background: var(--color-neutral-white);
	color: var(--color-neutral-darker);
}

.input-group .form-group:not(:last-child) input:not(:focus):not(.ng-invalid),
.input-group .input-group-addon:not(:last-child):not(:focus),
.input-group input:not(:last-child):not(:focus):not(.ng-invalid),
.input-group .form-control:not(:last-child):not(:focus):not(.ng-invalid) {
	border-right: 0 !important;
	box-shadow: none;
}

.input-group .form-group:not(:first-child) input:not(:focus):not(.ng-invalid),
.input-group .input-group-addon:not(:first-child):not(:focus),
.input-group input:not(:first-child):not(:focus):not(.ng-invalid),
.input-group .form-control:not(:first-child):not(:focus):not(.ng-invalid) {
	border-left: 0 !important;
	box-shadow: none;
}

.info h4 {
	margin: 0 0 5px;
	color: var(--color-neutral-dark);
}

.leaflet-legend {
	text-align: left;
	line-height: 18px;
	color: var(--color-neutral-dark);
}

.legend i {
	width: 18px;
	height: 18px;
	float: left;
	margin-right: 8px;
	opacity: 0.7;
}

.form-control,
.btn {
	height: 34px;
}

.btn,
.input-group-addon,
.form-control,
.ptb6lr12 {
	padding: 6px 12px;
}

.input-sm.form-control {
	padding: 5px 10px;
}

.btn-default,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
	color: var(--color-neutral-dark);
	background-color: var(--color-button-background);
	border: 1px solid var(--color-button-background);
}

.btn-default.bg-white {
	border: none;
}

.btn-default:hover,
.btn-default.active {
	color: var(--color-neutral-dark);
	background-color: var(--color-button-background-hover);
	border-color: var(--color-button-background-hover);
}

.input-group-addon btn.btn-default,
.input-group-addon.btn.btn-default {
	border-color: var(--color-button-background);
}

/* ts only */
.btn-inconspicuous {
	padding-left: 0 !important;
	margin-right: 2px;
	color: var(--color-primary-medium);
	background-color: transparent;
	border: none;
}

/* ts only */
.btn-inconspicuous:hover {
	color: var(--color-primary-light);
}

.btn-file {
	border-radius: 0 !important;
}

.label-primary {
	background-color: var(--color-primary-medium);
}

a,
.primary,
.btn-link {
	color: var(--color-primary-medium);
}

.gray-hover-primary {
	color: var(--color-neutral-medium-dark) !important;
}

.gray-hover-primary:hover {
	color: var(--color-primary-light) !important;
}

/* Pagination with uib-pagination */
.pagination > li a {
	color: var(--color-primary-medium);
}

.pagination > li a:hover {
	color: var(--color-primary-dark);
	background-color: var(--color-primary-background-light);
}

.pagination > .active > a,
.pagination > .active > a:hover {
	background-color: var(--color-primary-light);
	color: var(--color-neutral-white);
}

.dropdown-menu > li a:hover,
.dropdown-menu > li a:focus,
.btn-primary {
	color: var(--color-neutral-white) !important;
	background-color: var(--color-primary-light) !important;
	border-color: var(--color-primary-light);
}

.btn-primary:focus {
	outline-color: var(--color-primary-light) !important;
}

.btn-warning {
	color: var(--color-neutral-white);
	background-color: var(--color-warning) !important;
}

.btn-warning[disabled] {
	opacity: 0.5 !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.btn-primary:hover {
	background-color: var(--color-primary-medium) !important;
	border-color: var(--color-primary-medium);
}

.btn-group .btn[data-toggle="dropdown"] {
	margin-left: 2px;
}

.btn-group permit .btn[data-toggle="dropdown"] {
	margin-left: -3px;
}

ul.dropdown-menu,
.dropdown-menu ul {
	list-style: none;
	padding: 0;
}

.dropdown-menu .sub-menu {
	left: 100%;
	position: absolute;
	top: 0;
	visibility: hidden;
	margin-top: -1px;
}

.grid-toolbar .show-options .dropdown-menu .sub-menu {
	top: -28px;
}

.dropdown-menu li:hover .sub-menu {
	visibility: visible;
	display: block;
}

.dropdown-menu .disabled > a,
.dropdown-menu .disabled > a:hover,
.dropdown-menu .disabled > a:focus {
	color: var(--color-neutral-darker);
}

label.disabled-label {
	color: var(--color-neutral-darker);
}

label.disabled-label i {
	color: var(--color-neutral-black);
}

h3 {
	font-size: 24px;
	margin: 15px 0;
}

h4.underline {
	border-bottom: 1px solid var(--color-border);
	padding-bottom: 10.5px;
}

legend {
	font-size: 19px;
	border-color: var(--color-border);
}

.select-multiple li.active {
	margin-right: 40px;
	width: 100%;
}

/* ts only */
.ng-pageslide {
	background: var(--color-neutral-white-80);
	box-shadow: 10px 0 30px var(--color-neutral-super-dark);
}

/* ts only */
.ng-pageslide .divider.divider-vertical {
	position: fixed;
}

/* commented out */
.helpmoretext {
	font-size: 10pt;
}

.helpmoretext h1 {
	margin-bottom: 10pt;
	font-size: 12pt;
	font-weight: bold;
}

.helpmoretext h2 {
	margin-bottom: 10pt;
	font-size: 10pt;
	font-weight: bold;
}

.helpmoretext p {
	margin-bottom: 10pt;
	font-style: italic;
}

.helpmoretext li {
	font-style: italic;
}

.tooltip {
	z-index: 99999999;
	font-size: 1em;
}

.tooltip-inner {
	background-color: var(--color-primary-dark);
	overflow: hidden;
	text-align: left;
	text-overflow: ellipsis;
	hyphens: auto;
}

.tooltip.top .tooltip-arrow {
	border-top-color: var(--color-primary-dark);
}

.tooltip.right .tooltip-arrow {
	border-right-color: var(--color-primary-dark);
}

.tooltip.bottom .tooltip-arrow {
	border-bottom-color: var(--color-primary-dark);
}

.tooltip.left .tooltip-arrow {
	border-left-color: var(--color-primary-dark);
}

.infotext {
	font-size: 11pt;
}

/* *************** startpage customizations ************** */
.plr20 {
	padding: 0 20px;
}

.pl5 {
	padding-left: 5px;
}

.p5 {
	padding: 5px;
}

.p15 {
	padding: 15px;
}

[bs-select] {
	max-width: 100%;
	overflow: hidden;
	display: inline-block;
	text-overflow: ellipsis;
	padding-right: 20px;
}

.help-inline {
	background-color: var(--color-error);
	padding: 0 10px;
	color: var(--color-neutral-white);
}

.helpCollapse,
.helpCollapse a {
	font-size: 10pt;
	color: var(--color-neutral-black) !important;
}

.helpCollapse .space {
	margin-top: 20pt;
	margin-bottom: 20pt;
}

.helpCollapse .noContentH1,
.helpCollapse .overview {
	/* to keep layout for sections where the content is missing */
	margin-left: 23pt;
}

.helpCollapse .helpCollapse .overview {
	/* to keep layout for sections where the content is missing */
	margin-bottom: 5pt;
}

.helpCollapse .noContentH2 {
	/* to keep layout for sections where the content is missing */
	margin-left: 40pt;
}

.helpCollapse .title {
	/* title of specific page help */
	font-size: 11pt;
	font-style: italic;
}

.helpCollapse h1,
.helpCollapse h2 {
	/* main sections of help collapses */
	font-size: 11pt !important;
	display: inline;
}

body.report td {
	overflow: hidden;
}

body.report pre {
	white-space: pre-wrap;

	/* Legacy browsers */
	white-space: -moz-pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
}

.helpCollapse p.space > span:first-of-type {
	font-size: 18px;
}

.helpCollapse h2 {
	/* sub sections of help collapses */
	font-style: italic;
	white-space: nowrap;
}

.helpCollapse .h2Icon {
	/* line to separate different menus / sections in help pages */
	padding-left: 15pt;
}

.helpCollapse h3 {
	/* sub titles inside help collapses */
	font-size: 10pt;
	font-weight: bold;
}

.helpCollapse h4,
.helpCollapse .refer,
.helpCollapse .note {
	/* refer reference e.g. to other menu; note sentences as "Note that ..." */
	font-size: 10pt;
	font-style: italic;
}

.helpCollapse h4 {
	/* h4 list element inside help collapses */
	display: inline;
}

.helpCollapse hr,
.helpCollapse .hrSub {
	/* line to separate different menus / sections in help pages */
	border-top: thin solid var(--color-neutral-black);
	margin-bottom: 5pt;

	margin-top: 5pt;
}

.helpCollapse .hrSub {
	border-top: thin dashed var(--color-neutral-black) !important;
}

.popover {
	z-index: 600000000 !important;
}

/* ts only */
.bootstrap-select.show-tick .dropdown-menu li a span.text {
	margin-left: 5px;
	margin-right: 15px;
}

/* ts only */
.bootstrap-select.show-tick .dropdown-menu li a {
	padding-left: 2.25em;
}

/* ts only */
.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
	left: 15px;
	top: 9px;
	right: unset;
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
	opacity: 1;
}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
	background-color: var(--color-button-background-disabled);
	border-color: var(--color-button-background-disabled);
	color: var(--color-neutral-medium-dark) !important;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
	background-color: var(--color-primary-disabled) !important;
	border-color: var(--color-primary-disabled);
	color: var(--color-primary-medium) !important;
}

/* ts only */
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
	width: 100%;
}

/* ts only */
.bootstrap-select.btn-group.bs-container {
	z-index: 400000000 !important;
}

/* ts only */
.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:active,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover {
	color: var(--color-neutral-dark);
}

/* ts only */
.bootstrap-select > .btn {
	display: flex;
}

/* ts only */
.bootstrap-select > .btn > .filter-option {
	text-overflow: ellipsis;
}

.datepicker,
.timepicker {
	z-index: 400000000;
}

.dropdown-menu.timepicker,
.dropdown-menu.datepicker {
	padding: 0;
}

.dropdown-menu.timepicker button {
	width: 44px;
	text-align: center;
}

.navbar-nav > li > a {
	background-color: transparent !important;
}

.navbar-nav > li > a:hover {
	background-color: var(--color-neutral-black-40) !important;
}

.container-fluid textarea {
	resize: none;
}

.help-example-csv {
	overflow-x: scroll;
	width: 100%;
	font-size: 75%;
}

.help-example-csv table {
	border-collapse: collapse;
}

.help-example-csv td,
.help-example-csv th {
	padding: 0 4px;
	border: 1px solid var(--color-neutral-darker);
	font-family: monospace;
	white-space: nowrap;
}

.help-example-csv .line-number {
	color: var(--color-neutral-darker);
	font-size: 90%;
	border: none;
}

h5 {
	font-weight: bold;
}

.pageslidehelp h5 {
	font-size: 13.333px;
}

.inline-block,
.checkbox label.inline-block,
.radio label.inline-block {
	display: inline-block;
}

label.checkbox,
label.radio {
	font-weight: normal;
}

label.bottom-border {
	border-bottom: 1px solid var(--color-border);
	display: block;
	margin-bottom: 10px;
	padding-bottom: 5px;
}

.form-inline .form-group {
	margin-right: 20px;
}

.alert-text {
	position: absolute;
	padding: 0;
	bottom: 40px;
	right: 0;
	left: 0;
	z-index: 5;
}

/* *************** Projects ************** */
@media (max-width: 767px) {
	.projects .project {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.projects .project {
		width: 50%;
	}
}

@media (min-width: 980px) {
	.projects .project {
		width: 33.33%;
	}
}

@media (min-width: 1200px) {
	.projects .project {
		width: 25%;
	}
}

@media (min-width: 1600px) {
	.projects .project {
		width: 20%;
	}
}

@media (min-width: 2000px) {
	.projects .project {
		width: 16.66%;
	}
}

.projects {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.project link-to {
	display: flex;
	width: 100%;
}

.projects .project {
	position: relative;
	display: flex;
	min-height: 150px;
	margin: 10px;
	overflow: hidden;
}

.projects .project.is-archived::before {
	position: absolute;
	content: "";
	right: 15px;
	top: -40px;
	width: 35px;
	height: 120px;
	z-index: 1;
	background-color: var(--color-neutral-lighter);
	transform: rotate(-45deg);
	pointer-events: none;
}

.projects .project .archive {
	position: absolute;
	right: 19px;
	top: 17px;
	font-size: 14px;
	color: var(--color-neutral-dark);
	z-index: 2;
}

.projects .project a.panel-inner {
	width: 100%;
	border-color: var(--color-neutral-medium);
}

.projects .project a.panel,
.projects .panel.edit-project {
	margin-bottom: 0;
}

.projects .project.is-archived .panel {
	color: var(--color-neutral-darker);
	background-color: var(--color-neutral-super-light);
}

.projects .project .panel-heading {
	background: transparent;
}

.projects .new-project,
.projects .new-project span {
	justify-content: center;
	display: flex;
	color: var(--color-neutral-lighter);
	align-items: center;
	font-size: 2em;
}

.projects .new-project span wa {
	font-size: 12px;
}

.projects .new-project:hover span {
	color: var(--color-neutral-medium-dark);
}

.projects .new-project i {
	margin: auto;
}

.projects .panel-heading {
	text-overflow: ellipsis;
	overflow: hidden;
	max-height: 60px;
	margin-bottom: 5px;
	padding-bottom: 5px;
	height: auto;
	border-bottom: none;
	font-size: 1.2em;
	font-weight: bold;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.projects-toolbar {
	display: flex;
	max-width: 550px;
	height: 30px;
	margin-top: 12px;
}

a.panel {
	color: var(--color-neutral-super-dark);
	position: relative;
}

a.panel:hover,
a.panel:active,
a.panel:focus {
	text-decoration: none;
	color: var(--color-neutral-black);
	box-shadow: 0 2px 4px var(--color-shadow);
}

.project-actions-container {
	display: none;
}

.project-actions {
	height: 100%;
	padding: 10px 15px;
	background-color: var(--color-neutral-lighter);
	font-size: 13px;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 1;
	position: absolute;
	right: 0;
}

.pinning-actions {
	display: flex !important;
	background-color: transparent !important;
}

.project-actions a {
	display: block;
	font-size: 1.4em;
}

.project-actions a.pointer:hover {
	color: var(--color-primary-medium) !important;
}

a.panel:hover .project-actions-container {
	display: block;
}

.has-tooltip .tooltip {
	display: none;
	position: absolute;
	width: 100px;
	top: 100%;
	left: 0;
	left: 50%;
	margin-left: -50px;
}

.has-tooltip:hover .tooltip {
	opacity: 0.9;
	display: block;
}

.open > .has-tooltip:hover .tooltip {
	display: none;
}

.flex,
.flex-equal {
	display: flex;
}

.flex-equal > *,
.flex-stretch {
	flex: 1 0 0;
}

.gap5 {
	gap: 5px;
}

.gap10 {
	gap: 10px;
}

.gap15 {
	gap: 15px;
}

.flex-col {
	display: flex;
	flex-direction: column;
}

.flex-row-of-two > * {
	flex: 0 1 48%;
}

.flex-nowrap {
	display: flex;
	flex-wrap: nowrap;
}

.flex-space-between {
	display: flex !important;
	justify-content: space-between;
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-align-start {
	display: flex;
	align-items: start;
}

.flex-justify-content-start {
	display: flex;
	justify-content: flex-start;
}

.flex-align-center {
	display: flex !important;
	align-items: center;
}

.flex-align-baseline {
	display: flex !important;
	align-items: baseline;
}

.flex.no-shrink > * {
	flex-shrink: 0;
}

.flex.flex-select-button-group {
	width: 100%;
	max-width: 600px;
}

.flex .grow,
.flex-col .grow {
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 0;
}

.flex-align-end {
	align-items: flex-end;
}

.flex-end {
	justify-content: flex-end;
}

.flex .centered-icon {
	padding: 0 20px;
	align-self: center;
}

.flex-wrap {
	flex-wrap: wrap;
}

selectsearch button.close {
	display: none !important;
}

selectsearch div.popover-title {
	background: var(--color-neutral-white);
	border-bottom: 0;
	color: var(--color-neutral-dark);
}

selectsearch .dropdown-menu ul li {
	margin: 0;
}

/* ts only */
.bootstrap-select.btn-group .dropdown-menu li a {
	display: flex;
	align-items: center;
}

.bootstrap-select.btn-group .dropdown-menu li a span.text {
	display: block;
	text-overflow: ellipsis;
	overflow-x: hidden;
}

.bootstrap-select.btn-group .dropdown-menu li a span.fa.fa-check.check-mark {
	margin-top: 0;
}

.bootstrap-select.btn-group .dropdown-menu.inner {
	max-width: 25vw;
	overflow-x: hidden;
}

.selectsearch-xs .form-control {
	padding: 5px 10px;
	font-size: 13px;
}

/* ********** MDA: Monitoring Dashboard ********** */
.fullscreen.fixed #content > .scrolling {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	padding: 0;
	padding-left: 15px;
}

.monitoring-dashboard #content > .scrolling {
	padding: 0;
	overflow: hidden;
}

.dashboard .panel {
	margin-bottom: 0;
}

#mda .the-left-side {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

/* ts only */
.is-fullscreen-grid #mda .the-left-side {
	display: none;
}

#mda .the-left-side .header {
	display: flex;
	padding: 10px;
	margin: 0;
	background-color: var(--color-neutral-white);
	border-bottom: 1px solid var(--color-border);
}

#mda .the-left-side .header .header-left {
	display: flex;
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 0;
	align-items: center;
}

#mda .the-left-side .header .header-right {
	display: flex;
	align-items: center;
}

#mda .the-left-side .header .header-right button:not(.btn) {
	padding: 0;
	border: none;
	background-color: transparent;
	margin-right: 5px;
	color: var(--color-neutral-dark);
	text-decoration: none;
}

#mda .the-left-side .header .header-right button:not(.btn):hover {
	color: var(--color-primary-medium);
	text-decoration: none;
}

#mda .the-left-side .content {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 0;
	padding: 10px 5px 0 10px;
	overflow-y: scroll;
}

#mda .the-left-side .content h4 {
	margin-top: 0;
}

/* #mda .the-left-side .content > section {
	margin: 0 0 15px;
} */

#mda .the-left-side .footer {
	position: relative;
	padding: 10px 5px 10px 10px;
	overflow-y: scroll;
}

monitoring-time-navigation {
	display: block;
}

#mda > .panel {
	background: var(--color-neutral-white);
	margin-bottom: 0;
}

#mda .grid-element-inspector-header {
	justify-content: space-between;
}

#mda .entity-selection {
	padding: 10px;
}

#mda .entity-selection .flex-select-button-group {
	max-width: none;
}

events-chart .highcharts-yaxis-labels span {
	background: var(--color-neutral-white-60);
	padding-right: 3px;
}

.scroll-container {
	overflow: auto;
}

.map {
	position: fixed;
	top: 0;
	right: 0;
}

/* ts only */
.mapcontrol {
	width: 32px;
	height: 32px;
	background-color: var(--color-neutral-white);
	cursor: pointer;
}

/* ts only */
.mapcontrol:hover {
	background-color: var(--color-neutral-super-light);
}

/* ts only */
.mapcontrol i {
	display: block;
	text-align: center;
	font-size: 20px;
	line-height: 30px;
}

.alerts h4 {
	margin-top: 5px;
}

.monitoring-dashboard .alerts,
.hierarchical-simulation .alerts {
	background-color: var(--color-neutral-white);
}

alerts,
alerts .scroll-container {
	height: calc(100% - 26px);
}

.alerts .toggler i {
	transition: transform 0.2s ease;
	transform-origin: 8px 8px;
}

.alerts .toggler i.is-expanded {
	transform: rotate(90deg);
}

.alerts .has-selected .alert-by-item:not(.selected) {
	display: none;
}

body.report alerts-summary .scroll-container,
body.report grid-alerts-summary .scroll-container,
body.report alerts-summary table[ui-scroll-viewport] tbody,
body.report grid-alerts-summary table[ui-scroll-viewport] tbody {
	overflow-y: hidden !important;
}

body.report alerts-summary,
body.report grid-alerts-summary {
	max-height: 600px;
	width: 100%;
	margin: 0;
	margin-top: 15px;
	padding-left: 0;
	padding-right: 0;
	overflow-x: hidden;
}

body.report alerts-summary .alert-range-content,
body.report grid-alerts-summary .alert-range-content {
	display: flex;
	justify-content: flex-end;
	white-space: nowrap;
}

body.report alerts-summary .alert-range-content > div,
body.report grid-alerts-summary .alert-range-content > div {
	margin-left: 10px;
	white-space: nowrap;
}

alerts-summary,
grid-alerts-summary {
	width: calc(50% - 5px); /* 5px to account for margin */
	padding: 10px;
	margin-top: 10px;
	overflow-y: hidden;
	position: relative;
}

alerts-summary:nth-of-type(odd),
grid-alerts-summary:nth-of-type(odd) {
	margin-right: 5px;
}

alerts-summary:nth-of-type(even),
grid-alerts-summary:nth-of-type(even) {
	margin-left: 5px;
}

alerts-summary .list-with-action-buttons tr th,
grid-alerts-summary .list-with-action-buttons tr th {
	text-transform: none !important;
}

alerts-summary .actions,
grid-alerts-summary .actions {
	visibility: hidden;
}

alerts-summary:hover .actions,
grid-alerts-summary:hover .actions {
	visibility: visible;
}

dragdropchart {
	/*height: 400px;*/
	display: block;
	position: relative;
}

#mda chartdragdrop,
dynamicdatachart,
chart,
#mda .chart {
	display: block;
	position: relative;
	height: 100%;
}

monitoring-time-navigation div.highlight-datetime input {
	border: transparent solid 1px;
	box-shadow: inset 0 0 0 2px var(--color-primary-light);
	background-color: var(--color-primary-20);
}

/* ts only */
body:not(.no-fixed-grid) grid:not(.fullscreen) .grid-style-selector li i.fa.fa-columns {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

.map button {
	border: none;
}

#mda sim-status-overlay .simstatus {
	display: flex;
	align-items: center;
}

#mda sim-status-overlay {
	display: inline-block;
	z-index: 1000;
}

#mda sim-status-overlay .simstatus > div {
	display: flex;
	align-items: center;
	margin: 0 0 0 5px;
}

#mda sim-status-overlay .progress {
	margin: 5px 0 0 0;
}

.display-options label {
	font-weight: normal;
}

.alert.alert-warning a,
.alert.alert-danger a {
	color: var(--color-neutral-white);
}

#fullscreen-plot {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	padding: 20px;
	background: var(--color-neutral-white);
	box-shadow: 0 0 8px 0 var(--color-shadow);
	z-index: 5001;
	margin: 10px;
}

#fullscreen-plot dragdropchart,
#fullscreen-plot chart,
#fullscreen-plot .chart {
	height: 100%;
}

#fullscreen-plot dragdropchart dynamicdatachart {
	height: calc(100% - 42px);
}

/* disable the button of a bs-select if the select is disabled */
select[bs-select]:disabled + button {
	background-color: var(--color-neutral-medium-dark);
	border-color: var(--color-neutral-medium-dark);
	opacity: 0.65;
	pointer-events: none;
	cursor: not-allowed;
}

.options label {
	font-weight: normal;
}

/* Alerts */
.alerts .label.round {
	padding: 0 0.4em 0;
	border-radius: 0.3em;
	font-size: 0.9em;
}

.alerts section .section-header {
	background: var(--color-neutral-white);
	color: var(--color-neutral-black);
	font-weight: bold;
	padding: 5px 0;
}

grid-alerts-summary .scroll-container,
alerts-summary .scroll-container {
	margin: 0 -10px;
}

grid-alerts-summary .section-header,
alerts-summary .section-header {
	margin-bottom: 10px;
	font-size: 17px;
}

alerts-summary td {
	overflow-x: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.alerts section .section-header:hover {
	background-color: var(--color-neutral-lighter-20);
}

.time-navigation {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.time-navigation .datepicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	z-index: 1;
}

.time-navigation .range-jumper {
	display: flex;
}

.time-navigation .range-jumper > div {
	display: flex;
	align-items: center;
	margin-right: 5px;
}

.time-navigation .range-jumper label {
	margin-bottom: 0;
	padding: 0 5px;
}

.time-navigation .range-jumper .btn-group {
	margin-right: 4px;
}

.time-navigation .range-jumper button {
	padding: 5px 8px;
}

.time-navigation .datepicker input {
	font-size: 0.8em;
	padding: 3px 6px;
}

.time-navigation .datepicker input[bs-timepicker] {
	width: 45px !important;
}

.time-navigation .datepicker input[bs-datepicker] {
	width: 80px !important;
}

chartdragdrop input[bs-datepicker] {
	width: 100px !important;
	margin-right: 5px;
}

chartdragdrop input[bs-timepicker] {
	width: 60px !important;
}

.time-navigation .range-jumper button:focus {
	outline: none;
}

.time-navigation .range-jumper button.active {
	background: var(--color-neutral-light) !important;
}

table.nested {
	width: 100%;
	margin-top: 3px;
}

table.nested th,
table.nested td {
	text-align: left;
	padding: 4px 6px;
}

table.nested td.number,
table.nested th.number {
	text-align: right;
}

table.nested td {
	font-weight: normal;
}

table.nested th.warning.background,
table.nested td.warning.background {
	color: var(--color-neutral-black);
	background-color: var(--color-plot-line-warning);
}

table.nested th.violation.background,
table.nested td.violation.background {
	background-color: var(--color-plot-line-violation-60);
}

.alerts table .fa.fa-square.ml {
	margin-left: 16px;
}

.fa.fa-square.correct::before {
	color: var(--color-plot-line-correct) !important;
}

.fa.fa-square.warning::before {
	color: var(--color-plot-line-warning) !important;
}

.fa.fa-square.violation::before {
	color: var(--color-plot-line-violation) !important;
}

.fa.fa-warning.warning::before {
	color: var(--color-warning) !important;
}

.fa.fa-square.not-connected {
	color: var(--color-neutral-light);
}

.fa.fa-square.not-disconnected {
	color: var(--color-plot-line-violation);
}

table.nested th.border,
table.nested td.border {
	border-left: solid 2px var(--color-neutral-super-light);
}

table.nested th.warning.border,
table.nested td.warning.border {
	color: var(--color-neutral-black);
	border-left: solid 5px var(--color-plot-line-warning);
}

table.nested th.violation.border,
table.nested td.violation.border {
	border-left: solid 5px var(--color-plot-line-violation);
}

.alerts i.fa.fa-angle-down,
alerts-list-gst .fa-angle-down,
.alerts i.fa.fa-angle-right,
alerts-list-gst .fa-angle-right {
	width: 10px;
	margin-right: 6px;
	text-align: right;
}

alerts-list-gst table.nested td,
alerts-list-gst table.nested th {
	padding: 3px 2px;
}

alerts-list-gst .scrolled {
	max-height: 30vh;
	overflow-x: hidden;
}

.report alerts-list-gst .scrolled {
	max-height: initial;
}

.alerts a.no-underline,
.no-underline {
	text-decoration: none !important;
}

.alerts a.no-underline:hover {
	text-decoration: underline;
}

.alerts .item-id {
	display: none;
	color: var(--color-neutral-darker);
}

.alerts .toggler:hover .item-id {
	display: inherit;
	float: right;
}

th.narrow,
td.narrow {
	width: 12%;
}

#mda [bs-select] {
	padding-right: 12px;
}

#mda .input-group input {
	border-left: none;
}

#mda .input-group input:first-child {
	border-left: 1px solid var(--color-border);
}

/* EDB: Component Library */
table .number,
.number {
	text-align: right;
}

table .no-wrap {
	white-space: nowrap;
}

.component-library-matching {
	overflow: hidden;
}

.component-library-matching .table-container {
	overflow-x: auto;
}

.component-library-matching table {
	border: 1px solid var(--color-border);
	border-collapse: collapse;
	margin: 22px 0;
}

/* .component-library-matching table th {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
 */

.component-library-matching table td,
.component-library-matching table th {
	vertical-align: top;
	padding: 4px 8px 4px 8px;
	border-bottom: 1px solid var(--color-border);
}

.no-border-bottom {
	border-bottom: none !important;
}

.component-library-matching table .no-border-bottom {
	border-bottom: none;
}

.component-library-matching td .btn {
	padding: 5px 10px;
	font-size: 13px;
	line-height: 1.5;
}

.component-library-matching table th {
	text-align: left;
	border-bottom-width: 2px;
	background: var(--color-neutral-super-light);
}

.component-library-matching table tr.checked .highlight {
	background: var(--color-neutral-medium-20);
}

.component-library-matching .match td {
	color: var(--color-neutral-darker);
}

.component-library-matching .match.checked td {
	color: var(--color-neutral-super-dark);
}

link-to {
	display: inline-block;
}

link-to.btn {
	padding: 0;
}

link-to.btn a {
	display: block;
	padding: 6px 12px;
	text-decoration: none !important;
}

link-to.btn.btn-primary span {
	color: var(--color-neutral-white);
}

link-to.btn.btn-default span {
	color: var(--color-neutral-dark);
}

.dropdown-menu li a,
.dropdown-menu li span.like-a {
	padding: 6px 16px;
	text-decoration: none;
}

.dropdown.align-right ul {
	width: 215px;
	left: calc(100% - 215px);
	margin-top: 9px;
}

.dropdown.align-left ul {
	margin-top: 9px;
}

.grid-inspector-properties ul.ui-select-choices {
	right: 0;
	left: auto;
	width: 240px;
}

.overview-table .ui-select-match {
	max-width: 200px;
}

.grid-inspector-properties.table {
	background-color: transparent;
}

.grid-inspector-properties .heading {
	margin: 0 0 5px 0;
}

.grid-inspector-properties {
	margin: 0;
}

.grid-inspector-properties .td.has-input {
	overflow: visible;
}

.grid-inspector-properties .td.has-input .input-group .form-control + .btn {
	position: relative;
	top: 1px;
}

.grid-inspector-properties section:first-of-type .tr:first-child:not(.phase-heading) .td,
.grid-inspector-properties section:first-of-type grid-inspector-property-row:first-child:not(.phase-heading) .td,
.grid-inspector-properties section:first-of-type phasewise-grid-inspector-property-row:first-child:not(.phase-heading) .td {
	border-top: 1px solid var(--color-border);
}

.grid-inspector-properties .phase-heading {
	margin-top: 15px;
	text-align: left;
	font-weight: bold;
	border-bottom: 1px solid var(--color-border);
	display: flex;
}

form .tr:not(.phase-heading),
.grid-inspector-properties .tr:not(.phase-heading),
grid-inspector-property-row,
phasewise-grid-inspector-property-row {
	display: flex;
	text-align: left;
}

.grid-inspector-properties .tr:not(.phase-heading),
grid-inspector-property-row,
phasewise-grid-inspector-property-row {
	border-bottom: 1px solid var(--color-border);
}

form .td,
.grid-inspector-properties .td,
grid-inspector-property-row .td,
phasewise-grid-inspector-property-row .td {
	padding: 5px 5px 5px 0;
	width: 50%;
	word-wrap: break-word;
}

phasewise-grid-inspector-property-row .td {
	display: flex;
	align-items: center;
}

.grid-inspector-properties .td.full-width {
	width: 100%;
	overflow: hidden;
	padding-right: 0;
	display: flex;
}

.grid-inspector-properties .td.full-width > link-to {
	overflow: hidden;
}

.grid-inspector-properties .td.full-width > link-to > a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.grid-inspector-properties .td.full-width > * {
	flex-grow: 1;
}

.grid-inspector-properties .td.full-width > infotext {
	flex-grow: 0;
}

.grid-inspector-properties .td:nth-child(2),
grid-inspector-property-row .td:nth-child(2),
phasewise-grid-inspector-property-row .td:nth-child(2) {
	padding-right: 0;
}

.grid-inspector-properties .td :not(.dropdown) > button.btn-xs {
	position: relative;
	width: 22px;
}

grid-inspector-property-row .has-input,
phasewise-grid-inspector-property-row .has-input {
	padding: 3px 0;
	vertical-align: middle;
}

grid-inspector-property-row .input-group,
phasewise-grid-inspector-property-row .input-group {
	width: 100%;
}

grid-inspector-property-row .input-group .btn,
grid-inspector-property-row selectsearch > .bootstrap-select.btn-group .btn,
phasewise-grid-inspector-property-row .input-group .btn,
phasewise-grid-inspector-property-row selectsearch > .bootstrap-select.btn-group .btn {
	border: 1px solid var(--color-border);
	border-left: none;
}

grid-inspector-property-row selectsearch > .bootstrap-select.btn-group,
phasewise-grid-inspector-property-row selectsearch > .bootstrap-select.btn-group {
	width: 100% !important;
}

/* ts only */
.bootstrap-select.btn-group .dropdown-toggle.btn-xs {
	padding-right: 20px !important;
}

grid-inspector-property-row .bootstrap-select.btn-group .dropdown-toggle .filter-option,
phasewise-grid-inspector-property-row .bootstrap-select.btn-group .dropdown-toggle .filter-option {
	font-size: 13.5px;
	text-align: center;
	color: var(--color-neutral-black);
}

.grid-inspector-properties .flex-align-center input[type="checkbox"] {
	margin-top: 0;
}

.grid-inspector-properties .grid-inspector-properties-meter-key-entry,
.grid-inspector-properties .grid-inspector-properties-meter-value-entry {
	padding-top: 1px;
	padding-bottom: 1px;
}

.grid-inspector-properties .td.has-input .input-group-xs > .form-control,
.grid-inspector-properties .td.has-input .input-group-xs > .input-group-addon,
.grid-inspector-properties .td.has-input .input-xs {
	font-size: 13.5px;
}

.grid-inspector-properties .td.has-input .input-group-xs > .form-control,
.grid-inspector-properties .td.has-input .input-xs,
.grid-element-inspector .ui-select-bootstrap .ui-select-choices-row > span {
	padding: 2px 4px !important;
}

ng-select,
ng-multiple-select {
	flex: 1;
	min-width: 0;
}

.grid-inspector-properties .ng-select.custom .ng-select-container .ng-value-container .ng-value {
	font-size: 13.5px;
}

.grid-inspector-properties .ng-select.custom .ng-select-container .ng-value-container .ng-value strong {
	font-weight: normal;
}

.projects-toolbar ng-select .ng-dropdown-panel {
	width: auto;
}

.projects-toolbar ng-select#sort-by {
	min-width: fit-content;
}

.grid-element-inspector-body .section-content {
	display: block;
	padding: 5px 0;
}

.label-for-chart {
	margin-top: -10px;
	position: relative;
}

@media print {
	.container {
		width: auto;
		min-width: 750px;
	}

	a[href]::after {
		content: none;
	}

	body {
		font-size: 10pt;
		line-height: 1.3;
		margin: 0;
		margin-top: -15px;

		margin-bottom: -15px;
		padding: 0 !important;
		min-width: 768px;
		background: var(--color-neutral-white) !important;
		color: var(--color-neutral-black);
	}

	#content,
	#content > .scrolling {
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		position: relative !important;
		overflow: visible !important;
		left: 0 !important;
	}

	grid {
		position: relative !important;
		width: 100vw !important;
		height: auto !important;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	.panel-heading {
		page-break-after: avoid;
		page-break-inside: avoid;
	}

	.panel.panel-default,
	grid,
	svg,
	.avoid-page-break-inside,
	.avoid-page-break {
		page-break-inside: avoid;
	}

	.page-break-before {
		page-break-before: always;
	}

	#component-overview .panel {
		page-break-inside: auto !important;
	}

	#component-overview panel-body grid-upgrade-comparison-table table {
		display: table !important;
	}

	#header,
	#footer,
	#navigation,
	.divider,
	.collapser,
	.no-print,
	.ht_clone_top.handsontable,
	#static-connection-request .panel .panel-heading .fa.fa-angle-down,
	#static-connection-request .panel .panel-heading .fa.fa-angle-right,
	info-text,
	helphighlight i.fa.fa-question-circle,
	.pageslidehelp,
	.grid-element-inspector,
	.grid-messages,
	.grid-toolbar,
	.grid-search,
	.grid-style-selector,
	.htAutocompleteArrow,
	.bs-caret,
	.leaflet-control,
	trix-toolbar {
		display: none !important;
	}

	.only-print,
	dachcz-input.ng-hide:not(.ng-hide-animate),
	dachcz-results.ng-hide:not(.ng-hide-animate),
	dachcz-results .panel .panel-body.ng-hide:not(.ng-hide-animate),
	vdearn-input.ng-hide:not(.ng-hide-animate),
	vdearn-results.ng-hide:not(.ng-hide-animate),
	vdearn-results .panel .panel-body.ng-hide:not(.ng-hide-animate) {
		display: initial !important;
	}

	.row,
	.radio label,
	.checkbox label {
		margin-top: 0 !important;
	}

	label,
	.highcharts-container {
		margin-top: 15px !important;
	}

	.error-border {
		border-top: solid 0 var(--color-neutral-white) !important;
		padding-top: 0;
	}

	dachcz-label .label-warning {
		border-color: var(--color-warning);
		color: var(--color-warning) !important;
	}

	dachcz-label .label-success {
		border-color: var(--color-success);
		color: var(--color-success) !important;
	}

	dachcz-label .label-danger {
		border-color: var(--color-error);
		color: var(--color-error) !important;
	}

	div[ui-scroll-viewport] {
		overflow: hidden !important;
	}

	trix-editor {
		padding: 0;
	}
}

.only-print {
	display: none;
}

.only-print-table {
	display: none;
}

.btn-default.toggle {
	background-color: transparent !important;
	border: 1px solid var(--color-border) !important;
}

.btn-default.toggle:hover {
	background-color: var(--color-neutral-super-light) !important;
}

.btn-default.toggle.active,
.grid-element-inspector-element-actions .btn.active {
	background-color: var(--color-primary-light) !important;
	color: var(--color-neutral-white);
	border: 1px solid var(--color-primary-light) !important;
}

a.toggle.active {
	color: var(--color-primary-light);
	pointer-events: none;
	cursor: default;
}

#static-connection-request .fa-check-circle {
	color: inherit;
}

#static-connection-request .results-invalid {
	opacity: 0.4;
	user-select: none;
	pointer-events: none;
}

dachcz-result-info button.btn {
	border-radius: 9999px !important;
	width: 28px !important;
	height: 28px !important;
	line-height: 28px !important;
	padding: 0 !important;
}

label.caps {
	text-transform: uppercase;
	font-weight: normal;
	color: var(--color-neutral-darker) 999;
	letter-spacing: 0.04em;
	margin-top: 0;
	display: block;
}

.project-settings label.caps:not(:first-child) {
	margin-top: 15px;
}

.popover label.caps,
.inline {
	display: inline;
}

#static-connection-request .input-group span.form-control.result + .input-group-addon,
#static-connection-request span.form-control.result {
	background-color: var(--color-neutral-super-light);
}

.change-device-power .old-value {
	color: var(--color-neutral-medium);
}

.change-device-power .new-value {
	font-weight: bold;
}

#static-connection-request span.form-control.result.outdated {
	color: var(--color-neutral-darker);
}

#static-connection-request span.form-control.result.success + .input-group-addon,
#static-connection-request span.form-control.result.success {
	background-color: var(--color-success) 20;
	border: solid 2px var(--color-success);
}

#static-connection-request span.form-control.result.warning + .input-group-addon,
#static-connection-request span.form-control.result.warning {
	background-color: var(--color-warning) 20;
	border: solid 2px var(--color-warning);
}

.baseline-aligned .row,
.row.baseline-aligned {
	align-items: baseline;
	display: flex;
}

.error-border {
	border-top: solid 2px var(--color-error);
	padding-top: 13px;
}

/* GST: Stress Test */
.form-horizontal .form-control-static,
.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
	padding-top: 8px;
}

.form-horizontal .radio,
.form-horizontal .checkbox {
	padding-left: 0;
}

.form-horizontal .radio .radio-inline,
.form-horizontal .radio .checkbox-inline {
	padding-top: 0;
	margin-right: 10px;
}

.radio label,
.checkbox label {
	display: inline;
}

.radio label.display-block,
.checkbox label.display-block {
	display: block;
}

.form-horizontal .control-label {
	text-align: left;
}

.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
	margin-left: 0;
}

/* * custom directives that should be block style */
chartdragdrop,
highchart,
alerts,
param-editor-hot,
project-settings-panel,
edit-grid,
grid,
gridmap,
grid-schematic,
select-grid-element,
search-grid-element,
tabs,
tab {
	display: block;
}

.flex > select-grid-element {
	flex: 1;
}

.panel .panel-heading {
	display: flex;
}

.panel.collapseable .panel-heading {
	position: relative;
	cursor: pointer;
}

.panel-heading .collapser {
	display: none;
	width: 20px;
	margin-right: 5px;
	justify-content: center;
	align-items: center;
}

.panel.collapseable .collapser {
	display: flex;
}

/* .snapshot-category {
	display: flex;
	white-space: nowrap;
	justify-content: space-between;
}
 */
value-distribution .row {
	margin-top: 5px;
}

value-distribution > .row:first-child {
	margin-top: 0;
}

value-distribution .col-sm-6:not(:first-child) {
	padding-left: 5px;
}

value-distribution .col-sm-6:first-child {
	padding-right: 5px;
}

snapshot-scale-existing-element .row.header,
snapshot-additional-elements .row.header {
	font-weight: bold;
}

snapshot-scale-existing .row > *:not(:last-child),
snapshot-additional-elements .row > *:not(:last-child) {
	padding-right: 0;
}

snapshot-scale-existing .row.entry > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

snapshot-scale-existing .list-with-action-buttons .entry {
	padding: 0;
}

.list-with-action-buttons.table .entry > div {
	overflow: hidden;
}

.list-with-action-buttons.table .entry,
snapshot-additional-elements .list-with-action-buttons .entry {
	padding: 5px 0;
	display: block;
}

snapshot-scale-existing .name {
	overflow: hidden;
}

snapshot-scale-existing .scaling-range > div {
	display: flex;
	align-items: center;
}

snapshot-scale-existing .scaling-range > div > * {
	width: 50%;
}

/* TODO: Check in other contexts than reports */
alerts-list-gst {
	display: block;
	margin-bottom: 10px;
}

alerts-list-gst h4 {
	margin: 0;
	padding: 4px 0;
	font-size: 18px;
}

alerts-list-gst th,
alerts-list-gst .nowrap {
	white-space: nowrap;
}

alerts-list-gst .pointer tr:hover td,
alerts-list-gst .toggler.toggled td {
	background: var(--color-neutral-light);
}

alerts-list-gst tbody {
	border-right: 1px solid var(--color-border);
	border-left: 1px solid var(--color-border);
}

alerts-list-gst tbody td {
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}

alerts-list-gst tbody:not(.toggler) .fa-square {
	margin-left: 5px;
}

alert-range .alert-range-item,
grid-health .alert-range-item {
	height: 12px;
}

alert-range .alert-range-item:first-of-type,
grid-health .alert-range-item:first-of-type {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

alert-range .alert-range-item:last-of-type,
grid-health .alert-range-item:last-of-type {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

alert-range .alert-range-item.correct,
grid-health .alert-range-item.correct {
	background-color: var(--color-success);
}

alert-range .alert-range-item.warning,
grid-health .alert-range-item.warning {
	background-color: var(--color-plot-line-warning);
}

alert-range .alert-range-item.violation,
grid-health .alert-range-item.violation {
	background-color: var(--color-error);
}

alert-range .alert-range-item.default,
grid-health .alert-range-item.default {
	background-color: var(--color-neutral-light);
}

grid-health .tooltip-inner,
alert-range .tooltip-inner {
	max-width: none;
}

alert-range .tooltip-inner i:not(:first-child) {
	padding-left: 10px;
}

alerts-summary wa,
grid-alerts-summary wa {
	color: var(--color-neutral-dark);
}

alerts-summary > alert-range,
grid-alerts-summary > alert-range {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

alerts-summary > alert-range:hover .alert-range-item,
grid-alerts-summary > alert-range:hover .alert-range-item {
	height: 12px;
}

alerts-summary > alert-range > div,
grid-alerts-summary > alert-range > div {
	display: flex;
}

alerts-summary > alert-range .alert-range-item,
grid-alerts-summary > alert-range .alert-range-item {
	height: 5px;
	transition: ease height 0.1s;
	border-radius: 0 !important;
}

#imt .checkbox label {
	display: table;
	margin: 2px 0;
}

#imt param-editor-hot s {
	color: var(--color-neutral-darker);
}

alert-rules,
color-legend-editor {
	display: block;
}

alert-rules .modal-footer,
color-legend-editor .modal-footer {
	margin-right: -20px;
	margin-bottom: -20px;
	margin-left: -20px;
}

alert-rules .modal-footer.no-modal,
color-legend-editor .modal-footer.no-modal {
	padding: 15px 0 5px;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 0;
}

.grid-and-addon-selection {
	display: flex;
}

.grid-and-addon-selection .entity-selection {
	max-width: 400px;
	flex-grow: 1;
}

.grid-and-addon-selection .entity-selection .grid-addon-selection {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	min-width: 0;
}

.grid-and-addon-selection .entity-selection label,
.entity-selection label {
	display: block;
	font-size: 12px;
	font-weight: normal;
	color: var(--color-neutral-darker);
}

.grid-and-addon-selection .grid-addon-selection .flex,
.grid-and-addon-selection .grid-addon-selection .flex > button {
	margin-right: 0;
}

.grid-selection,
.grid-addon-selection {
	width: 50%;
	display: flex;
	flex-direction: column;
	font-size: 12px;
	font-weight: normal;
	color: var(--color-neutral-darker);
}

table.overview-table {
	width: 100%;
}

table.overview-table thead th {
	width: 25%;
	white-space: nowrap;
}

table.overview-table thead {
	border-bottom: 1px solid var(--color-neutral-black);
}

table.overview-table tbody tr:nth-child(even) {
	background-color: var(--color-neutral-super-light);
}

table.overview-table td,
table.overview-table th {
	padding: 2px 4px;
}

table.overview-table tfoot {
	border-top: 2px solid var(--color-neutral-black);
	border-bottom: 2px solid var(--color-neutral-black);
}

.edit-project {
	padding: 15px;
	flex-grow: 1;
}

.edit-project .panel-heading {
	padding: 0;
	margin-bottom: 15px;
}

.edit-project .panel-body {
	padding: 0;
}

.project-settings-panel {
	padding: 15px;
	margin-top: 10px;
	border: 1px solid var(--color-border);
}

.project-settings-panel h5 {
	margin: 0 0 10px;
}

/* Why would one do something like that? */
.project-settings .input-with-label,
.project-settings input[type="number"],
.project-settings .input-group,
.project-settings .input-group-xs,
.project-settings .list-with-action-buttons,
.project-settings selectsearch {
	max-width: 300px;
	width: 100%;
}

.modal .download-source-title.row {
	margin: 0 -3px 15px;
	border-bottom: 1px solid var(--color-border);
	font-size: 0.9em;
	color: var(--color-neutral-darker);
}

.download-source.row {
	margin-top: 0;
}

.modal .download-source.row {
	margin: 0 -3px 5px;
}

.modal .download-source-title .col-sm-6,
.modal .download-source-title .col-sm-4,
.modal .download-source-title .col-sm-2,
.modal .download-source .col-sm-6,
.modal .download-source .col-sm-4,
.modal .download-source .col-sm-2 {
	padding: 0 3px;
}

.modal .download-source .form-control {
	margin-bottom: 3px;
}

.modal .download-source select {
	width: 100%;
}

.dropdown-menu {
	/* Original z-index: 1000; the leaflet controls also have z-index: 1000, so increasing this by one so that the leaflet controls don't shine through. */
	z-index: 1003 !important;
	border-color: var(--color-border);
}

.modal .dropdown-menu {
	/* UPDATE DPG-3790: modal (Manage in SmartMeter Time Series Datasets in has z-index 10500000 and datepicker appears below, 10500002 is enough to fix */
	z-index: 10500002 !important;
}

/* ts only */
body.modal-open > .ui-select-bootstrap.open {
	z-index: 10500002;
}

.dropdown-menu hr {
	margin: 5px 0 !important;
}

.dropdown-menu a wa {
	display: inline-block;
	width: 16px;
	height: 16px;
}

.dropdown-menu label.menu-section-title {
	margin: 10px 0 0 10px;
	pointer-events: none;
}

.dropdown-menu label.menu-section-title * {
	pointer-events: none;
}

.dropdown-menu .bullet {
	position: absolute;
	display: block;
	background-color: var(--color-neutral-black);
	border-radius: 50%;
	width: 6px;
	height: 6px;
	top: -8px;
	left: 4px;
}

.dropdown-menu a:hover .bullet {
	background-color: var(--color-neutral-white);
}

.dropdown-menu.datepicker,
.dropdown-menu.timepicker {
	/* modal has z-index 10500000; make it possible to show datepickers in modals */
	z-index: 10500001 !important;
}

/* DPG-3927 fix for IE11 */
.is-ie11 .dropdown-menu {
	overflow: visible !important;
}

.grid-statistics .tr:first-child .td {
	border-top: 1px solid var(--color-border);
}

grid-statistics .grid-inspector-properties .td {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

selectitem {
	display: block;
	width: 100%;
}

selectsearch {
	display: flex;
}

selectsearch > .btn-group,
selectsearch > .bootstrap-select {
	flex: 1;
	min-width: 0;
}

selectsearch .filter-option-inner-inner {
	text-overflow: ellipsis;
}

.input-group-btn selectsearch > .btn-group {
	width: initial !important;
}

selectsearch > .btn-group > .btn {
	display: block;
}

label.category {
	margin: 0;
	font-weight: normal;
}

.panel-custom-heading {
	flex: 1;
	margin-left: auto;
}

.panel-custom-heading custom-heading {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 5px;
}

.panel-custom-heading dachcz-label {
	margin-left: auto;
}

.panel-body {
	position: relative;
	page-break-inside: avoid;
}

.icon > * {
	stroke: inherit;
	stroke-width: 1;
	fill: none;
}

.icon .filled-path {
	fill: inherit;
}

.icon .filled-text {
	fill: inherit;
	font-size: 12px;
	font-weight: normal;
}

.icon.bold-stroke > * {
	stroke-width: 2 !important;
}

.grid-customer-list .control-label {
	display: block;
	margin-bottom: 8px;
}

.gridmap {
	height: 100%;
}

.map-wrapper {
	width: 100%;
	height: 100%;
}

grid-actions .btn:not(:last-child) {
	margin-right: 5px;
}

/* DPG-3790 fix for IE11 */
#project-search-wrapper-div {
	max-width: 300px;
}

/* removes the up/down arrows from input fields */
.no-arrows::-webkit-outer-spin-button,
.no-arrows::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

@media (min-width: 1024px) {
	.modal-edit-monlite {
		width: 900px;
	}
}

@media (min-width: 1024px) {
	.modal-limited-width {
		width: 1024px;
	}
}

.project-setting-hline {
	/* margin: 0 -3px 0px; */
	padding-left: 0px;
	padding-right: 0px;
	border-bottom: 1px solid var(--color-border);
}

body.report {
	display: block;
	padding: 0;
	background-color: var(--color-neutral-white);
}

body.report .company-logo {
	padding: 0;
	margin: 20px 0;
	width: 300px;
}

.report .no-print:not(.visible-report) {
	display: none !important;
}

.report .only-print {
	display: block;
}

.report created-modified .row {
	margin-top: 0 !important;
}

.no-bottom-margin .only-print {
	display: none;
}

.report .only-print-table {
	display: table;
}

@media screen {
	body.report {
		overflow-y: auto;
	}

	body.report #content {
		width: 210mm;
		margin: 0 auto;
	}

	body.report.landscape #content {
		width: 297mm;
	}

	body.report .highcharts-container {
		width: 100% !important;
	}
}

body.report #content > .scrolling {
	position: relative;
	padding: 0;
	background-color: var(--color-neutral-white);
	overflow-y: hidden;
}

body.report #navigation {
	display: none;
}

body.report .title {
	font-size: 24px;
	margin: 20px 0;
}

body.report h1 {
	font-size: 24px;
	font-weight: bold;
}

body.report h2 {
	font-size: 20px;
	font-weight: bold;
}

body.report h3,
body.report .panel .panel-heading {
	font-size: 20px;
	font-weight: bold;
	margin: 20px 0 10px;
}

body.report h4 {
	font-size: 18px;
	font-weight: bold;
	margin: 20px 0;
}

/*
 * Avoid page breaks after headings
 * Cf. https://stackoverflow.com/questions/9238868/how-do-i-avoid-a-page-break-immediately-after-a-heading, answer by Zenorbi
 */
body.report h1,
body.report h2,
body.report h3,
body.report h4 {
	page-break-inside: avoid;
}

body.report h1::after,
body.report h2::after,
body.report h3::after,
body.report h4::after {
	content: "";
	display: block;
	height: 100px;
	margin-bottom: -100px;
	z-index: -1;
	position: relative;
}

body.report table {
	width: 100%;
}

body.report table:not(.ccr-table) {
	border-top: 1px solid var(--color-neutral-dark);
	border-bottom: 1px solid var(--color-neutral-dark);
}

table.report {
	width: 100%;
	border-top: 1px solid var(--color-neutral-dark);
}

body.report table thead,
table.report thead {
	border-bottom: 1px solid var(--color-neutral-dark);
}

body.report table tbody tr:nth-child(even) {
	background-color: var(--color-neutral-super-light);
}

table.report tbody {
	border-bottom: 1px solid var(--color-neutral-black);
}

body.report table td,
body.report table th,
table.report td,
table.report th {
	padding: 2px 5px;
}

table.report td {
	word-break: break-all;
}

.decimal-align {
	text-align: right;
	padding-right: 60px;
}

.decimal-align .after-decimal {
	position: absolute;
	display: inline;
}

body.report .limits-inputs {
	margin: 0;
}

body.report .alerts-legend {
	margin-bottom: 40px;
}

body.report .alert-rule {
	margin-bottom: 10px;
}

body.report ul {
	list-style-type: none;
	padding: 0;
}

body.report ul label {
	font-weight: normal;
}

body.report grid {
	width: 100% !important;
}

body.report .chart-wrapper {
	margin-bottom: 30px;
	page-break-inside: avoid;
}

body.report .chart-type-switcher {
	position: relative;
	float: right;
	margin-top: 15px;
	z-index: 1;
}

body.report .grid-viewer {
	flex-direction: column-reverse;
}

body.report .grid-legend {
	position: relative;
	top: 0;
	left: 0;
	margin: 0;
	width: auto;
	flex-direction: row;
	justify-content: flex-start;
	border-top: 1px solid var(--color-border);
}

body.report .grid-legend-label {
	margin-top: 0 !important;
	margin-bottom: 10px;
	padding-left: 0;
}

body.report .grid-legend-item {
	box-shadow: none;
	max-width: 25%;
	margin: 0;
}

body.report .panel-heading,
body.report .panel-body,
body.report .panel-footer {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@media print {
	.col-print-6 {
		width: 50% !important;
		float: left;
	}

	body.report table tbody tr:nth-child(even) {
		background: var(--color-neutral-super-light) !important;
	}
}

.nav > li a.disabled,
.nav > li a.disabled:hover {
	cursor: not-allowed;
	color: var(--color-neutral-darker);
	background-color: transparent;
}

.nav-tabs > li.active > link-to > a,
.nav-tabs > li.active > link-to > a:hover,
.nav-tabs > li.active > link-to > a:focus {
	color: var(--color-neutral-super-dark);
	background-color: var(--color-neutral-white);
	border: 1px solid var(--color-border);
	border-bottom-color: transparent;
	cursor: default;
}

.nav-pills > li a {
	height: 38px;
	padding: 8px 20px !important;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border: none;
	border-radius: 19px;
}

.nav > li a:hover {
	background-color: var(--color-neutral-super-light);
}

.nav-pills > li.active > a,
.nav-pills > li.active > span > a,
.nav-pills > li.active > link-to > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > link-to > a:hover,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > link-to > a:focus {
	background-color: var(--color-primary-background-light);
	color: var(--color-primary-dark);
	text-decoration: none;
}

grid .nav-pills > li a {
	min-width: 34px;
	height: 34px;
	line-height: 34px;
	padding: 0 8px !important;
	white-space: normal;
	overflow: visible;
	border: none;
	border-radius: 0;
}

grid .nav-pills > li.active > a,
grid .nav-pills > li.active > a:hover,
grid .nav-pills > li.active > a:focus,
grid .nav-pills > li.active > link-to > a,
grid .nav-pills > li.active > link-to > a:hover,
grid .nav-pills > li.active > link-to > a:focus,
.hover-invert-blue:hover {
	background-color: var(--color-primary-light);
	color: var(--color-neutral-white);
}

.nav-pills[disabled] a {
	color: var(--color-neutral-darker);
}

.nav-pills.grid-style-selector[disabled] a {
	pointer-events: none;
}

.nav-pills[disabled] > li.active > a,
.nav-pills[disabled] > li.active > a:hover,
.nav-pills[disabled] > li.active > a:focus,
.nav-pills[disabled] > li.active > link-to > a,
.nav-pills[disabled] > li.active > link-to > a:hover,
.nav-pills[disabled] > li.active > link-to > a:focus {
	background-color: var(--color-neutral-darker);
}

.form-content-container {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 50%;
	margin: 0 auto;
	padding: 20px 20px 20px 0;
	max-width: 600px;
	margin-top: -100px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.form-content-container .page-header {
	border-bottom: none;
	margin-bottom: 0;
}

.form-content-container.totp .page-body {
	gap: 15px;
}

.form-content-container.totp .info-header {
	padding-bottom: 15px;
	border-bottom: 1px solid var(--color-border);
}

.mfa-setup-form-container {
	flex-direction: row;
	margin-top: 20px;
	gap: 15px;
}

.mfa-setup-form-container .steps-container {
	flex: 1 1 50%;
	flex-direction: column;
	justify-content: space-between;
	gap: 15px;
}

.mfa-setup-form-container .steps-container .form-group {
	margin: 0;
}

.mfa-setup-form-container .steps-container ol {
	font-size: 13px;
	padding-left: 20px;
}

.mfa-setup-form-container .steps-container li:not(:last-child) {
	margin-bottom: 15px;
}

.mfa-setup-form-container .img-container {
	flex: 1 1;
	flex-direction: column;
	align-items: start;
	gap: 15px;
}

.mfa-setup-form-container .img-container img {
	width: 200px;
}

.mfa-setup-form-container .secret-container {
	width: 100%;
	color: var(--color-neutral-darker);
	font-size: 12px;
	align-items: center;
	justify-content: start;
	gap: 10px;
}

.mfa-setup-form-container .secret-container i {
	cursor: pointer;
	color: var(--color-neutral-dark);
	font-size: 15px;
}

.mfa-setup-form-container .secret-container i:hover {
	color: var(--color-primary-light);
}

.mfa-setup-form-container .secret-container span.copy-animation {
	animation: copyAnimation 600ms linear;
}

@keyframes copyAnimation {
	0% {
		color: inherit;
	}
	50% {
		color: var(--color-button-background);
	}
	100% {
		color: inherit;
	}
}

@media (max-width: 992px) {
	.mfa-setup-form-container {
		flex-direction: column;
	}

	.mfa-setup-form-container .img-container {
		align-items: center;
	}

	.totp-container form {
		justify-content: center;
	}
}

.form-img-container {
	display: grid;
	width: 50%;
	height: 100%;
}

.form-img-container .img-container {
	width: 100%;
	clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
}

.form-img-container .img-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#login-logo {
	align-self: flex-end;
	max-height: 75px;
	max-width: 100%;
}

.totp-container form {
	display: flex;
	justify-items: start;
	gap: 6px;
}

.totp-container .input-cell {
	width: 45px;
	height: 56px;
	border-radius: 10px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}

@media (max-width: 400px) {
	.form-content-container {
		left: 40%;
	}
}

body:not(.report) tabs.project-overview tab > * {
	height: calc(100vh - 230px);
	overflow-y: auto;
}

/* ts only */
.highlight-ring {
	border: 3px solid var(--color-neutral-darker);
	border-radius: 50%;
	-webkit-border-radius: 50%;
	height: 50px;
	width: 50px;
	animation: pulsate 1s ease-out;
	-webkit-animation: pulsate 1s ease-out;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulsate {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@-webkit-keyframes pulsate {
	0% {
		-webkit-transform: scale(0.1, 0.1);
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(1.2, 1.2);
		opacity: 0;
	}
}

.basic-params-table {
	table-layout: auto !important;
}

.basic-params-table th {
	width: 1px;
	padding: 2px 0;
	white-space: nowrap;
}

body:not(.report) .chart-table-container {
	max-height: calc(100% - 35px);
}

.pq-event-table {
	table-layout: fixed;
	border-collapse: collapse;
	margin: 0 0 50px 0;
	page-break-inside: avoid;
}

.pq-event-table thead,
.pq-event-table tbody {
	border-top: 1px solid var(--color-neutral-black);
	border-bottom: 2px solid var(--color-neutral-black);
}

.pq-event-table tbody tr:not(:last-child) {
	border-bottom: 1px solid var(--color-border);
}

.pq-event-table .grouped-heading-row th {
	padding: 2px 5px;
}

.pq-event-table .grouped-heading {
	text-align: center;
	border-bottom: 1px solid var(--color-border);
}

.list-item-header {
	display: flex;
	padding: 5px 10px 5px 5px;
	margin: 0;
	text-transform: uppercase;
	font-size: small;
	color: var(--color-neutral-darker);
}

column-sort {
	position: relative;
	visibility: hidden;
}

/* Always display active column-sort components */
column-sort.active {
	visibility: visible;
}

column-sort i {
	position: absolute;
	top: 5px;
	width: 12px;
	margin-left: 5px;
	margin-right: 5px;
	text-align: left;
}

.collapseable .list-item-header {
	cursor: pointer;
}

.is-collapsed .list-item-header {
	color: var(--color-neutral-dark);
}

.list-item-header .collapser {
	margin: 0 5px;
	width: 10px;
	text-align: center;
}

/**
 * List with action buttons (Project Home, Mon Overview, Prosumers on Scenario page, etc.)
 *
 * HTML structure:
 * <div class="list-with-action-buttons">
 *     <div class="entry">    <!-- optional class: "active" -->
 *         <... class="description>...</...>
 *         <div class="actions">
 *             <a><i class="fa ..."></a>
 *         </div>
 *     </div>
 *     ... (more entries)
 * </div>
 */
table.list-with-action-buttons {
	width: 100%;
}

table.list-with-action-buttons thead:first-of-type,
table.list-with-action-buttons thead:not(:first-of-type).active {
	border-bottom: 1px solid var(--color-border);
}

table.list-with-action-buttons tr,
table.list-with-action-buttons tr.entry {
	display: table-row;
}

table.list-with-action-buttons tr th {
	font-weight: normal;
	white-space: nowrap;
}

.project-home table.list-with-action-buttons tr th,
.project-home table.list-with-action-buttons tr td,
.project-home table.list-with-action-buttons tr.entry td {
	padding: 10px 5px;
}

table.list-with-action-buttons tr th,
table.list-with-action-buttons tr td,
table.list-with-action-buttons tr.entry td {
	padding: 10px 5px;
}

.alerts table.list-with-action-buttons tr th,
.alerts table.list-with-action-buttons tr td,
.alerts table.list-with-action-buttons tr.entry td {
	padding: 3px;
}

table.list-with-action-buttons tr th:first-of-type,
table.list-with-action-buttons tr td:first-of-type,
table.list-with-action-buttons tr.entry td:first-of-type {
	padding-left: 10px;
}

table.list-with-action-buttons tr th:last-of-type,
table.list-with-action-buttons tr td:last-of-type,
table.list-with-action-buttons tr.entry td:last-of-type {
	padding-right: 10px;
}

table.list-with-action-buttons tr td span.tr-group {
	color: var(--color-neutral-darker);
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

table.list-with-action-buttons .entry .actions {
	display: flex;
	visibility: hidden;
	flex-wrap: nowrap;
}

.list-with-action-buttons .entry {
	display: flex;
	padding: 5px;
	text-decoration: none;
}

.list-with-action-buttons.collapseable .entry {
	padding-left: 25px;
}

.list-with-action-buttons link-to {
	display: block;
}

.list-with-action-buttons tbody .entry:hover {
	background-color: var(--color-neutral-medium-20);
}

.list-with-action-buttons tbody .entry.active {
	background-color: var(--color-neutral-medium-50);
}

.list-with-action-buttons .entry .description {
	flex-grow: 1;
	flex-shrink: 0;
	flex-basis: 0;
	text-decoration: none;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin-right: 10px;
}

.list-with-action-buttons .entry .actions {
	display: flex;
	visibility: hidden;
	text-align: right;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.list-with-action-buttons .entry.active .actions,
.list-with-action-buttons .entry:hover .actions {
	display: flex;
	visibility: visible;
}

.outer .inner {
	visibility: hidden;
}

.outer:hover .inner {
	visibility: visible;
}

.round-button,
.list-with-action-buttons .entry .actions > a,
.list-with-action-buttons .entry .actions > link-to > a,
.list-with-action-buttons .entry .actions > * > a {
	width: 21px;
	height: 21px;
	border-radius: 50%;
	display: block;
	text-align: center;
	margin-left: 5px;
	cursor: pointer;
}

.round-button {
	color: var(--color-neutral-white);
	background: var(--color-primary-background);
}

.round-button:hover {
	color: var(--color-neutral-white);
	background: var(--color-primary-background-darker);
}

.round-button.disabled {
	background: var(--color-button-background-disabled);
}

.list-with-action-buttons .entry .actions > a,
.list-with-action-buttons .entry .actions > * > a {
	color: var(--color-neutral-dark);
}

.list-with-action-buttons .entry .actions .hover-blue:hover,
.list-with-action-buttons .entry .actions > a:hover,
.list-with-action-buttons .entry .actions > span > a:hover,
.list-with-action-buttons .entry .actions > .dropdown > a:hover,
.list-with-action-buttons .entry .actions > link-to > a:hover,
.list-with-action-buttons .entry .actions > a.active,
.list-with-action-buttons .entry .actions > span > a.active,
.list-with-action-buttons .entry .actions > .dropdown > a.active,
.list-with-action-buttons .entry .actions > link-to > a.active {
	color: var(--color-primary-medium);
}

.list-with-action-buttons .entry .actions > a.disabled,
.list-with-action-buttons .entry .actions > * > a.disabled,
.list-with-action-buttons .entry .actions > a[disabled],
.list-with-action-buttons .entry .actions > * > a[disabled] {
	color: var(--color-neutral-medium);
}

.list-with-action-buttons .entry .flex-space-between span.label.round {
	flex-shrink: 0;
}

/* * Layout behaviour pinned navigation and help system * */
#fullscreen-plot,
#navigation ul.icons ul,
.overlay,
#content,
.fullscreen.fixed #content > .scrolling {
	left: 75px;
}

/* ts only */
body:not(.no-fixed-grid) .grid-master {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
}

/* ts only */
body:not(.no-fixed-grid) .grid-master grid {
	display: block;
}

/* ts only */
body:not(.no-fixed-grid) .grid-master grid,
body:not(.no-fixed-grid) .grid-master grid > div,
body:not(.no-fixed-grid) .grid-master grid > .row > .col-sm-12 {
	height: 100%;
}

/* ts only */
body:not(.no-fixed-grid) .grid-master {
	width: calc((100vw - 75px) / 2);
}

.navigation-pinned #fullscreen-plot,
.navigation-pinned .overlay,
.navigation-pinned #content,
.navigation-pinned.fullscreen.fixed #content > .scrolling {
	left: 300px;
}

body:not(.no-fixed-grid).navigation-pinned .grid-master {
	width: calc((100vw - 300px) / 2);
}

body:not(.no-fixed-grid).ng-pageslide-body-open .grid-master {
	width: calc((100vw - 375px) / 2);
}

body:not(.no-fixed-grid).ng-pageslide-body-open .grid-master {
	right: 300px;
}

body.fullscreen.fixed.ng-pageslide-body-open #content > .scrolling {
	width: calc(100vw - 300px);
}

.ng-pageslide-body-open #content {
	margin-right: 300px;
}

body:not(.no-fixed-grid).ng-pageslide-body-open.navigation-pinned .grid-master {
	width: calc((100vw - 600px) / 2);
}

body.fullscreen.fixed.ng-pageslide-body-open.navigation-pinned #content > .scrolling {
	width: calc(100vw - 600px);
}

body:not(.no-fixed-grid) .grid-master.fullscreen {
	width: calc(100vw - 75px);
}

body:not(.no-fixed-grid).navigation-pinned .grid-master.fullscreen {
	width: calc(100vw - 300px);
}

body:not(.no-fixed-grid).ng-pageslide-body-open .grid-master.fullscreen {
	width: calc(100vw - 375px);
}

body:not(.no-fixed-grid).navigation-pinned.ng-pageslide-body-open .grid-master.fullscreen {
	width: calc(100vw - 600px);
}

.adt.ui-select-match-text {
	display: flex;
}

.adt.ui-select-choices-row {
	position: relative;
}

.adt.ui-select-choices-row-inner {
	padding-left: 25px !important;
}

.adt.ui-select-choices-row.selected::after {
	position: absolute;
	top: 4px;
	left: 5px;
	font-family: "FontAwesome" !important;
	content: "\f00c";
}

.adt.ui-select-choices-row.selected.active::after {
	color: var(--color-neutral-white);
}

.ui-select-search {
	margin: 0 !important;
}

.ui-select-match-item {
	display: flex;
	align-items: center;
}

.ui-select-match-item [uis-transclude-append] {
	overflow: hidden;
	text-overflow: ellipsis;
}

.ui-select-match .btn.btn-default.form-control.ui-select-toggle {
	overflow: hidden;
	box-shadow: none;
}

.load-profile-chart-options .pointer {
	float: right;
	margin-left: 10px;
}

load-profile-chart .chart {
	width: 100%;
}

.load-profile-chart-options label {
	font-weight: normal;
}

.alert-loading-overlay {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.8;
	font-size: 18px;
	text-align: center;
	background-color: var(--color-neutral-super-light);
	z-index: 2;
}

.diff {
	border-radius: 5px;
	width: 10px;
	max-width: 10px;
	height: 10px;
	display: inline-block;
}

/* ts only */
.diff-remove {
	background: var(--color-remove) !important;
}

/* ts only */
.diff-add {
	background: var(--color-add) !important;
}

/* ts only */
.diff-modify {
	background: var(--color-modify) !important;
}

.color-add {
	color: var(--color-add);
}

.color-modify {
	color: var(--color-modify);
}

.color-remove {
	color: var(--color-remove);
}

.waiting-animation {
	position: fixed;
	top: 0;
	height: 100vh;
	left: 0;
	width: 100vw;
	background-color: var(--color-neutral-white-60);
	color: var(--color-neutral-medium-dark);
	display: flex;
	font-size: 2em;
	align-items: center;
	justify-content: center;
	z-index: 10000;
}

/* Reports */
report-text {
	display: block;
}

report-text > div {
	margin-bottom: 15px;
}

report-block {
	display: block;
}

.report-block.is-dragging .block {
	opacity: 0.5;
	box-shadow: 0 0 5px var(--color-neutral-darker);
}

.report-block .block,
.result-display .block {
	position: relative;
	background: var(--color-neutral-white);
	padding: 10px;
}

.report-block .block.is-choosing-type {
	padding: 0;
}

.report-block .actions {
	position: absolute;
	display: flex;
	top: 10px;
	right: 10px;
	transition: opacity 0.1s;
	z-index: 1000;
}

.report-block .actions2 {
	height: 34px;
	margin-right: 68px;
	align-items: center;
}

.report-block-view-settings .btn,
.report-block .actions .btn,
.report-block .actions2 .btn {
	padding: 0;
	width: 34px;
	height: 34px;
	line-height: 34px;
	text-align: center;
}

.report-block-view-settings .btn span[class^="adt-"] {
	font-size: 22px;
	line-height: 34px;
}

.select-block-type {
	padding: 15px;
	border: 2px dashed var(--color-border);
}

.select-block-type .btn {
	margin-left: 5px;
}

.add-block-hover {
	position: relative;
	min-height: 20px;
}

.add-block-hover:hover .add-block-button {
	opacity: 1;
}

.add-block-button {
	opacity: 0;
	position: absolute;
	right: 0;
	top: -15px;
	left: 50%;
	height: 50px;
	width: 50px;
	margin-left: -25px;
	border-radius: 999999px;
	background: var(--color-primary-medium);
	color: var(--color-neutral-white);
	font-size: 40px;
	border: none;
	line-height: 46px;
	z-index: 50;
	transition: opacity 0.1s;
}

.add-block-button:hover,
.add-block-button:focus {
	outline: none;
	background: var(--color-primary-dark);
}

/** Prompt styling */
.modal.prompt .modal-header,
.modal.prompt .modal-body,
.modal.prompt .modal-footer {
	border: none;
}

.modal.prompt .modal-footer div {
	flex-grow: 0;
}

.modal.prompt .modal-header {
	padding: 20px;
	font-size: 24px;
}

.modal.prompt .modal-body {
	padding: 0 20px;
}

.modal.prompt div > .action:not(:first-of-type) {
	margin-left: 5px;
}

.forbidden {
	cursor: not-allowed;
	display: inline-block;
	opacity: 0.5;
}

.forbidden > * {
	pointer-events: none;
}

.mvh30 {
	max-height: 30vh;
}

table.list-with-action-buttons.ccr-table {
	max-height: 50vh;
}

table.list-with-action-buttons.ccr-table tr th {
	text-transform: none;
}

table .ccr-table-primary-headers {
	vertical-align: bottom;
}

table.list-with-action-buttons.ccr-table tr.entry:not(.pointer) {
	cursor: default;
}

table.list-with-action-buttons.ccr-table tr th.pointer:hover,
table.list-with-action-buttons.ccr-table tr td.pointer:hover {
	background-color: var(--color-neutral-lighter-20);
}

.underline,
table.list-with-action-buttons.ccr-table tr td.pointer:hover span {
	text-decoration: underline;
}

table.list-with-action-buttons.ccr-table td.number,
table.list-with-action-buttons.ccr-table th.number {
	text-align: right;
}

.list-with-action-buttons .sort-arrow {
	color: var(--color-neutral-medium);
	visibility: hidden;
	width: 16px;
}

table.list-with-action-buttons.ccr-table tr th.pointer:hover .sort-arrow {
	visibility: visible;
}

table.list-with-action-buttons.ccr-table tr th,
table.list-with-action-buttons.ccr-table tr td {
	padding: 5px 5px;
}

table.list-with-action-buttons.ccr-table thead .ccr-table-primary-headers th {
	padding-bottom: 2px;
}

/* ts only */
#custom-connection-request-bus-selector selectsearch .bootstrap-select {
	width: auto;
}

.flex-stretch > param-editor-hot,
.flex-stretch > param-editor-hot > div {
	height: 100%;
}

.flex-stretch > param-editor-hot > div {
	display: flex;
	flex-direction: column;
}

.flex-stretch > param-editor-hot > div .width-setter {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 0 0;
	margin-bottom: 10px;
}

.flex-stretch > param-editor-hot > div .hot-wrapper {
	flex: 1 0 0;
	overflow: hidden;
}

#filter-by-select button.dropdown-toggle {
	display: none;
}

#filter-by-select .btn-group {
	width: 0;
}

#filter-by-select .dropdown-menu.inner a[role="option"],
.filter + .tooltip.in {
	text-transform: none;
	text-decoration-line: none;
}

.favorite input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 -10 511.98685 511' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m114.59375 491.140625c-5.609375 0-11.179688-1.75-15.933594-5.1875-8.855468-6.417969-12.992187-17.449219-10.582031-28.09375l32.9375-145.089844-111.703125-97.960937c-8.210938-7.167969-11.347656-18.519532-7.976562-28.90625 3.371093-10.367188 12.542968-17.707032 23.402343-18.710938l147.796875-13.417968 58.433594-136.746094c4.308594-10.046875 14.121094-16.535156 25.023438-16.535156 10.902343 0 20.714843 6.488281 25.023437 16.511718l58.433594 136.769532 147.773437 13.417968c10.882813.980469 20.054688 8.34375 23.425782 18.710938 3.371093 10.367187.253906 21.738281-7.957032 28.90625l-111.703125 97.941406 32.9375 145.085938c2.414063 10.667968-1.726562 21.699218-10.578125 28.097656-8.832031 6.398437-20.609375 6.890625-29.910156 1.300781l-127.445312-76.160156-127.445313 76.203125c-4.308594 2.558594-9.109375 3.863281-13.953125 3.863281zm141.398438-112.875c4.84375 0 9.640624 1.300781 13.953124 3.859375l120.277344 71.9375-31.085937-136.941406c-2.21875-9.746094 1.089843-19.921875 8.621093-26.515625l105.472657-92.5-139.542969-12.671875c-10.046875-.917969-18.6875-7.234375-22.613281-16.492188l-55.082031-129.046875-55.148438 129.066407c-3.882812 9.195312-12.523438 15.511718-22.546875 16.429687l-139.5625 12.671875 105.46875 92.5c7.554687 6.613281 10.859375 16.769531 8.621094 26.539062l-31.0625 136.9375 120.277343-71.914062c4.308594-2.558594 9.109376-3.859375 13.953126-3.859375zm-84.585938-221.847656s0 .023437-.023438.042969zm169.128906-.0625.023438.042969c0-.023438 0-.023438-.023438-.042969zm0 0' fill='%23ccc'/%3E%3C/svg%3E");
	background-size: 16px 16px;
	background-repeat: no-repeat;
	outline: none;
	cursor: pointer;
}

.favorite input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 -10 511.99143 511' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m510.652344 185.882812c-3.371094-10.367187-12.566406-17.707031-23.402344-18.6875l-147.796875-13.417968-58.410156-136.75c-4.3125-10.046875-14.125-16.53125-25.046875-16.53125s-20.738282 6.484375-25.023438 16.53125l-58.410156 136.75-147.820312 13.417968c-10.835938 1-20.011719 8.339844-23.402344 18.6875-3.371094 10.367188-.257813 21.738282 7.9375 28.925782l111.722656 97.964844-32.941406 145.085937c-2.410156 10.667969 1.730468 21.699219 10.582031 28.097656 4.757813 3.457031 10.347656 5.183594 15.957031 5.183594 4.820313 0 9.644532-1.28125 13.953125-3.859375l127.445313-76.203125 127.421875 76.203125c9.347656 5.585938 21.101562 5.074219 29.933593-1.324219 8.851563-6.398437 12.992188-17.429687 10.582032-28.097656l-32.941406-145.085937 111.722656-97.964844c8.191406-7.1875 11.308594-18.535156 7.9375-28.925782zm-252.203125 223.722657' fill='%230093dd'/%3E%3C/svg%3E");
}

.tabs-toggle,
.tabs-toggle li a,
.tabs-toggle li.active a {
	border: 0 !important;
}

.tabs-toggle li.active a {
	box-shadow: 0 4px 0 var(--color-primary-medium) inset;
}

.visible {
	visibility: visible;
}

.invisible {
	visibility: hidden !important;
}

grid-data-update-history table.overview-table th,
grid-data-update-history table.overview-table td {
	vertical-align: top;
	padding: 8px !important;
}

.title-dropdown {
	min-width: 0;
}

.title-dropdown .dropdown {
	display: flex;
}

.title-dropdown .dropdown-toggle {
	background: transparent !important;
	border: none !important;
	padding-top: 2px;
	padding-left: 0;
	font-size: 19px;
	color: inherit;
	box-shadow: none !important;
	outline: none !important;
	display: flex;
	align-items: center;
	min-width: 0;
}

.title-dropdown .dropdown-toggle > span {
	min-width: 100px;
	margin-right: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.scroll-container-y {
	overflow-y: auto;
	overflow-x: hidden;
}

tree input[type="checkbox"] {
	margin-right: 5px;
}

fileupload {
	display: block;
	position: relative;
	z-index: 1;
}

fileupload > .progress {
	margin: 0;
	height: 2px;
	right: 0;
	bottom: 0;
	left: 0;
	position: absolute;
	background: transparent;
	z-index: 3;
}

fileupload > .progress > .bar {
	position: absolute;
	background: var(--color-primary-light);
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 4;
}

/* user can resize vertically, but width is fixed */
textarea {
	resize: vertical;
}

variable-tree {
	display: block;
	position: relative;
}

variable-tree .dropdown-menu {
	max-height: 400px;
	overflow-y: auto;
}

variable-tree .dropdown-menu a {
	max-width: 600px;
	overflow: hidden;
	text-overflow: ellipsis;
}

variable-tree > ul {
	position: absolute;
	bottom: 0;
}

sub-tree a {
	padding-left: 0 !important;
	user-select: none;
}

sub-tree sub-tree a {
	padding-left: 10px !important;
}

sub-tree sub-tree sub-tree a {
	padding-left: 20px !important;
}

sub-tree sub-tree sub-tree sub-tree a {
	padding-left: 30px !important;
}

sub-tree sub-tree sub-tree sub-tree sub-tree a {
	padding-left: 40px !important;
}

sub-tree sub-tree sub-tree sub-tree sub-tree sub-tree a {
	padding-left: 50px !important;
}

sub-tree .fa-check,
sub-tree .fa-angle-down,
sub-tree .fa-angle-right {
	width: 10px;
	margin-right: 6px;
	text-align: right;
}

.content-placeholder {
	display: flex;
	background: var(--color-neutral-white-80);
	justify-content: center;
	align-items: center;
	width: 100%;
	border: 2px dashed var(--color-border);
	color: var(--color-neutral-dark);
}

hierarchical-plots {
	display: block;
	height: 100%;
	width: 100%;
}

#hierarchical-plots-variable-tree {
	z-index: 1;
}

hierarchical-plots > dragdropchart {
	margin-top: -40px;
	height: calc(100% - 5px);
}

hierarchical-plots > dragdropchart variable-tree {
	visibility: hidden;
}

hierarchical-plots > dragdropchart .chart-table-container {
	height: calc(100% - 35px);
	margin-top: 0 !important;
}

.btn-constant-width-with-wa {
	position: relative;
}

.btn-constant-width-with-wa > wa {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -10px;
	margin-left: -10px;
	width: 20px;
	height: 20px;
}

alert-rules-slim .flex.rows > div {
	margin: 3px;
}

.inline input[type="checkbox"] {
	margin-top: 7px;
}

.inline input[type="number"] {
	width: 80px;
}

.fixed-table {
	table-layout: fixed;
}

.log-table {
	width: 100% !important;
	table-layout: fixed;
}

/* Long Grid names should not result in multiple rows */
.log-table .grid-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.filter.is-active {
	color: var(--color-primary-light) !important;
}

/* ts only */
.cursor-wait {
	cursor: wait !important;
}

/* ts only */
.cursor-wait * {
	pointer-events: none;
}

/* ts only */
cursor-progress.cursor-progress,
.cursor-progress * {
	cursor: progress !important;
}

/* ts only */
.sticky-add-mode {
	background-color: var(--color-success);
}

/* ts only */
.sp-replacer {
	width: 100%;
	padding: 1px;
	border-color: var(--color-border);
}

/* ts only */
.sp-replacer:hover,
.sp-replacer.sp-active {
	border-color: var(--color-border);
}

.input-group-xs > textarea.form-control {
	height: 62px;
}

[data-action="show-powerflow"].fa-eye {
	color: var(--color-primary-light);
}

[data-action="show-powerflow"].fa-eye-slash {
	color: var(--color-neutral-medium);
}

#n-1-table .handsontable .htDimmed {
	color: var(--color-neutral-super-dark);
}

.math {
	font-style: italic;
}

.math > * {
	font-style: normal;
}

.math .supsub {
	display: inline-block;
}

.math .supsub sup,
.math .supsub sub {
	position: relative;
	display: block;
	font-size: 0.75em;
	line-height: 1.2;
}

.math .supsub sup {
	top: -0.7em;
}

.math .supsub sub {
	top: 1.5em;
}

.rotated-90-degree {
	margin-top: 30px;
	color: var(--color-neutral-darker);
	transform: rotate(90deg);
	white-space: nowrap;
}

.project-name {
	word-wrap: break-word;
	padding: 30px 15px 10px 20px;
	color: var(--color-neutral-darker);
}

grid .nav-pills a[data-action="open-external-gis"] {
	width: 34px;
	padding: 0 !important;
	font-size: 14px;
}

.input-group.has-select {
	display: flex;
}

.input-group.has-select input {
	flex: 1;
}

.input-group.has-select select {
	width: auto;
	border: 1px solid var(--color-neutral-medium);
	border-left: none;
}

.cdk-virtual-scroll-viewport {
	height: 100%;
	width: 100%;
	margin: 0;
	box-shadow: 1px 1px 1px var(--color-shadow);
}

.project-home .cdk-virtual-scroll-content-wrapper {
	contain: initial;
}

.table-headers-legend {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 1px solid var(--color-neutral-darker);
	padding: 5px 10px;
	gap: 10px;
}

.table-headers-legend div span:nth-child(1) {
	font-weight: bold;
	font-size: 17px;
}

.table-headers-legend div span:nth-child(2) {
	color: var(--color-neutral-dark);
	font-size: 13px;
}

projects-list .cdk-virtual-scroll-viewport {
	box-shadow: none;
}

.info-message > div {
	border-left: 5px solid;
	padding-left: 15px;
	margin-bottom: 30px;
}

.info-message > div.info {
	border-color: var(--color-info);
}

.info-message > div.warning {
	border-color: var(--color-warning);
}

.info-message > div.error {
	border-color: var(--color-error);
}

.info-panel {
	background-color: var(--color-neutral-white);
	padding: 10px;
	margin-top: 10px;
}

.info-panel .fa-info-circle {
	color: var(--color-info);
}

.icon-button {
	width: 38px;
}

@media (min-width: 992px) {
	.snapshot-additional-element.modal-lg {
		width: 1200px;
	}
}

.mon-update-status {
	display: inline-block;
	width: 18px;
	text-align: center;
}

.multiple-select-wrapper {
	height: 34px;
}

.voltage-change-shape-image {
	position: relative;
}

.voltage-change-shape-image img {
	position: absolute;
	bottom: 0;
	max-height: 45px;
}

table.mon-update-history {
	table-layout: fixed;
}

.mon-update-history th:not(:first-child),
.mon-update-history td:not(:first-child) {
	border-left: 1px solid var(--color-neutral-medium);
}

.mon-update-history-column {
	width: initial !important;
	padding: 5px 10px !important;
	vertical-align: bottom;
}

table.overview-table th.mon-update-history-status-column {
	width: 50px;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	padding: 10px 0;
}

td.mon-update-history-status-column {
	text-align: center;
}

.rotate-minus-90 {
	transform: rotate(-90deg);
}

.vertical-align-bottom {
	vertical-align: bottom;
}

.table-filters {
	width: 40px;
}

fieldset:disabled {
	pointer-events: none;
}

fieldset:disabled info-text {
	pointer-events: auto;
}

.pointer-event-auto {
	pointer-events: auto;
}
/*
  Name:       material
  Author:     Mattia Astorino (http://github.com/equinusocio)
  Website:    https://material-theme.site/
*/

.cm-s-material.CodeMirror {
  background-color: #263238;
  color: #EEFFFF;
}

.cm-s-material .CodeMirror-gutters {
  background: #263238;
  color: #546E7A;
  border: none;
}

.cm-s-material .CodeMirror-guttermarker,
.cm-s-material .CodeMirror-guttermarker-subtle,
.cm-s-material .CodeMirror-linenumber {
  color: #546E7A;
}

.cm-s-material .CodeMirror-cursor {
  border-left: 1px solid #FFCC00;
}
.cm-s-material.cm-fat-cursor .CodeMirror-cursor {
  background-color: #5d6d5c80 !important;
}
.cm-s-material .cm-animate-fat-cursor {
  background-color: #5d6d5c80 !important;
}

.cm-s-material div.CodeMirror-selected {
  background: rgba(128, 203, 196, 0.2);
}

.cm-s-material.CodeMirror-focused div.CodeMirror-selected {
  background: rgba(128, 203, 196, 0.2);
}

.cm-s-material .CodeMirror-line::selection,
.cm-s-material .CodeMirror-line>span::selection,
.cm-s-material .CodeMirror-line>span>span::selection {
  background: rgba(128, 203, 196, 0.2);
}

.cm-s-material .CodeMirror-line::-moz-selection,
.cm-s-material .CodeMirror-line>span::-moz-selection,
.cm-s-material .CodeMirror-line>span>span::-moz-selection {
  background: rgba(128, 203, 196, 0.2);
}

.cm-s-material .CodeMirror-activeline-background {
  background: rgba(0, 0, 0, 0.5);
}

.cm-s-material .cm-keyword {
  color: #C792EA;
}

.cm-s-material .cm-operator {
  color: #89DDFF;
}

.cm-s-material .cm-variable-2 {
  color: #EEFFFF;
}

.cm-s-material .cm-variable-3,
.cm-s-material .cm-type {
  color: #f07178;
}

.cm-s-material .cm-builtin {
  color: #FFCB6B;
}

.cm-s-material .cm-atom {
  color: #F78C6C;
}

.cm-s-material .cm-number {
  color: #FF5370;
}

.cm-s-material .cm-def {
  color: #82AAFF;
}

.cm-s-material .cm-string {
  color: #C3E88D;
}

.cm-s-material .cm-string-2 {
  color: #f07178;
}

.cm-s-material .cm-comment {
  color: #546E7A;
}

.cm-s-material .cm-variable {
  color: #f07178;
}

.cm-s-material .cm-tag {
  color: #FF5370;
}

.cm-s-material .cm-meta {
  color: #FFCB6B;
}

.cm-s-material .cm-attribute {
  color: #C792EA;
}

.cm-s-material .cm-property {
  color: #C792EA;
}

.cm-s-material .cm-qualifier {
  color: #DECB6B;
}

.cm-s-material .cm-variable-3,
.cm-s-material .cm-type {
  color: #DECB6B;
}


.cm-s-material .cm-error {
  color: rgba(255, 255, 255, 1.0);
  background-color: #FF5370;
}

.cm-s-material .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: white !important;
}

.ng-select.ng-select-opened > .ng-select-container {
	background: var(--color-neutral-white) !important;
}
.ng-select.ng-select-opened > .ng-select-container .ng-arrow {
	top: -2px;
	border-color: transparent transparent var(--color-neutral-darker);
	border-width: 0 5px 5px;
}
.ng-select.ng-select-opened > .ng-select-container .ng-arrow:hover {
	border-color: transparent transparent var(--color-neutral-super-dark);
}
.ng-select.ng-select-focused:not(.ng-select-opened) > .ng-select-container {
	border-color: var(--color-primary-light);
	box-shadow: inset 0 1px 1px var(--color-shadow), 0 0 0 3px var(--color-primary-20);
}
.ng-select.ng-select-disabled > .ng-select-container {
	background-color: var(--color-button-background-disabled) !important;
	border-color: var(--color-button-background-disabled);
}
.ng-select .ng-has-value .ng-placeholder {
	display: none;
}
.ng-select .ng-select-container {
	color: var(--color-neutral-dark);
	background-color: var(--color-button-background);
	border: 1px solid var(--color-button-background);
	min-height: 34px;
	align-items: center;
	cursor: pointer;
}
.ng-select .ng-select-container:hover {
	background-color: var(--color-button-background-hover);
}
.ng-select .ng-select-container .ng-value-container {
	align-items: center;
	padding-left: 10px;
}
[dir="rtl"] .ng-select .ng-select-container .ng-value-container {
	padding-right: 10px;
	padding-left: 0;
}
.ng-select .ng-select-container .ng-value-container .ng-placeholder {
	color: var(--color-neutral-darker);
}
.ng-select.ng-select-single .ng-select-container {
	height: 34px;
}
.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
	top: 5px;
	left: 0;
	padding-left: 10px;
	padding-right: 50px;
}
[dir="rtl"] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input {
	padding-right: 10px;
	padding-left: 50px;
}
.ng-select.ng-select-multiple.ng-select-disabled > .ng-select-container .ng-value-container .ng-value {
	background-color: var(--color-neutral-super-light);
	border: 1px solid var(--color-neutral-lighter);
}
.ng-select.ng-select-multiple.ng-select-disabled > .ng-select-container .ng-value-container .ng-value .ng-value-label {
	padding: 0 5px;
}
[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container {
	padding-right: 7px;
	padding-left: 0;
}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
	font-size: 0.9em;
	margin-bottom: 5px;
	color: var(--color-neutral-super-dark);
	background-color: var(--color-neutral-white);
	margin-right: 5px;
}
[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
	margin-right: 0;
	margin-left: 5px;
}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled {
	background-color: var(--color-neutral-super-light);
}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label {
	padding-left: 5px;
}
[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label {
	padding-left: 0;
	padding-right: 5px;
}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label {
	display: inline-block;
	padding: 1px 5px;
}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon {
	display: inline-block;
	padding: 1px 5px;
}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover {
	color: var(--color-neutral-white);
	background-color: var(--color-primary-medium);
}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left {
	border-right: 1px solid var(--color-neutral-medium-dark);
}
[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left {
	border-left: 1px solid var(--color-primary-background);
	border-right: none;
}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right {
	border-left: 1px solid var(--color-primary-background);
}
[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right {
	border-left: 0;
	border-right: 1px solid var(--color-neutral-medium-dark);
}
[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input {
	padding: 0 3px 3px 0;
}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input > input {
	color: var(--color-neutral-black);
}
[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder {
	padding-right: 3px;
	padding-left: 0;
}
.ng-select .ng-clear-wrapper {
	color: var(--color-neutral-darker);
}
.ng-select .ng-clear-wrapper:hover .ng-clear {
	color: var(--color-error);
}
.ng-select .ng-spinner-zone {
	padding: 5px 5px 0 0;
}
[dir="rtl"] .ng-select .ng-spinner-zone {
	padding: 5px 0 0 5px;
}
.ng-select .ng-arrow-wrapper {
	width: 25px;
	padding-right: 5px;
}
[dir="rtl"] .ng-select .ng-arrow-wrapper {
	padding-left: 5px;
	padding-right: 0;
}
.ng-select .ng-arrow-wrapper:hover .ng-arrow {
	border-top-color: var(--color-neutral-dark);
}
.ng-select .ng-arrow-wrapper .ng-arrow {
	border-color: var(--color-neutral-darker) transparent transparent;
	border-style: solid;
	border-width: 5px 5px 2.5px;
}
.ng-dropdown-panel {
	background-color: var(--color-neutral-white);
	border: 1px solid var(--color-border);
	box-shadow: 0 6px 12px var(--color-shadow);
	left: 0;
}
.ng-dropdown-panel.ng-select-top {
	bottom: 100%;
	border-bottom-color: var(--color-border);
	margin-bottom: -1px;
}
.ng-dropdown-panel.ng-select-right {
	left: 100%;
	top: 0;
	border-bottom-color: var(--color-border);
	margin-bottom: -1px;
}
.ng-dropdown-panel.ng-select-bottom {
	top: 100%;
	border-top-color: var(--color-border);
	margin-top: 2px;
}
.ng-dropdown-panel.ng-select-left {
	left: -100%;
	top: 0;
	border-bottom-color: var(--color-border);
	margin-bottom: -1px;
}
.ng-dropdown-panel .ng-dropdown-header {
	border-bottom: 1px solid var(--color-border);
	padding: 5px 7px;
}
.ng-dropdown-panel .ng-dropdown-footer {
	border-top: 1px solid var(--color-border);
	padding: 5px 7px;
}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup {
	user-select: none;
	padding: 8px 10px;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-neutral-black-60);
	border-top: 1px solid var(--color-border);
	cursor: pointer;
}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled {
	cursor: default;
}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked {
	background-color: var(--color-primary-light);
}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked {
	color: var(--color-neutral-white);
	background-color: var(--color-primary-medium);
	font-weight: 600;
}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
	background-color: var(--color-neutral-white);
	padding: 8px 10px;
}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked {
	color: var(--color-neutral-white);
	background-color: var(--color-primary-light);
}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
	color: var(--color-neutral-black);
	background-color: var(--color-neutral-medium-20);
}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled {
	color: var(--color-neutral-medium);
}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child {
	padding-left: 22px;
}
[dir="rtl"] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child {
	padding-right: 22px;
	padding-left: 0;
}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label {
	font-size: 80%;
	font-weight: 400;
	padding-right: 5px;
}
[dir="rtl"] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label {
	padding-left: 5px;
	padding-right: 0;
}
[dir="rtl"] .ng-dropdown-panel {
	direction: rtl;
	text-align: right;
}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
	background-color: var(--color-neutral-medium);
}
.ng-placeholder,
.ng-option,
.ng-value-container {
	font-size: 15px;
}
.ng-option {
	color: var(--color-neutral-super-dark);
}
.ng-value-container {
	height: 100%;
}
.sm .ng-placeholder {
	font-size: 12px;
}

.sp-replacer {
	width: 100%;
	padding: 1px;
	border-color: var(--color-border);
}

.sp-preview {
	width: calc(100% - 20px);
	height: 16px;
	border: none;
}

.sp-dd {
	width: 0;
	height: 0;
	margin-left: 2px;
	margin-top: 6px;
	border-top: 4px solid var(--color-neutral-dark);
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	font-size: 0;
}

.sp-replacer:hover,
.sp-replacer.sp-active {
	border-color: var(--color-border);
}

.sp-container {
	border-color: var(--color-border);
}

.sp-palette .sp-thumb-el:hover,
.sp-palette .sp-thumb-el.sp-thumb-active {
	border-color: var(--color-primary-medium);
}

#toast-container {
	/* bring in front of modals */
	z-index: 10600000 !important;
}

#toast-container > div {
	padding: 20px;
	border-radius: 0;
	box-shadow: 0 0 20px var(--color-shadow);
	opacity: 1;
}

#toast-container > div:hover {
	box-shadow: 0 0 12px var(--color-shadow);
}

#toast-container > .toast-info,
#toast-container > .toast-success,
#toast-container > .toast-warning,
#toast-container > .toast-error {
	background-image: none !important;
}

.toast {
	position: relative;
	color: var(--color-neutral-black) !important;
	background-image: none !important;
	background-color: var(--color-neutral-white);
}

.toast-top-right {
	top: 10px;
	right: 10px;
}

.toast-info {
	background-color: var(--color-info-background);
	border-left: 10px solid var(--color-info);
}

.toast-success {
	background-color: var(--color-success-background);
	border-left: 10px solid var(--color-success);
}

.toast-warning {
	background-color: var(--color-warning-background);
	border-left: 10px solid var(--color-warning);
}

.toast-error {
	background-color: var(--color-error-background);
	border-left: 10px solid var(--color-error);
}

.toast-footer {
	text-align: right;
}

.toast-error a {
	color: var(--color-error);
}

.toast-warning a {
	color: var(--color-warning);
}

.toast a:hover {
	color: var(--color-neutral-black);
}

.toast-progress {
	height: 2px;
}

.toast-error .toast-progress {
	background-color: var(--color-error);
}
.toast-warning .toast-progress {
	background-color: var(--color-warning);
}
.toast-success .toast-progress {
	background-color: var(--color-success);
}
.toast-info .toast-progress {
	background-color: var(--color-info);
}

/* *************** Overrides for trix ************** */

trix-toolbar {
	margin: 0 0 10px;
}

trix-toolbar .trix-button-row {
	justify-content: flex-start;
	margin: 0;
}

trix-toolbar .trix-button-group {
	border: none;
	margin: 0;
}

trix-toolbar .trix-button {
	width: 34px;
	height: 34px;
	border: none !important;
}

trix-toolbar .trix-button:hover {
	background: var(--color-neutral-light) !important;
}

trix-editor .trix-button.trix-active,
trix-toolbar .trix-button.trix-active {
	color: var(--color-neutral-white);
	background: var(--color-primary-medium) !important;
}

trix-toolbar .trix-button--icon::before {
	top: 4px;
	right: 4px;
	bottom: 4px;
	left: 4px;
	opacity: 0.5;
}

trix-toolbar .trix-button-group-spacer,
trix-toolbar .trix-button--icon-attach {
	display: none;
}

@media print {
	trix-editor {
		border: none;
	}
}

#cr-page-container {
	--one-slot: calc(100% / 3);
	--reparted-gap: 15px / 2;
}

#cr-page-container .entity-selection {
	display: flex;
	flex-direction: column;
}

#cr-page-container .selector-container {
	display: flex;
	flex-direction: row;
	gap: var(--space-1);
}

#cr-page-container .reactive-power-field,
#cr-page-container .form-container .fields-row,
#cr-page-container .form-container .fields-row-2-cols,
#cr-page-container .form-container .fields-column {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	page-break-inside: avoid !important;
}

#cr-page-container input,
#cr-page-container textarea {
	max-width: unset !important;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.select-addon {
	height: 22px;
}

.select-addon .ng-multiple-select-container ng-select {
	height: 100%;
}

.select-addon .ng-multiple-select-container ng-select .ng-select-container {
	min-height: 10px;
	height: 100%;
}

.select-addon .ng-multiple-select-container .selected-items-label {
	font-size: 12px;
	position: relative;
	top: 0;
	height: 100%;
	padding: 2px 12px;
}

#custom-connection-request-calculate-bus {
	margin-top: 5px !important;
}

#cr-page-container .on-report input:focus,
#cr-page-container .on-report textarea:focus {
	border-color: unset;
	box-shadow: none;
}

#cr-page-container .on-report input,
#cr-page-container .on-report textarea,
#cr-page-container .on-report .ng-select.ng-select-disabled > .ng-select-container {
	background: var(--color-button-background-disabled);
}

#cr-page-container .on-report .ng-select.ng-select-disabled > .ng-select-container {
	border: 1px solid var(--color-neutral-medium);
}

#cr-page-container .connection-request-description-field {
	flex: 1;
	flex-direction: column;
}

#cr-page-container .connection-request-description-field textarea {
	height: 100%;
}

#cr-page-container .form-container .fields-row,
#cr-page-container .form-container .fields-row-2-cols {
	width: 100%;
}

#cr-page-container .actions-buttons {
	display: flex;
	justify-content: right;
	gap: var(--space-2);
}

#cr-page-container .btn {
	box-sizing: border-box;
	padding: 6px 12px !important;
}

#cr-page-container .ccr-selection-actions-container {
	width: 350px;
}

#cr-page-container .ccr-metadata {
	margin-top: 15px;
	margin-left: auto;
	align-items: center;
	gap: 5px;
}

#cr-page-container .hide-coordinates-reset .btn-reset-location {
	display: none;
}

#cr-page-container .connection-points-panel-header {
	justify-content: space-between;
	align-items: center;
}

#cr-page-container .task-progress-info {
	font-size: 15px;
	color: var(--color-neutral-super-dark);
}

#cr-page-container .lock-info-container {
	background-color: var(--color-info-background);
	padding: 10px;
}

#cr-page-container .lock-info-container a {
	color: var(--color-info);
}

#cr-page-container .unmetered-dropdown-container {
	gap: 15px;
}

#cr-page-container .warning-container {
	background-color: var(--color-warning-background);
	padding: 10px;
}

#cr-page-container .empty-connection-points-table {
	min-height: 150px;
	box-shadow: 0px 10px 14px -10px rgba(0, 0, 0, 0.1);
	background-color: var(--color-neutral-super-light);
	font-size: small;
	color: var(--color-neutral-dark);
}

/* Medium devices (tablets, less than 992px) */
@media (min-width: 992px) {
	#cr-page-container .form-container .fields-row {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	#cr-page-container .form-container .fields-row-2-cols {
		display: grid;
		grid-template-columns: calc(var(--one-slot) - var(--reparted-gap)) calc(var(--one-slot) * 2 - var(--reparted-gap));
	}
}

@media print {
	#cr-page-container .form-container .fields-row {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
	}

	#cr-page-container .form-container .fields-row-2-cols {
		display: grid !important;
		grid-template-columns: calc(var(--one-slot) - var(--reparted-gap)) calc(var(--one-slot) * 2 - var(--reparted-gap)) !important;
	}

	#cr-page-container .page-body-container .panel {
		page-break-inside: auto !important;
	}

	#cr-page-container > input:read-only,
	#cr-page-container textarea:read-only,
	#cr-page-container .ng-select.ng-select-disabled > .ng-select-container,
	#cr-page-container .input-attribute input {
		background-color: var(--color-neutral-white) !important;
	}

	#cr-page-container ng-select {
		border: 1px solid var(--color-neutral-medium) !important;
	}
}

.performance-package-modal-container a {
	cursor: pointer;
	margin-left: 5px;
}

#fs-page-container .nav-tabs li {
	cursor: pointer;
}

#fs-page-container .nav-tabs li.active {
	background-color: var(--color-neutral-white);
}

#fs-page-container .tab-body {
	width: 100%;
	padding: 15px;
	background-color: var(--color-neutral-white);
}

#fs-page-container .entity-selection {
	display: flex;
	flex-direction: column;
	flex: 50%;
}

#fs-page-container .select-container {
	display: flex;
}

#fs-page-container .select-container ng-select {
	width: 100%;
}

.report #fs-page-container .tab-body {
	padding: 0;
}








expansion-chart-filters h1 {
	font-size: 100%;
	font-weight: bold;
	margin-bottom: 0;
}














drag-input {
	display: inline-flex;
	justify-content: flex-end;
	cursor: grab;
}

drag-input div {
	width: 20px;
	height: 20px;
	box-shadow: 0 0 5px var(--color-shadow);
	border-radius: 50%;
	background: var(--color-neutral-white);
	transform: rotate(var(--angle));
	transform-origin: center center;
	text-align: center;
	position: relative;
}

drag-input div::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: var(--color-primary-light);
	width: 4px;
	height: 4px;
	top: 2px;
	left: 50%;
	margin-left: -2px;
}
	

.input-number-container .input-attribute {
	display: flex;
	border: 1px solid var(--color-neutral-medium);
	align-items: center;
}

.input-number-container .input-attribute:has(input.ng-invalid) {
	border: 1px solid var(--color-warning);
}

.input-number-container:not(.on-report) .input-attribute:focus-within {
	border-color: var(--color-primary-light);
	box-shadow: inset 0 1px 1px var(--color-inset-shadow), 0 0 8px var(--color-primary-20);
}

.input-number-container input {
	max-width: none !important;
}

.input-number-container input.no-arrows::-webkit-inner-spin-button,
.input-number-container input.no-arrows::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.input-number-container input.no-arrows {
	-moz-appearance: textfield;
}

.input-attribute input {
	border: unset;
}

.input-attribute .attribute {
	display: flex;
	justify-content: right;
	align-items: center;
	flex: 0;
	font-size: 12px;
	line-height: initial;
	border: unset;
	color: var(--color-neutral-darker);
	box-shadow: none;
	white-space: nowrap;
}

.read-only.input-attribute input,
.read-only.input-attribute .attribute {
	background: var(--color-button-background-disabled);
}

.input-attribute .prefix {
	justify-content: left;
}

.input-attribute .suffix {
	justify-content: right;
}

.input-number-container .restore-value {
	cursor: pointer;
	color: var(--color-primary-light);
	font-size: 12px;
}



.voltage-range-container {
	--input-color-height: 15px;

	flex: 1;
	display: grid;
	grid-template-columns: 1fr var(--bound-width);
	justify-items: center;
	height: 100%;
}

.voltage-range-container.global-first-range {
	flex: 1;
	display: grid;
	grid-template-columns: var(--bound-width) 1fr var(--bound-width);
}

.voltage-range-container .range-bound {
	display: grid;
	gap: calc(var(--space-size) * 2);
	grid-template-rows: 1fr var(--bound-separator-h) 1fr;
	justify-items: center;
	align-items: center;
}

.voltage-range-container .range-middle-block {
	display: grid;
	grid-template-rows: repeat(2, 1fr);
	align-items: end;
	gap: calc(var(--space-size) * 2);
}

.voltage-range-container .range-middle-block .color-input-container {
	display: grid;
	grid-template-rows: 1fr var(--input-color-height) 0;
	justify-items: center;
}

.voltage-range-container .range-middle-block > div {
	gap: var(--space-size);
}

.voltage-range-container .range-middle-block button {
	color: var(--color-primary-background);
	width: 70px;
}
.voltage-range-container .range-middle-block button:hover {
	color: var(--color-primary-dark);
}

.range-middle-block .ngx-color-picker {
	width: 60%;
	min-width: 30px;
	height: var(--input-color-height);
	padding: 0;
	border: none;
	border-radius: 5px;
	box-shadow: 0 0 5px var(--color-shadow);
}

.voltage-range-container .separator {
	width: var(--separator-w);
	height: var(--separator-h);
	border-radius: 2px;
	grid-row: 2;
	background-color: var(--color-neutral-super-dark);
	z-index: 2;
}

.voltage-range-container.global-first-range .range-start-block .separator,
.voltage-range-container.global-last-range .range-end-block .separator,
.voltage-range-container.range-separator .range-end-block .separator {
	width: var(--bound-separator-w);
	height: var(--bound-separator-h);
}

.voltage-range-container .value-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-size);
	margin-bottom: auto;
	grid-row: 3;
}

.voltage-range-container .value-container .infinity-icon {
	font-size: 25px;
	line-height: 0;
}

.voltage-range-container .custom-input-number,
.voltage-range-container .custom-input-number input {
	height: 25px;
}

.voltage-range-container .custom-input-number input {
	padding: 0 3px 3px 6px;
	text-align: right;
}

.voltage-range-container .value-container .invalid-value .custom-input-number input {
	box-shadow: inset 0 0 0 2px var(--color-warning-shadow);
}

.voltage-range-container .custom-input-number .attribute {
	height: 100%;
	padding: 0 3px 0 0;
}

.voltage-range-container .value-container .delete-action {
	cursor: pointer;
}



.ccr-table-container .table-scroll {
	overflow-x: auto;
	min-height: 22px; /* avoid vertical scroll bar when "Click 'Evaluate' to see connection points" is shown (is seems that due to the translation delay, the height is calculated before the text is there) */
}

.ccr-table-container table {
	width: 100%;
	max-height: 300px;
	overflow-y: auto;
}

.ccr-table-container.report-table table {
	table-layout: fixed;
}

.ccr-table-container tbody tr.active td {
	background-color: var(--color-neutral-super-light);
}

.ccr-table-container tbody tr.active.secondary td {
	background-color: var(--color-neutral-medium-20);
}

.ccr-table-container table th,
.ccr-table-container table td a {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ccr-table-container {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.ccr-table-container table tbody {
	border-top: 1px solid var(--color-border);
}

.ccr-table-container table thead {
	padding: 10px 0 10px 0;
}

.ccr-table-container table th {
	padding: 0 10px 0 10px;
}

.ccr-table-container table th,
.ccr-table-container table td {
	text-align: right;
}

.ccr-table-container table th:nth-child(1) {
	min-width: 100px;
	text-align: left;
}

.ccr-table-container table .ccr-table-secondary-headers th {
	font-weight: normal;
	font-size: 12.5px;
	color: var(--color-neutral-darker);
	padding: 5px 10px 5px 0;
	user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

.ccr-table-container table tr {
	position: relative;
}

.ccr-table-container table tr .no-success-message {
	text-align: left;
}

.ccr-table-container table tr.post-evaluation-point:not(.chart-row) {
	animation: busAddedAnimation 1s linear;
}

@keyframes busAddedAnimation {
	0% {
		background-color: transparent;
	}

	50% {
		background-color: var(--color-primary-background-light);
	}

	100% {
		background-color: transparent;
	}
}

.ccr-table-container table tr:not(.chart-row) td {
	padding: 5px 10px;
	white-space: nowrap;
}

.ccr-table-container table tr:not(.chart-row) td.addons {
	max-width: 100px;
	text-overflow: ellipsis;
	overflow: hidden;
}

.ccr-table-container table tr:not(.chart-row) td.addons-report {
	text-align: left;
	white-space: initial;
}

.ccr-table-container table tbody tr:not(.active, .chart-row):hover {
	background-color: var(--color-neutral-medium-20);
}

.ccr-table-container .chart-row td {
	position: relative;
	padding: 0;
	overflow: visible;
}

.ccr-table-container .chart-row,
.ccr-table-container .loading-diagram-message {
	padding: 5px;
	background-color: var(--color-neutral-super-light);
}

.ccr-table-container .delete-row-col i {
	color: var(--color-neutral-medium-dark);
}

.ccr-table-container table tbody tr:hover td.delete-row-col i {
	color: var(--color-remove);
}

.ccr-table-container .bus-name-column-container {
	display: grid;
	grid-template-columns: 18px 1fr;
	align-items: center;
	gap: 5px;
}

.ccr-table-container .bus-name-column-container {
	text-align: left;
}

.ccr-table-container .bus-name-column-container i {
	color: var(--color-success);
}

.ccr-table-container .bus-name-column-container i.violated {
	color: var(--color-attention);
}

.ccr-table-container .warning-point {
	color: var(--color-attention);
}

.ccr-table-container a {
	text-decoration: none;
}

.ccr-table-container a:hover {
	text-decoration: underline;
	cursor: pointer;
}

.ccr-table-container .chart-container > button {
	display: block;
	margin-right: auto;
}

.ccr-table-container .chart-container {
	position: sticky;
	left: 0;
}

.ccr-table-container chart {
	padding: 10px;
}

.ccr-table-container .action-buttons-container,
.ccr-table-container .secondary-actions,
.ccr-table-container .primary-actions {
	display: flex;
	flex-direction: row;
	gap: 10px;
	justify-content: space-between;
}

.ccr-table-container .loading-diagram-message {
	text-align: left;
	padding: 5px 10px;
}

@media print {
	.ccr-table-container {
		page-break-inside: auto !important;
	}

	.ccr-table-container table th,
	.ccr-table-container table td:not(.bus-name-column) a {
		white-space: initial;
		overflow: initial;
		text-overflow: initial;
	}

	.ccr-table-container table td .bus-name-column-container a {
		white-space: normal;
		word-wrap: break-word;
		display: block;
		max-width: 100%;
	}

	.table-headers-legend div span:nth-child(1) {
		font-weight: bold !important;
		font-size: 17px !important;
	}

	.table-headers-legend div span:nth-child(2) {
		color: var(--color-neutral-dark) !important;
		font-size: 13px !important;
	}

	.ccr-table-container chart {
		padding: 0 !important;
	}
}






#pb-page-container {
	--space-1: 5px;
	--space-2: 10px;
	--space-3: 15px;
}

#pb-page-container .d-flex {
	display: flex;
	flex-direction: row;
}

#pb-page-container .main-page-container {
	gap: var(--space-1);
}

#pb-page-container .header-container {
	align-items: center;
	justify-content: space-between;
}

#pb-page-container .header-container .actions-container {
	gap: var(--space-1);
}

#pb-page-container .resource-selection-container {
	flex-direction: column;
	gap: var(--space-1);
}

#pb-page-container .resource-selection-projection {
	flex-direction: column;
	gap: var(--space-1);
}

#pb-page-container .title-container {
	width: 100%;
}

#pb-page-container .resource-selection-projection ng-select .ng-select-container {
	border: none;
}

/* Medium devices (tablets, less than 992px) */
@media (min-width: 992px) {
	#pb-page-container .resource-selection-projection {
		flex-direction: row;
		gap: var(--space-3);
	}
}


.alert-rules-list {
	max-height: calc(100vh - 350px);
	overflow-y: auto;
}

.limits-bar {
	height: 8px;
	position: relative;
	display: flex;
}

.limits-bar > div {
	height: 100%;
	width: 20%;
	border-bottom: 8px solid var(--color-plot-line-correct);
}

.limits-bar > .warning {
	border-bottom: 8px solid var(--color-plot-line-warning);
}

.limits-bar > .violation {
	border-bottom: 8px solid var(--color-plot-line-violation);
}

.limits-bar > .invalid {
	border-bottom: 8px solid var(--color-border);
}

.limits-inputs {
	display: flex;
	justify-content: space-between;
	margin-left: 12.5%;
	margin-right: 12.5%;
}

.limits-inputs > .form {
	width: 20%;
	text-align: center;
}

.grid-legend-color {
	display: flex;
	align-items: center;
	height: 20px;
	margin-bottom: 2px;
}

.grid-legend-color > div {
	width: 20px;
	border: 1px solid var(--color-border);
	height: 100%;
}














.inner-forbidden {
	pointer-events: none;
}















.checkbox-dropdown {
	max-height: 300px;
	overflow-y: auto;
}

.checkbox-dropdown [type="checkbox"] {
	display: none;
}

.checkbox-dropdown label::before {
	content: "\f00c";
	font-family: "FontAwesome";
	visibility: hidden;
	position: absolute;
	top: 8px;
	left: 8px;
	font-size: 11px;
}

.checkbox-dropdown label.checked::before {
	visibility: visible;
}

.checkbox-dropdown label {
	position: relative;
	display: flex;
	align-items: baseline;
	font-weight: normal;
	margin: 0;
	padding: 5px 10px 5px 25px;
}

.checkbox-dropdown label.disabled,
.checkbox-dropdown label.disabled::before {
	opacity: 0.65;
}

.checkbox-dropdown label:hover,
.checkbox-dropdown label:hover::before {
	background: var(--color-primary-medium);
	color: var(--color-neutral-white);
}

.checkbox-dropdown label .secondary {
	color: var(--color-neutral-darker);
	font-size: 0.9em;
	margin-left: 5px;
}

.checkbox-dropdown label:hover .secondary {
	color: var(--color-neutral-white);
}

.inline-button .btn.btn-default {
	background: none;
	color: var(--color-neutral-medium-dark);
	border: none;
}

.inline-button .btn.btn-default:hover {
	color: var(--color-primary-light);
	background: none;
}


.grid-messages {
	padding: 0;
	margin: 0;
	z-index: 1001;
	list-style-type: none;
}

.grid-messages .message-content {
	background-color: var(--color-neutral-white-80);
	border-radius: 3px;
	box-shadow: 1px 1px 8px var(--color-shadow);
	padding: 6px;
	min-height: 34px;
	border: none;
}

.grid-message {
	display: flex;
}

.grid-message:not(:first-of-type) .message-content {
	margin-top: 8px;
}

.grid-messages button {
	margin-left: 5px;
}












.project-settings-gdi-container .ng-select {
	max-width: 300px;
}

.project-settings-gdi-container .table-container td,
.project-settings-gdi-container .table-container th {
	padding: 3px;
}

.project-settings-gdi-container .table-container button:focus {
	outline: none;
}

.project-settings-gdi-container .table-container button:active {
	border: 1px solid black;
}










.sticky {
	position: sticky;
	top: -2px;
	z-index: 500;
	padding-right: 15px;
	padding-left: 15px;
	margin: 0 -15px;
}

.sticky.stuck {
	box-shadow: 0 8px 10px -12px var(--color-neutral-darker);
	background-color: var(--color-neutral-white);
}


.voltage-level-wise-input-group {
	display: flex;
	align-items: center;
	width: 100%;
}

.voltage-level-wise-prefix,
.voltage-level-wise-suffix {
	color: var(--color-neutral-black-40);
	margin-left: 8px;
	margin-right: 8px;
	font-size: 12px;
}

.voltage-level-wise-input-field {
	width: 100%;
	min-width: 30px;
	text-align: center;
	border: 1px solid transparent;
	background: transparent;
	padding: 5px 6px;
	outline: none;
}

.voltage-level-wise-input-field:focus {
	border: 1px solid var(--color-primary-light);
}

.voltage-input-wrapper {
	position: relative;
	flex: 1;
}

.voltage-level-wise-label {
	position: absolute;
	left: 4px;
	top: 10px;
	color: var(--color-primary-medium);
	pointer-events: none;
	transition: 0.2s ease all;
	background: var(--color-neutral-white);
	padding: 0 2px;
	opacity: 0;
}

.voltage-level-wise-input-field:focus + .voltage-level-wise-label {
	top: -9px;
	font-size: small;
	opacity: 1;
}

.warning-icon-container {
	display: flex;
	align-items: center;
}

.warning-icon {
	color: var(--color-warning);
	padding: 5px;
	font-size: 12px;
}


.voltage-level-ranges-container {
	--line-size: 2px;
	--space-size: 5px;

	--range-width: 150px;
	--bound-width: 65px;
	--bound-separator-w: 6px;
	--bound-separator-h: 40px;

	--separator-w: 2px;
	--separator-h: 30px;

	position: relative;
	display: flex;
}

.voltage-level-ranges-container .voltage-level-ranges {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-size);
	flex-shrink: 0;
}

.voltage-level-ranges-container .voltage-level-ranges .ranges-container {
	display: flex;
	position: relative;
	flex-direction: row;
	flex: 1;
	width: 100%;
}

.voltage-level-ranges-container .ranges-container voltage-range {
	position: relative;
	height: 160px;
}

.voltage-level-ranges-container .ranges-container voltage-range::before {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(var(--bound-width) / 2);
	width: 100%;
	height: 2px;
	background-color: var(--color-neutral-super-dark);
	transition: background 200ms linear;
	z-index: 1;
}

.voltage-level-ranges-container .voltage-level-ranges:first-child voltage-range:first-child::before {
	width: calc(100% - var(--bound-width) + var(--bound-separator-w) / 2);
}

.voltage-level-ranges-container .voltage-level-ranges:last-child voltage-range:last-child::before {
	width: calc(100% + var(--bound-separator-w) / 2);
	right: calc(var(--bound-width) / 2 - var(--bound-separator-w) / 2);
}

.voltage-level-ranges-container .ranges-container voltage-range:hover::before {
	background-color: var(--color-neutral-darker);
}

.voltage-level-ranges-container .voltage-level-ranges .voltage-level-label-container {
	width: 100%;
	text-align: center;
}

.voltage-level-ranges-container .voltage-level-ranges.adjust-to-human-eye .voltage-level-label-container {
	margin-right: var(--bound-width);
}

.voltage-level-ranges-container .voltage-level-abbreviation {
	font-weight: bold;
	font-size: 20px;
}