div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0em;
    align-self: start;
}

#options_ribbon {
    width: 100%; 
    background: var(--table-odd); 
    /* border-bottom: 1px solid var(--highlight); */
}
.pullout {
    z-index: 2;
    padding: 5px;
    border-radius: 0px 5px 5px 0px;
    width: 100%;
    background-color: var(--background);
    position: -webkit-sticky;
    position: sticky;
    margin-left: -1px;
    top: 0;
    align-self: start;
    text-align: left;
    border-top: 1px solid var(--highlight);
    border-right: 1px solid var(--highlight);
    border-bottom: 1px solid var(--highlight);
}

#viewport {
    padding-right: 1em; 
    overflow-y: scroll; 
    overflow-x: auto; 
    max-height: calc(vh -1.5em);
}


#hierarchy {
    background-color: var(--background);
    border-top: 1px solid var(--highlight);
    border-right: 1px solid var(--highlight);
    border-bottom: 1px solid var(--highlight);
    border-radius: 0px 0px 5px 0px; 
    white-space: wrap;

    .foldercontainer,
    .file,
    .noitems {
        display: block;
        padding: 4px 4px 4px 2rem;
        text-align: start;
        text-indent: -1.5rem;
    }

    /* .folder-open {
    }

    .folder-closed::before {
    } */

    .folder,
    .file {
        cursor: pointer;
        color: var(--bold);
        font-size: 1.25rem;

    }

    .noitems {
        display: none;
        pointer-events: none;
    }

    .file:hover {
        background: var(--table-odd);
    }
    .foldercontainer:hover:not(:has(.file:hover, .foldercontainer:hover)) {
        background: var(--table-odd);
    }

}