.variant-top {
    position: relative;
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
    align-items: stretch;
    flex: 1 1 auto;
    box-sizing: border-box;
}
.variant-text {
    position: relative;
    flex: 1 0 auto;
    width: 0;
    display: flex;
    box-sizing: border-box;
}
.variant-graphic {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    background-color: #eeeeee;
    z-index: -1;
}
.variant-modified::before {
    content: "\002e22";
}
.variant-modified::after {
    content: "\002e23";
}
[data-variant-type="DELETE"]::before {
    content: "\0021E7";
    cursor: pointer;
}
[data-variant-type="INSERT"]::before {
    content: "\002039";
}
[data-variant-type="INSERT"]::after {
    content: "\00203a";
}
[data-variant-type="NOMATCH"]::before {
    content: "\002e24";
}
[data-variant-type="NOMATCH"]::after {
    content: "\002e25";
}
[data-variant-type="MOVE"]::before {
    content: "\0029d8";
}
[data-variant-type="MOVE"]::after {
    content: "\0029d9";
}
[data-variant-type="RELOCATE"]::before {
    content: "\0029d8";
}
[data-variant-type="RELOCATE"]::after {
    content: "\0029d9";
}
span[data-variant-type] {
    background-color: #ffeedd;
    cursor: pointer;
}
span.variant-modified {
    background-color: #ddeeff;
    cursor: pointer;
}
span.variant-highlight-modified {
    background-color: coral;
}
span.variant-highlight-modified-corresponding {
    background-color: coral;
    animation-duration: 1s;
    animation-name: variant-highlight-modified-corresponding;
}
@keyframes variant-highlight-modified-corresponding {
    from {
        background-color: darkred;
        color: white;
    }
    to {
        background-color: coral;
    }
}
span.variant-highlight {
    background-color: pink;
}
span.variant-highlight-corresponding {
    background-color: pink;
    animation-duration: 1s;
    animation-name: variant-highlight-corresponding;
}
@keyframes variant-highlight-corresponding {
    from {
        background-color: darkred;
        color: white;
    }
    to {
        background-color: pink;
    }
}

.variant-svg {
    position: absolute;
    opacity: 1;
}
.variant-g-delete-stroke {
    stroke: #ff8888;
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}
.variant-g-delete-fill {
    fill: #fff8f8;
    vector-effect: non-scaling-stroke;
}
.variant-g-move-stroke {
    stroke: #8888ff;
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}
.variant-g-move-fill {
    fill: #f8f8ff;
    vector-effect: non-scaling-stroke;
}
.variant-g-modify-stroke {
    stroke: #ff8888;
    stroke-width: 4px;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke;
}
.variant-g-modify-fill {
    fill: #ff8888;
    vector-effect: non-scaling-stroke;
}
.variant-g-match-stroke {
    stroke: #ccffee;
    vector-effect: non-scaling-stroke;
}
.variant-g-match-fill {
    fill: #ccffee;
    vector-effect: non-scaling-stroke;
}
.variant-g-match-delete-stroke {
    stroke: #ff8888;
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
}
.variant-g-match-move-stroke {
    stroke: #8888ff;
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
}