/* #region Fonts*/
@font-face {
	font-family: 'Noto';
	src: url('../fonts/NotoSansArabic-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'icomoon';
	src: url('../fonts/icomoon/icomoon.eot?se601i');
	src: url('../fonts/icomoon/icomoon.eot?#iefixse601i') format('embedded-opentype'),
		url('../fonts/icomoon/icomoon.woff?se601i') format('woff'),
		url('../fonts/icomoon/icomoon.ttf?se601i') format('truetype'),
		url('../fonts/icomoon/icomoon.svg?se601i#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'icomoon2';
	src: url('../fonts/icomoon2/icomoon2.eot?se601i');
	src: url('../fonts/icomoon2/icomoon2.eot?#iefixse601i') format('embedded-opentype'),
		url('../fonts/icomoon2/icomoon2.woff?se601i') format('woff'),
		url('../fonts/icomoon2/icomoon2.ttf?se601i') format('truetype'),
		url('../fonts/icomoon2/icomoon2.svg?se601i#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'icomoon4';
	src: url('../fonts/icomoon4/icomoon4.eot?se601i');
	src: url('../fonts/icomoon4/icomoon4.eot?#iefixse601i') format('embedded-opentype'),
		url('../fonts/icomoon4/icomoon4.woff?se601i') format('woff'),
		url('../fonts/icomoon4/icomoon4.ttf?se601i') format('truetype'),
		url('../fonts/icomoon4/icomoon4.svg?se601i#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'glyphs';
	src: url('../fonts/glyphs.eot?se601i');
	src: url('../fonts/glyphs.eot?#iefixse601i') format('embedded-opentype'),
		url('../fonts/glyphs.woff?se601i') format('woff'),
		url('../fonts/glyphs.ttf?se601i') format('truetype'),
		url('../fonts/glyphs.svg?se601i#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* #endregion */
/* #region Global Configs*/
:root {
	--font: Verdana, 'Noto', 'Galada', sans-serif;
	--dim-max-width: 1200px;
	--font-size: 13px;
	--root--menubar-height: 49px;
	--gremium-header-height: 0px;
	--transition-speed: .25s;
	color-scheme: light dark;
}

pre {
	font-size: 1.1em;
	line-height: 1.2em;
	font-family: 'Courier New', Courier, monospace;
	border: solid 1px green;
	padding: 10px;
}

html,
body {
	font-size: var(--font-size);
	line-height: 1em;
	color: var(--root-font-color);
	background-color: var(--root-background-color);
	transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease;
	font-weight: normal;
	text-align: center;
	display: table;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

a,
div,
span,
section,
header,
td,
textarea,
input,
h1,
h2,
h3,
h4,
input,
button,
textarea,
select,
b {
	box-sizing: border-box;
	font-family: var(--font);
	font-size: 1em;
}

::selection,
::-moz-selection,
::-webkit-selection {
	background-color: var(--root-link-color);
	color: var(--root-background-color);
}

a {
	text-decoration: none;
	color: var(--root-link-color);
}

a:hover {
	text-decoration: underline;
}

input[type=text],
input[type=number],
input[type=password],
textarea,
select {
	outline: none;
	padding: 1px 6px 3px 6px;
	color: var(--root-font-color);
	border: solid 1px var(--root-input-border-color);
	background-color: var(--root-input-background-color);
	transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

fieldset {
	border: none;
	padding: 0;
	margin: 0;
}

input[type=text]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
textarea::placeholder {
	color: var(--input-placeholder_color);
}

button,
input[type=button] {
	outline: none;
	padding: 1px 6px 3px 6px;
	color: var(--root-font-color);
	border: solid 1px var(--root-button-border-color);
	background-color: var(--root-button-background-color);
}

input[type=text]:disabled,
input[type=number]:disabled {
	background-color: var(--button_disabled-bgcolor);
	color: light-dark(var(--root-font-lightcolor), var(--root-font-lightcolor)) !important;
}

ul > li {
	padding: 8px 0px;
}

.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.flash {
	background-color: none;
	animation: flash 1s step-start 0s 4;
}

.at {
	&::before {
		content: "@";
		position: relative;
		display: inline-block;
		color: var(--root-font-lightcolor);
		padding-right: 5px;
	}
}

/* #endregion */
body {
	padding: 0px;

	> article {
		display: flex;
		justify-content: left;
		height: 100%;
		background-color: var(--root-background-color);
		transition: background-color var(--transition-speed) ease;
		margin: 0 auto;
		padding: 0 15px;

		> div {
			flex: 1;
			margin-top: var(--root--menubar-height);
			text-align: left;
			padding: 0px 0px;
			filter: blur(0px);
			transition: filter 0.2s ease-out;
			margin-bottom: 0px;

			&.blur {
				filter: blur(2px);
			}
		}
	}

	&::-webkit-scrollbar {
		width: 0.8em;
		background-color: var(--root-ribbon-background-color);
	}

	&::-webkit-scrollbar-track {
		/* background-color: var(--root-ribbon-background-color); */
		line-height: 1;
	}

	&::-webkit-scrollbar-thumb {
		border-right: solid 1px var(--input_border-color);
		background-color: var(--input-hover_border-color);
		/* background-color: var(--input-hover_border-color); */
	}

	&::-webkit-scrollbar-button {
		outline: none;
	}
}

/* #region - Ribbon*/
span.header-ribbon {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	text-align: center;
	z-index: 100;
	overflow: none;
	font-size: 12px;
	-webkit-backdrop-filter: blur(6px);
	-moz-backdrop-filter: blur(6px);
	-o-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	background-color: var(--root-ribbon-background-color);
	transition: background-color var(--transition-speed) ease;
	color: var(--root-ribbon-font-color);
	border-bottom: solid 1px var(--input_border-color);

	> div {
		display: inline-block;
		position: relative;
		width: 100%;
		/* max-width: var(--dim-max-width); */
	}
}

.ico-home > span:before {
	display: inline-block;
	content: "\e600";
	font-family: "icomoon";
}

.ico-location:before {
	display: inline-block;
	content: "\e627";
	font-family: "icomoon";
}

#header-menu-useraccount-button {
	position: relative;

	> cite {
		position: absolute;
		font-size: 0.8em;
		font-style: normal;
		display: block;
		top: 5px;
		right: 5px;
		background-color: red;
		color: #fff;
		border-radius: 100% 100%;
		padding-top: 4px;
		width: 20px;
		height: 16px;
		text-align: center;
	}
}

#menuUserTag {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	> span > span {
		border: solid 1px var(--input_border-color);
	}

	> span.cus-image > span {
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: 50% 50%;
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		text-wrap: nowrap;
		height: 80px;
		width: 80px;
		text-align: center;
	}

	> span.cus-initi > span {
		display: flex;
		align-items: center;
		justify-content: center;
		text-wrap: nowrap;
		height: 80px;
		width: 80px;
		text-align: center;
		font-size: 1.5em;
		font-style: normal;
		border-radius: 100%;
		background-color: #000;
		color: white;
		font-family: Arial, Helvetica, sans-serif;
	}

	> i {
		font-weight: normal;
		font-style: normal;
		text-align: center;
		font-size: 1.4em;
		padding: 20px 0px 10px 0px;
	}
}

/* #endregion */
span.header-menu {
	position: fixed;
	inset: 0px;
	top: 20px;
	text-align: center;
	z-index: 99;
	display: block;
	visibility: hidden;
	opacity: 0;
	transition: visibility 0.2s, opacity 0.15s, top 0.15s;
	font-size: 1em;

	&.show {
		top: 48px;
		visibility: visible;
		opacity: 1;
	}

	&.hide {
		top: 48px;
		visibility: hidden;
	}

	> div {
		display: inline-block;
		width: 100%;
		padding: 0px;
		margin: 0px;
		/* max-width: var(--dim-max-width); */
		position: relative;
		height: 10px;

		> div {
			min-width: 350px;
			height: auto;
			max-height: 500px;
			top: 10px;
			overflow: auto;
			position: absolute;
			box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.1);
			border: solid 1px var(--root-ribbon-border-color);
			background: var(--root-ribbon-menu-background-color);
			overscroll-behavior: contain;
			-webkit-overflow-scrolling: touch;
			border-radius: 8px;
			padding-bottom: 10px;

			> div.menu-items {
				text-align: left;
			}

			> header {
				position: sticky;
				top: 0px;
				z-index: 2;
				text-align: left;
				padding: 20px 15px;
				display: block;
				background-color: var(--root-ribbon-menu-header-background-color);
			}
		}

		> div::-webkit-scrollbar {
			width: 5px;
		}

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

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

/* #region - Left hand menus*/
span.header-menu.lefthand > div > div {
	text-align: left;
	left: 10px;
}

span.header-menu.lefthand > div > div > div.menu-items b {
	font-weight: normal;
	display: block;
	padding: 14px;
	position: relative;
	color: var(--input-hover_border-color);
}

span.header-menu.lefthand > div > div > div.menu-items b.nested:before {
	position: absolute;
	display: block;
	content: "\e91d";
	font-family: "glyphs";
	font-weight: normal;
	right: 10px;
}

span.header-menu.lefthand > div > div > div.menu-items b > a.alink {
	color: var(--root-font-color);
}

span.header-menu.lefthand > div > div > div.menu-items b > a.alink:hover {
	color: var(--root-font-color);
}

span.header-menu.lefthand > div > div > div.menu-items b:hover {
	text-decoration: none;
	background-color: var(--root-ribbon-menu-itemhover-background-color);
}

span.header-menu.lefthand > div > div > div.menu-items div {
	display: none;
	position: relative;
}

span.header-menu.lefthand > div > div > div.menu-items b > span {
	font-family: icomoon4;
	display: inline-block;
	padding-right: 14px;
	font-size: 10px;
}

span.header-menu.lefthand > div > div > div.menu-items b.index-link {
	display: none !important;
}

/* #endregion */
/* #region - Right hand menus*/
span.header-menu.righthand > div > div {
	text-align: right;
	right: 10px;
}

span.header-menu.righthand > div > div > div.menu-items div {
	display: block;
	padding: 15px 13px 10px 13px;
	color: var(--root-font-color);
	font-weight: bold;
	text-align: left;
	cursor: default;
	border-bottom: solid 1px #ccc;
}

span.header-menu.righthand > div > div > div.menu-items > a,
span.header-menu.righthand > div > div > div.menu-items > span {
	font-weight: normal;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-wrap: nowrap;
	padding: 14px 23px;
	color: var(--root-font-color);
	text-align: left;
}

span.header-menu.righthand > div > div > div.menu-items a > span {
	display: inline-block;
	min-height: 15px;
	text-overflow: ellipsis;
	flex: 1;
	padding: 1px 0px;
}

span.header-menu.righthand > div > div > div.menu-items a > b {
	font-weight: normal;
	color: var(--root-font-color);
}

span.header-menu.righthand > div > div > div.menu-items a:hover {
	text-decoration: none;
	color: var(--root-font-color);
	cursor: default;
	background-color: var(--root-ribbon-menu-itemhover-background-color);
}

span.header-menu.righthand > div > div > div.menu-items a:hover > b {
	color: var(--root-font-color);
}

/* #endregion */
.btnheader-set {
	display: flex;
	flex-wrap: nowrap;
	height: var(--root--menubar-height);
	align-items: center;

	> a,
	> span {
		line-height: 1.5em;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: auto;
		color: inherit;
		padding: 0px 18px;
		height: var(--root--menubar-height);
		outline: none;
		border: none;
		cursor: pointer;
		background-color: transparent;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;

		> .mediabond-show {
			display: none;
		}

		&.center {
			justify-content: center
		}
	}

	> input:hover,
	> button:hover,
	> a:hover,
	> label:hover {
		background-color: rgba(0, 0, 0, 0.2);
		text-decoration: none;
	}

	> label.active,
	> a.active,
	> button.active {
		background-color: rgba(0, 0, 0, 0.6);
		color: white;
	}

	> span {
		cursor: default;
		white-space: nowrap;
	}

	> span.gap {
		background-color: transparent;
		-webkit-box-flex: 1;
		-moz-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
	}
}

/* #region Loading bar widget*/
.bar {
	height: 20px;
	width: 200px;
	padding: 10px;
	margin: 200px auto 0;
	background-color: rgba(0, 0, 0, .1);
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	-ms-border-radius: 25px;
	border-radius: 20px;
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .03), inset 0 1px 0 rgba(0, 0, 0, .1);
	-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .03), inset 0 1px 0 rgba(0, 0, 0, .1);
	-ms-box-shadow: 0 1px 0 rgba(255, 255, 255, .03), inset 0 1px 0 rgba(0, 0, 0, .1);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .03), inset 0 1px 0 rgba(0, 0, 0, .1);
}

.css-progress-bar {
	height: 12px;
	margin-top: 20px;
}

.css-progress-bar span {
	display: inline-block;
	height: 100%;
	width: 100%;
	border: 1px solid #999;
	border-color: #bbb #999 #999 #bbb;
	background-color: #fff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	background-image:
		linear-gradient(-45deg,
			rgb(0, 102, 204) 25%,
			transparent 25%,
			transparent 50%,
			rgb(0, 102, 204) 50%,
			rgb(0, 102, 204) 75%,
			transparent 75%,
			transparent);
	-webkit-background-size: 50px 50px;
	-moz-background-size: 50px 50px;
	-ms-background-size: 50px 50px;
	background-size: 50px 50px;
	-webkit-animation: move 1s linear infinite;
	-moz-animation: move 1s linear infinite;
	-ms-animation: move 1s linear infinite;
	animation: move 1s linear infinite;
	overflow: hidden;
	-webkit-box-shadow: inset 0 10px 0 rgba(255, 255, 255, .2);
	-moz-box-shadow: inset 0 10px 0 rgba(255, 255, 255, .2);
	-ms-box-shadow: inset 0 10px 0 rgba(255, 255, 255, .2);
	box-shadow: inset 0 10px 0 rgba(255, 255, 255, .2);
}

/*
	Animate the stripes
	*/
@-webkit-keyframes move {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 50px 50px;
	}
}

@-moz-keyframes move {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 50px 50px;
	}
}

@-ms-keyframes move {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 50px 50px;
	}
}

