.box {
    background-color: #fff;
    border-radius: 5px;
    margin: 1em 0;
    padding: .5em;
    box-shadow: 0 5px 20px #999;
}

.left-container .centered-line {
    width: calc(100% - 2 * 50px);
}
.flow-item {
    flex: 0 0 600px;
}
:not(.sidebar-flow-item) .flow-reply {
    flex: 0 0 300px;
    max-height: 15em;
    margin-left: -5px;
    overflow-y: hidden;
}

.left-container .centered-line,
.left-container .flow-item {
    margin-left: 50px;
}

:not(.sidebar-flow-item).flow-item-row {
    cursor: pointer;
    transition: margin-left 200ms ease-out;
}
:not(.sidebar-flow-item).flow-item-row:hover {
    margin-left: -10px;
}

:not(.sidebar-flow-item).flow-item-row {
    display: flex;
    overflow-x: hidden;
    align-items: flex-start;
}

.flow-item-row img {
    max-width: 100%;
}

.flow-item-row pre {
    white-space: pre-wrap;
    font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
    word-wrap: break-word;
}

.box-header-badge {
    float: right;
    margin: 0 .5em;
}

.box-id {
    font-family: Consolas, Courier, monospace;
    opacity: .6;
}

.flow-reply-gray {
    background-color: #eee;
}