:root {
    --main-border-color: brown;
    font-size: 16px;
  }



body, p {
    margin: 0px;
}

ul {
    padding-left: 1em;
    padding-right: 1em;
    margin: 5px;
}

div.app-body {
    /*
    display: grid;
    grid-template-columns: 1fr;
    */
    display: block flex;
    min-width: 640px;
    min-height: 480px;
}

div.app-body div.left-pane {
    min-width: 200px;
    max-width: 250px;
    overflow-x: scroll;
    width: 30%;

    height: 98vh;
    border-style: solid;
    border-color: orange;
    border-width: 1px;

    position: sticky;
    top: 0px;
    margin: 5px
}

div.app-body div.left-pane ul{
    margin: 0px;
}

div.app-body div.right-pane {
    min-width: 400px;
    min-height: 100px;
    overflow-x: scroll;
    overflow-y: scroll;
}

div.top-bar, div.bottom-bar {
    height: 1em; ;
    border: 0.1em solid var(--main-border-color);
}

#mainView {
    height: 60vh;
    overflow-x: scroll;
    overflow-y: scroll;
    min-height: 480px;
    min-width: 640px;
}

#mainView p {
    width: fit-content;
}

#ref-map {
    width: 70vw;
    overflow: scroll;
    object-fit: scale-down;
}

#editMenu {
    display: flex;
    list-style: none;
}

div.editor.shrinked {
    /* expanded -> shrinked*/
    animation: 1s linear 0.2s reverse editor-expanding ;
    max-height: 0vh;
    overflow: hidden;
}

div.editor.expanded {
    /* shrinked -> expanded */
    animation: 1s linear 0.2s normal editor-expanding ;
    max-height: 60vh;
    overflow: scroll;

}

div.editor input[readonly=""] {
    background-color: lightsteelblue;
}

div.editor div.ref-card {
    border-style: solid;
    border-color: orange;
    border-width: 0.1em;
}


div.editor div.ref-card li{
    display: flex;
}

div.editor div.ref-card li span{
    width:20%;
}

div.editor div.ref-card input{
    width:80%;
}

div.editor div.ref-card ul.card-menu {
    display:flex;
}

#dot-src-viewer, #csv-src-viewer {
    display: block;
    min-width: 400px;
    min-height: 20vh;
    width: 70vw;
}

/*
@keyframes editor-expanding {
    0% {
        max-height: 0vh;
        overflow: hidden;
    }
    100% {
        max-height: 100vh;
        overflow: hidden;
    }
}
*/