.portal-container {
    display: none; /* hide until the port page has been initialized in order to prevent flickering */
}
.portal-container .portal-container-body {

}
.portal-container .portal-container-body .available-portlets{
	margin-top: 10px;
}
.portal-container .portal-container-body .available-portlets .grid-stack-item {
    cursor: pointer;
}

.portal-container .grid-container .grid-stack .grid-stack-item[conf-mode-on] {
    cursor: pointer;    
}
.portal-container .grid-container .grid-stack .grid-stack-item[conf-mode-on]:hover {
    cursor: pointer;    
/*     outline: 1px solid #2B3D54; */
/*     outline-offset: -10px; */
	background-color: #EBEDEF;
}
.portal-container .grid-container .grid-stack .grid-stack-item[conf-mode-on]:drag {
	background-color: #EBEDEF;
}

.portal-container .grid-container .grid-stack .grid-stack-item[conf-mode-on] .grid-stack-item-content{
    pointer-events: none;
}

.portal-container .grid-container .grid-stack .grid-stack-item[conf-mode-on] .portletConfiguratorForm{
    pointer-events: initial;        
}

.portal-container .portal-container-body .grid-container {
    /* remove the padding to expand to the same grid-guide's width (100%) */
    padding-left: 0;
    padding-right: 0;
}
.portal-container .portal-container-body .grid-stack {
    min-height: 200px; /* the same height as the grid's cell height*/
}

.grid-stack .grid-stack-item.portlet{
	margin-bottom: 0px ! important;
}

.grid-stack-item-draggable-handle {
    cursor: pointer;
}
.grid-stack .grid-stack-item.panel, .grid-stack .grid-stack-item.portlet {
    display: flex;
    flex-direction: column;
    padding: 10px !important;
    background-color: transparent;
}
.grid-stack .grid-stack-item.panel .panel-heading, .grid-stack .grid-stack-item.portlet .portlet-title {
    display: inherit;
    margin: 0;
    padding-right: 0;
}
.grid-stack .grid-stack-item.panel .panel-heading, .grid-stack .grid-stack-item.portlet .portlet-title-edit {
/* 	padding-left: 0; */
	margin-left: -8px;
}

.grid-stack .grid-stack-item.panel .panel-body, .grid-stack .grid-stack-item.portlet .portlet-body {
    flex: 1;
    max-height: 100%;
    overflow-y: auto;
}
.grid-stack .grid-stack-item.panel .panel-footer, .grid-stack .grid-stack-item.portlet .panel-footer {
    height:  40px;
}
.portal-container .portal-container-body .grid-stack .grid-stack-item .screenlet:first-child {

}

/*
  The original style has the background image only for ui-resizable-se and ui-resizable-sw.
  We need to create our own background image for ui-resizable-w and ui-resizable-e.

  @see https://github.com/gridstack/gridstack.js/blob/master/src/gridstack.scss#L74-L76
 */
