.span-array {
    --thead-background-color: var(--jp-layout-color1, inherit);
    --thead-text-color: var(--jp-ui-font-color1, inherit);
    --tbody-background-color-1: var(--jp-layout-color1, inherit);
    --tbody-background-color-2: var(--jp-layout-color2, inherit);
    --tbody-background-color-hover: var(--jp-rendermime-table-row-hover-background, var(--jp-layout-color3, inherit));
    --tbody-background-color-disabled: var(--jp-layout-color4, #ccccd1);
    --tbody-text-color: var(--jp-ui-font-color0, inherit);
    --tbody-text-color-disabled: var(--jp-ui-inverse-font-color0, #b3b3b9);
    --table-font-family: var(--jp-content-font-family, var(--fallback-font-family, inherit));

    --table-control-background: rgba(0, 0, 0, 0.2);
    --table-control-color: var(--jp-ui-font-color0);
    --table-control-border: 1px solid rgba(0, 0, 0, 0.8);
    --table-control-border-radius: 0.5em;

    --root-highlight: #a0c4ff;
    --nested-highlight: #ffadad;
    --hover-highlight: #ffd6a5;

    --inverted-background-color: #0B525B;
    --inverted-text-color: rgb(243, 243, 243);
    --paragraph-border-color: var(--jp-layout-color2, inherit);

    --fallback-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}

/* Table of span offsets */
.span-array>.document>table {
    table-layout: auto;
    overflow: hidden;
    width: 100%;
    border-collapse: collapse;
    font-family: var(--table-font-family);
}

.span-array>.document>table thead {
    font-variant-caps: all-petite-caps;
}

.span-array>.document>table th {
    padding: 1em;
}

.span-array>.document>table tr>td:last-child, .span-array>.document>table tr>th:last-child {
    text-align: right;
    width: 100%;
}

.span-array>.document>table tr>td:not(tr>td:last-child), .span-array>.document>table tr>th:not(tr>th:last-child) {
    text-align: left;
}

.span-array>.document>table tr.disabled:nth-child(n), .span-array>.document>table tr.disabled.hover:nth-child(n) {
    background-color: var(--tbody-background-color-disabled);
}

.span-array>.document>table tr.disabled:nth-child(n)>td, .span-array>.document>table tr.disabled.hover:nth-child(n)>td {
    color: var(--tbody-text-color-disabled);
}

.span-array>.document>table tr.hover:not(.disabled) {
    background: var(--jp-rendermime-table-row-hover-background);
}

/* Table control buttons */

.span-array>.document>table td.sa-table-controls-container {
    vertical-align: center;
}

.span-array>.document>table div.sa-table-controls {
    display: flex;
    flex-direction: row;
}

.span-array>.document>table div.sa-table-controls button {
    background-color: var(--table-control-background);
    color: var(--table-control-color);
    border: var(--table-control-border);
    border-right: none;
    border-radius: 0;
    cursor: pointer;
}

.span-array>.document>table div.sa-table-controls button:first-child {
    border-radius: var(--table-control-border-radius) 0 0 var(--table-control-border-radius);
}

.span-array>.document>table div.sa-table-controls button:last-child {
    border-radius: 0 var(--table-control-border-radius) var(--table-control-border-radius) 0;
    border-right: var(--table-control-border);
}

.span-array>.document>table div.sa-table-controls button[data-control="visibility"]:hover {
    background-color: var(--root-highlight);
    color: black;
}

.span-array>.document>table tr:not(tr.disabled) div.sa-table-controls button[data-control="highlight"]:hover {
    background-color: var(--hover-highlight);
    color: black;
}

.span-array>.document>table tr.highlighted:not(tr.disabled) div.sa-table-controls button[data-control="highlight"] {
    background-color: var(--hover-highlight);
    color: black;
}

/* Styling for spans within document context */
.span-array>.document>p {
    border:1px solid var(--paragraph-border-color);
    border-radius: 0.2em;
    padding: 1em;
    line-height: calc(var(--jp-content-line-height, 1.6) * 1.6);
    box-sizing: border-box;
    font-family: var(--jp-content-font-family, var(--fallback-font-family, inherit));
}

body[data-jp-theme-light="false"].span-array>.document>p {
    border: 1px solid black;
    background-color: var(--inverted-background-color);
    color: var(--inverted-text-color);
}

.span-array>.document>p mark {
    padding: 0.4em 0.4em;
    border-radius: 0.35em;
    cursor: pointer;
}

.span-array>.document>p .mark {
    color: var(black);
}

.span-array>.document>p mark {
    background-color: var(--root-highlight);
}

.span-array>.document>p mark>mark {
    background-color: var(--nested-highlight);
    padding: 0.2em 0.4em;
}

.span-array>.document>p mark.complex-set {
    background: linear-gradient(to right, var(--root-highlight), var(--nested-highlight))
}

.span-array>.document>p mark>span.mark-tag {
    font-weight: bolder;
    font-size: 0.8em;
    font-variant: small-caps;
    font-variant-caps: all-small-caps;
    margin-left: 8px;
    text-transform: uppercase;
}

.span-array>.document>p mark.hover, .span-array.span-array>.document>p mark>mark.hover, .span-array>.document>p mark.complex-set.hover, .span-array>.document>p mark.highlighted, .span-array>.document>p mark.complex-set.highlighted, .span-array.span-array>.document>p mark>mark.highlighted {
    background: none;
    background-color: var(--hover-highlight);
}
