@import "./calendar.css";
@import "./loadingbar.css";
@import "./message.css";
@import "./notifications.css";
@import "./search.css";
@import "./specs.css";
@import "./table.css";
@import "./trail.css";
@import "./tree.css";
@import "./section.css";
@import "./resultAlarmsPanel.css";
@import "./showResultPanel.css";
@import "./showRelatedResultsPanel.css";
@import "./constraintsPicker.css";
@import "./specsAndNotesPanel.css";
@import "./variables.css";

/* TODO: investigate how to load with Turbo - APP-3100 */
@import "../templates/statusFlowTrail.css";
@import "../templates/slideInPanel.css";
@import "./calcEditor.css";
@import "../modules/Core/UI/welcome.css";
@import "../modules/Integration/UI/executeWorkflow.css";
@import "../javascript/util/panels/specialCharsPanel.css";
@import "./normalizeLayout.css"; /* Used for better cross-browser consistency in the default styling of elements */

:root {
	color-scheme: light dark;
}

body {
	font-family:
		"Lato", "Poppins", sans-serif; /* Lato for numbers, because Poppins doesn't have tabular figures (https://github.com/google/fonts/issues/1421) */
	display: inline-flex;
	flex-flow: column;
	background-color: rgb(var(--background-main));
	color: rgb(var(--textcolor-main));

	/* region doc icons */
	--icon_doc: "\f15c";
	--icon_file_txt: "\f15c";
	--icon_file_jpg: "\f1c5";
	--icon_file_bmp: "\f1c5";
	--icon_file_doc: "\f1c2";
	--icon_file_html: "\f1c9";
	--icon_file_pdf: "\f1c1";
	--icon_file_ppt: "\f1c4";
	--icon_file_vsd: "\f65a";
	--icon_file_xls: "\f1c3";
	--icon_file_zip: "\f1c6";
	/* endregion */
}

body.light {
	color-scheme: light;
}

body:not(.sandbox).dark {
	color-scheme: dark;
}

/* region theme transition elements */
body,
.mainnav,
.pageheader,
hr,
.capsule,
.toolbar {
	transition: var(--theme-switch-transition);
}
/* endregion */

/* region icons */

.icon {
	font-family: "Font Awesome Pro Light" !important;
	cursor: default;
	font-weight: 300;
	display: inline-block;
}

.btn .icon,
.pageheader__btn .icon {
	font-family: "Font Awesome Pro Regular" !important;
	font-weight: 400;
	font-size: 14px !important;
}

.icon.hasrole:not(.help):hover,
a > .icon:last-child:hover {
	color: rgb(var(--icon-hover));
	text-decoration: none;
	transform: scale(1.3);
}

.btn .icon:hover,
.btn__group .icon:hover {
	transform: none !important;
}

.btn:not([disabled]) > .icon,
a > .icon,
.clipboardcopy__item {
	cursor: pointer;
}

.icon.incircle {
	margin-right: 5px;
}

.icon ~ .icon {
	margin-left: 2px; /*seperate icons that are positioned back to back*/
}

.icon.small {
	font-size: var(--size-icon-base);
}

.icon.shadow {
	position: relative;
}

.icon.shadow:after {
	content: "";
	border-radius: 100%;
	background-color: rgb(var(--notification-dot-alert));
	display: inline-block;
	width: 6px;
	height: 6px;
	position: absolute;
	top: -1px;
	right: -1px;
}

.icon.shadow-green:after {
	background-color: rgb(var(--icon-success));
}

.icon.red {
	color: rgb(var(--icon-error));
}

.icon-move.hasrole {
	cursor: move;
}

.btn--network .icon-network {
	margin-right: 0 !important;
}

.icon-network:before {
	content: "\f542";
}
.icon-pencil:before {
	content: "\f304";
}
.icon-edit:before {
	content: "\f044";
}
.icon-book:before {
	content: "\f02d";
}
.icon-books:before {
	content: "\f5db";
}
.icon-book-open:before {
	content: "\f518";
}
.icon-folder:before {
	content: "\f07b";
}
.icon-folder-open:before {
	content: "\f07c";
}
.icon-barcode:before {
	content: "\f02a";
}
.icon-qrcode:before {
	content: "\f029";
}
.icon-envelop:before {
	content: "\f0e0";
}
.icon-history:before {
	content: "\f1da";
}
.icon-alarm:before {
	content: "\f0f3";
}
.icon-calendar:before {
	content: "\f073";
}
.icon-calendar-xmark:before {
	content: "\f273";
}
.icon-print:before {
	content: "\f02f";
}
.icon-contract:before {
	content: "\f56c";
}
.icon-bubble:before {
	content: "\f075";
}
.icon-search:before {
	content: "\f002";
}
.icon-pie:before {
	content: "\f64e";
}
.icon-graph:before,
.icon-multiserieschart:before,
.icon-controlchart:before,
.icon-scatter:before {
	content: "\f201";
}
.icon-histogram:before {
	content: "\f643";
}
.icon-bars:before {
	content: "\f643";
}
.icon-delete:before {
	content: "\f2ed";
}
.icon-link:before {
	content: "\f0c1";
}
.icon-unlink:before {
	content: "\f127";
}
.icon-list-check:before {
	content: "\f0ae";
}
.icon-attachment:before {
	content: "\f0c6";
}
.icon-show:before {
	content: "\f06e";
}
.icon-hide:before {
	content: "\f070";
}
.icon-warning:before {
	content: "\f06a";
}
.icon-warning-bubble:before {
	content: "\f4a5";
}
.icon-error:before {
	content: "\f071";
}
.icon-help:before {
	content: "\f059";
}
.icon-info:before {
	content: "\f05a";
}
.icon-minus:before {
	content: "\f068";
}
.icon-plus:before {
	content: "\2b";
}
.icon-plussquare:before {
	content: "\f0fe";
}
.icon-back:before {
	content: "\f177";
}
.icon-backward:before {
	content: "\f04a";
}
.icon-forward:before {
	content: "\f04e";
}
.icon-first:before {
	content: "\f049";
}
.icon-last:before {
	content: "\f050";
}
.icon-filter:before {
	content: "\f0b0";
}
.icon-filter-slash:before {
	content: "\e17d";
}
.icon-sigma:before {
	content: "\f68b";
}
.icon-notes:before {
	content: "\e1d8";
}
.icon-table:before {
	content: "\f0ce";
}
.icon-file:before {
	content: "\f15c";
}
.icon-file-plus:before {
	content: "\f319";
}
.icon-pdf:before {
	content: "\f1c1";
}
.icon-copy:before {
	content: "\f0c5";
}
.icon-download:before {
	content: "\f019";
}
.icon-upload:before {
	content: "\f093";
}
.icon-user:before {
	content: "\f007";
}
.icon-usergroup:before {
	content: "\f500";
}
.icon--close:before {
	content: "\f00d";
}
.icon-checkmark:before {
	content: "\f00c";
}
.icon-checkmark-circle:before {
	content: "\f058";
}
.icon-checkbox-checked:before {
	content: "\f14a";
}
.icon-checkbox-unchecked:before {
	content: "\f0c8";
}
.icon-checkbox-partial:before {
	content: "\f146";
}
.icon-loop:before {
	content: "\f2f1";
}
.icon-expand:before,
.icon--fullscreen:before {
	content: "\f31e";
}
.icon-expandvertically:before {
	content: "\f338";
}
.icon-expanddiagonally:before {
	content: "\f424";
}
.icon-resizehorizontally:before {
	content: "\f422";
	transform: rotate(45deg);
}
.icon-move:before {
	content: "\f0b2";
}
.icon-padlock:before {
	content: "\f30d";
}
.icon-descending:before {
	content: "\f107";
}
.icon-ascending:before {
	content: "\f106";
}
.icon-lock:before {
	content: "\f023";
}
.icon-maximize:before {
	content: "\f100";
}
.icon-minimize:before {
	content: "\f101";
}
.icon-coa:before {
	content: "\f5f3";
}
.icon-circle:before {
	content: "\f111";
}
.icon-circle-exclamation-check:before {
	content: "\e10d";
}
.icon-database:before {
	content: "\f1c0";
}
.icon-file:before {
	content: "\f15b";
}
.icon-file-approved:before {
	content: "\f316";
}
.icon-model:before {
	content: "\f6ff";
}
.icon-gear:before {
	content: "\f013";
}
.icon-esignature:before {
	content: "\f573";
}
.icon-message-send:before {
	content: "\e20a";
}
.icon-arrow-up:before {
	content: "\f062";
}
.icon-arrow-down:before {
	content: "\f063";
}
.icon-arrow-left:before {
	content: "\f060";
}
.icon-arrow-right:before {
	content: "\f061";
}
.icon-square-arrow-up-right:before {
	content: "\f14c";
}
.icon-arrows-rotate:before {
	content: "\f021";
}
.icon-notification:before {
	content: "\f519";
}
.icon-users:before {
	content: "\f0c0";
}
.icon-hourglass:before {
	content: "\f254";
}
.icon-thumbtack:before {
	content: "\f08d";
}
.icon-comment-pen:before {
	content: "\f4ae";
}
.icon-comment-exclamation:before {
	content: "\f4af";
}
.icon-inactive:before {
	content: "\f5ec";
}
.icon-cube:before {
	content: "\f1b2";
}
.icon-window-popup:before {
	content: "\f2d2";
}
.icon-window-maximize:before {
	content: "\f2d0";
}
.icon-draggable:before {
	content: "\f047";
}
.icon-flask:before {
	content: "\f0c3";
}
.icon-sparkles:before {
	content: "\f890";
}
.icon-play:before {
	content: "\f04b";
}
.icon-pause:before {
	content: "\f04c";
}
.icon-menu:before {
	content: "\f0c9";
}
.icon-chevron-right:before {
	content: "\f054";
}
.icon-with-highlighter:before {
	content: "\e1af";
}
.icon-sun:before {
	content: "\e28f";
}
.icon-moon:before {
	content: "\f186";
}