@keyframes move {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 50px 50px;
	}
}

/* #endregion */
/* #region Loading Overlay*/
.loading_overlay {
	position: fixed;
	background-color: var(--root-modal-background-color);
	inset: 0 0 0 0;
	vertical-align: top;
	z-index: 80;
	cursor: wait;
	display: none;
	justify-content: center;
	flex-direction: row;
	flex-wrap: nowrap;
}

.loading_overlay > div {
	margin-top: 80px;
	padding: 33px 20px 10px 20px;
	border-radius: 0px;
	flex: 1;
	height: 100px;
	max-width: 400px;
	/* box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.2); */
}

/* #endregion  */
/* #region screenSector*/
#screenSector {
	display: inline-block;
	max-width: 800px;
	min-width: 350px;
}

#screenSectorCol > tbody > tr > td > div > div > a {
	min-width: 150px;
	color: #333;
}

#screenSectorCol > tbody > tr > td {
	white-space: normal;
}

#screenSectorCol > tbody > tr > td > div > div > span {
	background-color: #fff;
	min-width: 60px;
	text-align: center;
}

#screenSectorCol > tbody > tr > td > div {
	display: inline-block;
	margin: 0px 3px;
}

/* #endregion */
/* #region General*/
.op-done > *:before {
	display: inline-block;
	content: "\f00c";
	font-family: "icomoon2";
	width: 30px;
	text-align: center;
	color: #06c
}

