html, body {
  height: 100%;
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  overflow: hidden;
}



/* This next part is important */
@supports (not selector(::-webkit-scrollbar)) {
  html {
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    scrollbar-color: #FFF;
  }
}


/*
body {
  height: 100vh - 16px;
  padding: 8px;
  background-color: #F6F6F6;
  box-sizing: border-box;
}
*/

/*
.container-fluid {
  padding: 0 0 0 0;
}
*/

/*
.page {
	display: grid;
	grid-template-rows: auto;         // one "row"
	grid-template-columns: 350px 1fr; // sidebar and main page widths
	height: 100vh;
}
*/

.split {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

/*
  overflow-y: auto;
  overflow-x: /*hidden;
*/
}

.content {
  height: 100vh;
  width: auto;
  overflow: auto;
  border: 1px solid #C0C0C0;
  box-shadow: inset 0 1px 2px #e4e4e4;
  background-color: #fff;
}

.gutter {
  background-color: transparent;
  
  background-repeat: no-repeat;
  background-position: 50%;
}

.gutter.gutter-horizontal {
  cursor: col-resize;
  background-image: url('resizableSplitLayout/grips/vertical.png');
}

.gutter.gutter-vertical {
  cursor: row-resize;
  background-image: url('resizableSplitLayout/grips/horizontal.png');
}

.split.split-horizontal, .gutter.gutter-horizontal {
  height: 100%;
  float: left;
}


.sidebar {
  height: 100vh - 8px;
  overflow-y: scroll;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  background-color: #f5f5f5;
  max-width: 100%;    /* prevent horizontal scroll bar in sidepane */
  overflow-x: hidden; /* prevent horizontal scroll bar in sidepane */
}

.sidebar::-webkit-scrollbar {
    height: 12px;
    width: 4px;
    background: #ddd;
}

.sidebar::-webkit-scrollbar-thumb {
    background: #999;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(125, 125, 125, 0.75);
}

.sidebar::-webkit-scrollbar-corner {
    background: #ddd;
}


/*
.contentpane {
  margin: 5px 5px 5px 5px;
  padding: 0 0 0 10px;
}
*/

.sidebarpane {
  margin: 5px 5px 5px 5px;
}

.maincontent {
  height: 100vh - 8px;
  width: auto;
  overflow: auto;
}

.maincontentpane {
  padding: 5px 5px 5px 5px;
  height: auto;
  width: auto;
  overflow: auto;
}

/*
.maincontenttop {
  
}

.maincontentbottom {

}
*/


/* Extra CSS to properly set height of subpanes */
.tabbable { 
  height: calc(100% - 1.75em) !important; /* default is calc(100% - 3em) */
}
.tab-content{ 
  height: 100% !important; 
}
.tab-content>.active { 
  height: 100% !important; 
  padding: 10px 0px 0px 0px !important; /* top right bottom left */
}
.tab-content>.tab-pane {
  height: 100% !important;
  padding: 10px 0px 0px 0px !important; /* top right bottom left */
}

/* Adjust size of tabbed navigation tabs */
.nav > li > a {
    padding: 6px 6px 6px 6px !important; /* top right bottom left */
    font-size: 11px !important;
    font-weight: bold;
}
