body {
    padding: 10px;
    margin: 0px;
    display: grid;
    gap: 10px;
    grid-template-columns: calc(50% - 5px) calc(50% - 5px);
    grid-template-rows: auto;
    grid-template-areas:
        "ctl ctl"
        "ws1 ws2"
        "text text";
    align-content: stretch;
}
#guide {
    grid-area: text;
}
.channel {
    border: solid 1px black;
    display: inline-block;
    padding: 0px;
    position: relative;
    grid-area: ws1;
}
.channel:first-of-type {
    grid-area: ctl;
}
.channel:last-of-type {
    grid-area: ws2;
}
.channel h1 {
    font-weight: bold;
    font-size: 16pt;
    text-align: center;
    margin: 0px;
    padding: 5px;
    background: navy;
    color: white;
}
.channel .buttons {
    position: absolute;
    display: block;
    right: 0px;
    bottom: 0px;
}
.channel .channel-status {
    position: relative;
    padding: 2px 5px;
    background: silver;
    border-bottom: solid 1pt black;
    font-family: arian, sans-serif;
    font-size: 10pt;
}
.channel .output {
    display: block;
    margin: 0px;
    padding: 0px;
    height: 300px;
    overflow: scroll;
}
.output > .message {
    display: block;
    padding: 0px;
    border-bottom: solid 1px black;
}
.output > .message > div {
    padding: 5px 7px;
    border-bottom: solid 1px black;
}
.output .message div.ctl {
    background: #a4c;
}
.output .message div.message {
    background: #9bf;
}
.output .message div.error {
    background: #f33;
}
.output .message div.event {
    background: #ed3;
}
.output .message div.event {
    background: #ed3;
}
.output .message div.request {
    background: #385;
}
.output .message div.response {
    background: #385;
}
.input {
    margin: 0px;
    padding: 5px 7px;
    border-top: solid 1px black;
}
.input textarea {
    display: block;
    width: 100%;
    height: 50pt;
    margin: 0px 0px 5px;
}
.input input[type=text] {
    display: block;
    width: 100%;
    margin: 0px;
}
.input input[type=button] {
    display: inline-block;
    width: 6em;
}