.op-error > *:before {
	display: inline-block;
	content: "\f00d";
	font-family: "icomoon2";
	width: 30px;
	text-align: center;
	color: #f03
}

.op-down > *:before {
	display: inline-block;
	content: "\e60c";
	font-family: "icomoon";
	width: 30px;
	text-align: center;
	color: #090
}

span.vs-edit,
span.vs-add,
span.vs-remove {
	display: inline-block;
}

.css_fieldDesc {
	width: 100%;
	color: #666;
	font-style: italic;
	font-size: 0.9em
}

.css_fieldDesc > span > b {
	display: inline-block;
	min-width: 60px;
	font-style: normal;
}

.css_maxfieldwidth {
	position: relative;
	min-width: 200px;
	padding: 0;
}

.css_maxfieldwidth > span {
	position: absolute;
	max-width: 100%;
	inset: 0 0 0 0px;
	padding: 12px 8px;
	overflow: hidden;
	display: inline-block;
	text-overflow: ellipsis;
}

.value-number.negative::after,
.value-number.negative::before {
	display: inline-block;
}

.value-number.positive::after,
.value-number.positive::before {
	content: ")";
	color: transparent;
}

.value-number.negative::after {
	content: ")";
	color: var(--root-font-lightcolor);
}

.value-number.negative::before {
	content: "(";
	color: var(--root-font-lightcolor);
}

