.pane {
    /* box-sizing: border-box; */
    min-width: 0;
    min-height: 0;
}
.pane-container {
}
.root-pane {
    width: 100vw;
    display: block;
    /* leave space for main titlebar */
    height: calc(100vh - 2em);
    overflow-x: auto;
}
.pane-expandedsidebar {
    /* applied to root-pane, leave space for sidebar */
    width: calc(100vw - 220px); 
    margin-left: 220px !important;
}
.paneContent {
    width: 100%;
    height: 100%;
    /* max-height: calc(100vh - 3em); */
}
.root-pane > .panebartray {
    /* tray where we switch between the active tab and other tabs on the main root-pane -- keep it at the bottom of screen */
    position: fixed;
}
.panebartray {
    /* for tab selector on other tabbed panes, use position sticky to render the selector with the pane. */
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: row;
}
.pane-horizontal {
    overflow: visible;
}
.pane-vertical > .paneContent {
    display: grid;
    /* grid-auto-rows: minmax(260px, 1fr); */
    grid-auto-rows: auto;
    grid-auto-flow: row;
    height: auto;
    gap: 0.5rem;
}
.pane-horizontal > .paneContent {
    display: flex;
    flex-direction: row;
    /* align-items: stretch; */
    min-height: 100%;
    align-items: stretch;
    /* gap is accounted for in panes.js size(), keep synchronized / move to variable. */
    gap: 0.5rem;
    flex-wrap: wrap;
    overflow: visible;
}
.pane-horizontal > .paneContent > .pane {
    flex: 1 0 354px;
}
.pane-tabbed > .paneContent {
    /* leave space for the tab bar at the bottom */
    height: calc(100% - 2em);
}
.pane-tabbed.root-pane > .paneContent {
    overflow: auto;
}
.pane-leaf {
    /* grow, dont shrink, 260 basis */
    flex: 1 0 260px;
    position: relative;
    padding: 0;
}
.paneContent > .pane-leaf {
    align-self: stretch;
}
.pane-leaf > .paneContent {
    /* limit leafs to 100% of viewport height */
    max-height: calc(100vh - 3em);
}
@media only screen and (min-height: 650px) {
    .root-pane > .paneContent {
        /* height: 100%; */
    }
}
@media only screen and (min-width: 1000px) {
    .root-pane > .paneContent > .pane-horizontal {
        /* height: 100%;     */
    }
    .root-pane > .paneContent > .pane-vertical {
        /* height: 100%; */
    }
    .paneContent {
        /* height: 100%; */
        /* width: 100%; */
    }
    .pane-vertical > .paneContent {
        /* display: flex;
        flex-direction: column;
        align-items: stretch; */
    }
    .pane-horizontal > .paneContent {
        /* splitvertical */
        /* display: flex;
        flex-direction: row;
        align-items: stretch; */
    }
    .pane-horizontal > .paneContent > .pane {
        /* splitvertical */
        
    }
    .pane-tabbed > .paneContent > .pane {
        /* tabbed */
        /* height: 100%; */
    }
    
}


.ui-pane-landing {
    height: 100%;
    width: 100%;
    /* background-color: #c3c3c3; */
    /* background-color: lightgrey; */
    background-color: var(--color-neutral-alternate);
}
.ui-pane-landing:hover {
    /* background-color: #f0f0f0; */
    /* background-color: var(--color-neutral-alternate2); */
}
.ui-pane-landing-row {
    /* position: relative; */
    width: 100%;
    height: 50%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-items: center;
}
.ui-pane-landing-row > div {
    width: 50%;
    font-size: 1.25em;
    /* background-color: #c3c3c3; */
    /* border: 1px solid green; */
    border: 1px solid var(--color-primary);
}
.landing-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-items: center; */
    justify-content: center;
}
.landing-block:not(.landing-upload):hover {
    /* background-color: white; */
    background-color: var(--color-neutral);
}
.landing-upload .desc {
    display: none;
    font-size: 0.75em;
}
.landing-upload:hover .desc {
    display: block;
}
.landing-text {
    width: 100%;
    text-align: center;
}
.landing-button {
    font-size: 2em;
    /* color: #a2a2a2; */
    color: var(--color-contrast-alternate2);
}



div.pane-leaf-vertical {
    float: left;
    /* display: block; */
    /* border-top:4px solid blue;  */
    border-top:4px solid var(--color-primary); 
    /* height: 50%;  */
    /* width: 100%;  */
    margin: -2px 0 -2px 0; 
    padding: 0;
    overflow: auto;
}

