body {
    padding: 6px;
    background-color: #f6f6f6;
}
#page {
    height: 98vh;
    background-color: #f6f6f6;
    display: grid;
    grid-template-areas:
        'header header header header header'
        'leftcol middledragbar middlecol rightdragbar rightcol'
        'botdragbar botdragbar botdragbar botdragbar botdragbar'
        'footer footer footer footer footer';
    grid-template-rows: min-content 1fr 6px 2fr;
    grid-template-columns: 2fr 6px 1fr 6px;
}

/*****************************/
.logo {
    height: 100%;
}
#header {
    background-color: lightblue;
    overflow: auto;
    grid-area: header;
}

#leftcol {
    background-color: #e6e6e6;
    overflow: auto;
    grid-area: leftcol;
}

#leftdragbar {
    background-color: #f6f6f6;
    grid-area: leftdragbar;
    cursor: ew-resize;
}

#topdragbar {
    background-color: #f6f6f6;
    grid-area: topdragbar;
    cursor: ns-resize;
}

#botdragbar {
    background-color: #f6f6f6;
    grid-area: botdragbar;
    cursor: ns-resize;
}

#tabs {
    background-color: #cccccc;
    overflow: auto;
    grid-area: tabs;
}

#tabpages {
    background-color: #888888;
    overflow: auto;
    grid-area: tabpages;
}

#middledragbar {
    background-color: #e6e6e6;
    grid-area: middledragbar;
    cursor: ew-resize;
}

#middlecol {
    background-color: #e6e6e6;
    overflow: auto;
    grid-area: middlecol;
}
#rightdragbar {
    background-color: #f6f6f6;
    grid-area: rightdragbar;
    cursor: ew-resize;
}

#rightcol {
    background-color: #e6e6e6;
    overflow: auto;
    grid-area: rightcol;
}
#footer {
    background-color: gray;
    overflow: auto;
    grid-area: footer;
}
#display {
    height: 100%;
    /* width: 320px; */
    margin: auto;
}
.butBar {
    padding: 5px;
    width: 98%;
    font-size: 12px;
}
.form-group {
    margin-bottom: 0;
}
fomr-control {
    line-height: 1;
    height: 20px;
    padding: 5px;
}