.light-md {
	display:flex;
	flex:1;
	flex-direction:row;
	overflow:auto;
}

.light-md > .master,
 .light-md > .master-side-bar{
	display:flex;
	flex-direction:column;
	box-shadow:2px 0px 4px rgba(0,0,0,0.3);
	position:relative;
	/* z-index:6; */
	overflow:auto;
	z-index:8;
	flex:3;
}

.light-md > .master-no-position {
	display:flex;
	flex-direction:column;
	box-shadow:2px 0px 4px rgba(0,0,0,0.3);
	overflow:auto;
	z-index:8;
	flex:3;
}

.light-md > .master-side-bar{
	flex: 2;
}

.light-md > .details,
.light-md > .details-panel {
	display:flex;
	flex-direction:column;
	position:relative;
	z-index:7;
	background-color: #F0F1F5;
	overflow:auto;
}

.light-md > .details-no-position {
	display:flex;
	flex-direction:column;
	z-index:7;
	background-color: #F5F7F8;
	overflow:auto;
	flex:3;
}

.light-md > .details{
	flex:9;
}
.light-md > .details-panel{
	flex: 10;
}



/*this is for multiple panels: use this for ur details container instead*/

.light-md > .multi-panel-details {
	display:flex;
	flex-direction:row;
	flex:9;
	overflow:auto;
}

.light-md > .multi-panel-details > * {
	margin-left:10px;
}

.light-md > .multi-panel-details > *:first-child {
	margin-left:0px;
}

.light-md > .multi-panel-details > .flex1 {
	display:flex;
	flex:1;
	flex-direction:column;
}

.light-md > .multi-panel-details > .flex2 {
	display:flex;
	flex:2;
	flex-direction:column;
}

.light-md > .multi-panel-details > .flex3 {
	display:flex;
	flex:3;
	flex-direction:column;
}

.light-md > .multi-panel-details > .flex4 {
	display:flex;
	flex:4;
	flex-direction:column;
}