.article.comments > h3 {
    padding: 0 0 10px 0;
    margin: 0 0 10px 0;
    font-size: 18px;
}
.comment[featured] {
    background-image: url('/images/featured.svg');
    background-repeat: no-repeat;
    background-size: 80px 80px;
    background-position: center top;
}
.comment > .user {
    display: flex;
    align-items: center;
    font-size: 0.9em;
}
.comment > .user > div {

}
.comment > .user > .user-avatar {
    flex: 0 0 50px;
    padding-right: 10px;
    box-sizing: border-box;
    user-select: none;
}
.comment > .user > .user-nickname {
    color: #930;
    padding-right: 10px;
    display: flex;
    align-items: center;
}
.comment > .user > .user-nickname:before {
    content: '@';
    padding-right: 1px;
}
.comment > .user > .datetime {
    padding-left: 10px;
    color: #888;
}
.comment > .user > .floor {
    flex: 1;
    text-align: right;
}
.comment > .user > .floor span {
    padding-left: 5px;
}
.comment > .remark {
    margin: 10px 5px 10px 50px;
    padding: 10px;
    box-sizing: border-box;
    background-color: rgba(244, 242, 222, 0.7);
    border-left: #facc15 3px solid;
    font-size: 0.85em;
    line-height: 150%;
}
.comment > .remark a {
    color: #065fd4;
}
.comment > .remark a:hover {
    color: #f00;
}
.comment > .misc {
    margin: 10px 5px 10px 50px;
    padding: 10px;
    box-sizing: border-box;
    background-color: rgba(244, 222, 222, 0.7);
    border-left: #fa9915 3px solid;
    font-size: 0.85em;
    line-height: 150%;
}
.comment > .content {
    padding-left: 50px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.comment > .content a {
    color: #00c;
    padding: 0 3px;
}
.comment > .content a:hover {
    color: #f00;
}
.comment > .score {
    padding-left: 50px;
    padding-bottom: 5px;
    user-select: none;
    color: #f90;
}
.comment > .interactive {
    padding-left: 50px;
    padding-bottom: 10px;
    user-select: none;
}
.comment > .interactive .btn {
    color: #065fd4;
    cursor: pointer;
    padding-right: 20px;
}
.comment > .interactive .btn i {
    padding-right: 3px;
}
.comment > .interactive .btn:hover {
    color: #f00;
}
.comment > .interactive .replyCount {
    padding: 0 3px;
}
.comment > .submit-reply {
    display: none;
    flex-wrap: wrap;
    padding-left: 50px;
}
.comment > .submit-reply > div:nth-child(1) {
    flex: 0 0 50px;
}
.comment > .submit-reply > div:nth-child(2) {
    padding-left: 10px;
    box-sizing: border-box;
    flex: 0 0 calc(100% - 50px - 50px);
}
.comment > .submit-reply > div:nth-child(3) {
    flex: 0 0 100%;
    padding-right: 50px;
    box-sizing: border-box;
    text-align: right;
}
.comment > .submit-reply input[type='text'] {
    width: 100%;
    padding: 0 5px;
    box-sizing: border-box;
    border-left: none;
    border-right: none;
    border-top: none;
    margin-bottom: 5px;
    font-size: 16px;
}
.comment > .submit-reply input[type='text']:focus {
    background-color: transparent;
}
.comment > .reply-container {
    display: none;
    padding-left: 50px;
}
.comment > .reply-container > .comment-reply {
    padding: 10px 0;
    border-bottom: #ddd 1px dashed;
    flex-wrap: wrap;
    font-size: 0.9em;
}
.comment > .reply-container > .comment-reply:last-child {
    border-bottom: 0;
}
.comment > .reply-container > .comment-reply > .user {
    display: flex;
    align-items: center;
    color: #666;
}
.comment > .reply-container > .comment-reply > .user > .user-avatar {
    flex: 0 0 50px;
    padding-right: 10px;
    box-sizing: border-box;
}
.comment > .reply-container > .comment-reply > .user > .user-nickname {
    color: #930;
    padding-right: 10px;
}
.comment > .reply-container > .comment-reply > .user > .user-nickname:before {
    content: '@';
    padding-right: 1px;
}
.comment > .reply-container > .comment-reply > .user > .datetime {
    padding-left: 10px;
    color: #888;
}
.comment > .reply-container > .comment-reply > .content {
    padding: 5px 0 0 50px;
}
.comment > .reply-container > .comment-reply > .content a {
    color: #00c;
    padding: 0 3px;
}
.comment > .reply-container > .comment-reply > .content a:hover {
    color: #f00;
}
.submit-comment {
    width: 100%;
    padding-right: 5%;
    box-sizing: border-box;
    display: flex;
}
.submit-comment > .user-avatar {
    flex: 0 0 60px;
}
.submit-comment > .submit {
    flex: 1;
}
.submit-comment > .submit > .quick-reply {
    max-width: 65vw;
    overflow: hidden;
}
.submit-comment > .submit > div {
    padding-bottom: 5px;
}
.submit-comment > .submit > .textarea-container {
    box-sizing: border-box;
}
.submit-comment > .submit textarea {
    width: 100%;
    font-size: 14px;
    height: 5em;
    resize: none;
    padding: 5px;
    box-sizing: border-box;
}
.submit-comment > .submit > .rules {
    color: #888;
    font-size: 0.9em;
    line-height: 150%;
}
.submit-comment > .submit > .rules a {
    color: #00c;
    padding-right: 5px;
}
.submit-comment > .submit > .rules a:hover {
    color: #f00;
}
.submit-comment > .submit > .rules ul {
    margin-left: 15px;
}
.submit-comment > .submit > .button-line {
    display: flex;
    align-items: center;
    justify-content: right;
}
.submit-comment > .submit > .button-line > span {
    padding-right: 10px;
}
.comment-list > div {
    height: 35px;
    line-height: 35px;
    overflow: hidden;
    border-bottom: #eee 1px dashed;
}
.comment-list > div:last-child {
    border-bottom: transparent 1px dashed;
}
.comment-list span {
    padding-right: 10px;
}
.comment-list .obj {
    font-weight: bold;
    font-size: 1.15em;
}
.comment-list .obj a {
    color: #00f;
}
#comment_data {
    scroll-margin-top: 65px;
}

@media only screen and (max-width: 1024px) {
    .comment > .user {
        flex-wrap: wrap;
    }
    .comment > .user > .datetime {
        padding-left: 50px;
        padding-bottom: 5px;
        flex: 0 0 100%;
        box-sizing: border-box;
    }
    .comment > .reply-container > .comment-reply > .user > .datetime {
        display: none;
    }
    .comment > .interactive .btn {
        padding-right: 10px;
    }
    .comment > .interactive .btn i {
    }
    #comment_data {
        scroll-margin-top: 6vh;
    }
}