html {
	height:100%;
}
body {
	font-family: Arial, sans-serif;
	font-size: 9pt;
}

sup {
	font-size:0.6em;
	line-height:1em;
}

#header {
	display: block;
	min-height: 64px;
	max-height: 64px;
	margin-bottom: 10px;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
}
#header > .background-wrapper {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #001437;
	color: #B5B9BC;
}
#header > .background-wrapper > .background-image {
	position: relative;
}
#header > .background-wrapper > .background-image img {
	width: 150%;
	margin-top: -65%;
	margin-left: 20%;
	position: absolute;
	top: 0;
	left: 0;
	max-width: none;
}
#header .header-ctr-left, #header .header-ctr-right {
	position: fixed;
	top: 9px;
	height: 52px;
	width: calc(50% - 275px);
	box-sizing: border-box;
	padding-top: 0.5em;
	color: #B5B9BC;
	overflow: unset;
	white-space: nowrap;
}
#header .header-ctr-left {
	left: 250px;
}
#header .header-ctr-right {
	left: 50%;
	text-align: right;
}

@media (max-width: 1000px) {
	#header .header-ctr-left, #header .header-ctr-right {
		width: calc(50% - 75px);
	}
	#header .header-ctr-left {
		left: 75px;
	}
	#header .header-ctr-right {
		left: 50%;
	}
}

#header .header-wrapper {
	position: relative;
	padding-left: 20px;
	padding-top: 7px;
}
#header .header-wrapper img {
	height: 50px;
}

#header > .header-wrapper > .header-logo a img {
	cursor: pointer;
}

#header > .header-wrapper > .header-logo .header-logo-banner {
	display: auto;
}
#header > .header-wrapper > .header-logo .header-logo-symbol {
	display: none;
}

#header .header-ctr-left .hdrAppName,
#header .header-ctr-right .hdrProjName {
	font-weight: bold;
	font-size: 18px;
}

#header .hdrAppName .txtAppName:hover {
	cursor: pointer;
	border-bottom: dashed 1px #B5B9BC;
}

#header .header-ctr-left .hdrSubAppName,
#header .header-ctr-right .hdrProjComm {
	font-size: 12px;
}

#header .hdrSubAppName .hdrInstName,
#header .hdrSubAppName .hdrViewTitle {
	display: inline-block;
	width: 10.25em;
	white-space: nowrap;
	overflow: unset;
}
#header .hdrSubAppName .hdrViewTitle {
	text-align: right;
}

#header .header-actions {
	position: fixed;
	top: 5px;
	right: 0px;
	height: 52px;
	width: 250px;
	box-sizing: border-box;
	padding-top: 1em;
	padding-right: 10px;
	color: #B5B9BC;
	overflow: unset;
	white-space: nowrap;
	text-align: right;
	font-size: 16px;
}

#header .header-actions .ui-button {
	background: none;
	border: none;
	color: #B5B9BC;
	transition-duration: 0.25s;
}

#header .header-actions .ui-expander {
	display: none;
}

#header .header-actions.ui-state-expanded {
	width: 250px;
	background: none;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

#header .header-actions .ui-button:hover {
	color: #FFF;
}

.fa--rotate90 {
	transform:rotate(90deg);
	text-align:left;
	width: 16px;
}

.ui-widget {
	font-family: Arial, sans-serif;
	font-size: 1em;
}
.ui-widget-content {
    background: #ffffff;
}

.ui-widget-overlay {
	background: #000;
	opacity: 0.4;
}

.ui-dialog .ui-dialog-titlebar {
	padding: 3px 10px;
	background: #dfeffc url("../Images/wave_dark.png") 50% 50% repeat-x;
}
.ClsDlgMax {
	max-width: 100%; /* damit breite Tabellen nicht aus dem Fenster laufen */
}

