html, body { position: relative; height: 100%; width: 100%; margin: 0; /*min-width: 700px;*/ }
input:focus, textarea:focus {outline: none;}

.Header  { position: fixed; top: 0px; left: 0px; height: 60px; margin: 0px; padding: 0px; 
           background: #7BB; width: 100%; border: 0; border-bottom-style: solid; } 
    .IMAGE   { position: absolute; left: 5px; top: 5px; float: left; padding: 0px; 
           border-style: solid; border: 1px solid #000; height: 45px;}
    .TITLE   { position: absolute; left: 160px; top: 5px; font-weight: bold; font-size: 18px;}
    .TIME    { position: absolute; left: 160px; bottom: 5px; }
    .VISITS  { position: absolute; left: 260px; bottom: 5px; }
    .PAGENAME {visibility: hidden;}
    .MENU    { position: absolute; right: 30px; top: 0px; padding: 0px; 
               width: -moz-fit-content; width: fit-content;
               overflow: hidden; border: 0; background-color: #7BB; }
    .item    { background-color: inherit; float: left; outline: none; border: 0;
           cursor: pointer; padding: 5px; transition: 0.3s; font-size: 18px; }
    .itemBtn { margin: 0px; padding: 0px; }
    .item:hover { background-color: #1FF;  }

.Center  { display: flex; position: absolute; top: 60px; width: 100%; height:calc(100% - 90px);
           /*border: 1px solid #000; border-style: none; /*overflow-y: scroll;*/  }

    .LeftPanel  { position: relative; float: left; width: calc(30% - 5px);
        margin: 0px; height: 100%; /*calc(100% - 1px);  /*border: 1px solid red;*/ }

        .SelectList { position: relative; float: top; width: calc(100%);
            height: 100%; margin: 0px;/*border: 1px solid #000;*/ }

            .SearchBox { position: relative; float: top;  width: 100%; 
                height: 30%; margin: 0px; 
                /*overflow-y: scroll; border: 1px solid #000;*/ }
                
                .SearchHeading {position: relative; float: top;  width: calc(100% - 9x);
                    height: 20px; margin-left: 1px; padding: 3px; 
                    border-left: 1px solid #000; border-right: 1px solid #000;
                    border-top: 1px solid #000; /*border-right: 1px solid #000;*/ }
                
                .SearchResults {position: relative; float: top;  width: calc(100% - 3px); 
                    height: calc(100% - 29px); margin-left: 1px; 
                    overflow-y: scroll; border: 1px solid #000;}
            
            .resizer[data-direction='vertical'] 
                 { position: relative; float: top; width: 100%; margin-left: 0px; cursor: ns-resize;
                   height: 5px;  background-color: #7BB; }

            .IndexList { position: relative; float: top; width: calc(100% - 3px); margin-left: 1px; 
                height: calc(70% - 5px); overflow-y: scroll; border: 1px solid #000; }

                .IndexItem {  left: 2px; width: -moz-fit-content; width: fit-content;
                    /*height: fit-content;*/ margin: 5px; background-color: #cad4c48e; } 

                .IndexItem:hover { background-color: #bfd3b376; }

                .IndexItemSelected { left: 2px; width: 96%; height: 60px; margin: 3px; 
                    background-color: #909c8ac7; }

        .LogBox { position: absolute; bottom: 1px; left : 0px; width: calc(100% - 3px);
              margin: 1px; border: 1px solid #000; overflow-y: scroll; font-size: 12px; 
              background-color: white; } 
              
        .EditBox { position: absolute; bottom: 1px; left : 0px; width: calc(100% - 4px);
              margin: 1px; border: 1px solid #000; overflow-y: scroll; font-size: 12px; 
              background-color: white; }  

            .Sshort  { height: calc(100% - 172px); } 
            .Stall   { height: calc(100% - 4px); } 
            .Lhide   { height: 0px; border: none;} 
            .Lshow   { height: 160px; border: 1px solid #000;} 
    
    .resizer[data-direction='horizontal']
        { position: relative; float: left; width: 5px; margin: 0px; cursor: ew-resize;
          height:calc(100% - 1px);  background-color: #7BB; }

    .RightPanel { flex: 1; position: relative; float: right; width: calc(70% - 10px);
        margin: 0px; height:calc(100% - 6px); /*border: 1px solid red;*/ }

        .ItemDescr {position: relative; float: top; width: calc(100% - 3px);  height: calc(20% - 4px);
                  overflow-y: scroll; border: 1px solid #000; margin: 0px; }

        .ItemBody {position: relative; float: top; width: calc(100% - 3px); height: calc(80% - 1px);
                  overflow-y: scroll; border: 1px solid #000; margin: 0px; }

.Footer { position: fixed; bottom: 0px; left: 0px; height: 30px; margin: 0px; padding: 1px;     
    background: #7BB; width: 100%; border: 0; border-top-style: solid; }

    .FOOTERMENU    { position: absolute; left: 30px; bottom: 0px; padding: 0px; 
        width: -moz-fit-content; width: fit-content;
        overflow: hidden; border: 0; background-color: #7BB; }

/* ------- IndexList tree structure -----------------------------------*/
ul, #IndexList { list-style-type: none; }
#IndexList {  margin: 5; padding: 0; }
.caret { cursor: pointer; 
         -webkit-user-select: none; /* Safari 3.1+ */
         -moz-user-select: none; /* Firefox 2+ */ 
         -ms-user-select: none; /* IE 10+ */
         user-select: none; }

.caret::before { content: "\25B6"; color: black; display: inline-block;
         margin-right: 6px; }
.caret-down::before { -ms-transform: rotate(90deg); /* IE 9 */
                      -webkit-transform: rotate(90deg); /* Safari */ 
                      transform: rotate(90deg); }
.nested { display: none; }
.active { display: block; }

.cr { position: fixed; bottom: 10px; right: 40px; width: 400px; font-weight: bold; font-size: 14px; }

/* ---------------- template objects ---------------------------------*/

.CodeBlock  { position: relative; float: top; width: calc(100% - 120px); 
    margin-left: 60px; /*height: fit-content; /*500px;*/ /*border: 1px solid red;*/ }

    .CodeBlockHdr { position: relative; float: top; width: 100%;
        margin: 0px; padding: 0px; height: 25px;}

        .CodeBlockBtn {position: relative; float: right; 
            /* height: fit-content; */ width: -moz-fit-content; width: fit-content; }

    .CodeBlockText {position: relative; float: top; resize: none;
        border: 1px solid black; padding: 10px;;
        overflow-y: scroll; width: 100%; /* height: fit-content;*/ /*calc(100% - 25px);*/ }