.box {
    background-color: #fff;
    border-radius: 5px;
    margin: 1em 0;
    padding: .5em;
    box-shadow: 0 5px 20px rgba(0,0,0,.4);
}

.flow-item {
    flex: 0 0 600px;
}
.left-container .flow-reply {
    flex: 0 0 300px;
    max-height: 15em;
    margin-left: -5px;
    overflow-y: hidden;
}

.aux-margin,
.left-container .flow-item {
    margin-left: 50px;
}
.aux-margin {
    width: calc(100% - 2 * 50px);
}

@media screen and (max-width: 1200px) {
    .aux-margin,
    .left-container .flow-item {
        margin-left: 10px;
    }
    .aux-margin {
        width: calc(100% - 2 * 10px);
    }
}

.left-container .flow-item-row {
    cursor: default;
    transition: margin-left 200ms ease-out;
}
.left-container .flow-item-row:hover {
    margin-left: -10px;
}

.left-container .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;
}