.ClsDlgWithMax {
	width: 100%; /* damit Eingabefelder die komplette Breite verwenden */
}
.ClsWid5em,
span.ClsWid5em input {
	width: 5em;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {	/* active tabs/sorted column: text in blue */
	color: #2e6e9e;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { /* background yellow */
    background: #fbec88 url("../Images/wave_yellow.png") 50% 50% repeat-x;
}

.ui-widget-header .ui-state-active, .ui-datatable-tablewrapper .ui-state-active {				/* background yellow */
	background: #fbec88 url("../Images/wave_yellow.png") 50% 50% repeat-x;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {						/* active text in blue */
	color: #2e6e9e;
}
.ui-state-active .ui-icon { 																	/* active icons in blue */
	background-image: url("../Images/ui-icons_6da8d5_256x240.png");
    background-color: transparent;
}
.ui-state-hover .ui-icon {
	background-image: url("../Images/ui-icons_217bc0_256x240.png");
    background-color: transparent;
}

/* --------------- CeLo --------------- */
.ClsAppToolbar img {
	border-radius: 5px;
}
.ClsAppToolbar img.hoverable:hover {
	cursor: pointer;
	box-shadow: 0px 0px 3px 1px white;
}
.ClsAppToolbar {
	user-select: none;
	border: none;
	font-size: 20px;
	font-weight: normal;

	background: #dfeffc url("../Images/wave_dark.png") 50% 50% repeat-x;
	color: white;
	
	margin-left: 1px;
	margin-right: 1px;
}

.ClsAppToolbar > .ui-toolbar-group-right {
	padding: 7px;
}
.ClsAppTitle {
	font-size: 20px;
	font-weight: bold;
	padding: 3px 10px 2px 13px;
	margin: 4px 0px 2px 0px;
	vertical-align: middle;
}
.header-wrapper .ClsSvrInstName {
	margin-top: 0em;
	margin-right: 1em;
	font-size: 3em;
	color:#B5B9BC;
}
.ClsProjComm {
	font-size: 18px;
	font-weight: bold;
	padding: 0px 10px 0px 32px;
    vertical-align: middle;
}
.ClsAppTitle > a > .ui-icon {
	background-image: url("../Images/ui-icons_217bc0_256x240.png");
    background-color: transparent;
}
.ui-toolbar-group-right .ui-state-hover {
    color: #ff873f;
}
.ClsAppTitle > a:hover {
    border: none;
    background: #d0e5f5 url("../Images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
    border-radius: 5px;
}

.ClsLayoutView {    
	background: #dfeffc url("../Images/ui-bg_gloss-wave_55_5c9ccc_500x100.png") 50% 50% repeat-x;
	color: #ffffff; 
	border: 1px solid #4297d7;
	font-size: 16px;
	font-weight: bold;
	padding: 6px 2px 6px 12px;
	margin: 1px 0px 5px 0px;
	vertical-align: middle;
}

.ui-timepicker-timeinput {
	background: #ffffff;
	border: 1px solid #a6c9e2;
}

.ui-timepicker-timeinput > div.ui-hour-picker > input.ui-inputfield {
	border: #ffffff;
}

.ui-timepicker-timeinput > div.ui-minute-picker > input.ui-inputfield {
	border: #ffffff;
}

.ui-inputnumber.ui-number-align-right .ui-inputfield {
	text-align: right;
}

.ClsTxtDarkblue {
	color: #2e6e9e;
}

.ClsViewLayer {
	background: #dfeffc url("../Images/ui-bg_gloss-wave_55_5c9ccc_500x100.png") 50% 50% repeat-x;
	color: #ffffff;
	border: 1px solid #4297d7;
	padding: 3px 2px 3px 12px;
	margin: 1px 0px 5px 0px;
	vertical-align: middle;
}

/* --------------- Toolbar --------------- */
div.ClsToolBar {
	background: #dfeffc url("../Images/wave_dark.png") 50% 50% repeat-x;
	color: #ffffff;
	padding: 6px 0px 5px 0px;
	margin: 2px 0px 10px 0px;
	border: none;
}
.ClsTBHome {
	margin-top: -2px;
	margin-left: 15px;
	vertical-align: middle;
}
.ClsToolBar > .ClsTBHome {
	color: #ff873f;
}
.ClsTBChkBox {
	margin-left: 5px;
	vertical-align: middle;
	padding: 0px 0px 0px 10px;
}
.ClsTBChkBox > .ui-chkbox-label {
	font-size: 14px;
    margin: 2px 0 0 3px;
}
.ClsTBChkBoxLight {
	margin-left: 5px;
	vertical-align: middle;
	padding: 0px 0px 0px 10px;
}
.ClsTBChkBoxLight > .ui-chkbox-label {
    margin: 0px 0 0 0px;
}

.ClsCheckboxEmpty > .ui-chkbox-box > .ui-chkbox-icon {
	background-color: white;
}
.ClsCheckboxPartial > .ui-chkbox-box > .ui-chkbox-icon {
	background-color: lightGray;
}
.ClsCheckboxFull > .ui-chkbox-box > .ui-chkbox-icon {
	background-color: transparent;
}

.ClsTBButIcon > span.ui-button-text {
	padding: 3.5px;
}
.ClsTBButText > span.ui-button-text {
	font-size: 14px;
	font-weight: normal;
	padding: 2px 10px;
}
.ClsToolBar > .ClsTBText {
	font-size: 14px;
	padding: 3px 10px 0px 0px;
}

/* --------------- Menu --------------- */
.ui-layout-container > .ClsMenuBar {
	border: none; 
	padding: 3px 4px;
}
.ClsMenuBar .ui-menubar, .ui-menubar .ui-menuitem {
	font-size:14px; /*1.1em; 0.99em;*/							/* Menu-Bug in Firefox s. RTC 229121 */
}
.ClsMenuBar .ui-menubar {
	padding: 4px 10px;
	background: #dfeffc url("../Images/wave_dark.png") 50% 50% repeat-x;
}
.ui-menu .ui-menuitem a.ui-menuitem-link {
    padding: 2px 5px; /*.3em;*/
  	width: calc(100% - 10px);
    white-space: nowrap;
}
.ui-menuitem .ui-button-text {
    padding: 2px 5px; /*.3em;*/
}
.ui-menu > .ui-menu-list > .ui-menu-parent > .ui-menuitem-link > .ui-menuitem-text {
	color: #ffffff;
}
.ui-menu > .ui-menu-list > .ui-menu-parent > .ui-state-hover > .ui-menuitem-text, .ClsMenuBut.ui-state-hover, .ui-tabs-nav > .ui-state-hover > a, .ClsTBButText.ui-state-hover > span.ui-button-text {
	color: #ff873f;
}
.ui-layout-container > .ui-contextmenu,
.ui-menuitem > .ui-menu-list,
li.ui-menuitem > ul.ui-menu-list.ui-menu-child {
	width: auto;
    white-space: nowrap;
}
.ClsMenuBut {
	padding: 0px 5px;
}
.ClsMenuBut > .ui-button-text {
	font-weight: normal;
}

/* --------------- Tree --------------- */
.ClsTreeView {
	margin-top: -12px;
}
.ui-layout-container .ui-layout-pane-west {
	margin: 2px 5px 2px 5px;
}
.ui-widget-content .ui-tree {
	border: none;
 	width: 100%;
}
.ui-tree > .ui-tree-scroller {
	height: 4px;
}
.ClsTreeNodeHidden {
	display : none;
}

.ui-tree > .ui-tree-container {
	margin: 4px 0px;
}

.ui-tree .ui-treenode {
	list-style: none outside none;
	margin: 0px;
    padding: 0px;	/* mit Scroll 0px */
    text-overflow: ellipsis;
    overflow: hidden;
}
.ui-tree .ui-treenode-leaf {
	margin-top: -3px;
}
.ui-tree .ui-treenode-label {
    padding: 0px 3px;
    display: inline;
}
.ui-tree .ui-treenode-label,
.ui-tree .ui-treenode-content {
	line-height: 18px;
}

.ClsTreeOmElementOdd {
	background-color: #eff3f9;
}
.ClsTreeOmElementEven {
	background-color: #dce3ee;
}

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

.ui-button.ui-button-icon-only.ClsOmEvtButton,
.ui-button-icon-only.ClsBorderlessButton {
	float:right;
	background:transparent;
	border:none;
	text-align:center;
}

.ui-button.ui-button-icon-only.ClsAlarmButton {
	float:right;
	background:transparent;
	border:none;
	text-align:left;
	width: 8px;
    margin-left: -8px;
    margin-top: -3px;
}

.ui-button.ui-button-icon-only.ClsStockButton {
	float:right;
	background:transparent;
	border:none;
	width: 15px;
}

.ui-button.ui-button-icon-only.ui-state-hover.ClsOmEvtButton {
	color: #ff873f;	
}
/* --------------- Tabs --------------- */
.ui-tabs.ui-hidden-container.ui-tabs-top {
	border: none;
}

.ui-datatable-tablewrapper {
 	width: 100%;
}
.ui-tabs > .ui-tabs-nav {						/* tab title */ 
	background: #dfeffc url("../Images/wave_dark.png") 50% 50% repeat-x;
}
.ui-tabs-top.ui-tabs > .ui-tabs-nav {
	padding: 3px 3px 0px 3px;
}
.ui-tabs > .ui-tabs-nav > li > a {				/* tab title */ 
    padding: 3px 15px;
    font-size: 14px;
    font-weight: normal;
}
.ui-tabs .ui-tabs-panel {							/* indentation of tab pages */ 
	padding: 8px 5px 4px 5px
}

/* --------------- Tabelle --------------- */
td.ClsTdEllipsis {				/* Zelleninhalt wird abgeschnitten und stattdessen ... eingeblendet */
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 0px;
}
.ClsHeaderInput {
	padding: 1px 4px;
	margin-top: -1px;
}

.ClsTblNoHeader thead {
    display:none;
}

.ui-datatable thead th {			/* Header linksbündig und unten */
    text-align: left;
    vertical-align: bottom;
}
.ui-datatable .ui-column-filter {
 	width: 100%;
  	margin: 0px;
}
/* Filtereingabefelder weniger hoch */
th > .ui-column-filter, th > .ui-column-customfilter > .ui-selectonemenu > .ui-selectonemenu-label,
th > .ui-column-customfilter > div.clr-field .ui-colorpicker.ui-inputfield {
	padding: 2px 4px 2px 4px;
}
th > .ui-column-filter, .ui-selectonemenu > .ui-selectonemenu-label,
th > .ui-column-customfilter > div.clr-field .ui-colorpicker.ui-inputfield {
 	width: 90%; /* fallback if needed */
  	width: calc(100% - 10px);
}
.ui-datatable .ui-column-customfilter {
	margin: 0px;
}

/* Combobox in Tabellenzelle mit 100% */
.ui-cell-editor-input > .ui-selectonemenu > .ui-selectonemenu-label {
	padding: 2px 4px;
	width: 100%;
	overflow: visible;	/* sonst "hidden" und die Zeile zu hoch */ 
}
.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
    margin-top: 2px;
}
.ui-column-customfilter > .ui-selectonemenu {	/* combobox im Filterheader */
	padding-right: 4px;
 	width: 90%; /* fallback if needed */
  	width: calc(100% - 10px);
}
.ClsPGCellRight > .ui-selectonemenu {			/* combobox mit Label */
	padding-right: 4px;
}

