#main {
    display: flex; flex-direction: row;
    min-width: 1072px;
    height: calc(100vh - 6rem);
    min-height: 680px;
    max-height: calc(100vh - 6rem);
}

#toc {
    width: 300px; min-width: 250px;
    border-right: 1px solid #000000;
    padding-top: 0.5rem;
    overflow: scroll;
}

#app {
    padding-top: 0.5rem;
    overflow: scroll;
}



/*-------------------- Classes --------------------*/
/*- Shared -*/
div.container-4by3 {
    position: relative; padding-top: 75%; 
}
div.container-9by16 {
    position: relative; padding-top: 177.7%; 
}
div.container-4by1 {
    position: relative; padding-top: 25%; 
}
div.container-1by1 {
    position: relative; padding-top: 100%; 
}
div.aspectratio-content {
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;
}
input.radio {
    margin-left: 0.5rem; margin-right: 0.5rem;
}
svg.svg-layer {
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;
    border: solid 0px red;
}

/*- App -*/
div.app-item {
    margin-bottom: 1.5rem;

}

/*- Nav -*/
div.nav-logo {
    width: 100%; height: 100%; cursor: pointer;
    background-color: #ffffff;
    border: solid 1px #eaeaea;
}
div.nav-target:hover {
    background-color: #eaeaea;
}

/*- Chap -*/
div.chap-slides_item {
    margin-bottom: 1rem;
}
div.chap-slides_preview {
    display: flex; flex-direction: row; justify-content: space-between;
    margin: 12px;
    border: solid red 0px;
}
div.chap-slides_preview_item {
    width: 90px; height: 90px;
    display: flex; justify-content: center; align-items: center;
    border: solid black 1px;
}
img.chap-slides_preview_img {
    width: 100%; height: 100%;
    object-fit: contain;
}


/*- Sub -*/
div.sub-thumb_container {
    width: 100%; 
    border: solid 1px #808080;
}

div.sub-vidcontainer {
    width: 100%; height: 100%;
    background-color: #000000;
    border: solid 1px #808080;
}



/*- Table of Contents -*/
div.toc-path {
    padding: 0.2rem;
    padding-left: 0rem;
}
div.toc-chap {
    padding: 0.3rem; padding-top: 0rem;
    margin-top: 0.4rem;
}
div.toc-sec {
    padding-left: 0.4rem;
}
div.toc-sub {
    padding-left: 0.4rem;
}
div.toc-v1 {
    height: 1.4rem;
    border-right: solid #000000 1px;
    margin-left: 0.5rem;
}
div.toc-v2 {
    height: 0.8rem;
    border-right: solid #000000 1px;
    margin-left: 0.5rem;
}
div.toc-h0 {
    width: 0.6rem;
}
div.toc-h1 {
    height: 0.6rem; width: 0.6rem;
    border-bottom: solid #000000 1px;
}
div.toc-h2 {
    height: 0.8rem; width: 0.6rem;
    border-bottom: solid #000000 1px;
}
p.toc-item {
    padding-left: 0.4rem;
}

a.toc-link {
    color: #000000;
}

button.toc-btn {
    height: 1.2rem;
    padding: 0rem; padding-left: 0.4rem;
    margin: 0rem;
}

/*- Library preview -*/
div.lib-preview {
    /* width: 400px; min-width: 400px; */
    width: 50%; 
    border-left: 1px solid #000000;

    display: flex; justify-content: center; align-items: center;    

}


/*- Dev styles -*/
.bordered {
    border: solid 1px;
    border-collapse: collapse;
}

.bordered-lite {
    border: solid 1px #eaeaea;
    border-collapse: collapse;
}

div.lib-radio {
    display: flex; flex-direction: row; align-items: center;
    margin-right: 1rem;
}