html{
  height:100%;
}

.htmlBody{
  height:100%;
  overflow:hidden;
}

.flexTwoWay,
.flexContainer{
  display:flex;
  flex-direction: column;
}

.flexTwoWay,
.flexItem{
  flex: 1 1 auto;
}

.shrinkFlexItem{
  flex: 0 1 auto;
}

.fixedFlexItem{
  flex: 0 0 auto;
}

.minWidthFlexItem{
    flex-basis: 0;
}

.expandFlexToSpace{
    flex-basis:10px;
}

.selTabBody{
  overflow:hidden;
  flex-direction: row;
  flex-basis: 0;
  margin-top:3px;
}

.footer,
.header{
  left:0px;
  width:100%;
  z-index:100;
}

.selTabBodyLhs{
}

.selTabBodyRhs{
    overflow: hidden;
    margin-left: 2px;
}

.selTabBodyRhsTop{
  position:relative;
  top:0px;
  width:100%;
}

.selTabBodyRhsBottom{
  position:relative;
  width:100%;
  padding-top: 2px;
}

.mwtopgrid{
  position:relative;
  left:10px;
  width:calc(100% - 50px);
  height:200px;
}

.guiXml{
  height:10px; /*Make small so that the control will stretch to fit (as shrinking will not work)*/
  flex-direction: row;
}

div.guiProductCaption {
    padding-top: 4px;
    padding-bottom: 4px;
    color: #303030;
    font-size: 180%;
}

.guiXmlLhs{
    margin-right:2px;
    overflow-y:hidden ;
}

.guiXmlRhs{
    width:10%; /*Make small so that the control will stretch to fit (as shrinking will not work)*/
}

.guiButtons{
    position:relative;
}

.guiForm{
    width:100%;
}

div.guiWidgetsContainer{
  flex-basis:50px; /*Make small so that the control will stretch to fit (as shrinking will not work)*/
  height:10px;
  margin-top:4px;
}

.guiGrid{
  position:relative;
  flex: 0 0 auto;
  overflow-x:auto;
  overflow-y: hidden;
}

div.guiBrowser,
div.guiOfe {
    overflow:auto;
    border: 1px solid #D4D4D4;
}

/*div.guiGrid,
div.guiBrowser,
div.guiOfe {
    margin: 0px 2px;
} */

div.guiOfe {
    padding: 10px;
}

.guiBrowser{
  min-height:50px;
  padding: 2px;
}