.ui-datatable thead th, .ui-datatable tfoot td, .ui-datatable tfoot th { 	/* Tabellen-Head/Foot schmaler */
    padding: 4px 5px 2px;
}
thead > tr > th.ui-filter-column > input.ui-column-filter {				/* Filter-Header: da Input tiefer stehen als Combo-box korrigieren */
	margin-bottom: 2px;
}
.ui-datatable tbody td {	 	/* Tabellen-Zellen schlanker */
    padding: 3px 5px 1px 5px;	/* oben mehr als unten, wegen vertical=top */
    vertical-align: top;
}
.ui-datatable .ui-datatable-header {			/* Tabellen-Header */
	text-align: left;
}
.ui-datatable .ui-datatable-footer {				/* Tabellen-Footer */
	font-size: 0.9em;								/* so passt der Button in den Paginator */
}
.ui-datatable > .ui-paginator-bottom {				/* Tabellen-Footer */
	font-size: 0.9em;								/* so passt der Button in den Paginator */
	padding-top: 2px;
	padding-bottom: 3px;
}
.ui-paginator > .ui-paginator-pages {
    display: inline-block;
    padding: 0px;
    margin-top: 1px;
}
.ui-paginator-bottom > a > span.ui-icon {
    margin-top: -2px;
    padding: 1px 0px;
}

.ui-paginator .ui-paginator-next, .ui-paginator .ui-paginator-last, .ui-paginator .ui-paginator-first, .ui-paginator .ui-paginator-prev {
    border: none;
}
.ui-paginator .ui-paginator-page {
    border: none;
}

/* ------------------------------- */
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
	font-family:Arial, sans-serif;
	font-size:1em;
}

.ui-fieldset .ui-fieldset-legend {				/* Titel der Gruppen */
	padding: 4px 10px 4px 10px;
}

.ui-chkbox .ui-state-default {
	background: #dfeffc url("../Images/ui-bg_glass_85_dfeffc_1x400.png") 50% 50% repeat-x;
}
.ui-chkbox .ui-state-hover, .ui-chkbox .ui-state-focus {
	background: #d0e5f5 url("../Images/ui-bg_glass_75_d0e5f5_1x400.png") 50% 50% repeat-x;
}

.ui-selectonemenu-panel.ClsHideDisabled .ui-selectonemenu-item.ui-state-disabled {	/* versteckt Select-Options, die disabled sind */
    display: none;
}