.icon-with-pencil {
	position: relative;
	top: 0;
	left: 0;
}

.icon-with-pencil:after {
	font-family: "Font Awesome Pro Regular" !important;
	content: "\f304";
	position: absolute;
	left: 60%;
	bottom: -10%;
	font-size: 10px;
	text-shadow:
		rgb(var(--white)) -1px -1px,
		rgb(var(--white)) 0 1px;
}

.icon--success {
	cursor: default;
	color: rgb(var(--icon-success));
}
.icon--success:before {
	content: "\f058";
}

.icon--warning {
	cursor: help;
	color: rgb(var(--icon-warning));
}
.icon--warning:before {
	content: "\f06a";
}

.icon--invalid {
	cursor: help;
	color: rgb(var(--icon-error));
}
.icon--invalid:before {
	content: "\f06a";
}

.icon-required:before {
	content: "\2a";
}

/* region doc icons */
.docicon {
	font-size: var(--size-subtitle);
	margin-right: 0.25rem;
}

.icon_doc:before,
.icon_file_txt:before {
	content: var(--icon_file_txt);
}
.icon_file_bmp:before {
	content: var(--icon_file_bmp);
}
.icon_file_jpg:before {
	content: var(--icon_file_jpg);
}
.icon_file_doc:before {
	content: var(--icon_file_doc);
}
.icon_file_html:before {
	content: var(--icon_file_html);
}
.icon_file_pdf:before {
	content: var(--icon_file_pdf);
}
.icon_file_ppt:before {
	content: var(--icon_file_ppt);
}
.icon_file_vsd:before {
	content: var(--icon_file_vsd);
}
.icon_file_xls:before {
	content: var(--icon_file_xls);
}
.icon_file_zip:before {
	content: var(--icon_file_zip);
}
a.external-link:before {
	font-family: "Font Awesome Pro Light" !important;
	cursor: default;
	font-weight: 300;
	display: inline-block;
	content: "\f08e";
}
/* endregion */

/* region solvers icons */
.icon-module-all:before {
	content: "\e196";
}

.icon-module-quality-control:before {
	content: "\f2f7";
}

.icon-module-continuous-improvement:before {
	content: "\f021";
}

.icon-module-document-management:before {
	content: "\f5db";
}

.icon-module-supplier-quality:before {
	content: "\f0d1";
}

.icon-module-ehs:before {
	content: "\f06c";
}

.icon-product-qc:before {
	content: "\f6a3";
}

.icon-process-qc:before {
	content: "\e5df";
}

.icon-statistical-control:before {
	content: "\f201";
}

.icon-qc-reporting:before {
	content: "\f659";
}

.icon-qc-traceability:before {
	content: "\f464";
}

.icon-qc-instrument:before {
	content: "\f545";
}

.icon-deviation-ci:before {
	content: "\e0e9";
}

.icon-ci-audit:before {
	content: "\e756";
}

.icon-customer-complaint:before {
	content: "\f4a5";
}

.icon-capa:before {
	content: "\e522";
}

.icon-risk-management:before {
	content: "\e247";
}

.icon-change-management:before {
	content: "\f074";
}

.icon-quality-manual:before {
	content: "\f02d";
}

.icon-doc-control:before {
	content: "\e64e";
}

.icon-visualize:before {
	content: "\f542";
}

.icon-training:before {
	content: "\f501";
}

.icon-compliance-intelligence:before {
	content: "\f6b8";
}

.icon-supplier-onboarding:before {
	content: "\e5e1";
}

.icon-incoming-supply:before {
	content: "\f467";
}

.icon-supplier-deviation:before {
	content: "\e828";
}

.icon-performance-evaluation:before {
	content: "\f559";
}

.icon-ehs-incident:before {
	content: "\f807";
}

.icon-ehs-audit:before {
	content: "\f46c";
}

.icon-ehs-operations:before {
	content: "\e5f7";
}

.icon-ehs-reporting:before {
	content: "\f659";
}

.icon-ehs-compliance:before {
	content: "\f24e";
}
/* endregion */

/* region hazard icons */
.hazardsymbol {
	background-image: url(pix/hazardsymbols.png);
	background-repeat: no-repeat;
	width: 100px;
	height: 100px;
	margin: 5px;
	border: 1px solid rgb(var(--border-hard));
	background-color: rgb(var(--white));
	display: inline-block;
}

.hazardsymbol.explosive {
	background-position: 0 0;
}
.hazardsymbol.flammable {
	background-position: -100px 0;
}
.hazardsymbol.flammableoxidiser {
	background-position: -200px 0;
}
.hazardsymbol.compressedgas {
	background-position: 0 -100px;
}
.hazardsymbol.corrosive {
	background-position: -100px -100px;
}
.hazardsymbol.toxic {
	background-position: -200px -100px;
}
.hazardsymbol.irritant {
	background-position: 0 -200px;
}
.hazardsymbol.healthrisk {
	background-position: -100px -200px;
}
.hazardsymbol.environmentaltoxin {
	background-position: -200px -200px;
}
.hazardsymbol.filterp1 {
	background-position: 0 -300px;
}
.hazardsymbol.filterp2 {
	background-position: -100px -300px;
}
.hazardsymbol.filterp3 {
	background-position: -200px -300px;
}
.hazardsymbol.glasses {
	background-position: 0 -400px;
}
.hazardsymbol.gloves {
	background-position: -100px -400px;
}
.hazardsymbol.clothing {
	background-position: -200px -400px;
}
.hazardsymbolcontainer {
	max-width: 360px;
}
/* endregion */

/* region beamer icon */
.beamerTrigger {
	display: flex !important;
	align-items: center;
	color: rgb(var(--textcolor-link));
	cursor: pointer;
}

.beamerTrigger .beamer_icon {
	position: unset !important;
	margin-left: var(--spacing-extra-small);
}

.beamerTrigger .beamer_icon.active {
	border-radius: 4px;
}

.beamerTrigger:hover span {
	text-decoration: underline;
}

.beamerTrigger:hover .beamer_icon {
	text-decoration: none !important;
}
/* endregion */

/* endregion */

/* region scrollbars */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background-color: rgb(var(--border-soft));
}

::-webkit-scrollbar-thumb {
	background-color: rgba(var(--textcolor-secondary), 0.4);
	border-radius: 20px;
}
/* endregion */

/* region devConsole */
.maintenancemode {
	color: rgb(var(--textcolor-error));
}

.devconsole {
	border-top: 2px solid rgb(var(--border-hard));
	border-right: 2px solid rgb(var(--border-hard));
	width: 100px;
	max-height: 20px;
	overflow: hidden;
	position: fixed;
	bottom: 0;
	background-color: rgb(var(--background-upper));
	text-align: left;
}

.devconsole.devconsole--show {
	border-right: 0;
	width: 100%;
	height: 500px;
	max-height: none;
	overflow-y: scroll;
	resize: vertical;
}

.devconsole .devconsole__title {
	margin: 0;
	padding: var(--spacing-extra-small);
	font-family: Verdana, sans-serif;
	background-color: rgb(var(--background-upper));
	cursor: pointer;
}
/* endregion */

