* 
{
    box-sizing: border-box;
}

body, html 
{
    margin: 0;
    height: 100%;
    font-family: Arial, sans-serif;
}



.title-bar 
{
    /* background-color: #333;
    color: white; */

    /* padding: 1em; */

    /* display: flex;
    justify-content: space-between;
    align-items: center; */

    height: 60px;

    border-bottom: 1px solid #e9ecef;
}

.layout
{
    display: flex;
    height: calc(100% - 60px); /* Assuming title bar is 60px */

    /* V2 */
    position: relative;
}

.sidebar
{
    width: 400px;
    background-color: #f4f4f4;
    /* padding: 1em; */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;


    /* Custom */
    /* overflow-y: auto; */
}


    .sidebar-inner
    {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .sidebar-top
    {
        padding: 1em;
        padding-bottom: 0;
        /* background-color: #f0f0f0; */
    }

    .sidebar-bottom
    {
        flex: 1;
        overflow-y: auto;
        /* background-color: #e0e0ff; */

        padding: 1em;
        padding-top: 0;
    }


/* .sidebar #fullIndexContentTree
{
    overflow-y: auto;
} */


/* V2 */
.sidebar.visible 
{
    transform: translateX(0);
}

/* 
    When the sidebar is hidden, ensure the content margin (inline style) is overridden 
    so teh content pane returns to full available width.
 */
.layout.sidebar-hidden .content
{
    /* transform: translateX(-100%); */
    margin-left: 0 !important;
}


/* //TODO: Disabled for the moment. Dragging highlights items in the nav. I don't really know if I like this anyway. */
/* .resizer
{
    width: 5px;
    cursor: ew-resize;
    background-color: #ccc;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
} */




.content 
{
    /* V1 */
    /* flex-grow: 1;
    padding: 1em;
    overflow: auto; */

    /* V2 */
    flex-grow: 1;
    padding: 1em;
    /* margin-left: 0;
    transition: margin-left 0.3s ease; */

    /* Custom */
    overflow-y: auto;
}

/* Hide sidebar by default when loading on small screens */
@media (max-width: 800px) 
{
    .sidebar {
        position: absolute;
        /* top: 60px; */
        bottom: 0;
        left: 0;
        transform: translateX(-100%);   /* Sidebar closed/hidden */
        z-index: 1000;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);

        /* On mobile, just make it full width when it is open */
        width: 100%;
    }

    .sidebar.visible 
    {
        transform: translateX(0);   /* Sidebar open/visible */
    }
}

/* V1 */
/* Always visible sidebar on large screens */
/* @media (min-width: 801px) 
{
    .sidebar {
        transform: translateX(0) !important;
        position: relative;
    }
} */


/* Large screen (non-mobile)*/
/* Push content right when sidebar is visible on wide screens */
@media (min-width: 801px) 
{
    /* Normal width */
    .sidebar.visible ~ .content,
    .sidebar.width-normal.visible ~ .content 
    {
        margin-left: 400px;
    }
    .sidebar.width-normal
    {
        width: 400px
    }


    /* 'Large' width */
    .sidebar.width-large.visible ~ .content 
    {
        margin-left: 600px;
    }
    .sidebar.width-large
    {
        width: 600px
    }


    /* 'Largest' width */
        .sidebar.width-largest.visible ~ .content 
    {
        margin-left: 800px;
    }
    .sidebar.width-largest
    {
        width: 800px
    }
}



.nav.nav-tabs.top-nav-bar
{
    border-bottom: none;
}