span.synfaces-two-panes-toggler {
	display: inline-block;	
	box-sizing:border-box;	
	float: right;
}


span.synfaces-two-panes-toggler > button {
	display: inline-block;
	margin-left: 2px;
	vertical-align: middle;
	box-sizing: border-box;
	width: 16px;
	padding: 0px;
	height: 15px;
    background: #5872a3;
    border: 1px solid #5872a3;
    margin-left:10px;
    cursor: pointer;
}

span.synfaces-two-panes-toggler > button:hover {
	background:#6685C7!important;
}

span.synfaces-two-panes-toggler > button:active {
	background:#5373B6!important;
}

button.synfaces-two-panes-button-both:before {
	content: "";
	display: inline-block;
	vertical-align: baseline;
	height: 50%;
	width: 100%;
	background-color: white;
	box-sizing: border-box;
}

button.synfaces-two-panes-button-bottom {
	background-color: white !important;
}


/** Pane styling **/
div.synfaces-two-panes {
	background-color:#797979;
	box-sizing:border-box;
}

div.synfaces-two-panes-top {
	margin-bottom:5px;
	box-sizing:border-box;
}

.synfaces-two-panes-content {
	background-color:#fbfbfb;
}

div.synfaces-two-panes-top,
div.synfaces-two-panes-bottom {
	box-shadow:0px 2px 4px rgba(0,0,0,0.3);

}

div.synfaces-two-panes-header {
	background-color: #fff;
	line-height:30px;
	border-top:1px solid #e4e4e4;
	color: #333;
	font-weight:bold;
	padding:0px 10px;
	box-shadow:0px 2px 4px rgba(0,0,0,0.3);
	position:relative;
	z-index:10;
	
}

.synfaces-two-panes-content > .hflex-item-fixed-size {
	z-index:2;
	box-shadow:1px 0px 2px rgba(0,0,0,0.3);
	background-color:#fbfbfb;
	overflow:auto;
}

.synfaces-two-panes-content > .hflex-item-fixed-size table.synfaces-form-grid-table > tbody > tr > td.synfaces-grid-item {
		background-color:transparent;
}

.synfaces-two-panes-content.no-padding .ui-panel, 
.synfaces-two-panes-content.no-padding .ui-panel .ui-panel-content{
	padding:0px;
}

.synfaces-two-panes-content .flex-item-auto-size .ui-tabs-panels {
	overflow:auto;
	height:100%;
}

.synfaces-two-panes-content .flex-item-auto-size .ui-tabs-panels .ui-tabs-panel {
	height:100%;
}


/** Pane layout **/

/* flex containers */
div.synfaces-two-panes,
div.synfaces-two-panes.synfaces-two-panes-expanded-top > div.synfaces-two-panes-top, 
div.synfaces-two-panes.synfaces-two-panes-expanded-both > div.synfaces-two-panes-top,
div.synfaces-two-panes.synfaces-two-panes-expanded-bottom > div.synfaces-two-panes-bottom,
div.synfaces-two-panes.synfaces-two-panes-expanded-both > div.synfaces-two-panes-bottom {
	display: flex; 
	flex-direction: column;	
	box-sizing: border-box;	
	overflow: auto;	
	height: 100%;
}


/* fixed flex item */
div.synfaces-two-panes-header,
div.synfaces-two-panes.synfaces-two-panes-expanded-top > div.synfaces-two-panes-bottom,
div.synfaces-two-panes.synfaces-two-panes-expanded-bottom > div.synfaces-two-panes-top {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: auto !important;
}


/* auto flex item */
div.synfaces-two-panes,
div.synfaces-two-panes-content,
div.synfaces-two-panes.synfaces-two-panes-expanded-top > div.synfaces-two-panes-top, 
div.synfaces-two-panes.synfaces-two-panes-expanded-bottom > div.synfaces-two-panes-bottom {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	overflow: auto;		
	align-content: center;
}


/* hidden when collapsed */
div.synfaces-two-panes.synfaces-two-panes-expanded-top > div.synfaces-two-panes-top > div.synfaces-two-panes-header > span.synfaces-two-panes-collapsed-header,
div.synfaces-two-panes.synfaces-two-panes-expanded-top > div.synfaces-two-panes-bottom > div.synfaces-two-panes-header > span.synfaces-two-panes-header-text-with-facet,
div.synfaces-two-panes.synfaces-two-panes-expanded-top > div.synfaces-two-panes-bottom > div.synfaces-two-panes-content,
div.synfaces-two-panes.synfaces-two-panes-expanded-bottom > div.synfaces-two-panes-bottom > div.synfaces-two-panes-header > span.synfaces-two-panes-collapsed-header,
div.synfaces-two-panes.synfaces-two-panes-expanded-bottom > div.synfaces-two-panes-top > div.synfaces-two-panes-header > span.synfaces-two-panes-header-text-with-facet,
div.synfaces-two-panes.synfaces-two-panes-expanded-bottom > div.synfaces-two-panes-top > div.synfaces-two-panes-content,
div.synfaces-two-panes.synfaces-two-panes-expanded-both > div > div > span.synfaces-two-panes-collapsed-header {
	display: none;
}