/* region tooltips */
.tippy-box {
	background-color: rgb(var(--background-upper));
	color: rgb(var(--textcolor-main));
	border: 1px solid rgb(var(--border-soft));
	border-radius: var(--border-radius-small);
	padding: var(--spacing-extra-small);
	box-shadow: var(--main-box-shadow);
	font-family: "Poppins", sans-serif;
	font-size: var(--size-base);
	z-index: var(--zindex-tooltip);
}

.tippy-box[data-placement^="top"] > .tippy-arrow::before {
	border-top-color: rgb(var(--tooltip-arrow));
	bottom: calc(var(--spacing-small) * -1);
}

.tippy-box[data-placement^="bottom"] > .tippy-arrow::before {
	border-bottom-color: rgb(var(--tooltip-arrow));
	top: calc(var(--spacing-small) * -1);
}

.tippy-box[data-placement^="left"] > .tippy-arrow::before {
	border-left-color: rgb(var(--tooltip-arrow));
	right: calc(var(--spacing-small) * -1);
}

.tippy-box[data-placement^="right"] > .tippy-arrow::before {
	border-right-color: rgb(var(--tooltip-arrow));
	left: calc(var(--spacing-small) * -1);
}

.tooltip__header {
	margin-bottom: 10px;
	font-family: "Poppins", sans-serif;
	font-size: var(--size-base);
	color: rgb(var(--textcolor-subheading));
	font-weight: var(--fontweight-semibold);
}

.tooltip__body {
	font-weight: var(--fontweight-normal);
	white-space: normal;
}

.tooltip__body .spec-bandwidth {
	display: flex;
	line-height: 1;
}

.hastooltip:not(.nostyle, .nocolor),
.icon.help {
	cursor: help;
	color: rgb(var(--icon-tooltip));
}

.hastooltip.nocolor {
	cursor: help;
}
/* endregion */

/* region spec-bandwidth in Results overview */
.tippy-content .spec-bandwidth {
	padding: 0;
	color: rgb(var(--textcolor-spec));
	font-weight: var(--fontweight-semibold);
}

.tippy-content .spec-bandwidth span {
	padding: var(--spacing-extra-small);
}

.tippy-content .spec-bandwidth .outer_spec,
.tippy-content .spec-bandwidth .inner_spec,
.tippy-content .spec-bandwidth .goal_spec {
	display: flex;
	min-width: 16px;
	height: 20px;
	align-items: center;
}

.tippy-content .spec-bandwidth .outer_spec {
	background-color: rgb(var(--background-error));
}

.tippy-content .spec-bandwidth .inner_spec {
	background-color: rgb(var(--background-warning));
}

.tippy-content .spec-bandwidth .goal_spec {
	background-color: rgb(var(--background-success));
}

.tippy-content .spec-bandwidth .outer_spec:first-of-type {
	border-radius: 2px 0 0 2px;
}

.tippy-content .spec-bandwidth .outer_spec:last-of-type {
	border-radius: 0 2px 2px 0;
}
/* endregion */

/* region sticky */
.sticky {
	position: sticky;
	top: 0;
}

h3.sticky,
.sticky h3 {
	padding: 10px 0;
}

.sticky--whitebg {
	background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%);
}

.sticky--belowtoolbar {
	top: 45px;
}
/* endregion */

/* region generic styles */
/* region positioning */
.float--left {
	float: left;
}

.float--right {
	float: right;
}

.textalign--left {
	text-align: left;
}

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

.textalign--right {
	text-align: right;
}

.offset--left {
	margin-left: 5px;
}

.offset--right {
	margin-right: 10px;
}
/* endregion */

/* region display */
.display--inlineblock {
	display: inline-block;
}

.display--block {
	display: block !important;
}

.hidden {
	display: none;
}

[hidden] {
	display: none !important;
}

.invisible {
	visibility: hidden;
}
/* endregion */

/* region scrolling */
.no-scroll {
	overflow: hidden;
}
/* endregion */

/* region valign */
.valign:before {
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: 0;
}

.valigned {
	display: inline-block;
	vertical-align: middle;
}

.valigned .nowrap {
	text-decoration: none;
	display: flex;
	align-items: center;
	padding: 6px var(--spacing-medium);
	color: rgb(var(--textcolor-btn));
	border-radius: 5px;
	cursor: pointer;
	font-family: "Poppins", sans-serif;
	font-size: 12px;
	font-weight: var(--fontweight-semibold);
	background-color: rgb(var(--background-btn));
	border: 1px solid rgb(var(--border-soft));
}

.valigned .nowrap:hover {
	border: 1px solid rgb(var(--border-btn-hover));
	color: rgb(var(--textcolor-btn-hover));
}

.valigned .nowrap:active {
	border: 1px solid rgb(var(--border-selected));
	color: rgb(var(--textcolor-btn-selected));
	background-color: rgb(var(--background-btn-active));
}

.valigntop {
	/* http://css-tricks.com/centering-in-the-unknown/ */
	vertical-align: top;
}
/* endregion */

/* region hoverhide */
html:not(.noHoverHide) .hoverhide {
	visibility: hidden;
}

a:hover .hoverhide,
*:hover > .hoverhide {
	visibility: visible !important;
}
/* endregion */

/* region input, select */
input {
	box-sizing: border-box;
}

select {
	background-color: rgb(var(--background-input));
}

select[disabled],
input[disabled] {
	background-color: rgba(var(--background-input-disabled), 0.3);
	opacity: 1;
	border: none;
}

input:focus:not([type="checkbox"]):not([type="radio"]),
select:focus,
textarea:focus {
	outline: solid medium rgb(var(--focus-input));
}
/* endregion */

.labelbadge {
	display: inline;
	padding: 0.2em 0.6em 0.3em;
	font-family: "Poppins", sans-serif;
	color: rgb(var(--textcolor-main));
	line-height: 1;
	background-color: rgb(var(--background-labelbadge));
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 0.25em;
	font-size: 75%;
}

.labelbadge--info {
	border-radius: var(--border-radius-small);
	background-color: rgb(var(--background-info));
	padding: var(--spacing-extra-small);
	color: rgb(var(--textcolor-decorative-dark));
}

.divider {
	border: 0;
	height: 1px;
	border-top: 1px solid rgb(var(--border-soft));
}

.divider--addtodashboard {
	margin-bottom: 1em;
}

.max-width {
	max-width: 600px;
	overflow-x: auto;
	overflow-y: hidden;
}

.max-height {
	max-height: 300px;
	overflow-y: auto;
	overflow-x: hidden;
}

.pointer {
	cursor: pointer;
}

.fullWidth {
	width: 100%;
}

.nowrap {
	white-space: nowrap;
}
/* endregion */

/* region notification badges */
.badge {
	border-radius: 4px;
	display: inline-block;
	width: 20px;
	background-color: rgb(var(--background-badge-danger));
	text-align: center;
	vertical-align: text-bottom;
}

.badge span {
	margin: 0;
	padding: 0;
	display: block;
	font-family: "Poppins", sans-serif;
	font-size: var(--size-small);
	color: rgb(var(--textcolor-decorative));
}

.badge--info {
	background-color: rgb(var(--background-badge));
	color: rgb(var(--textcolor-decorative));
}

a:hover .badge {
	text-decoration: none !important;
}

.badge.hidden {
	display: none;
}

button .badge {
	width: 16px;
	height: 16px;
}

button .badge > span {
	font-size: 0.8em;
	font-weight: bold;
	line-height: normal;
}
/* endregion */

/* region headers, text, links, lists, etc */
/* region headers */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Poppins", sans-serif;
	font-weight: var(--fontweight-semibold);
}

h1 {
	color: rgb(var(--textcolor-heading));
}

h2,
h3,
h4,
h5,
h6 {
	color: rgb(var(--textcolor-subheading));
}

h1 {
	color: rgb(var(--textcolor-heading));
}

h1:first-child,
h2:first-child,
h3:first-child,
h1 + h2,
h2 + h3 {
	margin-top: 0;
}

h1 > .small,
h2 > .small {
	font-size: 1rem;
	margin-left: var(--spacing-small);
}

h1 > .note,
h2 > .note {
	margin-left: var(--spacing-small);
	font-size: 1rem;
	color: rgb(var(--textcolor-error));
}

.header__subtitle {
	font-size: var(--size-subtitle);
}
/* endregion */

/* region paragraph, text, links */
p:first-child {
	margin-top: 0;
}

p:last-child {
	margin-bottom: 0;
}

.small {
	font-size: 0.9em;
}

.smallgrey {
	font-size: var(--size-base);
	font-weight: var(--fontweight-normal);
	color: rgb(var(--textcolor-secondary));
}

.strike {
	text-decoration: line-through;
}

.italic {
	font-style: italic;
}

