.commentCard {
    padding: 8px;
}

.commentHead {
    height: 4em;
    display: flex;
    align-items: center;
    justify-content: left;
}

    .commentHead img {
        width: 4em;
        height: 4em;
        margin-right: 8px;
        border-radius: 8px;
    }

    .commentHead > div:last-child {
        font-size: 1.2em;
        font-weight: bold;
        line-height: 1em;
    }

        .commentHead > div:last-child > div:first-child[contenteditable] {
            min-width: 8em;
            border-bottom: 1px solid #ccc;
        }

            .commentHead > div:last-child > div:first-child[contenteditable]:empty::after {
                content: attr(placeholder);
                color: #999;
                position: absolute;
                user-select: none;
            }

        .commentHead > div:last-child > div:last-child[contenteditable] {
            font-size: .8em;
            font-weight: lighter;
            min-width: 12em;
            border-bottom: 1px solid #ccc;
        }

            .commentHead > div:last-child > div:last-child[contenteditable]:empty::after {
                content: attr(placeholder);
                color: #999;
                position: absolute;
                user-select: none;
            }

    .commentHead small {
        color: #777;
    }

.commentBody {
    position: relative;
    margin-top: 4px;
}

.commentRep {
    background-color: #444;
    color: white;
    padding: 0 4px;
    margin-bottom: 4px;
}

    .commentRep[order] {
        user-select: none;
        cursor: pointer;
    }

.pagenation {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}

.commentBody > div[contenteditable] {
    border-bottom: 1px solid #ccc;
}

    .commentBody > div[contenteditable]:empty:after {
        content: attr(placeholder);
        position: absolute;
        color: #999;
        user-select: none;
    }

.ReplyBtnHolder {
    margin-top: 0.6em;
    text-align:right;
}