div.pane-leaf-horizontal {
    /* display: block; */
    /* border-left:4px solid green;  */
    border-left:4px solid var(--color-primary); 
    float: left;
    /* height: 100%; 
    width: 50%;  */
    margin: 0 -2px 0 -2px; 
    padding: 0;
    overflow: auto;
}
div.pane-xx-horizontal::before {
    /* display: block; */
    content: "";
    width: 4px;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    /* height: 100%; */
    margin-left: -2px;
    background-color: transparent;
    /* background-color: green; */
    cursor: ew-resize;
    z-index: 2;
}
div.pane-xx-vertical::before {
    content: "";
    height: 4px;
    position: absolute;
    left: 0;
    right: 0;
    /* height: 100%; */
    margin-top: -2px;
    background-color: transparent;
    /* background-color: blue; */
    cursor: ns-resize;
    z-index: 2;
}


div.paneHeader {
    position: static;
}


/* .dashboardtray {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0); */
    /* margin-left: auto;
    margin-right: auto; */
    
    /* top: -2em; */
    /* width: 100%; */
    /* padding: 0.2em 0.5em; */
    /* background-color: var(--color-sidebar-bg-hover); */
    /* background-color: var(--color-sidebar-bg-hover);
    z-index: 850;
} */
/* .dashboardtray > div {
    margin-left: calc(-50%);
} */
svg.gem-full {
    display: block;
    width: 150px;
    height: 150px;
    margin-left: auto;
    margin-right: auto;
}
svg .gem:hover {
    /* fill: var(--color-accent1-brighter); */
    fill: var(--color-primary);
    fill-opacity: 50%;
    transition: all ease 0.3s;
}
svg#login_gem {
    width: 30%;
    height: 30%;
    margin-left: 30%;
    margin-right: 70%;
}
svg#navBar_gem {
    width: 80px;
    height: 80px;
    margin-left: -15px;
}
/* div.paneHeader {
    background-color: var(--color-whiteish);
} */
div.parent-pane > .paneHeader, .parent-pane > .paneContent {
    display: none;
}
/* div.parent-pane {
    margin: 0;
    padding: 0;
    border: none;
} */
div.pane-xx-vertical.parent-pane, div.pane-xx-horizontal.parent-pane {
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
}
div.panetray {
    position: absolute;
    right: 1em;
    top: 1em;
    /* color: var(--color-lightgrey); */
    color: var(--color-contrast-alternate2);
}
div.panetray-btn {
    float: left;
    padding: 0.2em;
    cursor: pointer;
}
div.panetray-btn:hover {
    /* color: black; */
    color: var(--color-contrast);
}
/* .tabinfo {
    display: inline-block;
    margin-right: 1em;
} */
/* .tab-btn {
    display: inline-block;
    cursor: pointer;
    padding: 0.5em 1em 0.5em 1em;
}
.tab-btn:hover {
    background-color: var(--color-sidebar-btn-hover);
} */
.tabselect {
    /* display: inline-block; */
    display: flex;
    align-items: center;
    /* position: relative; */
    
    /* bottom: 0; */
    /* float: left; */
    font-size: 1em;
    /* background-color: #a6a6a6; */
    /* background-color: var(--color-neutral-alternate2); */
    padding: 0.0em 1.2em 0.3em 0.7em;
    /* box-shadow: 2px 3px 4px #c6c6c6; */
    box-shadow: 2px 3px 4px var(--color-neutral-alternate);
    border-top: 0.3rem solid var(--color-neutral);
    /* border-right: 1px solid var(--color-neutral); */
}
.tabselect:hover {
    /* background-color: #a6a6a6; */
    cursor: pointer;
    /* box-shadow: 2px 4px 2px #c6c6c6; */
    box-shadow: 2px 4px 2px var(--color-neutral-alternate);
}
.tabselect:not(.tabactive):hover {
    border-color: var(--color-highlight);
}
.tabselect.tabactive {
    /* background-color: #d6d6d6; */
    /* background-color: var(--color-neutral    -alternate); */
    border-color: var(--color-primary);
    /* background-color: var(--color-highlight); */
}
.tabselect > .btn {
    padding: 0.2em 0.4em;
    cursor: pointer;
    color: var(--color-contrast-alternate);
}
.tabselect > .btn:hover {
    color: var(--color-contrast);
}