body {
    margin: 0;
}

.client-root {
    display: grid;
    height: 100vh;
    grid-template-columns: 180px 400px 400px auto;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "banner  banner  banner  ."
        "control balance balance ."
        ".       result  result ."
        ". . . ."
        "disclaimer disclaimer disclaimer .";
}

.control {
    grid-area: control;
    margin: 5px;
    display: grid;
    grid-template-columns: auto;
    align-content: start;
}

.balance {
    grid-area: balance;
    margin: 5px;
    display: grid;
    grid-template-columns: auto;
    align-content: start;
}

.result {
    grid-area: result;
    position: relative;
    border: 1px solid;
}

.query-inspect-container {
    position: absolute;
    left: 40px;
    top: 40px;
    pointer-events: none;
}

.reply-inspect-container {
    position: absolute;
    left: 80px;
    top: 80px;
    pointer-events: none;
}

.inspect {
    pointer-events: all;
    border: solid black;
    background: white;
    width: 600px;
    height: 700px;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 20px auto;
}

.handle {
    background: cyan;
    cursor: default;
}

.inspect-content {
    overflow: scroll;
}

.banner {
    grid-area: banner;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin: 5px;
}

.disclaimer {
    font-size: 11px;
    grid-area: disclaimer;
    margin: 5px;
}