@layer reset, default, themes, patterns, layouts, components, utilities;

@layer reset {
	@font-face {
		font-family: 'Noto';
		src: url('../fonts/NotoSansArabic-Regular.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	@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-display: swap;
	}

	@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-display: swap;
	}

	@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-display: swap;
	}

	@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;
		font-display: swap;
	}

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

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

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

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

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

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

	textarea {
		scrollbar-color: var(--input_border-color) var(--root-background-color);
		scrollbar-width: thin;
		/* &::-webkit-scrollbar {
			width: 8px;
			background-color: var(--root-ribbon-background-color);
		}

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

		&::-webkit-scrollbar-button {
			cursor: default;
			background-color: var(--input_border-color);
		}

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

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

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

	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 {
			display: none;
			outline: none;
		}
	}

	menu.header-ribbon {
		position: fixed;
		padding: 0;
		margin: 0;
		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 {
			display: flex;
			top: 3px;
			right: 4px;
			min-width: 16px;
			height: 20px;
			padding: 0px 2px;
			color: #fff;
			position: absolute;
			font-size: 0.7em;
			font-style: normal;
			font-weight: bold;
			border-radius: 100px;
			align-items: center;
			justify-content: center;
			background-color: red;
		}
	}

	menu.header-menu {
		padding: 0;
		margin: 0;
		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);
			}
		}

		&.lefthand > div > div {
			text-align: left;
			left: 10px;

			& > div.menu-items {
				div {
					display: none;
					position: relative;
				}

				b {
					font-weight: normal;
					display: block;
					padding: 14px;
					position: relative;
					color: var(--input-hover_border-color);

					b:hover {
						text-decoration: none;
						background-color: var(--root-ribbon-menu-itemhover-background-color);
					}

					& > span {
						font-family: icomoon4;
						display: inline-block;
						padding-right: 14px;
						font-size: 10px;
					}

					&.nested:before {
						position: absolute;
						display: block;
						content: "\e91d";
						font-family: "glyphs";
						font-weight: normal;
						right: 10px;
					}

					& > a.alink {
						color: var(--root-font-color);

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

		&.righthand > div > div {
			text-align: right;
			right: 10px;

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

				& > a,
				& > 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;
				}

				& a > span {
					display: inline-block;
					min-height: 15px;
					text-overflow: ellipsis;
					flex: 1;
					padding: 1px 0px;
				}

				& a > b {
					font-weight: normal;
					color: var(--root-font-color);
				}

				& a:hover {
					text-decoration: none;
					color: var(--root-font-color);
					cursor: default;
					background-color: var(--root-ribbon-menu-itemhover-background-color);

					& > b {
						color: var(--root-font-color);
					}
				}
			}
		}

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

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

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

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

@layer layouts {
	.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;

		& > 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); */
		}
	}

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

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

					& > div > div > a {
						min-width: 150px;
						color: #333;
					}

					& > div > div > span {
						background-color: #fff;
						min-width: 60px;
						text-align: center;
					}

					& > div {
						display: inline-block;
						margin: 0px 3px;
					}
				}
			}
		}
	}

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

		& > 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,
			&::before {
				display: inline-block;
			}

			&::after {
				content: ")";
				color: var(--root-font-lightcolor);
			}

			&::before {
				content: "(";
				color: var(--root-font-lightcolor);
			}
		}

		&.positive {

			&::after,
			&::before {
				content: ")";
				color: transparent;
			}
		}
	}

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

	.media-width-max480 {
		display: none !important;
	}

	.media-width-max624 {
		display: none !important;
	}

	.media-width-max768 {
		display: none !important;
	}

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

	@media only screen and (max-width: 768px) {
		.media-width-max768 {
			display: inherit !important;
		}

		.media-width-min768 {
			display: none !important;
		}

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

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

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

		.media-width-min624 {
			display: none !important;
		}

		.media-width-max624 {
			display: block !important;
		}
	}

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

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

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

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

		menu.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-width-max480 {
			display: inherit !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;
				}
			}
		}
	}
}