/* top:50% eliminiert */
.ui-button-icon-only .ui-icon, .ui-button-text-icon-left .ui-icon, .ui-button-text-icon-right .ui-icon {
    top: auto;
    margin-top: 2px;
}
.ui-button-icon-only .fa.ui-icon, .ui-button-text-icon-left .fa.ui-icon, .ui-button-text-icon-right .fa.ui-icon {
    margin-top: 2px;
    padding-top: 2px;
}

.ClsDetailsIcon .ui-button-icon-left.ui-icon.ui-c {
	margin-top: 1px;
}

.ui-fileupload-buttonbar>.ui-button-text-icon-left>.ui-button-text {
	padding: 2px 1em 2px 2.1em;
}

.ui-fileupload-buttonbar>.ui-button-text-icon-left>.ui-icon {
	top: auto;
}
.ui-fileupload-simple .ui-button-text-icon-left .ui-icon {
	top: auto;
	margin-top: 4px;
}

.ui-datatable.ui-datatable-sticky > table > thead {  /* it is not working yet */
    position: sticky;		
    top: 5rem;
	width: 66%;
 }
    
/* --------------- Stile für Icons ---------------------------------------------- */
.ui-widget-content .rsicon, .ui-button > span.rsicon {
	border-radius: 0;
	background-image: url("../Images/Icons.png"); 
}

.rsicon-prj		{ background-position: -16px 0; }		/* identisch zu icn1 */
.rsicon-fld		{ background-position: -32px 0; }		/* identisch zu icn2 */
.rsicon-dep		{ background-position: -48px 0; }		/* identisch zu icn3 */
.rsicon-itm		{ background-position: -304px 0; }
.rsicon-si		{ background-position: -320px 0; }
.rsicon-st		{ background-position: -64px 0; }		/* identisch zu icn4 */

.rsicon-grp1	{ background-position: -80px 0; }		/* identisch zu icn5 */
.rsicon-grp2	{ background-position: -128px 0; }		/* identisch zu icn8 */
.rsicon-grp3	{ background-position: -176px 0; }		/* identisch zu icn11 */

.rsicon-icn1	{ background-position: -16px 0; }		/* Projekt */
.rsicon-icn2	{ background-position: -32px 0; }		/* Ordner */
.rsicon-icn3	{ background-position: -48px 0; }		/* Depot */
.rsicon-icn4	{ background-position: -64px 0; }		/* graues leeres Kästchen */
.rsicon-icn5	{ background-position: -80px 0; }		/* System, verbaut */
.rsicon-icn6	{ background-position: -96px 0; }		/* System, freier Slot */
.rsicon-icn7	{ background-position: -112px 0; }		/* System, nicht in Ausstattung */
.rsicon-icn8	{ background-position: -128px 0; }		/* Gerät, verbaut */
.rsicon-icn9	{ background-position: -144px 0; }		/* Gerät, freier Slot */
.rsicon-icn10	{ background-position: -160px 0; }		/* Gerät, nicht in Ausstattung */
.rsicon-icn11	{ background-position: -176px 0; }		/* LRU, verbaut */
.rsicon-icn12	{ background-position: -192px 0; }		/* LRU, freier Slot */
.rsicon-icn13	{ background-position: -208px 0; }		/* LRU, nicht in Ausstattung */
.rsicon-icn14	{ background-position: -224px 0; }		/* graues Gerät */
.rsicon-icn15	{ background-position: -240px 0; }		/* 3 Fragezeigen */
.rsicon-icn16	{ background-position: -400px 0; }		/* Ausrufezeichen */
.rsicon-icn17	{ background-position: -416px 0; }		/* Gelbes Fragezeichen */
.rsicon-icn18	{ background-position: -432px 0; }		/* grünes Häkchen */

.rsicon-tr-red	{ background-position: -256px 0; }
.rsicon-tr-yel	{ background-position: -272px 0; }
.rsicon-tr-grn	{ background-position: -288px 0; }

.rsicon-oper-gg	{ background-position: -336px 0; }
.rsicon-oper-gn	{ background-position: -344px 0; }
.rsicon-oper-ng	{ background-position: -352px 0; }
.rsicon-oper-rr	{ background-position: -360px 0; }
.rsicon-oper-rn	{ background-position: -368px 0; }
.rsicon-oper-nr	{ background-position: -376px 0; }
.rsicon-oper-gr	{ background-position: -384px 0; }
.rsicon-oper-rg	{ background-position: -392px 0; }
.rsicon-oper-nn	{ background-position:    0px 0; }


div.rsicon {		/* wenn wir Icon alleine z.B. in Tabellen darstellen */
	display: inline-block;
	width: 16px;
	height: 16px;
}

div.ClsMaRi4 {					/* Tabellenzelle: Icon an Text */
	margin-top: -1px;
	margin-right: 4px;
	vertical-align: middle;
}
div.ClsMaRi8 {					/* Tabellenzelle: Icon an Text */
	margin-top: -1px;
	margin-right: 8px;
	vertical-align: middle;
}
span.ClsVertAlignMid, div.ClsVertAlignMid {	/* Tabellenzelle: Texte und Icons */
	vertical-align: middle;
}

button.ui-button.ClsButNavi {
	float: right;
	width: 24px;
	height: 20px;
	margin-top: -1px;
	font-size: 12px;
}
button.ui-button.ClsButNavi > span.ui-icon {
	margin-top: 3px;
}
button.ui-button.ClsButNavi.ui-state-hover {
    color: #ff873f;
}

/* --------------- Dialog (auch Login) --------------- */
.ClsButOKCancel {							/* OK/Cancel abgesetzt */
	margin-top: 1.5em;
}

.ui-widget-content > .ClsPGCellLeft {		/* Padding Celle links */
	padding: 2px 10px 2px 0px;
}

.ui-widget-content > .ClsPGCellRight {	/* Padding Celle rechts */
	padding: 2px 0px 2px 0px;
}

