.cg{
    .feature-detail{
        margin-top: 10px;
    }
    
    
    line-height: normal !important;
        
    text {
        cursor: default;
        /* text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff; */
        user-select: none;
    }
    
    svg {
        overflow: visible;
    }
    
    .h3 {
      margin: 0 0 6px 0;
      font-size: 15px;
      font-weight: 600;
    }
    
    .h4 {
      margin: 0 0 0 0;
      font-size: 13px;
      font-weight: 500;
    }
    
    .axis {
        .domain { display: none; }
    
        text { fill: #777; }
    }
    .prompt-token text {
        fill: #777;
        text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
    }
    
    .gridsnap-container {
        .grid-item {
            outline: 0px solid #fff;
        }
    }

    
    .link-graph, .feature-scatter, .feature-umap, .feature-diff-scatter, .link-diff-scatter {
        canvas{
            pointer-events: none;;
        }
        overflow: visible;
        .node {
            cursor: pointer;
        }
    
    
        .node.clicked {
            stroke-width: 1.5px;
            stroke: #f0f;
        }
    
        .node.pinned {
            stroke: #000;
            stroke-width: 1.8px;
        }
    
        .node.hidden {
            opacity: .5;
            r: .5;
        }
    
        .node.pinned.clicked {
            stroke-width: 2.3px;
            stroke: #f0f;
            /* stroke: url(#pinned-clicked-gradient); */
        }
    }
    
    .link-graph .node.hidden {
        opacity: 1 !important;
        font-size: 3.5px;
    }
    
    /* This is here for the diff view */
    .feature-detail {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    
        .h4 {
            padding-bottom: 5px;
            border-bottom: solid 1px #ccc;
        }
        
        .no-selected-feature{
            margin: 0 0 0 0;
            font-size: 13px;
            font-weight: 500;
        }
    
        /* Header section */
        .feature-header {
            flex-shrink: 0;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow-x: hidden;
            padding: 5px 0 0 0;
        }
    
        .header-top-row {
            display: flex;
            align-items: center;
            column-gap: 10px;
            height: 20px;
        }
    
        .feature-title {
            flex: 0 0 auto;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            margin-left: 1px;
            padding: 1px 1px;
    
            /* disables feature link */
            a {
                pointer-events: none;
                text-decoration: none;
            }
        }
        .feature-title.hovered{
            text-decoration: underline;
            text-decoration-color: #f0f;
        }
        .feature-title.pinned{
            outline: 1px solid #000;
        }
    
        .feature-link {
            flex: 0 0 auto;
            font-size: 13px;
            margin-left: 5px;
            cursor: pointer;
            a {
                color: inherit;
                text-decoration: none;
            }
            &:hover {
                text-decoration: underline;
            }
        }
    
        /* CLERP sections */
        .pp-clerp {
            flex: 1 1 auto;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: right;
        }
    
        .pclerp {
            display: flex;
            padding: 0 0 6px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            align-items: baseline;
    
            > div {
                flex: 1 0 0;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    
        .edit-clerp-button {
            flex: 0 0 auto;
            overflow: hidden;
        }
    
        button{
            font-size: 10px;
            padding: 0px 3px;
        }
    
        .clerp-edit {
            padding: 10px 0;
            flex-direction: column;
            gap: 8px;
            font-size: 12px;
            display: flex;
        }
    
    
        /* Examples section */
        .feature-examples-container {
            flex: 1;
            overflow-y: auto;
        }
    
        /* Logits section */
        .logits-container {
            padding-top: 6px;
            margin-bottom: 10px;
            font-size: 11px;
            display: flex;
            flex: 0 0 auto;
            flex-direction: column;
            overflow-y: hidden;
    
            .effects {
                margin-top: 6px;
            }
    
            .sign {
                display: flex;
                align-items: center;
                gap: 3px;
                overflow: hidden;
            }
    
            .label {
                flex: 0 0 80px;
                color: hsl(0 0 0 / 0.5);
            }
            .rows {
                flex: 1 1 0;
                display: flex;
                gap: 3px;
                overflow: hidden;
            }
            .row {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                margin-top: 1px;
                padding-bottom: 1px;
            }
    
            .key {
                font-family: monospace;
                flex-grow: 1;
                color: hsl(0 0 0 / 0.5);
                background: hsl(0 0 0 / 0.08);
                border-radius: 4px;
                padding: 1px 3px;
                height: 14px;
            }
    
            .value {
                display: none;
                font-size: 9px;
                color: hsl(0 0 0 / 0.4)
            }
        }
    }
    
    
    .metadata {
        overflow-y: auto;
        font-family: monospace;
        font-size: 10px;
        color: #777;
    
        .row {
            padding-left: 15px;
            position: relative;
        }
    
        .toggle {
            position: absolute;
            left: 2px;
            cursor: pointer;
            user-select: none;
        }
    
        .children {
            padding-left: 15px;
        }
    }
    
    
    .button-container {
        display: flex;
        padding-left: 2px;
        overflow: hidden;
    
        .link-type-buttons, .toggle-buttons {
            display: flex;
            margin-right: 10px;
    
            div {
                margin: 0;
                padding: 8px;
                border: 1px solid #ccc;
                background: #fff;
                cursor: pointer;
                margin-left: -1px;
                user-select: none;
                display: flex;
                align-items: center;
                text-align: center;
                font-size: 12px;
    
                &:hover{
                    background: #eee;
                }
    
                &.active{
                    background: #000;
                    color: #fff;
                    border-color: #000;
                }
            }
        }
    
        .toggle-button:not(:last-child) {
            border-right: none;
        }
    
        .toggle-button:hover {
            background-color: #e0e0e0;
        }
    }
    
    
    
    
    .clerp-list{
        overflow-y: auto;
        overflow-x: scroll;
        padding: 0px;
    
        .feature-indicator {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
            display: inline-block;
        }
    }
    
    .clerp-list {
        font-size: 12px;
    }
    
    .feature-scatter, .feature-umap{
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 100%;
    
        .chart-container {
            flex-grow: 1;
            width: 100%;
            height: 100%;
    
            > div {
                width: 100%;
                height: 100%;
            }
        }
        select{
            font-family: system-ui;
            font-size: 12px;
            max-width: 100%;
        }
    }
    
    .feature-umap{
        .button {
            display: inline-block;
            cursor: pointer;
            user-select: none;
            opacity: .4;
            margin-right: 20px;
            font-size: 12px;
        }
    
        .button.active {
            opacity: 1;
        }
    
        > div:first-child {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
    }
    
    .subgraph {
        overflow: hidden;
        /* outline: 1px solid #eee; */
    
        marker{
            orient: auto;
        }
    
        svg{
            z-index: -999999999;
        }
    
        .weight-label{
            /* text-shadow: #fff .2px 0 .2px, #fff -.2px 0 .2px, #fff 0 .2px .2px, #fff 0 -.2px .2px; */
            font-size: 9px;
            font-family: system-ui;
            text-anchor: middle;
            alignment-baseline: bottom;
            dy: -.5em;
            opacity: .8;
            fill: #999;
        }
        .layer-label{
            color: #999;
            opacity: .8;
            margin-right: 2px;
        }
    
        .supernode-container {
            position: absolute;
            /* border: 1px solid #ddd; */
            font-size: 9px;
            line-height: 1em;
            cursor: pointer;
            pointer-events: none;
            height: 1px;
            width: 1px;
    
            .node-text-container{
                /* overflow: hidden; */
                text-align: center;
                position: relative;
                top: 22px;
                text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff, 1px 1px 0 #fff;
                pointer-events: all;
                color: #777;
                /* font-size: 12px; */
            }
    
            .temp-edit {
                width: 100px;
                font: inherit;
                border: none;
                padding: 0;
                margin: 0;
                background: none;
                outline: none;
                display: inline;
            }
    
            .clicked-weight {
                position: absolute;
                right: 0px;
                padding: 1px 1px;
                font-size: 8px;
                overflow: visible;
            }
            .clicked-weight.source {
                bottom: -12px;
            }
            .clicked-weight.target {
                top: -12px;
            }
            
            .member-circles {
                pointer-events: all;
                position: absolute;
                top: 0;
                left: 50%;
                transform: translate(-50%);
                border: 1px solid #ddd;
                border-radius: 4px;
                padding: 4px;
                display: flex;
                background: #E5E3D7;
                outline: 1px solid #6F6D5E;
            }
    
            .member-circle {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #fff;
                display: inline-block;
                border: 1px solid #000;
                outline: .5px solid #000;
                z-index: 100 !important;
            }
            
            .not-clt-feature.member-circle{
                border-radius: 1.5px;
            }
    
            .member-circle:first-child {
                margin-left: 0;
            }
        }
        
        .ungroup-btn {
          display: none;
        }
      
        &.is-grouping .ungroup-btn {
          display: block;
        }

    
        .hovered.node .member-circles, .hovered.member-circle {
            border-color: rgba(0,0,0,0);
            outline: 1.5px dotted #f0f;
            z-index: 100;
        }
    
        .clicked.node .member-circles, .clicked.member-circle {
            border-color: rgba(0,0,0,0);
            outline: 1.5px solid #f0f;
        }
    
        .grouping-selected .member-circles{
          outline: 2px solid #0ff;
        }
    
        .checkbox-container{
            user-select: none;
            position: absolute;
            bottom: 0px;
            color: #999;
    
            input{
                accent-color: #999;
            }
    
            label:not(:first-child){
                margin-left: 10px;
                display: inline-block;
            }
        }
    
        .is-supernode {
            padding-bottom: 15px;
        }
    

        .ungroup-btn {
            position: absolute;
            left: 0px;
            bottom: 0px;
            cursor: pointer;
            color: #0bb;
            z-index: 100;
            font-size: 12px;
            padding: 2px;

            &:hover {
                opacity: 1;
                color: #000;
                background: #0ff;
            }
        }
    
    }
    
    .feature-row {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        overflow: hidden;
        padding: 1px 3px;
        margin: 1px 0;
        border-radius: 8px;
        cursor: pointer;
    
        svg {
            width: 10px;
            height: 10px;
            margin-right: 4px;
        }
        .default-icon {
            fill: none;
            stroke: grey;
            stroke-width: .7;
            display: block;
        }
    
        .ctx-offset {
            flex: 1 0 5px;
            opacity: 0.5;
        }
    
        .layer {
            flex: 1 0 25px;
            opacity: 0.5;
        }
    
        .label {
            flex: 1 1 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .weight {
            flex: 1 0 35px;
            font-variant-numeric: tabular-nums;
        }
        &.hovered {
            outline: 3px dotted #f0f;
            z-index: 99;
            z-index: 100;
            position: relative;
        }
        &.clicked {
            outline: 1px solid #f0f;
            z-index: 999;
        }
        &.pinned .default-icon {
            stroke: #000 !important;
            stroke-width: 1.8px;
        }
        &.clicked circle {
            stroke: magenta;
            stroke-width: 1px;
        }
    
        &.hidden {
            opacity: .5;
            font-size: 7px;
            padding-top: 0px;
            padding-bottom: 0px;
        }
    
    }
    
    .feature-examples {
        
        .example-quantile {
            margin-bottom: 5px !important;
        }
        & .example-quantile {
            margin-top: 10px;
            
            .quantile-title {
                font-weight: 500 !important;
                font-size: 13px;
                /* margin-bottom: 5px; */
                width: 100%;
                padding-bottom: 5px;
                border-bottom: solid 1px #eee;
                display: block;
            }
        }
        
        .example-2-col > div{
            margin-bottom: 20px;;
        }
        
        .feature-example-logits{
            .ctx-container{
                border-bottom: solid 0px #fff !important;
                margin-bottom: -4px;
            }
        }
    }
    
    .node-connections {
        .header-top-row{
            user-select: none;
        }
        .feature-icon {
            color: #fff;
            -webkit-text-stroke: 1.5px #f0f;
            text-align: center;
            vertical-align: middle;
            margin-right: 5px;
            position: relative;
            top: -2px;
            font-size: 10px;
        }
        .feature-title{
            font-weight: 500 !important;
            font-size: 13px;
            margin-bottom: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .pinned .feature-icon{
            -webkit-text-stroke: 2.5px #f0f;
        }

        .connections {
            flex: 1 0 auto;
            display: flex;
            overflow-y: hidden;
            overflow-x: visible;
            gap: 200px;
    
            .features {
                display: flex;
                flex: 1 1 auto;
                flex-direction: column;
                min-width: 20px;
                width: 100%;
            }
    
            
            .effects {
                font-size: 11px;
                flex: 1 0 0;
                display: flex;
                flex-direction: column;
                overflow-y: scroll;
                overflow-x: visible !important;
                /* border-bottom: solid 1px #eee; */
                padding-top: 8px;
            }
    
            .h4 {
                padding-bottom: 5px;
                border-bottom: solid 1px #eee;
            }
    
            .h4 label {
                display: flex;
                align-items: center;
                gap: 6px;
            }
    
            input {
                margin: 0;
            }
        }
        .sum-table table {
            width: 100%;
            border-collapse: collapse;
            font-weight: 300;
            color: rgb(85, 85, 85);
            line-height: 1em;
            margin-top: 4px;
            border-width: 0px !important;
            margin-bottom: 0px;
            line-height: 1em;
    
            th, td {
                text-align: center;
                font-size: 11px !important;
                border-bottom-color: #fff !important;
                line-height: 1em;
            }
    
            th:not(:first-child), td:not(:first-child){
                padding-left: 0px !important;
                padding: 0px 10px !important;
            }
    
            th {
                font-weight: 400;
            }
            
            tr{
                border-color: #fff !important;
            }
    
            tr.data td{
                font-variant-numeric: tabular-nums;
            }
        }
    }
}