.side-panel .ui-widget-header .ui-layout-unit-header-icon > .ui-icon::before {
	color:#607db8 !important;
}

.summary-main-and-side-layout {
	width: 100%;
	height: 100%
}

.summary-main-and-side-layout > .ui-layout-unit > .ui-layout-unit-content {
	display : flex;
}

.summary-main-panel > .ui-layout-unit-content > form {
	 flex:1
}

.side-panel div.ui-panel-content.ui-widget-content {
	background-color: transparent;
	padding:0px;
}

.full-width-panel{
	display:flex;
	flex:1;
	flex-direction:row;
	height:100%;
	overflow:auto;
}

.full-width-panel> .summary-line-item-panel {
	display:flex;
	flex:2;
	flex-direction:column;
	box-shadow:1px 2px 4px rgba(0,0,0,0.3);
	z-index:8;
	position:relative;
	box-sizing:border-box;
	padding:10px;
	background-color:transparent;
	overflow:auto;
	border: 1px solid #e4e4e4;
}

.full-width-panel > .detail-master-side-panel {
	display:flex;
	flex:1;
	flex-direction:column;
	z-index:7;
	position:relative;
	box-sizing:border-box;
	width:100%;
	background-color:transparent;
	overflow:auto;
}
.full-width-panel > .detail-master-side-panel > form,
.full-width-panel> .summary-line-item-panel > form {
	height:100%;
	width:100%;
}

.side-panel {
	display:flex;
	flex-direction:column;
}

.side-panel > .ui-panel-content {
	flex:1; 
	display:flex;
	flex-direction:column;
	overflow:auto;
}


.side-panel .synfaces-button-bar.synfaces-top-buttons {
	padding: 0px;
	box-shadow: none;
	background-color:transparent;
}

.side-panel .ui-tabs > .ui-tabs-panels {
	background-color:transparent;
}

.side-panel .ui-layout-unit-header,
.side-panel .ui-panel-titlebar{
	background-color:#fff;
	color:#FF9966;
	border: none;
	border-radius: 0px;
	padding:5px 10px;
	font-size: 1.1em;
	height: auto;
	border-bottom:1px solid #e4e4e4;
	display: flow-root;
}

.side-panel .ui-panel-titlebar,
.side-panel .ui-layout-unit-header-title {
	line-height: 2em;
}
.side-panel .ui-layout-unit-header-title:empty,
.side-panel .ui-panel-titlebar:empty {
	display:none;
}

.side-panel-status {
	display:inline-block;
}

.side-panel-status .status-cell {
 padding: 2px 20px;
 display: inline-block;
 color:#505050;
 background-color:#ffffff;
 font-size:0.9em;
 margin-left:20px;
}

.side-panel .ui-layout-unit-content > form {
	height:100%;
}


.status-cell:empty {
    display:none;
}

.side-panel .ui-datatable,
.summary-line-item-panel > form .ui-datatable {
	width:100%
}

.detail-master-side-panel > form .side-panel {
	all:unset;
	height: 100%;
	display: flex;
	flex-direction: column;
	border: 1px solid #efefef;
	box-sizing: border-box;
}