span.function {
	font-style: italic;
	font-family: "Times New Roman", sans-serif;
}

.numeric {
	text-align: right;
}

.esignature span {
	font-family: "Allura", sans-serif;
	font-size: var(--size-esignature) !important;
	color: rgb(var(--textcolor-link));
}

.esignature:hover span {
	color: rgb(var(--textcolor-link-hover));
	cursor: pointer;
}

.codefont {
	font-size: var(--size-base);
	font-family: "Roboto Mono", monospace;
}

a,
li.mocklink,
.hasrole {
	color: rgb(var(--textcolor-link));
	cursor: pointer;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.link--disabled,
.link--disabled * {
	color: rgb(var(--textcolor-secondary));
	cursor: default;
	pointer-events: none;
	text-decoration: none;
}

.tag--unpublished {
	font-size: var(--size-small);
	background-color: rgb(var(--background-warning));
	color: rgb(var(--textcolor-decorative-dark));
	padding: 2px;
	border-radius: var(--border-radius-small);
	margin-right: auto;
	margin-left: var(--spacing-extra-small);
}

.warningmsg {
	display: flex;
	padding: 10px;
	background-color: rgb(var(--background-warning));
	color: rgb(var(--textcolor-decorative-dark));
	font-size: var(--size-base);
	border-left: 4px solid rgb(var(--border-warning-hard));
	border-radius: var(--border-radius-small);
	line-height: 1rem; /* this is to align the icon with the first line of text */
}

.warningmsg .icon {
	color: rgb(var(--textcolor-decorative-dark));
	font-family: "Font Awesome Pro Regular" !important;
	font-weight: 400;
	margin-right: var(--spacing-extra-small);
}
/* endregion */

/* region labels */
.mask .label {
	text-align: right;
}

.mask .post {
	text-align: left;
}

label,
.pseudolabel {
	color: rgb(var(--textcolor-secondary));
	display: flex;
	align-items: center;
}

label:hover,
.pseudolabel:hover {
	cursor: pointer;
}

label:not(.filelabel, .checkbox__label, .radio__label):hover :not(input, select, .hastooltip, .signature__label),
.pseudolabel:hover :not(input, select, .hastooltip) {
	text-decoration: underline;
}

label input[type="checkbox"],
label input[type="radio"],
.pseudolabel input[type="checkbox"],
.pseudolabel input[type="radio"] {
	margin-right: var(--spacing-extra-small);
}

li.pseudolabel input:not([type="radio"]),
li.pseudolabel select {
	margin: 0 var(--spacing-extra-small);
}

label.plain {
	color: rgb(var(--textcolor-main));
}

label.plain:hover {
	cursor: auto;
	text-decoration: none;
}

.signature__label {
	color: rgb(var(--textcolor-main));
	font-size: var(--size-base);
	margin-left: 5px;
	user-select: none;
}
/* endregion */

/* region lists */
ol {
	padding: 0;
	list-style-position: inside;
}

ul {
	padding: 0;
	list-style: none;
}

ul.nostyling {
	padding: 0 0 0 40px;
	list-style: unset;
}

ul.align {
	padding-left: 1em;
}

ul.bullet {
	list-style: disc;
}

ul:first-child,
ol:first-child {
	margin-top: 0;
}

li {
	padding: 0.3em 0;
}

.dense li {
	padding-top: 0.1em !important;
	padding-bottom: 0.1em !important;
}

.sparse li {
	padding: 0.6em 0;
}

ul.hover li {
	margin: 0;
	padding-left: 5px;
	padding-right: 5px;
}

ul.hover li:not(.nohover):hover {
	background-color: rgb(var(--background-main));
}

ul.blocklinks a {
	display: block;
}

.switchSelectionDD-list-hideInactive > .inactive {
	display: none;
}

/* region kpi list */
ul.kpirow {
	padding: 15px;
	overflow: auto;
	margin: 0 calc(var(--spacing-medium-large) * -1); /* to compensate for .main */
	color: rgb(var(--textcolor-secondary));
	border-bottom: 1px solid rgb(var(--border-soft));
}

ul.kpirow li.card {
	float: left;
	background-color: rgb(var(--background-upper));
	border: 1px solid rgb(var(--border-soft));
	border-radius: 5px;
	max-width: 200px;
	width: 188px;
	font-size: var(--size-base);
	margin: 10px;
	line-height: normal;
	padding: 0;
}

ul.kpirow li.card .cardcontent {
	padding: 10px;
}

ul.kpirow li.card .cardfooter {
	padding: 10px;
	border-top: 1px solid rgb(var(--border-soft));
	font-size: var(--size-base);
}

ul.kpirow li.card .number {
	font-size: var(--size-heading);
}

ul.kpirow li.card .unit {
	font-size: var(--size-base);
	margin-left: 5px;
}

ul.kpirow li.card .metric {
	font-size: var(--size-base);
	display: block;
	height: 30px;
}

.card__link {
	cursor: pointer;
}

.card__link:hover {
	color: rgb(var(--textcolor-link-hover));
}

li.card.card--chart:hover {
	border: 1px solid rgb(var(--border-selected));
}

li.card.card--chart:hover .icon-bars {
	transform: none;
	color: rgb(var(--icon-hover));
}
/* endregion */
/* endregion */
/* endregion */

/* region page header, toolbar, main */
/* region page header */
.pageheader {
	z-index: var(--zindex-pageheader);
	position: sticky;
	left: 0;
	width: calc((var(--vw, 1vw) * 100));
	padding: var(--spacing-extra-small) 0;
	background-color: rgb(var(--background-main));
	color: rgb(var(--textcolor-heading));
	min-height: 60px;
	display: grid;
	transition: var(--theme-switch-transition);
	grid-template-areas:
		"first-row rightlink"
		"second-row second-row"
		"third-row third-row"
		"divider divider";
}

.popup .pageheader {
	grid-template-areas:
		"first-row popup-logo"
		"second-row second-row"
		"third-row third-row"
		"divider divider";
}

.pageheader .rightlink {
	grid-area: rightlink;
	display: flex;
	gap: var(--spacing-medium-large);
	justify-content: end;
	padding: var(--spacing-medium-large) var(--spacing-medium-large) 0 var(--spacing-medium-large);
}

.pageheader h1 {
	margin: var(--spacing-medium-large) 0 0.1em var(--spacing-medium-large);
	font-size: var(--size-heading);
}

.pageheader h2,
.pageheader h3 {
	margin: 0 var(--spacing-medium-large);
	font-size: var(--size-subtitle);
}

.pageheader > h2 {
	grid-area: second-row;
}

.pageheader > h3 {
	grid-area: third-row;
}

.pageheader h3 .icon-filter {
	margin-right: var(--spacing-extra-small);
}

.pageheader__divider {
	grid-area: divider;
	margin: var(--spacing-medium-large) var(--spacing-medium-large) 0;
	border: 1px solid rgb(var(--border-soft));
}

.pageheader__btn .icon:hover {
	transform: none !important;
}

.popup__logo {
	grid-area: popup-logo;
	height: 40px;
	justify-self: flex-end;
	margin: 5px 10px;
}

.nav__wrapper--mobile + .pageheader {
	min-height: unset;
	display: grid;
	grid-template-areas:
		"first-row first-row"
		"second-row second-row"
		"third-row third-row"
		"rightlink rightlink"
		"divider divider";
}

.nav__wrapper--mobile + .pageheader > .rightlink {
	display: grid;
	justify-items: center;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.nav__wrapper--mobile + .pageheader .rightlink.valign:before {
	display: none;
}

.nav__wrapper--mobile + .pageheader > h1 {
	grid-area: first-row;
	font-size: var(--size-subtitle);
	margin: auto 1em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.nav__wrapper--mobile + .pageheader > h1 .dropdown {
	align-items: flex-end;
	flex-grow: 1;
}

.nav__wrapper--mobile + .pageheader > h1 .dropdown__label {
	margin-left: auto;
	align-self: unset;
}

.nav__wrapper--mobile + .pageheader > h1 .dropdown__content {
	margin-top: calc(var(--spacing-small) * -1);
}

.nav__wrapper--mobile + .pageheader > h2,
.nav__wrapper--mobile + .pageheader > h3 {
	font-size: var(--size-base);
	font-weight: var(--fontweight-normal);
}

/* region maskNavigation */
.maskNavigation {
	display: inline-flex !important;
	align-items: center;
}

.maskNavigation .dropdown__label:after {
	margin-left: 0;
}

.maskNavigation .dropdown__content {
	max-height: 500px;
	overflow-y: auto;
	border-radius: 5px 0 5px 5px;
	margin-top: -3px;
	box-sizing: border-box; /* align the dropdown label with the right side of dropdown content */
	-moz-box-sizing: border-box;
}

.maskNavigation ul {
	font-size: 1rem;
}

.maskNavigation .dropdown__content li {
	padding-right: var(--spacing-large);
	font-size: var(--size-base);
	font-weight: var(--fontweight-normal);
}

.maskNavigation .btn--small {
	height: 24px;
	padding: 0.1em 0.5em;
	vertical-align: bottom;
	align-self: center;
	margin-left: 10px;
}
/* endregion */
/* endregion */

/* region toolbar */
.toolbar {
	background-color: rgb(var(--background-main));
	padding: var(--spacing-small) var(--spacing-medium-large);
	box-sizing: border-box;
	margin: 0 calc(var(--spacing-medium-large) * -1);
	display: flex;
	flex-wrap: wrap;
	position: sticky;
	top: 0;
	left: 0;
	width: calc((var(--vw, 1vw) * 100));
	z-index: var(--zindex-toolbar);
}

.toolbar--shadow {
	z-index: var(--zindex-toolbar-shadow);
	box-shadow: var(--main-box-shadow);
	padding-bottom: var(--spacing-small);
}

@media (prefers-color-scheme: dark) {
	.toolbar--shadow {
		background-color: rgb(var(--background-overlay));
	}
}

.toolbar--hidden {
	display: none; /* to hide the toolbar during dragging in manageMask.js */
}

.noToolbar .toolbar:not(.showresulttoolbar) {
	/* the appearance of .showresulttoolbar is regulated in showResultPanel.css */
	display: none;
}

.panel .toolbar {
	background-color: rgb(var(--background-overlay));
}

.toolbar > form {
	display: inline;
}

.toolbar > div,
.toolbar > form > div,
.toolbar > .btn,
.toolbar > form > .btn {
	margin-right: 1em;
	display: inline-block;
	vertical-align: top;
}

.toolbar .btn__group > .btn {
	margin-right: 0; /* reset margin for button groups within form */
}

.toolbar .btn__group {
	vertical-align: top;
}

.toolbar__right {
	margin-left: auto;
	margin-right: 0 !important;
}

.toolbar__right > .btn__group,
.toolbar__right > .dropdown,
.toolbar__right > .btn,
.toolbar__right > a {
	margin-left: 1em;
}

/* region mobile toolbar */
.toolbar:not(.toolbar--mobile) .toolbar--mobile__nav {
	display: none !important;
}

.toolbar.toolbar--mobile .toolbar--mobile__nav {
	display: flex;
	z-index: var(--zindex-mobile-toolbar-elements);
}

.toolbar--mobile {
	justify-content: center;
	min-height: 48px;

	--opacity: 1;
}

.toolbar--mobile > *:not(.toolbar--mobile__element--visible, .toolbar--mobile__nav, .toolbar__wrapper),
.toolbar--mobile > .toolbar__wrapper > *:not(.toolbar--mobile__element--visible) {
	display: none !important;
}

.toolbar--mobile--animating {
	overflow: hidden;
}

.toolbar--mobile--animating .btn:hover {
	border: 1px solid rgb(var(--border-soft));
	color: rgb(var(--textcolor-btn));
}

.toolbar--mobile .slide-center-right[disabled],
.toolbar--mobile .slide-center-right.btn--disabled,
.toolbar--mobile .slide-side-right[disabled],
.toolbar--mobile .slide-side-right.btn--disabled,
.toolbar--mobile .slide-center-left[disabled],
.toolbar--mobile .slide-center-left.btn--disabled,
.toolbar--mobile .slide-side-left[disabled],
.toolbar--mobile .slide-side-left.btn--disabled {
	--opacity: 0.4;
}

.toolbar--mobile .slide-center-right {
	animation: var(--animation-timing-base) slide-center-right forwards;
	position: absolute;
}

.toolbar--mobile .slide-side-right {
	animation: var(--animation-timing-base) slide-side-right forwards;
}

.toolbar--mobile .slide-center-left {
	animation: var(--animation-timing-base) slide-center-left forwards;
	position: absolute;
}

.toolbar--mobile .slide-side-left {
	animation: var(--animation-timing-base) slide-side-left forwards;
}

@keyframes slide-side-right {
	from {
		transform: translateX(-200%);
		opacity: 0;
	}
	to {
		transform: translateX(0%);
		opacity: var(--opacity);
	}
}

@keyframes slide-side-left {
	from {
		transform: translateX(200%);
		opacity: var(--opacity);
	}
	to {
		transform: translateX(0%);
		opacity: var(--opacity);
	}
}

@keyframes slide-center-right {
	0% {
		transform: translateX(0%);
		opacity: var(--opacity);
	}
	100% {
		transform: translateX(200%);
		opacity: 0;
	}
}

@keyframes slide-center-left {
	0% {
		transform: translateX(0%);
		opacity: var(--opacity);
	}
	100% {
		transform: translateX(-200%);
		opacity: 0;
	}
}

.toolbar--mobile > div,
.toolbar--mobile > form > div,
.toolbar--mobile > .btn,
.toolbar--mobile > form > .btn {
	margin-right: 0 !important;
}

.toolbar--mobile .toolbar__wrapper {
	margin-left: 0;
}

.toolbar--mobile .toolbar__wrapper .dropdown__content {
	right: unset;
}

.toolbar--mobile .toolbar--mobile__nav:first-child {
	margin-right: auto !important;
}

.toolbar--mobile .toolbar--mobile__nav:last-child {
	margin-left: auto !important;
}
/* endregion */
/* endregion */

/* region main */
.main {
	padding: var(--spacing-medium-large);
	position: relative; /* to have Chrome render */
	width: calc((var(--vw, 1vw) * 100));
	box-sizing: border-box;
	display: flex;
	flex-flow: column;
}

.maincontainer {
	margin-top: var(--spacing-small);
	width: 100%;
	max-width: 100%;
	max-height: 100%;
}

.maincontainer--uniformwidth .capsule {
	width: 100%;
}

.maincontainer--columnlayout {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
}

.maincontainer--gridlayout {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--spacing-medium-large);
}

.maincontainer--gridlayout .capsule {
	margin: 0;
	width: 100%;
	height: 100%;
}

.layoutwrapper {
	padding: 0 0 var(--spacing-medium-large) 0;
}

.layoutwrapper .capsule {
	width: 100%;
}

.layoutwrapper--fiftyfifty {
	width: calc(50% - var(--spacing-small));
}

.layoutwrapper--thirtyseventy:first-of-type,
.layoutwrapper--seventythirty:last-of-type {
	width: calc(30% - var(--spacing-small));
}

.layoutwrapper--thirtyseventy:last-of-type,
.layoutwrapper--seventythirty:first-of-type {
	width: calc(70% - var(--spacing-small));
}

.capsule {
	margin-top: var(--spacing-medium-large);
	box-sizing: border-box;
	box-shadow: var(--main-box-shadow);
	border-radius: var(--border-radius-large);
	padding: var(--spacing-medium-large);
	background-color: rgb(var(--background-upper));
	border: 1px solid rgb(var(--border-soft));
	width: fit-content;
	height: fit-content;
	overflow: auto;
	color: rgb(var(--textcolor-main));
}

.capsule h2 {
	font-size: var(--size-subtitle);
}

.capsule--table {
	padding: 0 !important;
}

.capsule--overflowvisible {
	overflow: visible !important;
}

/* to be used on the _direct_ parent of charts and iframes - only one chart/iframe child per .capsule--visualdata */
.capsule--visualdata {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.capsule--visualdata:empty {
	display: none;
}

.capsule--visualdata > *:not(.loader__bar) {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}

.capsule.capsule--visualdata .highcharts-container {
	max-width: 100%;
}

.capsule.capsule--visualdata .highcharts-container > svg {
	max-width: 100%;
	max-height: 100%;
}

/* endregion */
/* endregion */

/* region existing data */
.existingdata {
	font-size: var(--size-base);
}

.existingdata:not(:last-of-type) {
	margin-bottom: 36px;
}

.existingdata__header {
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--spacing-medium);
}

.existingdata__title {
	color: rgb(var(--textcolor-heading));
	font-weight: var(--fontweight-semibold);
}

.existingdata__icons {
	display: flex;
	align-items: baseline;
}

.existingdata__icons .icon {
	margin-left: var(--spacing-medium-large);
}

.existingdata__table td {
	box-shadow: none !important;
}

.existingdata__table .label {
	text-align: end;
	white-space: nowrap;
	vertical-align: top;
}

.existingdata__tags {
	display: flex;
	flex-wrap: wrap;
	margin-top: calc(var(--spacing-small) * -1);
}

.existingdata__tag {
	background-color: rgb(var(--background-main));
	padding: var(--spacing-extra-small);
	border-radius: var(--border-radius-small);
	margin-right: var(--spacing-small);
	margin-top: var(--spacing-small);
	font-size: var(--size-base);
}

.existingdata__tag .icon--close {
	margin-left: var(--spacing-extra-small);
}

.existingdata__tag--inactive {
	border: 1px solid rgb(var(--border-soft));
	background-color: rgb(var(--background-main));
}

.existingdata__tag--inactive .icon-inactive {
	color: rgb(var(--textcolor-secondary));
}
/* endregion */

/* region dropdown */
.dropdown {
	display: inline-block;
	position: relative;
}

/* region dropdown label */
.dropdown__label {
	position: relative;
}

.dropdown__label:after {
	display: inline-flex; /* necessary for the transform property: pseudo-elements are inline by default and inline elements can't transform */
	font-family: "Font Awesome Pro Light";
	content: "\f107";
	margin-left: 0.5em;
}

.dropdown--expanded .dropdown__label:after {
	transform: rotate(180deg);
}

/* .dropdown__label--overflow is used in conjunction with the tippy library to create dropdowns that are able to flow outside of their {overflow: auto;} containers */
.dropdown__label--overflow:after {
	content: "\f107";
	font-family: "Font Awesome Pro Light";
}

.dropdown__label--overflow[aria-expanded="true"]:after {
	content: "\f106";
	font-family: "Font Awesome Pro Light";
}

.dropdown--expanded .btn.dropdown__label,
.dropdown__label--overflow[aria-expanded="true"] {
	z-index: var(--zindex-dropdown-label); /* above .dropdown__content */
}

.dropdown--expanded .btn.btn--selected.dropdown__label,
.dropdown__label--overflow[aria-expanded="true"] {
	border: 1px solid rgb(var(--border-soft)); /* override the default border for selected buttons */
	border-bottom-color: rgb(var(--background-overlay));
	border-bottom-left-radius: 0 !important; /* override .dropdown--expanded .btn.dropdown__label */
	border-bottom-right-radius: 0 !important;
}

.dropdown--expanded .btn.btn--selected.dropdown__label.dropdown__label--keepborder {
	border-bottom-color: rgb(var(--border-soft));
}

.dropdown--expanded.hoverhide .dropdown__label {
	visibility: visible;
}

/* disable the hover effect on the dropdown label when the dropdown is expanded */
.dropdown__label--overflow[aria-expanded="true"]:hover {
	border: 1px solid rgb(var(--border-soft));
	border-bottom-color: rgb(var(--background-overlay));
}
/* endregion */

/* region dropdown content */
.dropdown__content {
	border: 1px solid rgb(var(--border-soft));
	border-radius: 0 5px 5px 5px;
	padding: var(--spacing-medium-large) var(--spacing-medium-large);
	margin: -1px 0;
	min-width: 100%; /* make dropdown at least as wide as label */
	position: absolute;
	top: var(--spacing-large);
	left: auto;
	font-size: var(--size-base);
	white-space: nowrap;
	background-color: rgb(var(--background-overlay));
	box-shadow: var(--main-box-shadow);
	transform: scaleY(0);
	transform-origin: top;
}

.dropdown--expanded > .dropdown__content {
	z-index: var(--zindex-dropdown-content);
	transform: scaleY(1);
}

.dropdown__content li .icon.hoverhide {
	margin-left: var(--spacing-extra-small);
}

.toolbar__right .dropdown__content,
.right .dropdown__content,
.dropdown__content.right {
	border-radius: 5px 0 5px 5px; /* override dropdown__content */
	right: 0;
}

.toolbar--mobile .dropdown--expanded .dropdown__content {
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 5px;
}

.historydropdown__content {
	height: unset !important;
}

.historydropdown__content .trailevent__footer {
	white-space: nowrap;
}

.dropdown .dropdown__header {
	font-weight: var(--fontweight-semibold);
	color: rgb(var(--textcolor-subheading));
}

li.dropdown__header:not(:first-of-type) {
	margin-top: 0.5rem;
}

/* region dropdown lists */
ul.dropdown__content {
	padding: 10px 0; /* no horizontal padding to get hover over 100% width */
}

ul.dropdown__content > li {
	padding: 5px var(--spacing-medium-large);
}

ul.dropdown__content > li.link {
	padding: 0;
	display: flex;
	align-items: center;
}

li.link:hover {
	background-color: rgb(var(--background-main));
}

li.link > a,
li.link > form {
	padding: 5px var(--spacing-medium-large);
	display: block;
}

ul.dropdown__content > li.link.link--disabled {
	pointer-events: none;
}

.dropdown__content ul.searchable {
	margin-bottom: 0;
	width: 100%;
}
/* endregion */

/* region search input */
.search__container {
	display: flex;
	align-items: center;
}

.search__input {
	margin-right: 10px;
}
/* endregion */

.dropdown__content li.label {
	margin-top: 10px;
	font-family: "Poppins", sans-serif;
	font-size: 1em;
	font-weight: 500;
}

.dropdown__content li.label:first-child {
	margin-top: 0;
}

.dropdown__content li.label:hover {
	/* disable hover */
	background-color: inherit;
}

.dropdown__footer {
	padding: 10px 0 0 0;
	text-align: right;
}
/* endregion */
/* endregion */

/* region resulttable */
.resulttable__wrapper {
	max-width: 50vw;
	max-height: 80vh;
	overflow: auto;
}

.resulttable td {
	box-shadow: none;
}

.resulttable td.label {
	vertical-align: top;
	text-align: end;
}

.resulttable td.value,
.resulttable td.post {
	background-color: rgb(var(--background-table));
}

.resulttable .delimiter td {
	color: rgb(var(--textcolor-subheading));
	font-weight: var(--fontweight-semibold);
	text-align: end;
}

.resulttable td.delimiter--main {
	font-size: var(--size-subtitle);
}

.resulttable__wrapper .attachments .icon {
	margin-right: var(--spacing-small);
}
/* endregion */

/* region section delimiter */
.section__delimiter.collapseable--collapsed tr:not(.delimiter-main) {
	display: none;
}

.delimiter {
	font-weight: var(--fontweight-semibold);
}

.delimiter-main .collapseable__label {
	font-size: var(--size-icon-base);
}

.delimiter-sub {
	font-size: var(--size-base);
}

.delimiter td {
	padding-top: 40px;
}

.delimiter-title {
	color: rgb(var(--textcolor-link));
}

.delimiter--separator {
	box-shadow: inset 0 -1px rgb(var(--border-soft));
}

.delimiter--separator + tr td {
	padding-top: 20px;
}

/* endregion */

/* region form, fieldset, layout (columns, accordion), collapseable */
/* region form, form elements */
form td {
	padding: var(--spacing-small) var(--spacing-extra-small);
}

.label,
.post {
	font-family: "Poppins", sans-serif;
	font-size: var(--size-base);
	color: rgb(var(--textcolor-secondary));
}

.label--baseline {
	vertical-align: baseline;
}

input,
textarea,
select {
	border: 1px solid rgb(var(--border-hard));
	border-radius: 5px;
	font-size: var(--size-base);
	padding: 0.15em 0.5em;
	font-family: "Lato", "Poppins", sans-serif;
	background-color: rgb(var(--background-input));
}

input.numeric {
	width: 50px;
}

input.date {
	width: 140px;
}

input[readonly] {
	background-color: rgba(var(--background-input-disabled), 0.3);
	border: none;
}

/* region checkbox, radio */
input[type="checkbox"],
input[type="radio"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	height: 20px;
	width: 20px;
	padding: 0;
	outline: none;
	display: flex;
	cursor: pointer;
	border: 1px solid rgb(var(--border-hard));
	background: rgb(var(--background-input));
	transition: background 0.3s;
}

input[type="checkbox"]:after,
input[type="radio"]:after {
	content: "";
	display: flex;
	width: 20px;
	height: 20px;
}

input[type="checkbox"] {
	border-radius: 4px;
}

input[type="checkbox"]:checked {
	background: rgb(var(--background-input-selected));
}

input[type="checkbox"]:disabled {
	background: rgb(var(--background-input-disabled));
	border: none;
}

input[type="checkbox"]:checked:after {
	font-family: "Font Awesome Pro Light";
	color: rgb(var(--icon-checkbox));
	content: "\f00c";
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

input[type="checkbox"]:checked:disabled:after {
	color: rgb(var(--icon-checkbox-disabled));
}

input[type="checkbox"].checkbox--partialcheck {
	background: rgb(var(--background-input-selected));
}

input[type="checkbox"].checkbox--partialcheck:after {
	font-family: "Font Awesome Pro Solid";
	color: rgb(var(--icon-checkbox));
	content: "\2d";
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

input[type="radio"] {
	border-radius: 50%;
}

input[type="radio"]:checked {
	border: 1px solid rgb(var(--border-selected));
}

input[type="radio"]:checked:after {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgb(var(--background-input-selected));
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible:after {
	outline: solid medium rgb(var(--focus-input));
}

input[type="checkbox"]:focus-visible:after {
	height: 100%;
	border-radius: 2px;
}
/* endregion */

/* region file upload */
.filelabel input[type="file"] {
	display: none;
}

.filelabel:hover {
	text-decoration: none;
}

.fileupload {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 230px;
}

.fileupload__btn {
	margin-right: 1vw;
}

.fileupload__btn,
.fileupload__filetitle {
	box-sizing: border-box;
	height: 28px;
}

.fileupload .icon {
	margin-left: 5px;
}

.fileupload__filetitle {
	flex-grow: 1;
}
/* endregion */

/* region file browse */
.filebrowse__container {
	display: flex;
	position: relative;
	align-items: center;
	width: 100%;
	padding-top: 3px; /* Necessary for the focus on the input when it's not readonly */
}

.btn.filebrowse__btn {
	border-radius: 5px 0 0 5px;
	white-space: nowrap;
	height: 34px;
	box-sizing: border-box;
}

.filebrowse__btn .icon {
	margin-right: var(--spacing-extra-small);
}

.filebrowse__fileinput {
	height: 34px;
	border-radius: 0 5px 5px 0;
	flex-grow: 2;
}

input:not([type="checkbox"], [type="radio"]).filebrowse__fileinput.required {
	box-shadow: -4px 0 0 0 rgb(var(--border-hard)) inset;
}

.filebrowse__fileinput::placeholder {
	color: rgb(var(--textcolor-main));
}

.filebrowse__fileinput--invalid,
.filebrowse__fileinput--invalid[readonly] {
	border: 1px solid rgb(var(--border-error-hard));
	padding-right: 28px; /* 16px icon width + 8px left margin + 4px right margin */
	width: 100%;
}

input:not([type="checkbox"], [type="radio"]).filebrowse__fileinput--invalid.required {
	box-shadow: -4px 0 0 0 rgb(var(--border-error-hard)) inset;
}

.filebrowse__warningicon--hidden {
	display: none;
}

.filebrowse__warningicon--visible {
	color: rgb(var(--icon-error));
	position: absolute;
	right: var(--spacing-small);
	font-size: var(--size-icon-base);
}
/* endregion */

/* region form modifiers */
input:not([type="checkbox"], [type="radio"]).required,
input:not([type="checkbox"], [type="radio"]):required,
textarea.required,
textarea:required,
select.required,
select:required {
	box-shadow: 4px 0 0 0 rgb(var(--border-hard)) inset;
}

.empty--required:not([type="checkbox"]),
.invalid {
	box-shadow: 4px 0 0 0 rgb(var(--border-error-hard)) inset !important;
	border: 1px solid rgb(var(--border-error-hard)) !important;
}

.empty--required[type="checkbox"] {
	border: 1px solid rgb(var(--border-error-hard)) !important;
}

.inactive {
	color: rgb(var(--textcolor-secondary)) !important;
	font-style: italic; /* does not work for option */
}

textarea.disable,
textarea[disabled],
input.disable {
	background-color: rgba(var(--background-input-disabled), 0.3); /* similar to disabled Chrome browser styling */
	border: none;
}

textarea {
	white-space: pre-wrap; /* Make sure textareas always wrap, regardless of parent's behavior. IE/Edge cascade wrapping, FF/Chrome not */
	background-color: rgb(var(--background-input));
}

.text--strikethrough {
	text-decoration: line-through;
}
/* endregion */
/* endregion */

/* region fieldset */
fieldset {
	border-radius: 5px;
	padding: 10px var(--spacing-medium-large);
	border: 1px solid rgb(var(--border-soft));
	background-color: rgb(var(--background-overlay));
	box-shadow: var(--main-box-shadow);
}

legend {
	padding: 0 10px;
	font-family: "Poppins", sans-serif;
	font-weight: var(--fontweight-semibold);
	color: rgb(var(--textcolor-secondary));
	background-color: rgb(var(--background-upper)); /* hide fieldset's box-shadow */
}
/* endregion */

/* region container */
.container {
	margin-bottom: 2em;
}

.container--bordered {
	border: 1px solid rgb(var(--border-soft));
}

.container__header {
	margin: 0;
}

.container__header h4 {
	margin: 0;
	padding: 0.5em;
}
/* endregion */

/* region maskListDD */
div.variables__dropdowncontainer {
	width: clamp(350px, 70vw, 700px);
}

.variables__info {
	white-space: normal;
}

.variables__main {
	overflow-x: auto !important;
	max-width: unset;
}

.variables__main li {
	padding-left: var(--spacing-extra-small);
}
/* endregion */

/* region resultAttachmentsList */
.resultattachment__list {
	width: 100%;
}

.resultattachment .icon,
.resultattachment__link {
	margin-right: 5px;
}

.resultattachment__download:hover {
	text-decoration: none !important;
}

.resultattachment {
	border-bottom: 1px solid rgba(var(--border-soft), 0.6);
}
/* endregion */

/* region mobile tabs */
.mobile__tabs {
	display: none;
	font-size: var(--size-small);
	cursor: pointer;
}

.nav__wrapper--mobile ~ .main .mobile__tabs {
	display: flex;
	position: fixed;
	bottom: 0;
	z-index: var(--zindex-overlay);
	background: rgb(var(--background-upper));
	width: 100%;
	margin-left: calc(var(--spacing-medium-large) * -1);
	justify-content: space-between;
	margin-bottom: calc(var(--spacing-small) * -1);
}

.nav__wrapper--mobile ~ .main .mobile__tab {
	flex-grow: 1;
	display: flex;
	align-items: center;
	flex-flow: column;
	padding: var(--spacing-medium);
	border-top: 2px solid rgb(var(--border-soft));
}

.mobile__tab .icon {
	font-family: "Font Awesome Pro Regular" !important;
	font-weight: 400;
	font-size: var(--size-subtitle);
	margin-bottom: var(--spacing-extra-small);
	cursor: pointer;
}

.mobile__tab:not(.mobile__tab--selected) {
	color: rgb(var(--button-icon));
}

.mobile__tab--selected {
	color: rgb(var(--button-icon-selected));
	border-top: 2px solid rgb(var(--border-selected)) !important;
}

.nav__wrapper--mobile ~ .main .mobile__container {
	position: absolute;
}

.nav__wrapper--mobile ~ .main .mobile__container--hidden {
	visibility: hidden;
}
/* endregion */

/* region accordion */
.collapseable.container,
ul.accordion li.collapseable {
	margin: 5px;
	padding: 5px;
	border: 1px solid rgb(var(--border-soft));
	background-color: rgb(var(--background-upper));
	border-radius: 5px;
}

ul.accordion .collapseable__content {
	padding: 10px;
}

ul.accordion li.collapseable div.collapseable--toggle {
	padding: 10px;
}

ul.accordion.boldToggle .collapseable--toggle {
	width: 98%;
	font-family: "Poppins", sans-serif;
	font-weight: var(--fontweight-semibold);
	font-size: var(--size-subtitle);
	color: rgb(var(--textcolor-link));
}
/* endregion */

/* region collapseable */
.collapseable--toggle {
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.collapseable--label,
.collapseable__label {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.collapseable--label:after,
.collapseable .collapseable__label:after {
	font-family: "Font Awesome Pro Light";
	display: flex;
	content: "\f107";
	transform: rotate(180deg);
}

.collapseable--collapsed .collapseable__content {
	display: none;
}

.collapseable--collapsed .collapseable--label:after,
.collapseable--collapsed .collapseable__label:after {
	font-family: "Font Awesome Pro Light";
	transform: rotate(0);
}

.collapseable--noborder {
	border: 0 !important;
}

.collapseable--toggle .icon-delete {
	font-size: var(--size-icon-base);
}

/* region ruleset collapseable */
.collapseable__content .manageprofile__mainform,
.collapseable__content .manageprofile__rulesets {
	padding: 0 10px;
}

span.collapseable__label {
	color: rgb(var(--textcolor-link));
	font-size: var(--size-base);
	font-weight: var(--fontweight-semibold);
	margin-bottom: 0;
}
/* endregion/
/* endregion */
/* endregion */

/* region Print styles */
@media print {
	/* Hide elements */
	.hideInPrintout,
	.mainnav,
	.toolbar,
	.pageheader a,
	.dropdown__label,
	.dropdown__content,
	#devConsole,
	.icon,
	img.hasrole,
	button,
	.btn {
		display: none;
	}

	/* Reset colors */
	body,
	td,
	th,
	a {
		color: rgb(var(--textcolor-main)) !important;
	}

	.pageheader {
		background-color: rgb(var(--background-upper));
	}

	/* Page margin */
	@page {
		margin: 0.5cm;
	}

	.notification {
		position: static;
	}

	.tabview__content {
		display: block;
		overflow: auto;
	}

	/* Forced page break */
	.pagebreak--before {
		page-break-before: always;
	}

	.pagebreak--after {
		page-break-after: always;
	}
}
/* endregion */

/* region iframe, datasection, chart */
body.noToolbar {
	background-color: rgb(var(--background-upper));
	box-sizing: border-box;
	display: flex;
}

.noToolbar .main {
	margin: 0;
	padding: 0; /* padding causes unnecessary scrollbars and box-sizing: border-box doesn't get rid of them within iframes*/
	background-color: rgb(var(--background-upper));
	box-shadow: none;
	max-width: 100%;
}

.noToolbar .main .maincontainer {
	margin: 0;
	padding: 0;
	border: none;
	box-shadow: none;
	background-color: rgb(var(--background-main));
}

.noToolbar .maincontainer--showstats .showstatsboxplot__analyseslist {
	overflow: auto;
}

.noToolbar .maincontainer--showresults,
.noToolbar .maincontainer--showstats {
	max-width: inherit;
	overflow: unset; /* prevent iframes from getting their own scrollbars */
}

.noToolbar .maincontainer .capsule.capsule--visualdata {
	border: none;
	box-shadow: none;
	padding: 0;
	margin: 0;
	overflow-y: visible; /* {overflow: auto} causes unnecessary scrollbars in Firefox */
}
/* endregion */

/* region filePreview panel */
#filePreviewContainer iframe {
	border: none;
}
/* endregion */

/* region initiateDocMod panel */
.initiatedocmod__form tbody tr td {
	box-shadow: none;
	font-size: var(--size-base);
}

.initiatedocmod__form tbody tr td:first-child {
	text-align: end;
}

form.initiatedocmod__form table td textarea {
	width: 100%;
	box-sizing: border-box;
}

h3.activeDocModPending__doctitle {
	font-size: var(--size-base);
	color: rgb(var(--textcolor-main));
}

.initiatedocmod__form input.date ~ span.icon-calendar {
	border-radius: 0 5px 5px 0;
	background-color: rgb(var(--background-actbtn));
	color: rgb(var(--button-icon-actbtn));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px var(--spacing-medium);
}

.initiatedocmod__form input.date ~ span.icon-calendar:hover {
	color: rgb(var(--button-icon-actbtn));
	background-color: rgb(var(--background-actbtn-hover));
	transform: none;
}

.initiatedocmod__startdate {
	display: flex;
	height: 28px;
	align-items: center;
}

.initiatedocmod__form td.initiatedocmod__startdate {
	box-sizing: content-box;
}

.initiatedocmod__form input.date {
	border-radius: 5px 0 0 5px;
}

.initiatedocmod__timespantoggle {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	min-width: 30vw;
}

.initiatedocmod__timespantoggle #durationButtons {
	margin-right: 20px;
}
/* endregion */

/* region filePreviewPanelLink */
.filepreviewlink {
	display: inline-flex;
	align-items: baseline;
	margin-right: var(--spacing-small);
}
/* endregion */

/* region clipboard copy */
.clipboardcopy__item {
	color: rgb(var(--textcolor-link));
}

.clipboardcopy__item:hover .icon.icon-copy {
	color: rgb(var(--icon-hover));
	transform: scale(1.3);
}

.clipboardcopy__item .icon {
	width: var(--spacing-medium-large);
	margin-right: var(--spacing-small);
}
/* endregion */

/* region selectUsersPanel */
.selectuserspanel .widget__hd {
	margin-bottom: calc(var(--spacing-extra-small) * -1);
}

.selectuserspanel .listsearch__input {
	margin-top: var(--spacing-extra-small);
}

.selectuserspanel__groups {
	color: rgb(var(--textcolor-link));
	cursor: pointer;
}

.selectuserspanel__groups:hover {
	text-decoration: underline;
}

.selectuserspanel textarea {
	margin-bottom: var(--spacing-extra-small);
}
/* endregion */

/* region usersPanel */
.userspanel__title {
	margin-bottom: var(--spacing-small);
}
/* endregion */

/* region docModification approval status */
.docmodtable__approval {
	padding: 2px var(--spacing-extra-small);
	border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
	display: block;
	font-weight: var(--fontweight-semibold);
	color: rgb(var(--textcolor-decorative-dark));
	background-color: rgb(var(--background-warning));
	border-bottom: 2px solid rgb(var(--border-warning-hard));
	width: 100%;
}
/* endregion */

/* region docModTag */
.docmodtag {
	display: inline-flex;
	border-radius: var(--border-radius-small);
	overflow: hidden;
}

.docmodtag__icon {
	width: 28px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: var(--size-icon-base);
	color: rgb(var(--textcolor-decorative-dark));
}

.docmodtag__user {
	padding: var(--spacing-extra-small);
}

.docmodtag--approver {
	border: 1px solid rgb(var(--background-warning));
}

.docmodtag--approver .docmodtag__icon {
	background-color: rgb(var(--background-warning));
}

.docmodtag--approved {
	border: 1px solid rgb(var(--background-success));
}

.docmodtag--approved .docmodtag__icon {
	background-color: rgb(var(--background-success));
}

.docmodtag--inactive {
	color: rgb(var(--textcolor-secondary));
	border: 1px solid rgb(var(--border-soft));
}

.docmodtag--inactive .docmodtag__icon {
	color: rgb(var(--textcolor-secondary));
}
/* endregion */

/* region resultreporttemplateDD */
.reporttemplatesdropdown__header {
	display: flex;
	border-bottom: 1px solid rgb(var(--border-soft));
	padding: var(--spacing-small);
	margin: calc(var(--spacing-medium-large) * -1) calc(var(--spacing-medium-large) * -1) var(--spacing-medium-large)
		calc(var(--spacing-medium-large) * -1);
}

.reporttemplatesdropdown__header > div {
	display: flex;
	margin-right: var(--spacing-medium-large);
}

.reporttemplatesdropdown__label {
	color: rgb(var(--textcolor-secondary));
}

.reporttemplatesdropdown__radio > input {
	margin-right: var(--spacing-small);
}

.reporttemplatesdropdown__radio > label {
	color: rgb(var(--textcolor-main));
}

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

.reporttemplatesdropdown__template:not(:last-child) {
	margin-bottom: var(--spacing-medium-large);
}

.reporttemplatesdropdown__icons {
	display: flex;
	font-size: var(--size-icon-base);
}

.reporttemplatesdropdown__icons > * {
	margin-left: var(--spacing-medium-large);
}
/* endregion */

/* region Media queries */
@media (max-width: 1081px) {
	/* .maincontainer--columnlayout specificity is needed, to ensure that it overwrites any other width properties */

	.maincontainer--columnlayout .layoutwrapper {
		width: 100%;
		margin: calc(var(--spacing-medium-large) * -1) 0 0 0;
	}

	.maincontainer--columnlayout .layoutwrapper:first-of-type {
		margin: 0;
	}
}
/* endregion */

/*region animations */
@keyframes fading-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.animationsEnabled .dropdown--expanded > .dropdown__content {
	transition: transform 0.15s ease-in-out;
}

.animationsEnabled .collapseable:not(.collapseable--collapsed) .collapseable__label:after,
.animationsEnabled .collapseable--label:after,
.animationsEnabled .dropdown--expanded .dropdown__label:after {
	transition: transform 0.15s ease-in-out;
}

.animationsEnabled .icon.hasrole:not(.help):hover,
.animationsEnabled a > .icon:last-child:hover {
	transition: transform 0.15s ease-in-out;
}

@media (prefers-reduced-motion) {
	.animationsEnabled .dropdown--expanded > .dropdown__content {
		transition: none;
	}

	.animationsEnabled .collapseable .collapseable__label:after,
	.animationsEnabled .collapseable--label:after,
	.animationsEnabled .dropdown--expanded .dropdown__label:after {
		transition: none;
	}

	.animationsEnabled .icon.hasrole:not(.help):hover,
	.animationsEnabled a > .icon:last-child:hover {
		transition: none;
	}
}
/* endregion */