substrait-validator 0.1.4

body {
    font-family: sans-serif;
}

details,
div.card {
    border: 1px solid;
    border-color: rgba(0, 0, 0, .3);
    color: rgba(0, 0, 0, .8);
    border-radius: 4px;
    margin-top: .2em;
}

details:hover,
div.card:hover {
    border-color: #000;
    color: rgba(0, 0, 0, .9);
}

details:target,
div.card:target {
    box-shadow: 0 0 .3em .2em rgba(0, 0, 0, 0.3);
    border-color: #000;
    color: rgba(0, 0, 0, .9);
}

details {
    padding: .2em .5em 0;
}

summary {
    margin: -.2em -.5em 0;
    padding: .2em .5em;
}

details[open] {
    padding: .2em .5em;
}

details[open] > summary {
    border-bottom: 1px solid rgba(0, 0, 0, .3);
    margin-bottom: .2em;
}

div.card {
    padding: .2em .5em;
}

details.ok {
    background-color: #dfd;
}

details.warn_child {
    background-color: #fed;
}

details.warn_here {
    background-color: #fdb;
}

details.error_child {
    background-color: #fdd;
}

details.error_here {
    background-color: #fbb;
}

details.unknown,
div.unknown {
    background-color: #ddd;
}

details.data_type {
    background-color: #def;
}

details.data_type > summary::before {
    font: normal 900 1em "Font Awesome 6 Free";
    color: #048;
    content: "\f0db";
    padding-right: .2em;
}

div.data_type {
    background-color: #bdf;
}

div.data_type::before {
    font: normal 900 1em "Font Awesome 6 Free";
    color: #048;
    content: "\f0db";
    padding-right: .2em;
}

div.comment {
    background-color: #bfd;
}

div.comment::before {
    font: normal 900 1em "Font Awesome 6 Free";
    color: #084;
    content: "\f249";
    padding-right: .2em;
    float: left;
}

div.comment > p {
    margin: 0 0 0.2em;
}

details > p {
    margin: 0 0 0.2em;
}

details.relation_tree {
    background-color: #bdf;
}

details.relation_tree > summary::before {
    font: normal 900 1em "Font Awesome 6 Free";
    color: #048;
    content: "\f0e8";
    padding-right: .2em;
}

div.diag_info {
    background-color: #9f9;
    color: #333;
}

div.diag_info::before,
summary.valid::before {
    font: normal 900 1em "Font Awesome 6 Free";
    color: #080;
    content: "\f058";
}

span.valid {
    color: #080;
    font-weight: bold;
}

div.diag_warn {
    background-color: #fc9;
    color: #333;
    font-weight: bold;
}

div.diag_warn::before,
summary.maybe_valid::before {
    font: normal 900 1em "Font Awesome 6 Free";
    color: #840;
    content: "\f059";
}

div.diag_error {
    background-color: #f99;
    color: #000;
    font-weight: bold;
}

div.diag_error::before,
summary.invalid::before {
    font: normal 900 1em "Font Awesome 6 Free";
    color: #800;
    content: "\f00d";
}

span.invalid {
    color: #c00;
    font-weight: bold;
}

a.anchor {
    opacity: 0.4;
    text-decoration: none;
    float: right;
}

a.anchor:hover {
    opacity: 1.0;
}

a.anchor::before {
    font: normal 900 1em "Font Awesome 6 Free";
    color: #000;
    content: "\f0c1";
}

details:target,
div.card:target {
  animation: highlight 1000ms ease-out;
}

@keyframes highlight {
  0% { box-shadow: 0 0 2em 1em rgba(0, 0, 0, 0.3); }
  50% { box-shadow: 0 0 2em 1em rgba(0, 0, 0, 0.3); }
  100% { }
}

span.field {
    font-weight: bold;
    color: #333;
}

span.value {
    font-weight: bold;
    color: #000;
}

span.brief {
    font-style: italic;
    color: #000;
}

span.type {
    font-style: italic;
    font-size: 80%;
    color: #555;
}

span.cause {
    font-weight: normal;
}

div.note {
    font-style: italic;
    color: #555;
}

.tree,
.tree ul,
.tree li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.tree {
    margin: 0 auto 1em;
    text-align: center;
}

.tree,
.tree ul {
    display: table;
}

.tree ul {
    width: 100%;
}

.tree li {
    display: table-cell;
    padding: 1.5em 0 0;
    vertical-align: top;
}

/* _________ */
.tree li:before {
    outline: solid 1px #666;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.tree li:first-child:before {
    left: 50%;
}

.tree li:last-child:before {
    right: 50%;
}

.tree span {
    border: solid 0.1em #666;
    border-radius: 0.2em;
    display: inline-block;
    margin: 0 0.2em 0.5em;
    padding: 0.2em 0.5em;
    position: relative;
}

/* | */
.tree ul:before {
    outline: solid 1px #555;
    content: "";
    height: 0.5em;
    left: 50%;
    position: absolute;
}

.tree span:before {
    margin-left: -1px;
    padding-left: 0.2em;
    font-size: 100%;
    content: "";
    height: 1.5em;
    left: 50%;
    position: absolute;
}

.tree span.data_source:before {
    border-left: solid 2px #555;
}

.tree span.subquery:before {
    border-left: dotted 2px #555;
}

.tree ul:before {
    top: -0.5em;
}

.tree span:before {
    top: -1.55em;
}

/* The root node doesn't connect upwards */
.tree > li {
    margin-top: 0;
}

.tree > li:before,
.tree > li:after,
.tree > li > span:before {
    outline: none !important;
    border: none !important;
}