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: 76px;
	max-height: 76px;
	margin-bottom: 10px;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 5001;
}
#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-wrapper {
	position: relative;
	padding-left: 67px;
	padding-top: 7px;
}
#header .header-wrapper img {
	height: 60px;
}

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

.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-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, .ClsLogin > .ui-widget-header {
	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;
}
.ClsLogin {
	width: 38.5em;
	background: white;
	border: solid 1px #DDD;
	border-radius: 6px;
	padding: 3em;
	margin-left: calc(60% - 21em);
	box-shadow: 0px 0px 16px 2px #444;
	padding-top: 2em;
	margin-top: 3em;
	transition-property: margin-left;
	transition-duration: 0.5s;
}
.ClsLogin .ui-panel-titlebar .ui-panel-title {
	font-size: 18px;	
}
.ClsLogin .ui-panelgrid-cell > .ClsWidth250 {
	width: 235px;
	margin-right:15px;
}
.ClsFlagOn, .ClsFlagOff {
	margin-left: 2px;
	margin-right: 2px;
}
.ClsFlagOn {
	cursor: default;
}
.ClsFlagOff {
	opacity: 0.5;
	cursor: pointer;
}


.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;
}
.ClsProjComm {
	font-size: 18px;
	font-weight: bold;
	padding: 0px 10px 0px 32px;
    vertical-align: middle;
}
.ClsLogin > .ui-widget-header {
    color: #030303;
}
.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;
}

.ClsDisclaimerBar {
	background: linear-gradient(#FFEEE5, #FFDFCC, #FFD7BF);
	text-align:right;
	padding: 4px 12px;
	width: 100%;
	position: fixed;
	bottom: 0px;
	right: 0px;
}
.ClsDisclaimerBar a {
	color: black;
	text-decoration: none;
}
.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; }

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

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

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

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

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

.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;
}
/*2779AA*/
.ui-error-details {
	margin-top:1em;
	overflow-y: auto;
	max-height: 125px;
	padding: 0.5em;
	box-shadow: 0px 0px 6px grey;
	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;
}

.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;
}
   
.ClsBtnLogin {
	margin-right:15px;
	margin-bottom:3px;
	height: 30px;
	width: 100px;
}

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

/* 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-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-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 ------- */