:root{
    --font-size:12px;
    --bg:#111;
    --navbg:#181818;
    --border:#333;
    --hover:#232a36;
    --text:#E0E0E0;
}
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}
html,
body{
    width:100%;
    height:100%;
  overflow: hidden;
    background:var(--bg);
    color:var(--text);
    font-family:monospace;
    font-size:var(--font-size);
}

body{
    display:flex;
    flex-direction:column;
}
/* =========================
   MAIN LAYOUT
========================= */
#main{
    width:100%;
    height:100vh;
    overflow:hidden;
    display: flex;
}
#main.nav-collapsed{
    --nav-width:60px;
}
/* =========================
   NAVIGATION
========================= */
.nav-column,
#navA{
    overflow-y:auto;
    flex: 0 0 240px;
    background:#111111 !important;
    color:#E0E0E0;
    border-right:1px solid #333;
    padding:6px;
          height: 100%;
    overflow-y: auto;
    display: block;
    box-sizing: border-box;
}

.nav-controls{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:14px;
}
select{
    width:100%;
    padding:0.2em;
    font:inherit;
}
/* =========================
   NAV TREE
========================= */
ul{
    list-style:none;
    padding:1px;
}
li{
    margin:1px;
    user-select:none;
}
.toggle,
.file-link{
    display:block;
    border-radius:2px;
    cursor:pointer;
}
.toggle{
    width:100%;
    padding:2px;
    background:none;
    border:none;
    color:inherit;
    text-align:left;
}
.file-link{
    padding:2px;
    word-break:break-word;
}
.toggle:hover,
.file-link:hover{
    background:var(--hover);
}
.file-link:hover{
    color:#66CCFF;
}
.nested{
    display:none !important;
    margin-left:1em;
    padding-left:1px;
    border-left:1px solid #ccc;
}
.nested.open{
    display:block !important;
}
.section-title{
    font-weight:bold;
    padding:1px;
}
.spacer{
    height:0.5em;
}
.spacer1{
    margin:10px 0;
    border-bottom:1px solid #FFF;
}
/* =========================
   FRAMES
========================= */
iframe{
    display:block;
    width:100%;
    height:100%;
    border:none;
    padding-bottom:30px;
}
.iframe-title{
    padding:8px 12px;
    background:#141414;
    color:var(--text);
    font-size:14px;
    font-weight:bold;
    border-bottom:1px solid var(--border);
    height:32px;
	color:#E0E0E0 !important;
    padding:10px;
    margin:0;
    padding:0 10px;
    overflow:hidden;
    align-items:center;
    display:flex;
}
/* =========================================
   TABLE
========================================= */
#layouttable {
	width:100%;
    height:100vh;
	padding: 0px;
	vertical-align:top;
	border-collapse:collapse;
    border-spacing:0;
    overflow:hidden;
    min-width:0;
    table-layout: fixed;
    border-collapse: collapse;
}
#layouttableframes1 {
width:240px;
}
#layouttable tr td{
    vertical-align:top;
}

#layouttable tr,
#layouttable td {
    height: 100%;
    vertical-align: top;
}
/* =========================================
   LAYOUT BASE
========================================= */
#layouttable{
    width: 100%;
    height: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

#layoutRow td{
    vertical-align: top;
    height: 100%;
}
.dummy {width:2px;
		color:#000000;
		padding:0px;
		margin:0px:
		
}
.table-wrap {
  overflow: hidden;
  width: calc(100% - 10px);
}

table {
  margin-right: -10px;
}
/* =========================================
   4 PANEL (DEFAULT)
========================================= */
body.four-panel .left-item,
body.four-panel .center-col2,
body.four-panel .center-col,
body.four-panel .right-item{
    display: table-cell;
}
body.four-panel .dummy {width:2px;
		color:#000000;
			padding:0px;
		margin:0px:
}
/* =========================================
   3 PANEL
========================================= */
body.three-panel .center-col{
    display: none;
}
body.three-panel .dummy {width:2px;
		color:#000000:
}
body.three-panel .center-item2{
    display: none;
}
/* =========================================
   2 PANEL
========================================= */
body.two-panel .center-col,
body.two-panel .center-col2{
    display: none;
}
body.two-panel .dummy {width:2px;
		color:#000000;
}
body.two-panel .center-item{
    display: none;
}
body.two-panel .center-item2{
    display: none;
}
/* =========================================
   1 PANEL
========================================= */

body.one-panel #layouttable {
    width: 100% !important;
    height: 100vh !important;
    table-layout: auto;
}

body.one-panel .center-col2,
body.one-panel .center-col,
body.one-panel .right-item,
body.one-panel .dummy {
    display: none !important;
}

/* SINGLE REMAINING CELL */
body.one-panel .left-item {
    width: 100% !important;
    height: 100vh !important;
    padding: 0;
}

/* TITLE */
body.one-panel #titleB {
    width: 100% !important;
    height: 32px !important;
}

/* IFRAME */
body.one-panel #frameB {
    width: 100% !important;

    /* THIS IS THE IMPORTANT FIX */
    height: 100vh !important;

    display: block;
    border: none;
}
body.one-panel .center-item3{
    display: none !important;
}
body.one-panel .center-item{
    display: none !important;
}
body.one-panel .center-item2{
    display: none !important;
}