.detail-master-side-panel > form .side-panel .ui-panel-content,
.side-panel .ui-panel-content .side-panel-content {
	all:unset;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.side-panel .ui-layout-unit-content > form {
	display:flex;
	overflow:auto
}

.side-panel .ui-layout-unit-content > form > .side-panel-content {
	height:100%;
	overflow:auto;
}


/*used for summary pages - uses a different set of code because ui:layout*/

.summary-layout {
	display:flex;
	flex:1;
	flex-direction:row;
	height:100%;
}

.summary-layout .summary-main-panel,
.summary-layout .summary-main-panel .ui-layout-unit-content {
	height:100% !important;
	overflow: auto;
}

.summary-layout .summary-main-panel {
	z-index:1 !important;
	box-sizing:border-box !important;
	box-shadow:2px 0px 4px rgba(0,0,0,0.3);
	width:auto !important;
	padding:10px;
	border-radius: 0px;
	border: none;
}

.summary-main-panel > .ui-layout-unit-content > form {
	 flex:1;
}

.summary-main-panel .summary-main-data-table {
	width:100%;
}

.summary-layout .side-panel,
.summary-layout .summary-main-panel .ui-layout-unit-content {
	padding:0px;
	border-radius: 0px;
	flex:1 !important;
	display:flex !important;
	height:100% !important;
	box-sizing:border-box;
}

.summary-layout .side-panel .ui-panel-content {
	all:unset;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.summary-layout .side-panel .side-panel-content,
.side-panel .ui-panel-content .side-panel-content {
	padding:10px;
	height: 100%;
	box-sizing: border-box;
	width: 100%;
	background-color: #fcfcfc;
	overflow:auto;
}

.summary-layout > .ui-layout-unit > .ui-layout-unit-content {
	display:flex;
	width: 100%;
	padding:0px;
	height:100% !important;
}

.side-panel-content table.synfaces-form-grid-table{
	width: 100%;
	border: none;
	background: none;
}

.side-panel-content td.synfaces-grid-item{
	border:none; 
	background: none !important; 
	padding: 5px 0px !important; 
	height: 35px; 
	vertical-align: top
}

.side-panel div.ui-layout-unit-header.ui-widget-header.ui-corner-all > a.ui-layout-unit-header-icon.ui-state-default.ui-corner-all {
	background-color:transparent;
	border:none;
}

.side-panel div.ui-layout-unit-header.ui-widget-header.ui-corner-all > a.ui-layout-unit-header-icon.ui-state-default.ui-corner-all span:before {
	color:#ffffff;
	font-size:20px;
}


.summary-layout .ui-layout-resizer-closed.ui-layout-resizer.ui-layout-resizer-east {
	border-radius:0px;
	border:none;
	height:100% !important;
	z-index:0 !important;
	display: block !important;
}

.summary-layout .ui-layout-resizer-east-closed .ui-layout-toggler-closed {
	background-color:#f1f9ff;
	height:100% !important;
	width:100% !important;
	box-shadow: inset 2px 0px 2px rgba(0,0,0,0.3);
}

.ui-layout-resizer-east-closed .ui-layout-toggler-closed span.content-closed a {
	background-color:transparent;
	height:100% !important;
	overflow:hidden;
	border:none;
}


div.ui-layout-container.synface-layout-no-background-and-border
> div.ui-layout-unit.ui-widget.ui-widget-content.ui-layout-center.ui-layout-pane-center {
	background: none;
	border: none;
}

div.ui-layout-container.synface-layout-no-background-and-border
> div.ui-layout-unit.ui-widget.ui-widget-content.ui-layout-center.ui-layout-pane-center
> div.ui-layout-unit-content.ui-widget-content {
	background: none;
}

div.ui-layout-container.synface-layout-no-background-and-border
> div.ui-layout-unit.ui-widget.ui-widget-content.ui-layout-east.ui-layout-pane-east {
	background: none;
	border: none;
}

div.ui-layout-container.synface-layout-no-background-and-border
> div.ui-layout-unit.ui-widget.ui-widget-content.ui-layout-east.ui-layout-pane-east
> div.ui-layout-unit-content.ui-widget-content {
	height: initial !important;
}
/*
div.ui-layout-unit-header.ui-widget-header.ui-corner-all
> a.ui-layout-unit-header-icon.ui-state-default.ui-corner-all {
	margin-top: -17px;
}
*/
div.ui-layout-unit-header.ui-widget-header.ui-corner-all
> a.ui-layout-unit-header-icon.ui-state-default.ui-corner-all
> span.ui-icon:before {
	font-size: 20px;
	line-height: 32px;
}

div.ui-layout-unit-header.ui-widget-header.ui-corner-all
> a.ui-layout-unit-header-icon.ui-state-default.ui-corner-all
> span.ui-icon {
	margin-left: 2px;
}

a.ui-layout-unit-header-icon.ui-state-default.ui-corner-all
> span.ui-icon-triangle-1-e:before{
	content: "\f101";
	font-size:20px
}

a.ui-layout-unit-expand-icon.ui-state-default.ui-corner-all
> span.ui-icon-arrow-4-diag:before{
	content: "\f100";
	font-size:20px
}

/*add a default content for empty panels*/
.summary-layout .side-panel .side-panel-content:empty, 
.side-panel .ui-panel-content .side-panel-content:empty {
	background-image:url("/TH6/javax.faces.resource/synfaces/images/SelectARow.png");
	background-repeat: no-repeat;
    background-position: 50% 40%; 
	
}
/*------------------------------------------------------  
SUMMARY TABVIEW
-------------------------------------------------------*/

.ui-tabs.summary-tabs-container {	
	flex-direction:row;
}

.ui-tabs.summary-tabs-container .ui-tabs-panels .ui-tabs-panel {
	padding: 0;
} 

.ui-tabs.ui-tabs-top.summary-tabs-container > .ui-tabs-nav{
	display: flex; 
	flex-direction: column;
	padding: 0;
	z-index: 9;
	background-color: #6B6B6B;
}

.ui-tabs.ui-tabs-top.summary-tabs-container > .ui-tabs-nav li.ui-state-hover{
	background-color: #5e5e5e;
}
.ui-tabs.ui-tabs-top.summary-tabs-container > .ui-tabs-nav > li.ui-state-default{
	padding: 0.5em 0.2em;
	margin: 0;
	top: 0;
	position: relative;
	cursor: pointer;
}
.ui-tabs.ui-tabs-top.summary-tabs-container > .ui-tabs-nav li.ui-state-default a{
	color: #ffff;
}
.summary-tabs-container > .ui-tabs-nav li.ui-state-default a::before{
	content: "\f15c";
	font-family: var(--fontawesome);
	padding-right: 15px;
	font-size: 16px;
}
.ui-tabs.ui-tabs-top.summary-tabs-container > .ui-tabs-nav li.ui-tabs-selected::after{
	content: '';
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #00CCCC;
	position: absolute;
	right: -10px;
	top: 13px;
}

.ui-tabs.ui-tabs-top.summary-tabs-container > .ui-tabs-nav li.ui-state-default a:hover {
	color: #ffff;
	
}
.ui-tabs.ui-tabs-top.summary-tabs-container > .ui-tabs-nav > li.ui-tabs-selected {
	border-bottom: 0;
	background-color:#00CCCC;

}
.ui-tabs.ui-tabs-top.summary-tabs-container > .ui-tabs-nav > li.ui-tabs-selected a:hover {
	color:#cccccc;	
}

.summary-tabs-container .summary-layout .summary-main-panel{
	padding: 0;
}
/* shift button on header table to the right */
.summary-tabs-container .summary-table .synfaces-button-bar .synfaces-float-left,
.summary-tabs-container th .synfaces-button-bar .synfaces-float-left,
.summary-tabs-container div.synfaces-button-bar span.synfaces-float-left{
	margin-left: 20px;
}

/* FREEZE HEADER AND FOOTER IN SUMMARY SCREEN */
/* /* #centerPane > .ui-layout-unit-content:has(.e23) {
	overflow: hidden;
} */ */
.e23 .e22-summary-datatable {
	position: relative;
}
.e23 .e22-summary-datatable > .ui-datatable-header {
	position: sticky;
    top: 0;
}
.e23 .e22-summary-datatable > .ui-paginator-bottom {
	position: sticky;
    bottom: 0;
}
.e23 .e22-summary-main-panel > .e22-summary-form > .e22-summary-datatable > .ui-datatable-tablewrapper {
/* 	min-height: calc(100vh - 110px); */
	position: relative;
}
.e23 .e22-summary-datatable > .ui-datatable-tablewrapper {
	max-height: calc(100vh - 110px);
	width: 100%;
	margin-top: -1px;
}
.e23 .synfaces-dashpane-panel .ui-datatable-tablewrapper {
	overflow: unset;
}
/* fix not affect in dashpanel */
.e23 .synfaces-dashpane-panel .e22-summary-datatable > .ui-datatable-tablewrapper {
	max-height: none;
}
/* .e23 .e22-summary-datatable:has(.ui-datatable-header) > .ui-datatable-tablewrapper {
	max-height: calc(100vh - 110px);
} */
.e23 .e22-summary-datatable > .ui-datatable-tablewrapper thead {
	position: sticky;
    top: 0px;
    z-index: 15;
}
.e23 .e22-summary-container .e22-vertical-tabview.ui-tabs > .ui-tabs-panels > .ui-tabs-panel {
	overflow: hidden;
}