.grid-stack>.grid-stack-item>.ui-resizable-w, .grid-stack>.grid-stack-item>.ui-resizable-e {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
    background-repeat: no-repeat;
    background-position: center;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.grid-guide {
    position: absolute;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    background-color: transparent;
    width: 100%;
}
.grid-guide .grid-guide-row {
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.grid-guide .grid-guide-row .grid-guide-cell {
    flex: 1;
    border: 1px dashed #d3d3d3;
    box-sizing: border-box;
    margin: 10px !important;
}

.grid-guide .grid-guide-row .grid-guide-cell:nth-child(n+2) {
    margin-left: -1px;
}

.move-portlet-button{
	margin-left: 5px;
	margin-right: 5px;
}

.portlet-title-edit .config-portlet-button, 
.portlet-title-edit .remove-portlet-button, 
.portlet-title-edit .move-portlet-button,
.portlet-title-edit .lock-portlet-button
{
	position: absolute !important;
	cursor: pointer;
	font-size: 18px !important;
	color: #2B3D54 ! important;
	top: -5px !important;
}

.grid-stack .grid-stack-placeholder>.placeholder-content{
	border: 2px dashed #2B3D54;
}

.available-portlets .move-portlet-button{
	color: #AAB1BA;
}


.portlet-heading{
	position: absolute;
	width: 100%;
	height: 40px;
	display:none;
	z-index: 100000;
}
.portal-container .grid-container .grid-stack .grid-stack-item[conf-mode-on]:hover .portlet-heading {
	display: block;
}
.portlet-title-edit .move-portlet-button{
	left: 0px	
}
.portlet-title-edit .lock-portlet-button{
	right: 80px;

}
.portlet-title-edit .lock-portlet-button.ic-password-open,
.portlet-title-edit .lock-portlet-button.ic-password{
	font-size: 24px ! important;
	top: -10px !important;
	font-weight: 700 !important;
}
.portlet-title-edit .config-portlet-button{
	right: 40px	
}
.portlet-title-edit .remove-portlet-button{
	right: 5px
}
.grid-stack .grid-stack-item .panel-body-wrapper{
	height: calc(100% - 10px);
	background-color: white;
}
.grid-stack .panel-body-wrapper.custom-height{
	overflow: auto;
}
.grid-stack .grid-stack-item .lock-img {
	position:absolute;
	top: 40px;
	right: calc(50% - 40px);
	font-size: 80px;
	font-weight: 700 !important;
}
.grid-stack .grid-stack-item[gs-locked=true]{
	opacity: 0.75;
	background-color: #959ea9;
}
.grid-stack .grid-stack-item[gs-locked=true] .remove-portlet-button,
.grid-stack .grid-stack-item[gs-locked=true] .config-portlet-button,
.grid-stack .grid-stack-item[gs-locked=true] .move-portlet-button{
	display: none;
}

#list-portal-portlet-accordion .list-group-item.grid-stack-item-content{
	display: grid;
	grid-template-columns: 30px auto 30px;
	grid-template-rows: 1fr;
	grid-column-gap: 5px;
	grid-row-gap: 0px;
}

#list-portal-portlet-accordion .list-group-item.grid-stack-item-content .move-portlet-button {
	padding: 0;
	margin: 0;
	grid-area: 1 / 1 / 2 / 2;
	align-self: center;
	justify-self: flex-start;
	font-size: 24px;
}
#list-portal-portlet-accordion .list-group-item.grid-stack-item-content .add-portlet-title {
	grid-area: 1 / 2 / 2 / 3;
	align-self: center;
	justify-self: flex-start;
}
#list-portal-portlet-accordion .list-group-item.grid-stack-item-content .add-portlet-button {
	grid-area: 1 / 3 / 2 / 4;
	align-self: center;
	justify-self: flex-end;
}

#list-portal-portlet-accordion .list-group-item.grid-stack-item-content:hover{
	border: 2px solid #2B3D54;
	cursor : move;
}

#list-portal-portlet-accordion .list-group-item.grid-stack-item-content .add-portlet-button.ic-add-bold{
	padding: 0 !important;
	color: #eff3f8;
}
#list-portal-portlet-accordion .list-group-item.grid-stack-item-content .add-portlet-button{
	color: #eff3f8;
}
#list-portal-portlet-accordion .list-group-item.grid-stack-item-content .add-portlet-button:hover{
	background-color: #959ea9;
	cursor : pointer;
}
#list-portal-portlet-accordion .list-group-item.grid-stack-item-content:hover .add-portlet-button{	
	color: #2B3D54;
	
}


.grid-container .grid-stack-item-content .portlet-title .caption.pull-right{
	margin-right: 10px;
}

/* quickfix portlet iframe */
[ofbiz-portal-portlet-id="GENERIC_IFRAME_DASH"] .grid-stack-item-content{
	overflow: initial !important;
}
[ofbiz-portal-portlet-id="GENERIC_IFRAME_DASH"] .grid-stack-item-content .portlet.box, .grid-stack-item-content .portlet.box .portlet-body{
	overflow: visible;
	height: 100% !important;
}