body {
   margin: 0px;
   padding: 0px;
   overflow: hidden;
}
.body {
   display: flex;
   height: 100vh;
   width: 100vw;
}
.side {
   height: 100%;
   width: 90px;
   background: #E4E4E4;
   border-right: 1px solid grey;
   padding-right: 2px;
}
.container {
   width: 100%;
   height: 100%;
   display: flex;
}
.left {
   flex: 0 0 400px;
   padding-right: 0.5em;
   font-family: Roboto, Helvetica, Arial, "Segoe UI Symbol", sans-serif, sans;
   width: 400px;
   overflow-y: auto;
}
.right {
   height: 100%;
   flex: 2;
   overflow: auto;
}
.draggable {
   background: grey;
}

.handle {
   transition: all ease-in 0.1s;
   z-index: 999;
   background: aliceblue;
   border-left: 1px dotted;
   width: 10px;
}
.handle-inner {
   width: 10px;
   margin-left: -5px;
   height: 100%;
}
.frame {
   margin-left: 20px;
   width: calc(100% - 1em);
   height: calc(100% - 4em);
   border-left: solid 1px #C4C4C4;
   overflow: hidden;
}
div.nav {
   padding-top: .4em;
   padding-left: 0.625em;
}
div.nav a {
   display: block;
   width: calc(100% + .15em);
   height: 6em;
   margin-bottom: 0;
   cursor: pointer;
   -webkit-border-top-left-radius: 0.5em;
   -moz-border-radius-topleft: 0.5em;
   border-top-left-radius: 0.5em;
   -webkit-border-bottom-left-radius: 0.5em;
   -moz-border-radius-bottomleft: 0.5em;
   border-bottom-left-radius: 0.5em;
}
div.nav a.active {
   background-color: #ffffff;
   border-left-width: 0.1em;
   border-left-style: solid;
   border-left-color: #AAA7A7;
   border-top-width: 0.1em;
   border-top-style: solid;
   border-top-color: #AAA7A7;
   border-bottom-width: 0.1em;
   border-bottom-style: solid;
   border-bottom-color: #AAA7A7;
}
div.nav a.toc {
   background-image: url(../img/toc_tab.png);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 1.9375em 1.625em;
}
div.nav a.idx {
   background-image: url(../img/index_tab.png);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 1.9375em 1.4375em;
}
div.nav a.fts {
   background-image: url(../img/search_tab.png);
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 1.625em 1.6875em;
}
.left-pane {
   display: none;
   transition: transform 3s ease-in-out;
}
.left-pane.active{
   display: block;
   padding-left: 12px;
}
.left.slide-out {
   transform: translateX(-100%); /* Moves left */
   opacity: 0;
   pointer-events: none; /* Prevents clicking while hidden */
   display:none;
}
.handle.slide-out {
   transform: translateX(-100%); /* Moves left */
   opacity: 0;
   pointer-events: none; /* Prevents clicking while hidden */

}
.right.fill {
   transform: translateX(-300px); /* Moves left */
}
.header{
   height: 30px;
   padding: 20px;
   border-bottom: 1px solid red;
   font-family: Roboto, Helvetica, Arial, "Segoe UI Symbol", sans-serif, sans;
}
.header div.header_ident {
   display: flex;
   align-items: center;
}
div.header div.logo {
   background-color: transparent;
   cursor: pointer;
   display: block;
   width: 175px;
   height: 40px;
   margin-right: 30px;
}
div.header div.title {
   height: 1.1em;
   line-height: 100%;
   font-size: 1.875em;
   overflow: auto;
}
/* Container for the list */
#search-results {
   list-style-type: none;
   padding: 0;
   margin: 0;
   border: 1px solid #ccc;
   position: absolute; 
   width: 100%;
   background: white;
   z-index: 1000;

   overflow-y: auto;
   box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#search-results li span {
    color: #1268B8;
    font-size: 16px;
    margin-bottom: .25em;
    word-wrap: break-word;
}


#search-results li {
   padding: 10px;
   border-bottom: 1px solid #eee;
   cursor: pointer;
}

#search-results li:last-child {
   border-bottom: none;
}

/* Text Styling */
#search-results span {
   text-decoration: none;
   color: #333;
   display: block;
}

.snippet {
   font-size: 0.85em;
   color: #666;
   margin: 4px 0 0 0;
}

/* Keyboard Navigation Active State */
#search-results li.active, #search-results li:hover {
   background-color: #f1f1f1;
}

.file-list, .file-list ul{
   list-style-type: none;
   font-size:1em;
   line-height:1.8em;
   padding-left:4px;
}
.file-list li{
   position: relative;
   padding-left:28px;
}
.file-list li a{
   text-decoration: none;
   color:#444;
}
.file-list li a:before{
   display:block;
/*    content: " ";*/
   width:10px;
   height:1px;
   position:absolute;
   top:.6em;
   left:-14px;
}
.file-list li: before{
   list-style-type: none;
   font-family: FontAwesome;
   display:block;
    /*content:'\f0f6';*/
   position:absolute;
   top:0px;
   left:0px;
   width:20px;
   height:20px;
   font-size:1.3em;
   color:#555;
}
.file-list li {
   background-image: url("../img/file.png");
   background-repeat: no-repeat;
   background-position: 6px 3px;
   background-size: 16px 17px;

}
.file-list .folder-root{
   list-style-type: none;
}
.file-list .folder-root a{
   text-decoration:none;
}
.file-list .folder-root{
   color:#FFD04E;
   /*content: "\f07b";*/
   background-image: url("../img/plus.png");
   background-repeat: no-repeat;
   background-position: 6px 6px;
   background-size: 16px 17px;

}
.file-list .folder-root.open{
    /*content: "\f07c";*/
   background-image: url("../img/minus.png");
   background-repeat: no-repeat;
   background-position: 6px 6px;
   background-size: 16px 17px;

}
li.folder-root ul{
   transition: all .3s ease-in-out;
   overflow-y: auto;
   overflow-x: hidden;
}
li.folder-root.closed>ul{
   opacity:0;
   max-height:0px;
}
li.folder-root.open>ul{
   opacity:1;
   display:block;
}
li.selected {
   color: #509de6;
   border-left: solid 4px #509de6;
}
.search-field {
   border-top-width: 0.1em;
   border-top-style: solid;
   border-top-color: #cccccc;
   border-bottom-width: 0.1em;
   border-bottom-style: solid;
   border-bottom-color: #cccccc;
   border-left-width: 0.1em;
   border-left-style: solid;
   border-left-color: #cccccc;
   border-right-width: 0.1em;
   border-right-style: solid;
   border-right-color: #cccccc;
   width: 98%;
   margin: .6em 1% .3em;
   height: 3em;
   max-height: 3em;
   padding: 0 0.3em 0 0.5em;
   font-size: 100%;
   -webkit-appearance: none;
   -webkit-border-radius: 0.5em;
   -moz-border-radius: 0.5em;
   border-radius: 0.5em;
}