table.diffview {
    border: 0px;
    border-spacing: 0px;
    border-collapse: collapse;
    width: 100%;

    tr td, tr th {
        border: none !important;
        padding: 0 !important;
    }

    .change code {
        white-space: pre-wrap;
    }

    .diff-added {
        background: var(--pxt-colors-green-alpha10) !important;

        .ch-added {
            background: var(--pxt-colors-green-alpha10);
            font-weight: bold;
        }
    }

    .diff-removed {
        background: var(--pxt-colors-red-alpha10);

        .ch-removed {
            background: var(--pxt-colors-red-alpha10);
        }
    }

    .diff-marker {
        background: var(--pxt-neutral-background1);
        color: var(--pxt-neutral-foreground1);
    }

    .diff-marker td {
        padding-left: 1em;
    }

    tr.conflict {
        border-left: 2px solid var(--pxt-colors-yellow-hover);
        border-right: 2px solid var(--pxt-colors-yellow-hover);
    }
    tr.conflict.header {
        border-top: 2px solid var(--pxt-colors-yellow-hover);
        border-bottom: 2px solid var(--pxt-colors-yellow-hover);
        background-color: var(--pxt-colors-yellow-background);
    }
    tr.conflict.header td {
        color: @conflictHeaderColor;
    }
    tr.conflict td.ui {
        padding-left: 0.5rem;
        padding-top: 0.5rem;
    }

    tr.conflict.footer {
        border-bottom: 2px solid var(--pxt-colors-yellow-hover);
    }

    .line-a,
    .line-b {
        width: 3em;
        text-align: right;
        color: var(--pxt-neutral-foreground2);
    }

    .marker {
        width: 2.5em;
        text-align: center;
    }

    .change {
        text-align: left;
    }

    .diff-added .line-b:before,
    .diff-removed .line-a:before,
    .diff-unchanged .line-a:before,
    .diff-unchanged .line-b:before {
        content: attr(data-content);
    }

    .marker:before {
        content: attr(data-content);
    }
}

table.diffview.update {
    .diff-added {
        background: var(--pxt-colors-yellow-alpha10) !important;
    
        .ch-added {
            background: var(--pxt-colors-yellow-hover);
            outline: @diffUpdateInlineAddedOutline;
            font-weight: bold;
        }
    }
}

@media only print {
    table.diffview.update {
        .diff-added {
            outline: 1px solid black;
        }
    }
}