/* #endregion General*/
/* #region Split View */
.split-view {
	display: flex;
	height: 100%;
}

.split-view > div.panel {
	flex: 2;
	z-index: 1;
	position: relative;
	max-width: 360px;
	transition: width 0.2s ease, max-width 0.2s ease;
}

.split-view > div.panel.hide {
	max-width: 0px;
	width: 0px;
}

.split-view > div.body {
	flex: 5;
	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#pana-Scroll {
	scroll-snap-type: y mandatory;
}

#pana-Window>div {
	scroll-snap-align: start;
}
 */
.split-view > 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-roots {
		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: " ";
					position: absolute;
					left: 0px;
					top: 11px;
					width: 4px;
					height: 15px;
					border-radius: 2px;
					background-color: var(--root-link-color);
				}
			}
		}
	}
}

.split-view > div.panel > div::-webkit-scrollbar {
	width: 5px;
}

.split-view > div.panel > div:hover::-webkit-scrollbar-thumb {
	background-color: var(--input-hover_border-color);
}

.split-view > div.panel > div::-webkit-scrollbar-thumb {
	background-color: var(--input_border-color);
}

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

#pana-Window:not(:has(a)) {
	display: none;
}

#pana-Window 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);
}

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

#pana-Window a.panel-item:first-child::before {
	border: none;
}