.ui-panelgrid-cell > .ClsWidth250 {		/* Länge Eingabefelder */
	width: 250px;
}

.ui-panelgrid-cell > .ClsWidth600 {		/* Länge Eingabefelder */
	width: 600px;
}

.ui-cell-editor > .ui-cell-editor-input > input {
 	width: 100%; /* fallback if needed */
  	width: calc(100% - 4px);
}
.ui-cell-editor > .ui-cell-editor-input > select {
	width: 100%;
	padding-top: 1px;
	padding-bottom: 1px;
}
.ui-datatable .ui-cell-editor > .ui-cell-editor-input > input,
.ui-datatable .ui-cell-editor > .ui-cell-editor-input > select {
	padding-top: 2px;
	padding-bottom: 2px;
}

.ClsExpiredTxt {
	padding: 12px 0px 6px 15px;
}

div.ClsDlgFirstLine, table.ClsDlgFirstLine {
	margin-top:	6px;
}
div.ui-datatable.ClsDlgFirstLine {
	margin-top:	12px;
}
span.ClsDlgFirstLine > input, span.ClsDlgFirstLine > label {
	margin-top:	6px;
}

.ui-panelgrid > tbody > tr > .ClsTblSep {
	padding-left: 0px;
	padding-right: 0px;
}

div.ui-chkbox.ClsChkBoxImp {		/* for import dialog */
	margin-left: 0px;
	margin-top: 2px;
}

div.ui-chkbox.ClsChkBoxBIO {		/* for built-in/out dialog */
	margin-left: 0px;
}

div.ui-chkbox {
	margin-left: 6px;
	margin-top: 4px;
}

.ui-chkbox .ui-chkbox-label {
	margin-left: 6px;
	margin-top: 2px;
}

.ui-tabs-header.ui-state-default.ui-tabs-selected.ui-state-active > a {
	cursor: default;
}

.ClsTabIco {
	display: none;
}

.ClsTabTxt {
	display: inline-block;
}

.ClsAccTab .ui-accordion-header,		/* for accordion in scan dialog */
.ClsAccTab .ui-accordion-content {
	padding: 5px;
}

.ClsAccTab .ui-accordion-header {
	margin-bottom:5px;
}

button[id='idFrmItems:idTblItems:idBtnToggleMenuBar'] {
	display: none;
}

button.ClsTBHome {
	display: inline-block;
}

.ui-tooltip-text > ul {
	padding-left: 16px;
	margin: 0.5em 0em;
}

.ui-widget-content .ClsAboutTitle {
	font-size: 24px;
	color: #ff873f; /*#2e6e9e;*/
	padding: 7px 0px 0px 0px;
}

.ClsAboutTitle .ClsAboutSlogan {
	color: #B5B9BC;
	font-size: 0.66em;
	font-style: italic;
}

.ClsParaJustified p {
	text-align: justify;
}
.ClsScrollPanel {
	padding: 3px 12px;
}
.ClsPara {
	padding:0.5em 0em;
}
a.ClsLink {
	color: #2e6e9e !important;
}
a.ClsLink:hover {
	color: #ff873f !important;
}

.ClsSubMenu {
	color: black;
}

/* ----- Operability (Icons sind nur 8px breit) ---------- */
.ClsOper {
	display: inline-block;
	width: 8px;
	height: 16px;
	margin-right: 3px;
	vertical-align: middle;
}

