@layer patterns {
	@keyframes keyframePopupHide {
		0% {
			display: flex;
		}

		100% {
			display: none;
			opacity: 0;
		}
	}

	@keyframes keyframePopupShow {
		0% {
			opacity: 0;
			display: flex;
		}
	}

	@keyframes keyframeDialogHide {
		0% {
			opacity: 1;
			display: block;
		}

		100% {
			display: none;
			opacity: 0;
		}
	}

	@keyframes keyframeDialogShow {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.appHtmlPopup {
		position: fixed;
		display: none;
		align-items: start;
		justify-content: center;
		inset: var(--root--menubar-height) 0 0 0;
		padding-top: 20px;
		min-height: 200px;
		overflow-y: hidden;
		z-index: 39;
		background-color: var(--root-modal-background-color);
		-moz-backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		animation: keyframePopupHide var(--transition-speed) forwards;
		-webkit-overflow-scrolling: touch;
		-moz-overflow-scrolling: touch;
		overscroll-behavior: contain;

		&[open] {
			animation: keyframePopupShow var(--transition-speed) forwards;
			display: flex;
			opacity: 1;
		}

		> form {
			overflow-y: auto;
			overflow-x: auto;
			text-align: left;
			margin: 0px;
			min-width: 600px;
			max-width: var(--dim-max-width);
			max-height: calc(100% - 20px);
			box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.2);
			border: solid 1px var(--root-ribbon-border-color);
			background-color: var(--root-background-color_backdrop);
			transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
			-webkit-overflow-scrolling: touch;
			overscroll-behavior: contain;

			& [data-role="submit"] {
				background: none;
				border: none;
				margin-right: 10px;
				padding: 5px 15px;
				cursor: default;
			}

			& [data-role="submit"]:active {
				transform: translateY(0.08rem);
			}

			& [data-role="submit"]:active,
			& [data-role="submit"]:focus {
				outline: solid 2px var(--outline-border-color);
				border-radius: 2px;
				text-decoration: none;
				z-index: 2;
			}

			& [data-role="submit"]::before {
				font-family: icomoon2;
				content: "\f00c";
				color: var(--root-font-lightcolor);
				font-size: 1.2em;
				transition: color var(--transition-speed) ease;
			}

			& [data-role="submit"]:hover::before {
				color: var(--root-link-color);
			}

			&::-webkit-scrollbar {
				width: 5px;
			}

			&:hover::-webkit-scrollbar-thumb {
				background-color: var(--input-hover_border-color);
			}

			&::-webkit-scrollbar-thumb {
				background-color: var(--input_border-color);
			}
		}
	}

	dialog.appHtmlDialog {
		padding: 0;
		outline: none;
		inset: 0 0 0 0;
		min-width: 400px;
		text-align: left;
		max-width: var(--dim-max-width);
		border: solid 1px var(--root-ribbon-border-color);
		background-color: var(--root-background-color_backdrop);
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		animation: keyframeDialogHide .2s forwards;
		opacity: 0;

		&[open] {
			opacity: 1;
			animation: keyframeDialogShow .2s forwards;
		}

		&::backdrop {
			background-color: var(--root-modal-background-color);
			-moz-backdrop-filter: blur(2px);
			-webkit-backdrop-filter: blur(4px);
			backdrop-filter: blur(4px);
			opacity: 0;
		}

		&[open]::backdrop {
			animation: keyframeDialogShow .2s forwards;
			opacity: 1;
		}

		&:not([open])::backdrop {
			display: block;
			background-color: red;
		}

		&::-webkit-scrollbar {
			width: 5px;
		}

		&:hover::-webkit-scrollbar-thumb {
			background-color: var(--input-hover_border-color);
		}

		&::-webkit-scrollbar-thumb {
			background-color: var(--input_border-color);
		}
	}

	.messagesys {
		position: fixed;
		top: 23px;
		left: 0px;
		right: 0px;
		text-align: center;
		pointer-events: none;
		z-index: 110;

		> div {
			display: inline-block;
			max-width: 700px;
			min-width: 100px;
			padding: 20px 30px;
			border: none;
			text-align: left;
			pointer-events: all;
			cursor: default;
			color: #fff;
			border-radius: 5px;

			> span,
			> div {
				display: inline-block;
				vertical-align: top;
				white-space: normal;
			}

			> span:before {
				font-family: icomoon2;
				margin-right: 10px;
				position: relative;
				top: 0px;
			}

			&.success > span:before {
				content: "\f00c";
			}

			&.success {
				background-color: rgba(40, 200, 90, 0.75);
			}

			&.failure > span:before {
				content: "\f00d";
			}

			&.failure {
				background-color: rgba(255, 20, 20, 0.75);
			}
		}
	}

	.table {
		display: grid;
		grid-template-columns: auto auto;
		position: relative;

		&.mini {

			> main,
			> a,
			> footer,
			> header {

				> div,
				> span {
					padding: 8px 10px;
				}
			}
		}

		> main,
		> a,
		> footer,
		> header {
			display: contents;

			> div,
			.btn-set > span.slo-wrap,
			> span {
				padding: 10px;
				line-height: 1.5em;
				white-space: nowrap;
				vertical-align: middle;
				color: var(--root-font-color);
				border-top: solid 1px var(--bomtable-border-color);
				background-color: var(--bomtable-background-color);
				transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease;

				input.number-field,
				textarea.number-field {
					margin: 0;
					width: 100%;
					padding: 10px;
					font-size: 1em;
					text-align: right;
					margin-left: -.5px;
					margin-right: -.5px;
					-moz-appearance: textfield;
					-webkit-appearance: textfield;
					appearance: textfield;
					color: var(--root-font-color);
					border: solid 1px var(--input_border-color);
					border-radius: var(--input_border-radius);
					background-color: var(--bomtable-background-color);
					border-radius: 6px;

					&.inline-right {
						border-top-right-radius: 0px;
						border-bottom-right-radius: 0px;
					}

					&.inline-left {
						border-top-left-radius: 0px;
						border-bottom-left-radius: 0px;
					}

					&:disabled {
						background-color: var(--button_disabled-bgcolor);
					}

					&:hover {
						border-color: var(--input-hover_border-color);
						z-index: 2;
					}

					&:focus {
						border-color: var(--input-active_border-color);
						z-index: 3;
						outline: solid 2px var(--outline-border-color);
						outline-offset: 1px;
					}

					&::-webkit-outer-spin-button,
					&::-webkit-inner-spin-button {
						-webkit-appearance: none;
						margin: 0;
					}

					&.compact {
						padding: 3px 9px;
					}
				}

				cite {
					font-style: normal;
					color: var(--root-font-lightcolor);

					&.w50 {
						width: 50px;
						display: inline-block;
					}

					&.w75 {
						width: 75px;
						display: inline-block;
					}

					&.w100 {
						width: 100px;
						display: inline-block;
					}
				}
			}

			> span {
				background-color: var(--slo-menu-itemhover-background-color);
			}

			&.sticky {
				> div {
					position: sticky !important;
					top: calc(var(--root--menubar-height) + var(--gremium-header-height) + 30px);
					z-index: 1;
				}
			}
		}

		> main:last-child,
		> a:last-child,
		> footer:last-child,
		> header:last-child {

			> div,
			> span {
				border-bottom: solid 1px var(--bomtable-border-color);
			}
		}

		&:not(.nohover) > main:hover,
		&:not(.nohover) > a:hover {

			> div:not(.nohover),
			> span:not(.nohover) {
				background-color: var(--bomtable-hover-color) !important;
			}
		}

		div.ellipsis,
		footer > div.ellipsis,
		a > div.ellipsis,
		main > div.ellipsis {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			> div {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

		a > div.control,
		main > div.control {
			padding: 12px 10px;

			> button {
				cursor: pointer;
				background-color: transparent;
				background-color: var(--bomtable-background-color);
				border: none;
				display: block;
				padding: 10px 15px;
				border-radius: var(--input_border-radius);
				border: solid 1px var(--static-border);

				&::before {
					font-family: 1.2em;
					display: inline-block;
					content: "\e62b";
					font-family: "glyphs";
					width: 20px;
					text-align: center;
				}

				&:is(.plus, .delete) {
					&:focus {
						outline: solid 2px var(--outline-border-color);
						outline-offset: -1px;
					}

					&:active {
						transform: translateY(0.08rem);
					}
				}

				&.plus {
					&::before {
						content: "\e902";
					}

					&:hover {
						color: var(--root-link-color);
					}
				}

				&.delete {
					&::before {
						content: "\e901";
					}

					&:hover {
						color: tomato;
					}
				}
			}
		}

		> header > div,
		> header > span {
			border: none;
			cursor: default;
			font-size: 0.9em;
			padding: 10px 8px;
			font-weight: normal;
			text-transform: uppercase;
			color: var(--root-font-lightcolor);
			border-bottom: solid 1px var(--bomtable-border-color);
		}

		> footer > div {
			border: none;
			cursor: default;
			padding: 10px 8px;
		}

		&.highlight {
			> main {
				&:has(input:focus, textarea:focus) > div:first-child {
					background-color: var(--button_focus-bgcolor) !important;
					color: var(--button-font-color);
				}
			}
		}

		main.placeholder,
		a.placeholder {
			> div {
				pointer-events: none;
				padding: 7px;
				padding-top: 11px;

				> span {
					pointer-events: none;
					border-radius: 2px;
					height: 20px;
					display: inline-block;
					animation-duration: 2.2s;
					animation-fill-mode: forwards;
					animation-iteration-count: infinite;
					animation-name: placeHolderShimmerLong;
					animation-timing-function: linear;
					background: var(--root-background-color);
					background: linear-gradient(to right, var(--placeholder-bgcolor) 0%, var(--placeholder-sweeping-bgcolor) 15%, var(--placeholder-bgcolor) 30%);
					background-size: 1400px 104px;
					width: 100%;
				}
			}
		}
	}

	table {
		border-collapse: collapse;
		width: 100%;
		max-width: 100%;
		background-color: var(--bomtable-background-color);
		transition: background-color var(--transition-speed) ease;

		> tfoot > tr > th,
		> thead > tr > th,
		> tbody > tr > th {
			font-weight: normal;
		}

		> tbody > tr:not(:first-child) > td,
		> tbody > tr:not(:first-child) > th,
		> tfoot > tr:not(:first-child) > td {
			border-top: solid 1px var(--bomtable-border-color);
		}

		> tbody > tr > td,
		> tfoot > tr > td,
		> tbody > tr > th,
		> tfoot > tr > th {
			padding: 12px 8px;
			white-space: nowrap;
			color: var(--root-font-color);
			transition: color var(--transition-speed) ease, border-color var(--transition-speed) ease;
		}

		> tbody > tr > td.console {
			font-family: "Lucida Console", Monaco, monospace;
			font-size: 0.9em;
		}

		> tbody > tr > th,
		> tfoot > tr > th {
			padding: 10px 8px;
			color: var(--root-link-color);
			border-bottom: none;
			border-right: none;
			border-left: none;
			cursor: default;
		}

		> thead > tr > td {
			background-color: var(--bomtable-background-color);
		}

		> thead > tr > td,
		> tfoot > tr > td {
			color: var(--root-font-color);
			border: solid 1px var(--bomtable-border-color);
			transition: color var(--transition-speed) ease;
			border-left: none;
			border-right: none;
			padding: 10px 8px;
			white-space: nowrap;
			cursor: default;
			font-weight: normal;
		}

		> thead > tr > td {
			border-bottom: solid 1px var(--bomtable-border-color);
			text-transform: uppercase;
			color: var(--root-font-lightcolor);
			font-size: 0.9em
		}

		> tfoot > tr > td {
			border-top: solid 1px var(--bomtable-border-color);
		}

		> thead > tr:first-child > td,
		> thead > tr:first-child > th {
			border-top: none;
		}

		> thead > tr > th {
			border: solid 1px var(--bomtable-border-color);
			height: 25px;
		}

		&.strip > tbody > tr:nth-child(2n) > td {
			/* background-color: var(--bomtable-stripes-color); */
			font-size: 1em;
		}

		&.hover > tbody > tr:hover > td:not(.placeholder) {
			background-color: var(--bomtable-hover-color);
		}

		> thead.sticky {
			position: sticky;
			background-color: var(--bomtable-background-color);
			outline: solid .5px gainsboro;
		}

		tr > td.op-edit,
		tr > td.op-remove,
		tr > td.op-add,
		tr > td.op-print,
		tr > td.op-donwload,
		tr > td.op-display {
			padding: 0;
			cursor: pointer;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

		tr > td.op-edit > *,
		tr > td.op-remove > *,
		tr > td.op-add > *,
		tr > td.op-print > *,
		tr > td.op-donwload > *,
		tr > td.op-display > * {
			display: block;
			padding: 0px 8px;
			color: var(--root-font-lightcolor);
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

		> tbody > tr > td.placeholder {
			cursor: wait;
		}

		> tbody > tr > td.placeholder::after {
			height: 12px;
			display: inline-block;
			content: " ";
			animation-duration: 2.2s;
			animation-fill-mode: forwards;
			animation-iteration-count: infinite;
			animation-name: placeHolderShimmerLong;
			animation-timing-function: linear;
			background: var(--root-background-color);
			background: linear-gradient(to right, var(--placeholder-bgcolor) 0%, var(--placeholder-sweeping-bgcolor) 15%, var(--placeholder-bgcolor) 30%);
			background-size: 1400px 104px;
			width: 100%;
		}

		tr > td.op-edit > *:before {
			display: inline-block;
			content: "\e906";
			font-family: "icomoon4";
			width: 20px;
			text-align: center;
		}

		tr > td.op-edit:hover > * {
			color: #06c
		}

		tr > td.op-remove > *:before {
			display: inline-block;
			content: "\e62b";
			font-family: "icomoon";
			width: 20px;
			text-align: center;
		}

		tr > td.op-remove:hover > * {
			color: #f03;
		}

		tr > td.op-add > *:before {
			display: inline-block;
			content: "\e630";
			font-family: "icomoon";
			width: 20px;
			text-align: center;
		}

		tr > td.op-add:hover > * {
			color: #0066cc;
		}

		tr > td.op-print > *:before {
			display: inline-block;
			content: "\e63b";
			font-family: "icomoon";
			width: 20px;
			text-align: center;
		}

		tr > td.op-print:hover > * {
			color: #ff3c00;
		}

		tr > td.op-display > *:before {
			display: inline-block;
			content: "\e9ce";
			font-family: "icomoon4";
			width: 20px;
			text-align: center;
		}

		tr > td.op-display:hover > * {
			color: #00cc33;
		}

		tr > td.op-donwload > *:before {
			display: inline-block;
			content: "\e60c";
			font-family: "icomoon";
			width: 20px;
			text-align: center;
		}

		tr > td.op-donwload:hover > * {
			color: var(--root-link-color);
		}

		&.form-table > tbody > tr > td,
		&.form-table > tbody > tr > th,
		&.form-table > thead > tr > td,
		&.form-table > thead > tr > th {
			padding: 10px 8px;
			border: none;
			background-color: transparent;
		}

		&.form-table > tbody > tr > th {
			color: var(--root-font-lightcolor);
		}

		> tbody > tr > td.checkbox {
			position: relative;
			min-width: 38px;
			text-align: center;

			> label {
				position: absolute;
				display: flex;
				align-items: center;
				text-align: center;
				justify-content: center;
				inset: 0 0 0 0;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

			&:not(.disabled) > label:hover,
			&:not(.disabled) > label:focus {
				outline: solid 2px var(--outline-border-color);
				z-index: 1;
				border-radius: 2px;
			}

			> label > input {
				visibility: hidden;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				display: flex;
				align-items: center;
				text-align: center;
				justify-content: center;
				border: none;
				padding: 0;
				margin: 0;
				position: absolute;
			}

			> label > input::before {
				visibility: visible;
				display: block;
				position: absolute;
				content: " ";
				border: solid 3px var(--input_border-color);
				border-radius: 10px;
				width: 10px;
				height: 10px;
				transition: border-color 0.2s ease-out;
			}

			> label > input:not(:disabled)::before {
				background-color: var(--bomtable-background-color);
				border-color: var(--input-hover_border-color);
			}

			> label > input:after {
				display: block;
				content: " ";
				visibility: visible;
			}

			> label > input::after,
			> label > input[type=radio]::after {
				border-radius: 10px;
				background-color: var(--root-link-color);
				width: 6px;
				height: 6px;
				transform: scale(0);
				transition: transform ease .2s;
			}

			> label > input:checked::after {
				transform: scale(1);
			}

			> label > input:checked::before {
				border-color: var(--root-link-color);
			}
		}
	}

	table.dynamic > tbody > tr {
		> td {
			cursor: default;
			vertical-align: top;
		}

		> td.col-1 > div {
			padding: 2px 5px;
			line-height: 1.3em;
		}

		> td > div.in-value {
			display: none;
		}

		> td.col-2 {
			width: 100%;
			line-height: 1.3em;
		}

		> td.col-2 > span {
			display: block;
			margin: 2px 0px 4px 0px;
		}

		> td.col-2 > span > b {
			font-weight: normal;
			display: inline-block;
			padding-right: 8px;
		}

		> td.col-2 > span > span {
			display: inline-block;
		}

		> td.col-2 > div {
			position: relative;
			margin: 2px 0px 10px 0px;
		}

		> td.col-2 > div > span {
			display: block;
			width: 0px;
			padding-bottom: 10px;
		}

		> td.col-2 > div > div {
			position: absolute;
			padding-bottom: 2px;
			right: 0px;
			left: 0px;
			top: 0px;
			text-overflow: ellipsis;
			overflow-y: hidden;
		}

		> td.value-number.final {
			font-weight: normal;
		}

		.value-number {
			text-align: right;
			min-width: 80px;
			width: 150px;
		}

		.hlight {
			color: tomato;
		}

		.light {
			color: var(--root-font-lightcolor);
		}

		> .badge {
			margin-left: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			font-style: normal;
			width: 27px;
			height: 27px;
			border-radius: 100%;
			color: white;
			background-color: var(--root-link-color);
			margin-top: 10px;
		}

		> .smallbadge {
			display: none;
			align-items: center;
			text-align: center;
			padding: 0px 8px;
			border-radius: 10px;
			margin-left: 10px;
			color: white;
			background-color: var(--root-link-color);
			opacity: 1;
		}
	}

	div#pana-Scroll {
		scroll-snap-type: y mandatory;
	}

	#pana-Window > div {
		scroll-snap-align: start;
	}

	.split-view {
		display: flex;
		height: 100%;

		& > div {
			&.panel {
				flex: auto;
				z-index: 1;
				position: relative;
				max-width: 360px;
				transition: width 0.2s ease, max-width 0.2s ease;

				&.hide {
					max-width: 0px;
					width: 0px;
				}

				/* Use to drag panel width 
				&::after {
					display: block;
					position: absolute;
					content: "";
					right: 0px;
					top: 0;
					bottom: 0;
					width: 10px;
					border-right: solid 3px var(--input_border-color);
					cursor: w-resize;
				}
					*/
			}

			&.body {
				flex: 1;
				background-color: var(--root-background-color);
				transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease;
				z-index: 2;
			}
		}

		& > div.panel {
			& > div {
				min-width: 200px;
				top: var(--root--menubar-height);
				position: sticky;
				overflow-y: auto;
				-webkit-overflow-scrolling: touch;
				-moz-overflow-scrolling: touch;
				-o-overflow-scrolling: touch;
				-webkit-overscroll-behavior: contain;
				-moz-overscroll-behavior: contain;
				-o-overscroll-behavior: contain;
				overscroll-behavior: contain;
				/* scrollbar-width: thin; */
				outline: none;
				max-height: calc(100vh - var(--root--menubar-height));
				margin-right: 10px;
				scroll-padding-top: 115px;
				overflow-x: hidden;

				> div > h2#pana-fastLinks {
					padding: 0px;
					font-size: 1em;

					> div {
						> a {
							padding: 12px 20px;
							margin: 6px 10px;
							display: block;
							color: var(--root-font-color);
							background-color: var(--root-ribbon-menu-background-color);
							border-radius: 5px;
							box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.1);
							position: relative;
							transition: background-color 0.2s ease;

							&:hover {
								text-decoration: none;
								background-color: var(--input-focus_border-color);
							}

							&:active {
								padding: 14px 20px 10px 20px;
							}

							&.active::before {
								content: " ";
								left: 0px;
								top: 9px;
								left: 0px;
								width: 5px;
								height: 19px;
								border-radius: 5px;
								position: absolute;
								background-color: var(--root-link-color);
							}
						}
					}
				}

				&::-webkit-scrollbar {
					width: 5px;
				}

				&:hover::-webkit-scrollbar-thumb {
					background-color: var(--input-hover_border-color);
				}

				&::-webkit-scrollbar-thumb {
					background-color: var(--input_border-color);
				}
			}
		}
	}

	#pana-Window {
		padding-top: 1px;
		padding-bottom: 5px;
		border-radius: 7px;

		&:not(:has(a)) {
			display: none;
		}

		a.panel-item {
			display: block;
			/* border-bottom: solid 1px var(--bomtable-border-color); */
			margin: 5px;
			border-radius: 6px;
			min-height: 60px;
			padding: 10px;
			position: relative;
			cursor: default;
			transition: background-color 0.2s ease;
			color: var(--root-font-color);

			&:not(.place-holder)::before {
				position: relative;
				display: block;
				content: " ";
				width: 100%;
				height: 1px;
				top: -13px;
				border-top: solid 1px var(--static-border);
			}

			&:first-child::before {
				border: none;
			}

			&:not(.place-holder) {
				cursor: pointer;

				&:hover {
					text-decoration: none;
					z-index: 2;
					background-color: var(--slo-menu-itemhover-background-color);
				}
			}

			&.active {
				background-color: var(--slo-menu-itemactive-background-color) !important;
			}

			&:not(.place-holder):focus {
				outline: solid 2px var(--root-link-color);
				outline-offset: -1px;
				text-decoration: none;
				z-index: 3;
			}

			&:last-child {
				border-bottom: none;
				margin-bottom: 0;
			}

			&.place-holder::after,
			&.place-holder::before {
				height: 12px;
				display: inline-block;
				content: " ";
				animation-duration: 2.2s;
				animation-fill-mode: forwards;
				animation-iteration-count: infinite;
				animation-name: placeHolderShimmer;
				animation-timing-function: linear;
				background: var(--root-background-color);
				background: linear-gradient(to right, var(--placeholder-bgcolor) 0%, var(--placeholder-sweeping-bgcolor) 15%, var(--placeholder-bgcolor) 30%);
				background-size: 800px 104px;
				position: absolute;
			}

			&.place-holder::after {
				top: 15px;
				width: 100px;
			}

			&.place-holder::before {
				top: 37px;
				left: 10px;
				right: 10px;
			}
		}
	}

	.loadingScreen-placeholder {
		&::after {
			height: 12px;
			display: inline-block;
			content: " ";
			animation-duration: 2.2s;
			animation-fill-mode: forwards;
			animation-iteration-count: infinite;
			animation-name: placeHolderShimmer;
			animation-timing-function: linear;
			background: var(--root-background-color);
			background: linear-gradient(to right, var(--placeholder-bgcolor) 0%, var(--placeholder-sweeping-bgcolor) 15%, var(--placeholder-bgcolor) 30%);
			background-size: 800px 104px;
			position: absolute;
			width: 100px;
		}

		&.header::after {
			width: 300px;
			height: 30px;
			top: 5px;
		}

		&.title::after {
			width: 300px;
			height: 15px;
			top: 15px
		}
	}

	#pana-Body.busy {
		cursor: wait;
	}

	span.loadingScreen-placeholderBody {
		> span {
			& {
				display: block;
			}

			&::after {
				height: 12px;
				display: inline-block;
				content: " ";
				margin-bottom: 10px;
				animation-duration: 2.2s;
				animation-fill-mode: forwards;
				animation-iteration-count: infinite;
				animation-name: placeHolderShimmerLong;
				animation-timing-function: linear;
				background: var(--root-background-color);
				background: linear-gradient(to right, var(--placeholder-bgcolor) 0%, var(--placeholder-sweeping-bgcolor) 15%, var(--placeholder-bgcolor) 30%);
				background-size: 1400px 104px;
				width: 100%;
			}

			&:last-child {
				width: 33%;
			}
		}
	}

	@media only screen and (max-width: 768px) {
		table.dynamic {
			border: none;
		}

		table.dynamic > thead,
		table.dynamic > tfoot {
			display: none;
		}

		table.dynamic > tbody {
			display: block;
		}

		table.dynamic > tbody > tr {
			border-bottom: solid 1px var(--bomtable-border-color);
			display: flex;
			flex-wrap: wrap;
			margin: 0px 0px;
		}

		table.dynamic > tbody > tr > td {
			border: none;
			padding: 8px 10px;
		}

		table.dynamic > tbody > tr > td.col-1 {
			display: flex;
			flex-flow: wrap;
			flex: 1;
		}

		table.dynamic > tbody > tr > td.col-1 > div {
			padding-left: 0px;
			padding-right: 10px;
		}

		table.dynamic > tbody > tr > td.col-1 > div:nth-child(3) {
			flex: 1;
		}

		table.dynamic > tbody > tr > td.col-1 > div.in-value {
			text-align: right;
			display: inline-block;
			padding: 0;
		}

		table.dynamic > tbody > tr > td.col-1 > div:nth-child(4) {
			flex-basis: 100%;
			width: 100%;
		}

		table.dynamic > tbody > tr > td.col-2 {
			flex: 1;
			flex-basis: 100%;
		}

		table.dynamic > tbody > tr > td:nth-child(3) {
			flex: 1;
			display: none;
		}

		table.dynamic > tbody > tr > td.value-number,
		td.value-number {
			width: auto;
			min-width: auto;
		}

		table.dynamic > tbody > tr > td.media-hide {
			display: none;
		}

		table.dynamic .smallbadge {
			display: inline-block;
		}
	}

	@media only screen and (max-width: 800px) {
		.table-head {
			position: relative;
			top: 0 !important
		}
	}

	@media only screen and (max-width: 624px) {
		.header-title {
			display: none;
		}

		.header-title,
		.small-media-hide,
		.menu-date_title {
			display: none !important;
		}

		.appHtmlPopup {
			padding-top: 0px;
		}

		.appHtmlPopup > form {
			min-width: auto;
			flex: 1;
			height: 100% !important;
			max-height: 100%;
			box-shadow: none;
			border: none;
		}
	}

	@media only screen and (max-width: 480px) {
		#js-output_statements-count {
			flex: 1;
		}
	}
}