#pana-Window a.panel-item:not(.place-holder) {
	cursor: pointer;
}

#pana-Window a.panel-item:not(.place-holder):hover {
	text-decoration: none;
	z-index: 2;
	background-color: var(--slo-menu-itemhover-background-color);
}

#pana-Window a.panel-item.active {
	background-color: var(--slo-menu-itemactive-background-color) !important;
}

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

#pana-Window a.panel-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

#pana-Window a.panel-item.place-holder::after,
#pana-Window a.panel-item.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;
}

#pana-Window a.panel-item.place-holder::after {
	top: 15px;
	width: 100px;
}

#pana-Window a.panel-item.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;
}

.loadingScreen-placeholder.header::after {
	width: 300px;
	height: 30px;
	top: 5px;
}

.loadingScreen-placeholder.title::after {
	width: 300px;
	height: 15px;
	top: 15px
}

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

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

span.loadingScreen-placeholderBody > span::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%;
}

span.loadingScreen-placeholderBody > span:last-child {
	width: 33%;
}

@keyframes flash {
	50% {
		background-color: var(--flash-bgcolor);
	}
}

@keyframes placeHolderShimmer {
	0% {
		background-position: -468px 0;
	}

	90% {
		background-position: 468px 0;
	}

	100% {
		background-position: 468px 0;
	}
}

