body {
    overflow: hidden;
    margin: 0;
    font-family: sans-serif;
    font-size: 16px;
}

#app {
    width: 100vw;
    height: 100vh;
}

#toolbar {
    height: 32px;
    display: flex;
    align-items: center;
}

.tgbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.tgbtn-active {
    background-color: lightblue;
}

.tgbtn:hover {
    background-color: lightgray;
}

#toolbar .tgbtn {
    min-width: 64px;
    height: 100%;
    padding: 0 8px;
    border-right: solid 1px gray;
}

#treeview {
    height: calc(100% - 32px);
}

#tree {
    overflow: auto;
    height: calc(100% - 10px);
}

.t-list {
    position: absolute;
    max-width: 100vw;
    max-height: 100vh;
    overflow: auto;
    background-color: floralwhite;
    border: solid 1px gray;
    border-radius: 4px;
    padding: 2px;
    margin: 0;
}

.t-li {
    list-style: none;
    padding: 0 4px;
    margin: 1px;
    cursor: pointer;
}

.t-li:hover {
    background-color: lightblue;
}

input {
    border: none;
    font-family: sans-serif;
    font-size: 16px;
}

.t-node {
    padding: 1px 4px;
    margin: 4px 0;
}

.t-node, .t-node-sup {
    transition: 0.25s;
}

.t-node.t-inline {
    padding: 0 2px;
    margin: 4px 2px;
}

.t-internal {
    display: none;
}

.t-literal {
    margin: 0;
    padding: 0;
}

.btn {
    width: 16px;
    height: 0px;
    font-size: small;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    cursor: pointer;
    transition: 0.25s;
    display: block;
}

.btn.t-inline {
    display: inline-block;
    width: 0;
    height: 16px;
    margin: 0 2px;
}

.btn:only-child {
    height: 16px;
}

.btn.t-inline:only-child {
    width: 16px;
}

.t-statement > .btn {
}

.t-node:hover > .btn {
    transition: 0.25s;
    height: 16px;
}

.t-node:hover > .btn.t-inline {
    width: 16px;
}

.btn-add {
    border: solid 1px green;
}

.mode-hide-add .btn-add {
    display: none;
}

.btn-delete {
    border: solid 1px red;
}

.mode-hide-delete .btn-delete {
    display: none;
}

.t-block {
    border-left: solid 1px darkcyan;
}

.t-exp {
    border-top: solid 1px gray;
}

.t-exp.t-inline {
    padding: 2px 4px;
}

.t-exp:hover {
    border-top: solid 3px gray;
}

.t-input {
    display: inline-block;
    border: solid 1px magenta;
}

.t-statement {
    border-left: solid 1px orange;
}

.t-statement.t-inline {
    border: solid 1px orange;
}

.t-node:hover {
    transition: 0.25s;
    border-left-width: 3px;
}

.t-inline {
    display: inline-block;
}

/* Debug Mode */
.mode-debug .t-internal {
    display: block;
    background-color: lightgray;
    opacity: 0.6;
}

/* Sort Mode */
.mode-sort .t-internal {
    display: block;
    background-color: lightgray;
    opacity: 1;
}

.mode-sort input {
    cursor: grab;
}

.mode-sort .t-node {
    border-color: lightgray;
}

.mode-sort .t-statement {
    cursor: grab;
    padding-left: 10px;
    border-color: orange;
    border-left-width: 2px;
}

.mode-sort .t-statement:hover {
    border-color: yellow;
    border-left-width: 5px;
}

.mode-sort .t-statement.t-inline {
    border-color: lightgray;
}

.mode-sort .btn {
    display: none;
}

.mode-sort.state-grabbing .t-node {
    cursor: grabbing;
}

.mode-sort.state-grabbing input {
    cursor: grabbing;
}

.mode-sort.state-grabbing .t-grabbing {
    background-color: lightgreen;
    border-left-color: green;
}

.grab-ptr {
    margin: 0;
    border: solid 1px green;
}