.flat .deltaContainer {
    padding: 5px 0;
}

.flat .delta {
    font-family: 'Courier New', monospace;
    padding: 2px 4px;
    margin: 5px 0 0 16px;
    transition: 1s;
    white-space: pre;
}

.flat .delta.object.Document {
    margin-top: 15px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    border: none;
}

.flat .delta.object:before,
.flat .delta.prop:before,
.flat .delta.add:before,
.flat .delta.del:before {
    font-weight: bold;
    margin-right: 4px;
    padding: 2px;
}

.flat .delta.object:before {
    content: ">>";
    background: #f8f8f8;
    color: grey;
    padding-left: 1px;
}

.flat .delta.object.Document:before {
    content: "";
}

.flat .delta.prop:before {
    content: "==";
    background: lightcyan;
    color: grey;
}

.flat .delta.add:before {
    content: "++";
    color: green;
    background: #d5ffd7;
}

.flat .delta.del:before {
    content: "--";
    color: red;
    background: #ffd1d3;
}

.flat .delta .name,
.flat .delta .key,
.flat .delta .oldValue,
.flat .delta .newValue {
    border-radius: 3px;
    padding: 2px 4px;
}

.flat .delta .name:hover {
    text-decoration: underline;
    text-decoration-style: dotted;
}

.flat .delta .name {
    cursor: pointer;
    background-color: #eeeff2;
    color: #0d2192;
}

.flat .delta.del .name,
.flat .delta.del .name:hover {
    text-decoration: none;
    cursor: not-allowed;
    background-color: #eeeff2;
    color: #606464;
}

.flat .delta .key {
    background-color: #eee3f2;
    color: #620363;
}

.flat .delta .oldValue {
    background-color: #f9f2f4;
    color: #c7254e;
}

.flat .delta .newValue {
    background-color: #e9eef9;
    color: black;
}