@keyframes placeHolderShimmerLong {
	0% {
		background-position: -700px 0;
	}

	90% {
		background-position: 700px 0;
	}

	100% {
		background-position: 700px 0;
	}
}

/* #endregion */
div.timeline {
	position: relative;
	padding-bottom: 30px;
	padding-left: 25px;

	> div {
		cursor: default;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		position: relative;
		padding-bottom: 30px;
		padding: 12px;
		border-radius: 10px;
		transition: background-color var(--transition-speed), border-color var(--transition-speed);
		/* background-color: hsla(51, 100%, 50%,0.1); */
	}

	&::before {
		position: absolute;
		top: 0px;
		left: 10px;
		bottom: 0px;
		content: " ";
		width: 1px;
		border-left: dashed 1px var(--bomtable-border-color);
	}

	> div:hover {
		border-color: var(--input-hover_border-color);
		background-color: var(--slo-menu-itemhover-background-color);
	}

	> div > span {
		position: relative;
		min-width: 200px;
		color: hsl(150, 60%, 50%);
		color: var(--root-link-color);
		color: var(--root-font-lightcolor);
	}

	> div > span::before {
		transition: outline-color var(--transition-speed);
	}

	> div:hover > span::before {
		outline-color: var(--root-link-color);
	}

	> div > span:before {
		display: block;
		position: absolute;
		content: " ";
		top: 6px;
		left: -31.5px;
		width: 10px;
		height: 10px;
		outline: solid 4px var(--bomtable-border-color);
		background-color: var(--root-ribbon-menu-background-color);
		border-radius: 100%;
	}

	> div > h1 {
		margin: 0;
		padding: 0;
		padding-top: 10px;
		font-weight: normal;
	}

	> div > span > i {
		display: block;
		font-size: 0.9em;
		font-style: normal;
	}

	> div > cite {
		padding-top: 10px;
		font-style: normal;
		color: var(--root-font-lightcolor);
	}

	> div > div {
		line-height: 1.4em;
	}
}

/* #region Media*/
@media only screen and (max-width: 1080px) {
	.split-view > div.panel {
		max-width: 0px;
		width: 0px;
	}
}

@media only screen and (max-width: 768px) {

	#jqroot_accgrp,
	#header-menu-home {
		display: none;
	}

	span.header-menu.lefthand > div > div > div.menu-items b.index-link {
		display: block;
	}

	body > article {
		padding: 0px !important;
	}
}

@media only screen and (max-width: 624px) {
	#jqroot_help {
		display: none;
	}

	.btnheader-set > a,
	.btnheader-set > span {
		padding: 0px 18px;
	}

	#header-menu-button,
	#header-menu-useraccount-button,
	#header-menu-themeadapting-button,
	#header-menu-logout {
		padding: 0px 18px;
	}

	.mediabond-hide {
		display: none !important;
	}

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

@media only screen and (max-width: 480px) {
	#header-menu-logout {
		display: none;
	}

	span.header-menu.righthand > div > div > div.menu-items a,
	span.header-menu.lefthand > div > div > div.menu-items b {
		padding: 17px 23px;
	}

	span.header-menu.lefthand > div > div > div.menu-items b.nested:before {
		top: 17px;
	}

	span.header-menu.lefthand > div > div,
	span.header-menu.righthand > div > div {
		left: 0px;
		right: 0px;
	}

	span.header-menu > div > div {
		padding: 0;
		margin: 0;
		position: fixed;
		max-height: none;
		height: auto;
		border: none;
		border-radius: 0;
		inset: var(--root--menubar-height) 0px 0px 0px !important;
	}
}

@media only print {
	.noprint {
		display: none !important;
	}

	body {
		padding: 0px;

		> article {
			margin: 0 !important;
			padding: 0 !important;

			> div {
				margin-top: 0px;
				padding: 0px;
				margin-bottom: 0px;
			}
		}
	}
}

/* #endregion */