.annotation {
    cursor:pointer;
    display: inline;
    text-decoration-color: #eee;
    padding: .14em 0;
}
span.issue{
    border:1px darkblue dashed;
} 
span.revisit{
    border:1px cornflowerblue dashed;
}

rect.sentence.normal{
    background-color: #f5f5f5;
    fill: #eee;
} 

#blue span.confidence--high, #blue span.annotation.complete, #blue rect.sentence.normal--high {
    /*background-color: #fff175;
    fill: #fff175;*/
    background-color: #7db3ff;
    fill: #7db3ff;
}
#blue span.confidence--medium, #blue span.annotation.inprogress, #blue rect.sentence.normal--medium {
    /*background-color: #fff17599;
    fill: #fff17599;*/
    background-color: #7db3ff99;
    fill:#7db3ff99;
}
#blue span.confidence--low, #blue span.annotation.started, #blue rect.sentence.normal--low {
    background-color: #7db3ff44;
    fill:#7db3ff44;
    /*background-color: #fff17544;
    fill: #fff17544;*/
}

#yellow span.confidence--high, #yellow span.annotation.complete, #yellow rect.sentence.normal--high {
    background-color: #fff175;
    fill: #fff175;
}
#yellow span.confidence--medium, #yellow span.annotation.inprogress, #yellow rect.sentence.normal--medium {
    background-color: #fff17599;
    fill: #fff17599;
}
#yellow span.confidence--low, #yellow span.annotation.started, #yellow rect.sentence.normal--low {
    background-color: #fff17544;
    fill: #fff17544;
}

#transparent span.confidence--high, #transparent span.annotation.complete, #transparent rect.sentence.normal--high {
    background-color: white;
    fill: white;
}
#transparent span.confidence--medium, #transparent span.annotation.inprogress, #transparent rect.sentence.normal--medium {
    background-color: white;
    fill: white;
}
#transparent span.confidence--low, #transparent span.annotation.started, #transparent rect.sentence.normal--low {
    background-color: white;
    fill: white;
}

#overall:not(.reading-view) span.annotation:not(.filtered-in) {
    background-color: transparent !important;
}
span.same.confidence--high, rect.sentence.same--high {
    background-color: #90ee90;
    fill: #12ee12;
}
span.same.confidence--medium, rect.sentence.same--medium {
    background-color: #90ee9099;
    fill: #12ee1299;
}
span.same.confidence--low, rect.sentence.same--low{
    background-color: #90ee9044;
    fill: #12ee1244;
}

span.different.confidence--high, rect.sentence.different--high {
    background-color: #f08080;
    fill: #ef2121;
}
span.different.confidence--medium, rect.sentence.different--medium {
    background-color: #f0808099;
    fill: #ef212199;
}
span.different.confidence--low, rect.sentence.different--low{
    background-color: #f0808044;
    fill: #ef212144;
}

span.same[data-score="3"], rect.sentence[class*="same"].score-3,
span.different[data-score="3"], rect.sentence[class*="different"].score-3 {
    background-color: rgba(var(--color-score-3), 0.32);
    fill: rgba(var(--color-score-3), 1);
}

span.different[data-score="2"], rect.sentence[class*="different"].score-2 {
    background-color: rgba(var(--color-score-2), 0.32);
    fill: rgba(var(--color-score-2), 1);
}

span.different[data-score="1"], rect.sentence[class*="different"].score-1 {
    background-color: rgba(var(--color-score-1), 0.32);
    fill: rgba(var(--color-score-1), 1);
}

span.different[data-score="0"], rect.sentence[class*="different"].score-0 {
    background-color: rgba(var(--color-score-0), 0.32);
    fill: rgba(var(--color-score-0), 1);
}

span:not(.filtered-in).different,
span:not(.filtered-in).same {
    background-color: #F5F5F5;
}

span.selected, span.connect {
    text-decoration: underline 1.5px;
    opacity: 1 !important;
}

span.markable.faded {
    background-color: #ddd;
}
span.annotation.empty, rect.sentence.empty--low {
    background-color: #f5f5f5;
    fill: #eee;
}

span.annotation.faulty {
    border: dotted 1px lightgray;
}

span.annotation.target-selection {
    border: dashed 1px;
}

/* For filter */
[data-only-goldstandard=true] span.annotation.filtered-in {
    text-decoration-line: underline;
    text-decoration-thickness: 3px;
    text-underline-position: under;
}
[data-only-goldstandard=true] span.annotation {
    background-color: transparent !important;
}

[data-filter-criteria="domain"][data-has-goldstandard=true][data-only-goldstandard=true] span.annotation.filtered-in,
[data-filter-criteria="rhetorical"][data-has-goldstandard=true][data-only-goldstandard=true] span.annotation.filtered-in,
[data-filter-criteria="argumentation"][data-has-goldstandard=true][data-only-goldstandard=true] span.annotation.filtered-in,
[data-filter-criteria="domain"][data-has-goldstandard=false] span.annotation.filtered-in,
[data-filter-criteria="rhetorical"][data-has-goldstandard=false] span.annotation.filtered-in,
[data-filter-criteria="argumentation"][data-has-goldstandard=false] span.annotation.filtered-in {
    text-decoration-line: underline;
    text-decoration-thickness: 3px;
    text-underline-position: under;
    background-color: transparent !important;
}