html,
body {
  height: 100%;
  width: 100%;
  font-family: 'Calibri', 'Segoe UI', 'Arial', 'Lucida Sans', Arial, sans-serif;
  padding: 0;
  margin: 0;
  overflow: auto;
}

.page-container {
  margin: 0px;
}


/* horizontal panel*/

.panel-container {
  display: flex;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;
  height: 92%;
  /* flex-grow: 1; */
  
  /* avoid browser level touch actions */
  xtouch-action: none;
}

.panel-left {
  flex: 0 0 auto;
  /* only manually resize */
  padding: 2px;
  width: 30%;
  min-width: 0px;
  white-space: nowrap;
  background: #838383;
  color: red;
}


.panel-right {
  flex: 1 1 auto;
  /* resizable */
  padding: 0px;
  width: 100%;
  height: 100%;

  background: #eee;
  overflow-x: hidden;
  overflow-y: hidden;
}


/* vertical panel */

.panel-container-vertical {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid silver;
  background: yellow;
  overflow: hidden;
}

.panel-tree {
  flex: 0 0 auto;
  /* only manually resize */
  padding: 10px;
  height: 70%;
  width: 100%;
  min-height: 200px;
  white-space: nowrap;
  background: white;
  color: black;
}

.splitter {
  flex: 0 0 auto;
  width: 8px;  
  background: url(../images/vsizegrip.png) center center no-repeat #D9D9D9;
  min-height: 200px;
  /* D9D9D9  A6A6A6  cursor: col-resize;   */
}

.splitter-horizontal {
  flex: 0 0 auto;
  height: 8px;
  background: url(../images/hsizegrip.png) center center no-repeat #D9D9D9;
  /* D9D9D9  A6A6A6  cursor: row-resize;  */
}

.panel-properties {
  flex: 1 1 auto;
  /* resizable */
  width: 100%;
  height: 30%;
  min-height: 0px;
  padding: 1px;
  /* min-height: 300px; */
  background: white; /* #F1F1F1 */
}

.head {
  display: block;
  padding: 5px;
  vertical-align: top;
  color: #193586;
  /* flex-grow: 1;  */
  height: 6%;
  font-size: 1.6em;
  font-weight: bold;
}