/* ---- Urgency -> Handlungsbedarf ------ */
.ClsUrgency {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 3px;
	vertical-align: middle;
	line-height: 16px;
}
.ui-state-highlight .ui-button-icon-left.ui-icon.ui-c.ClsUrgency,
.ui-treenode-content.ui-tree-selectable .ui-treenode-label.ui-state-highlight .ClsUrgency,
.ui-widget-content.ui-datatable-selectable.ui-state-highlight .ClsUrgency {
	border-radius: 8px;
	background-color: white !important;
	box-shadow: 0px 0px 12px;
}
.ClsUrgencyRed		{ color: #AA0000; }
.ClsUrgencyOrange	{ color: #FF873F; }
.ClsUrgencyGreen	{ color: #00BF00; }
.ClsUrgencyGray		{ color: #D0D0D0; }

.ClsPlanningView .ui-layout-center {
	padding-top: 0;	
}

/* ---------- Planning Upper Part ----- */
div #idPlan {
    position : absolute;
    width	 : 102%;
    height   : calc( 100% - 45px );
}

/* ---------- Upper Timeline ---------- */ 
.ItemsTimeline {
	display	 : inline-block;
    overflow 	: hidden;
    height      : calc( 100% - 60px );
    width	   	: 33%;
    padding-top : 3px;
}

.ItemsTimelineNoScr {
	display	 	: inline-block;
	overflow 	: hidden;
  	height		: 100%;
    width	   	: 33%;
    padding-top : 3px;
}

[id='idFrmItemsOps:idTPlan'].ItemsTimeline .vis-timeline.vis-bottom.vis-ltr {
	height: 100% !important;
}

.ItemsTimeline .vis-panel.vis-left.vis-vertical-scroll {
	visibility 	: hidden;
}

.ItemsTimeline .timeline-menu.timeline-menu-axis-top {
	bottom		: revert;
	margin		: 0px;
}

/* ---------- Upper DataTable --------- */ 
.ItemsTable {
    overflow : hidden;
    float	 : left;
    width	 : 65%;
    height	 : 100%;
}

/* Die Timeline-Gruppen sind exakt 24px hoch (vis setzt die Höhe inline auf .vis-group/.vis-label).
   Damit Tabellenzeile und Timeline-Balken auf derselben Höhe bleiben, muss die Tabellenzeile
   ebenfalls exakt 24px hoch sein, sonst wandert der Balken pro Zeile um die Differenz weiter nach
   oben (bei 100 Zeilen summierte sich das auf fast 80px, also mehr als drei Zeilen Versatz).
   20px Inhalt + 3px/1px Padding ergeben genau 24px. Der Zellrahmen kaeme zusaetzlich hinzu und ist
   ausserdem skalierungsabhaengig (0,8px bei 125%-Skalierung, 1px bei 100%), was die Zeilenhoehe je
   Monitor veraendern wuerde. Er wird daher auf 0 gesetzt; die Trennlinie zeichnet stattdessen ein
   inset-box-shadow, der das Layout nicht beeinflusst.
   Gilt nur fuer die beiden Planungstabellen (.ItemsTable). */
.ItemsTable .ui-datatable-scrollable-body tbody > tr,
.ItemsTable .ui-datatable-scrollable-body tbody > tr > td {
	border-top-width	: 0px;
	border-bottom-width	: 0px;
}

.ItemsTable .ui-datatable-scrollable-body tbody > tr > td {
	box-sizing		: content-box;
	height			: 20px;
	padding-top		: 3px;
	padding-bottom		: 1px;
	box-shadow		: inset 0px -1px 0px rgba(0,0,0,0.12);
}

[id='idFrmItemsOps:idTblItemsOps_data'] .ui-datatable-scrollable-body {
	height: 100% !important;
}

/* ---------- Planning Lower Part ----- */
div #idOps {
    position : absolute;
	width	 : 102%;
	height   : 100%;
}

[id='idFrmOpsTabs:idTabs'] {
	height:calc(100% - 70px);
	padding: 0px;
}

[id='idFrmOpsTabs:idTabs'] .ui-tabs-panels {
	height:100%;
}

[id='idFrmOpsTabs:idTabs:idOperations'] {
	height: 100%;
}

[id='idFrmOpsTabs:idTabs:idOpConflicts'] {
	height: 100%;
}

[id='idFrmOpsTabs:idTabs:idOpDesign'] {
	height: 100%;
}

[id='idFrmOpsTabs:idTabs:idOpReserv'] {
	height: 100%;
}

[id='idFrmOpsTabs:idTabs:idTblOpReserv'].ReservTree .ui-treetable-scrollable-body {
	height: calc(100% - 100px) !important;
}

[id='idFrmOpsTabs:idTabs:idOpPacking'] {
	height: 100%;
}

[id='idFrmOpsTabs:idTabs:idTblOpPack'].PackTree .ui-treetable-scrollable-body {
	height: calc(100% - 100px) !important;
}

[id='idFrmOpsTabs:idTabs:idOpReturnal'] {
	height: 100%;
}

[id='idFrmOpsTabs:idTabs:idTblOpReturn'].ReturnTree .ui-treetable-scrollable-body {
	height: calc(100% - 100px) !important;
}

[id='idFrmOpsTabs:idTabs:idOpHist'] {
	height: 100%;
}

/* ---------- Lower Timeline ---------- */ 
.ItemsTimelineOps {
	display	 	: inline-block;
    overflow 	: hidden;
	height      : calc( 100% - 35px - 24px );
    width	   	: 33%;
    padding-top : 35px;
}

.ItemsTimelineOpsNoScr {
    display	 	: inline-block;
    overflow 	: hidden;
	height      : 100%;
    width	   	: 33%;
    padding-top : 35px;
}

[id='idFrmOpsTabs:idTabs:idTOps'].ItemsTimelineOps .vis-timeline.vis-bottom.vis-ltr {
	height: 100% !important;
}

.ItemsTimelineOps .vis-panel.vis-left.vis-vertical-scroll {
	visibility 	: hidden;
}

.ItemsTimelineOps .timeline-menu.timeline-menu-axis-top {
	bottom		: revert;
	margin		: 0px;
}

/* ---------- Lower DataTable --------- */ 
[id='idFrmOpsTabs:idTabs:idTOps_data'] .ui-datatable-scrollable-body {
	height: 100% !important;
}

[id='idFrmOpsTabs:idTabs:idTblOpConf_data'] .ui-datatable-scrollable-body {
	height: 100% !important;
}

/* ---------- Other tabs -------------- */ 
.ConflictsTable {
    overflow : hidden;
    height: 100%;
}

.ReservTree {
	overflow : hidden;
    height: 100%;
}

.PackTree {
	overflow : hidden;
    height: 100%;
}

.ReturnTree {
	overflow : hidden;
    height: 100%;
}

.HistTable {
	overflow : hidden;
    height: calc(100% + 50px) !important;
}
/* ---------- DONE Planning ----------- */

.ClsMenuSelect .ui-selectcheckboxmenu-item > label {
    padding-left: 2.5em;
}

.ui-selectcheckboxmenu-label.ui-corner-all {
	height: 12px;
}

.ui-selectcheckboxmenu-label-container.ui-state-active {
	border-radius: 5px;
}

/* PrimeFaces: label/emptyLabel is stored in data-label but not shown in multiple mode */
.ui-selectcheckboxmenu-emptylabel {
	padding: 5px 5px 5px 5px;
}

.ui-selectcheckboxmenu-multiple-container:not(:has(> li))::after {
	content: attr(data-label);
	color: #666666;
	font-style: italic;
	padding: 5px 5px 5px 4px;
	text-align: center;
}

.ClsAppTitlePl {
	font-size: 20px;
    font-weight: bold;
    padding: 0px 10px 2px 7px;
    vertical-align: middle;
}

.HistTable .ui-datatable-scrollable-body > table.ui-datatable-resizable {
	width:	fit-content !important;
}

.ClsTlLatest {
	font-weight: bold;
}

.ClsTlLast {
	border-top-style: hidden;
}

.ClsTlSel {
	background: #fbec88
}

.ClsTli0 {	padding-left:	 0px; }
.ClsTli1 {	padding-left:	20px; }
.ClsTli2 {	padding-left:	40px; }
.ClsTli3 {	padding-left:	60px; }
.ClsTli4 {	padding-left:	80px; }
.ClsTli5 {	padding-left:  100px; }
.ClsTli6 {	padding-left:  120px; }
.ClsTli7 {	padding-left:  140px; }
.ClsTli8 {	padding-left:  160px; }
.ClsTli9 {	padding-left:  180px; }

.ClsTlEvent.vis-item.vis-range {
	color:#000000;
	border: 0px hidden #ffffff;
	background: none;
}

body .vis-item.vis-range .vis-item-content {
	width: 100%
}
/* ---------- sys info ---------- */
.ClsSysInfo .ui-accordion-content {
	padding: 0px;
}
.ClsSysInfoJvm {
	padding: 0px;
}
.ClsSysInfoJvm div {
	border:solid 2px grey;
	color:black;
	text-align: center;
}
/* ---------- Dialogue Edit Item  ---------- */
.ClsDlgEditItem .ui-accordion-content {
	padding: 0px;
}

/* ---------- fix toggle switch ---------- */
body .ui-toggleswitch .ui-toggleswitch-slider {
	-moz-transition: background-color .3s;
	-o-transition: background-color .3s;
	-webkit-transition: background-color .3s;
	transition: background-color .3s;
	border-radius: 30px;
	background: #ccc;
}

/* ---------- fix toggle switch ---------- */

body .ui-toggleswitch .ui-toggleswitch-slider::before {
	background-color: #fff;
	height: 1.250em;
	width: 1.250em;
	left: .25em;
	bottom: .25em;
	border-radius: 50%;
	-webkit-transition: .3s;
	transition: .3s;
}

.ui-toggleswitch-slider::before {
	position: absolute;
	content: "";
	height: 1.250em;
	width: 1.250em;
	left: .25em;
	bottom: .25em;
	border-radius: 50%;
	-webkit-transition: .3s;
	transition: .3s;
}

body .ui-toggleswitch.ui-widget.ui-toggleswitch-checked .ui-toggleswitch-slider {
  background-color: #ff873f;
}
/* ---------- end of toggle switch ---------- */

.ClsColrPickCell {
	text-align:center;
	margin-top:4px
}
.ClsColrPickCell div {
	display:inline-block;
	width:1em;
	height:1em;
	border:solid 1px black;
}

/* static message */
.ui-messages-info-detail,  .ui-message-info-detail,
.ui-messages-warn-detail,  .ui-message-warn-detail,
.ui-messages-error-detail, .ui-message-error-detail,
.ui-messages-fatal-detail, .ui-message-fatal-detail {
	display: block;
	margin-left: 26px;
}

.ui-growl-clickable {
	cursor: pointer;
	transition-property: background;
	transition-duration:0.5s;
	background: #f9e2d1;
	margin: 0px;
	border: solid 1px #f9e2d1;
	color: #2e6e9e; 
	opacity: 0.9;
}

.ui-error-code {
	margin-top:1em;
	border-top: dotted 2px #880000;
	color: #880000;
	font-family: Consolas, Courier New, monospace;
}

.ui-error-hint {
	margin-top:1em;
	border-top: dotted 2px #2779AA;
	color: #2779AA;
	white-space: pre-line;
}

.ui-error-details {
	margin-top:1em;
	overflow-y: auto;
	max-height: 250px;
	padding: 0.5em;
	box-shadow: 0px 0px 6px grey;
	border-radius: 6px; 
}

#ajaxErrorResponseContent {
	height: 250px;
	border-radius: 6px;
}

.ui-shadow-none {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;	
}

.fa-info-circle {
	color:#46699e;
}

/* ----- Planning view ----------------- */
.ClsO1 { background-color:#f2f261; }
.ClsO2 { background-color:#7af063; }
.ClsO3 { background-color:#63f0c1; }
.ClsO4 { background-color:#63a9f0; }
.ClsO5 { background-color:#9161f2; color:#fff; }
.ClsO6 { background-color:#bdbdbd; }
.ClsOC { background-color:#ba0609; color:#fff; }
.ClsOL { background-color:#e05f03; color:#fff; }

.ClsIOpRows {
	height: 20px;
}
.ClsOpRows {
	height: 28px;
}

#idFrmItemsOps   .ClsToolBar,
#idFrmSearchItem .ClsToolBar {
	margin: 2px 0px 2px 0px;
	padding: 0px 4px 1px 4px;
}

.ClsToolBarTypes.ClsToolBar {
	margin: 2px 0px 2px 0px;
	padding: 1px 4px 2px 4px;
}

#idFrmItemsOps   .ClsToolBar .ui-action-buttons,
#idFrmSearchItem .ClsToolBar .ui-action-buttons {
	float: right;
	padding-top: 3px;	
}
#idFrmItemsOps   .ClsToolBar .ui-action-buttons .ui-button,
#idFrmSearchItem .ClsToolBar .ui-action-buttons .ui-button,
.ClsToolBarTypes.ClsToolBar  .ui-action-buttons .ui-button {
	height: 20px;
}
.ClsToolBarTypes.ClsToolBar  .ui-action-buttons .ui-button.ui-selectbooleanbutton {
	height: 18px;
}


.ClsSsoCfg .ui-inputtext,
.ClsSsoCfg .ui-inputtextarea,
.ClsSsoCfg .ui-password {
	width: 31.125em;
	font-family: Consolas, Courier New, Arial, sans-serif;
}
.ClsSsoCfg .ui-semi-width {
	width: 15em;
}
.ClsSsoCfg .ui-semi-width:first-child {
	margin-right: 0.25em;
}
.ClsSsoCfg .ui-inputfield.ui-width-minus-button {
	width: calc(100% - 3.5em);	
}
.ClsSsoCfg .ui-inputfield[readonly] {
	color: #888;
}

.ClsButtonFlat.ui-button {
	border: none;
	background: transparent;
}

.ui-columntoggler .ui-columntoggler-items .ui-columntoggler-all {
	display: none;	/* not compatible with Cupertino-Theme */
}

/* customize datePicker component */
.ui-datepicker-group button,
.ui-timepicker-timeinput button {
	background: none;
	border: none;
}

.ui-timepicker-timeinput button {
	filter: brightness(75%);
}

.fa-fw {
	margin-right: 3px;
}

.ui-icon.fa {
	overflow: visible;
}

.ui-button .ui-icon.fa.fa-home {
	margin-left: -9px;	/* home icon is slightly too wide, needs re-adjustment, move to the left */
}

/* watermark/placeholder in grey (default color is too intense/black) */
input::placeholder {
	color: #CCC;
	opacity: 1; /* override firefox's default value */
}

.ui-datatable-resizable.ClsTypesOpTable td {
	vertical-align: middle;
	padding: 3px 5px 5px 5px;	
}

.cell-inline { 
	display:flex; 
	align-items:center; 
}

.cell-inline .ClsOmEvtButton { 
	margin-left:auto; 
}

.ClsComments {			/* for the reservation, packing and return tables */
	vertical-align:-webkit-baseline-middle;
	display:inline-block;
	overflow:hidden;
	width:130px;
}

.ClsCommentsDes {		/* for the design table */
	vertical-align:-webkit-baseline-middle;
	display:inline-block;
	overflow:hidden;
	width:190px;
}

.ClsOpsComment {		/* for the dialog */
	top: 60% !important;
}

/* ------- End of Planning view -------- */

/* ------------- Tooltips ---------------*/
 .ui-tooltip .ui-tooltip-global,
 .ui-tooltip .ui-tooltip-text {
   	padding: 2px 5px;
    color: #4c4c4c;
    font-size: 0.9em;
    background: linear-gradient(160deg, #FFFFFF, #CDD6E9);
    border: 1px solid;
    border-color: #4c4c4c;
}

.ui-with-tooltip {
	cursor: help;
	border-bottom: dotted 2px white;
}

/* ----- General row colors ------------ */
.ClsCNew  { background-color: #e1f7e3; }	/* new entry */
.ClsCDel  { background-color: #f9e2d1; }	/* entry marked to be deleted */
.ClsCPack { background-color: #CCFFEC; }	/* entry packed */
.ClsCShip { background-color: #CEE6FF; }	/* entry shipped */
.ClsCRet  { background-color: #DDCEFF; }	/* entry returned */
.ClsCOld  { background-color: #ececec; color: #666666; }	/* marking an old entry, e.g. in alarms */
.ClsCOra  { background-color: #f9e1c1; }	/* ligh-orange -> marking expired entries, e.g. in alarms */
.ClsCYel  { background: #fff7c4; }	/* light yellow -> e.g. marking pre-existing entries in fixed metadata values */
.ClsCErr  { background: red;     }	/* red errors */
.ClsCWar  { background: orange;  }	/* orange warnings */
.ClsCInf  { background: grey;    }	/* grey infos */
.ClsCDis  { color:#b9b9b9;       }	/* disabled entry */
/* ----- End of general row colors ----- */

.ui-menu .ui-divider-horizontal {
	width: calc(100% - 0.5rem);
}
.ui-divider.ui-divider-solid.ui-divider-horizontal {
	padding: 2px 0px 8px;
}
.ui-divider.ui-divider-solid.ui-divider-horizontal::before {
	color: #d7ebf9;
	border-width: 2px;
}
.ui-divider.ui-divider-solid.ui-divider-horizontal.ClsDividerGrey::before {
	color: #B5B9BC;
	border-width: 1px;
}

.ui-sidebar.ui-sidebar-top,
.ui-sidebar.ui-sidebar-bottom {
	height: auto !important;
	padding-bottom: 1em;
}
.ui-sidebar.ui-sidebar-top    .ui-sidebar-content,
.ui-sidebar.ui-sidebar-bottom .ui-sidebar-content {
	border: none;
}

/* --- Begin Layout Toggler ------- */
.ui-layout-toggler {
	background-image: none;
	background-color: #AAA4;
	border-radius: 6px;
}
.ui-layout-toggler:hover {
	background-color: #AED0EAAA;
}
.ui-layout-toggler:hover::before {
	color: #2779AA;	
}
.ui-layout-toggler::before {
	display: inline-block;
	width: 16px;
	height: 16px;
	font-size: 18px;
	color: #444;
}
.ui-layout-toggler.ui-layout-toggler-east,
.ui-layout-toggler.ui-layout-toggler-west {
	width: 17px !important;
	margin-left: -6px !important;
}
.ui-layout-toggler.ui-layout-toggler-north,
.ui-layout-toggler.ui-layout-toggler-south {
	height: 17px !important;
	margin-top: -6px !important;
}
.ui-layout-toggler-west::before,
.ui-layout-toggler-east::before {
	margin-top:12px;
}
.ui-layout-toggler-north::before,
.ui-layout-toggler-south::before {
	margin-top: -6px;
}
.ui-layout-toggler.ui-layout-toggler-west-open::before,
.ui-layout-toggler.ui-layout-toggler-east-closed::before {
	content: '⏴';
}
.ui-layout-toggler.ui-layout-toggler-east-open::before,
.ui-layout-toggler.ui-layout-toggler-west-closed::before {
	content: '⏵';
}
.ui-layout-toggler.ui-layout-toggler-north-open::before,
.ui-layout-toggler.ui-layout-toggler-south-closed::before {
	content: '⏶';
}
.ui-layout-toggler.ui-layout-toggler-south-open::before,
.ui-layout-toggler.ui-layout-toggler-north-closed::before {
	content: '⏷';
}
body .ui-layout-resizer {
	background-color: #fff;
	overflow: visible !important;
}
body .ui-layout-resizer.ui-draggable-handle {
	background-color: #EEE;
}
/* --- End LayoutToggler ------- */

.ui-fullwidth {
	width: 100%;
}
.ui-fullheight {
	height: 100%;
}