.feature-examples {
    display: flex;
    flex-direction: column;
    position: relative;
    
    .example-2-col {
        flex: 1;
        overflow: visible;
        overflow-x: hidden;
        position: relative;
        z-index: 100;
    }

    .chart-row{
        display: grid;
        grid-template-columns: 2fr 1fr;
        &:has(> :only-child) {
            grid-template-columns: 1fr;
        }

        gap: 20px;
        line-height: 0px;
    }

    .feature-example-logits{
        color: hsl(0 0 0 / 0.5);
        font-size: 10px;
        font-family: sans-serif;
        line-height: 14px;
        position: sticky;
        top: 0px;
        background: #fff;
        z-index: 100000;
        margin-bottom: -4px;
        outline: 2px solid #fff;
        
        .section-title{
            margin-bottom: 3px;
        }

        .token {
            display: inline-block;
            margin-left: 0.2em;
            background-color: #eee;
            color: #666;
            padding: 1px 3px !important;
            border-radius: 4px;
            font-family: monospace;
            font-size: 11px;
            white-space: pre;
            overflow-y: hidden;
            vertical-align: middle;
            max-height: 13px;
            margin-right: 2px;
        }
        
        .logit-label {
            display: inline-block;
            margin-right: 7px;
            color: #aaa;
            padding-right: 3px;
        }
    }

    .example-2-col:not(:last-child) {
        margin-right: 10px;
    }

    .example-quantile {
        margin: 0;
        margin-top: 20px;
    }
    
    .train_token_ind{
        outline: 1px solid #000;
    }

    .ctx-container {
        font-family: monospace;
        font-size: 11px;
        line-height: 11px;
        padding: 6px 0px 4px;
        border-bottom: 1px solid #eee;
        border-left: 2px solid rgba(0, 0, 0, 0);

        overflow: visible;
        white-space: nowrap;
        position: relative;
        a, .dataset-source{
            margin-right: 7px;
            color: #aaa;
            display: inline-block;
        }

        .dataset-source{
            padding-right: 3px;
            border-right: 1px solid #eee
        }
    }

    .is-repeated-datapoint{
        opacity: .2;
    }
    .is-repeated-datapoint:before {
        content: '⟳ ';
    }

    .ctx-container .token {
        border-radius: 4px;
        padding: 1px;
        cursor: default;
        white-space: pre;
    }

    .ctx-container .token.active {
        outline: 2px solid #000;
        overflow: visible;
    }

    svg{
        overflow: visible;
    }
    
    &.is-stale-output {
        td span, .text-wrapper, .token {
            opacity: 0;
        }
    }
}