﻿.comments-box{margin-bottom:35px}
.comments-box{
--bg:#f5f5f5;
}
.dark-mode .comments-box{
--bg:rgba(255, 255, 255, 0.05);
}

.comments-box .rt-color2{background-color:#eee}
.rt-block.comments{padding:20px}
.light-mode .rt-block.comments{box-shadow:0 3px 4px rgba(8,7,9,.071)}
.dark-mode .comments-box .titlex{color:#fff}

.light-mode .comments-box .comment-list{border-top-color:rgba(0, 0, 0, 0.05)}
.light-mode .comments-box .rt-ddd{color:#999}

.light-mode .comments-box .comment-list .comment-item,.light-mode .comments-box .post_comment_form{box-shadow:0 3px 4px rgba(8,7,9,.071);background-color:#fff;}
.light-mode .comments-box .post_comment_form .inside textarea{background-color:#f5f5f5}
.light-mode .comments-box .comment-list .children::before{background-color:#e0e0e0}


.box.comments{padding:15px}
.box.comments .title{text-align:right}


.comments-box .titlex{margin:10px 0 0}
.comments-box .titlex span{margin-right:5px}
.comments-box .none,.comments-box .titlex span.is0{display:none}


.comments-box .post_comment_form{padding:20px;margin-top:20px}
.comments-box .login-to-comment{margin-top:15px;background-color:#f7e0e0;border-radius:8px;color:#333;padding:15px}
.comments-box .login-to-comment a{color:#036ba6}
.comments-box .comment-list .comment-item .post_comment_form,.comments-box .comment-list .comment-item .content .reply-cm{background-color:rgba(0, 0, 0, 0.05)}

.dark-mode .comments-box .comment-list .comment-item .post_comment_form,.dark-mode .comments-box .comment-list .comment-item .content .reply-cm{background-color:rgba(255, 255, 255, 0.05)}

.comments-box .post_comment_form[data-active="false"] .inside textarea{opacity:.5}

.comments-box .post_comment_form .avatar{width:50px;height:50px;margin:15px 0 0 20px}
.comments-box .post_comment_form .inside{width:calc(100% - 70px)}
.comments-box .post_comment_form .inside textarea{resize:none;border:0;padding:10px 15px 60px 15px;height:100px;max-width:100%;line-height:2}
.comments-box .post_comment_form .inside textarea:focus,.comments-box .post_comment_form .inside textarea:not(:placeholder-shown){height:140px}
.comments-box .post_comment_form .inside .spoil-comment{bottom:10px;right:15px;padding:4px 8px}
.comments-box .post_comment_form .inside .spoil-comment .custom-check{background-color:#d0cfcf;top:0;right:0;height:100%}
.comments-box .post_comment_form .inside .spoil-comment input[type="checkbox"],
.comments-box .post_comment_form .inside .spoil-comment .yes,
.comments-box .post_comment_form .inside .spoil-comment input[type="checkbox"]:checked ~ .not
{display:none}
.comments-box .post_comment_form .inside .spoil-comment input[type="checkbox"]:checked ~ .yes{display:inline-block}
.comments-box .post_comment_form .inside .spoil-comment input[type="checkbox"]:checked ~ .custom-check{background-color:#4caf50}
.comments-box .post_comment_form .inside .spoil-comment samp{margin:-1px 0 0 7px}
.comments-box .post_comment_form .inside button{background-color:#acd5f8;border:0;left:10px;bottom:10px;padding:5px 15px}
.comments-box .post_comment_form .inside button svg{transform:translate(-3px,4px) rotate(-24deg)}
.comments-box .post_comment_form .inside textarea:not(:placeholder-shown) ~ button{background-color:#0c85e9}
.comments-box .post_comment_form .cancel-reply{border-radius:0 10px 0 10px;background-color:#f9c7cc;padding:2px 8px;top:0;right:0;color:#e60014}

.comments-box .comment-list{border-top: 2px #eee dashed;padding-top: 5px;margin-top: 25px;}

.comments-box .comment-list .children{width:calc(100% - 30px);float:left;position:relative}
.comments-box .comment-list .children:before{right:-20px;height:calc(100% - 60px);top:40px;background-color:#2b3037;position:absolute;width:3px;border-radius:8px;content:""}

.comments-box .comment-list .comment-item{width:100%;float:right;background-color:#2b3037;padding:20px;border-radius:10px;margin-top:20px;position:relative}

.light-mode .comments-box .comment-list .children:before,.light-mode .comments-box .comment-list .comment-item{background-color:#fff}


.comments-box .comment-list .comment-item .avatarx{width:50px;height:50px;font-size:17px}
.comments-box .comment-list .comment-item .info .name-are{width:calc(100% - 100px)}
.comments-box .comment-list .comment-item .info .name{float:none}
.comments-box .comment-list .comment-item .info img{height: 14px;transform: translate(-3px,3px);}
.comments-box .comment-list .comment-item .content{width:calc(100% - 67px)}
.comments-box .comment-list .comment-item .content .info{border-bottom:1px rgba(0, 0, 0, 0.07) solid;padding-bottom:10px}
.dark-mode .comments-box .comment-list .comment-item .content .info{border-bottom-color:rgba(255, 255, 255, 0.07)}
.comments-box .comment-list .comment-item .content .info .reply-to-user{margin-right:7px;display:inline-block}
.comments-box .comment-list .comment-item .content .info .fa-check-circle{color:#77aff7;margin-right:5px}
.comments-box .comment-list .comment-item .content .date{font-style:italic;opacity:.7;padding:7px 0}
.comments-box .comment-list .comment-item .content .comment-content{margin:15px 0 20px;line-height:1.9;color:#666;text-align:justify}

.comments-box .comment-list .comment-item .content .comment-content img{width: 18px !important;height: 18px !important;margin: 0 5px !important;}


.comments-box .comment-list .comment-item .content .reply-cm{padding:5px 12px}
.comments-box .comment-list .comment-item .content .reply-cm i{margin-left:7px}
.comments-box .comment-list .comment-item .likecm-box .btnz{background-color: rgba(0, 0, 0, 0.03);padding:3px 10px;border-radius: 8px;margin-left: 10px;}
.comments-box .comment-list .comment-item .likecm-box .btnz:hover{opacity:.7}
.dark-mode .comments-box .comment-list .comment-item .likecm-box .btnz{background-color:rgba(255, 255, 255, 0.05)}
.comments-box .comment-list .comment-item .likecm-box .btnz svg{float:right;margin:2px 0 0 5px}
.comments-box .comment-list .comment-item .likecm-box .btnz.like svg{fill:#5daf2f}
.comments-box .comment-list .comment-item .likecm-box .btnz.dislike svg{fill:#f75a4a;transform:rotate(180deg);}
.comments-box .comment-list .comment-item .comment-is-spoil{color:#f29408;padding:15px 0;margin:20px 0}
.comments-box .comment-list .comment-item .comment-is-spoil samp{margin-left:7px}
.comments-box .comment-list .comment-item .comment-is-spoil ~ .comment-content{display:none}

.comments-box .showmore-comments:before{position:absolute;top:50px;right:0;content:"";background-color:rgba(0, 0, 0, 0.15);height:1px;width:100%}
.dark-mode .comments-box .showmore-comments:before{background-color:rgba(255, 255, 255, 0.05)}
.comments-box .showmore-comments .isbtn{display:inline-block;padding:30px 20px 0}
.comments-box .showmore-comments .show-btn{border:1px #ddd solid;padding:8px 15px;display:inline-block;background-color:#fff;font-size:13px}
.comments-box .showmore-comments .show-btn:hover{color:#444}
.dark-mode .comments-box .showmore-comments .show-btn{border-color:rgba(255, 255, 255, 0.05);background-color:#1c1d21}
.dark-mode .comments-box .showmore-comments .show-btn:hover{color:#fff}
.dark-mode .comments-box .comment-list{border-color:rgba(255, 255, 255, 0.05)}
.dark-mode .comments-box .comment-list .comment-item .content .comment-content{color:#ddd}
.dark-mode .comments-box .rt-color2{background-color:rgba(255, 255, 255, 0.1)}
.comments-box .first-cm{margin-top:30px}


.comments-box .post_comment_form .cancel-reply:hover{opacity:.8}
.comments-box .comment-list .comment-item .content .reply-cm:hover{background-color:rgba(0, 0, 0, 0.1)}

@media only screen and (max-width:920px){
.rt-block.comments{padding:0}
.comments-box .titlex{font-size:16px;text-align:right;margin-top:0}
.comments-box .titlex span{font-size:12px}
.comments-box .post_comment_form .avatar{width:40px;height:40px;margin:15px 0 0 15px}
.comments-box .post_comment_form .inside{width:calc(100% - 55px)}
.comments-box .post_comment_form .inside textarea,.comments-box .comment-list .comment-item .likecm-box{font-size:13px}
.comments-box .comment-list .comment-item .content .comment-content{font-size:12px;margin:15px 0}
.comments-box .comment-list .comment-item .avatarx{width:35px;height:35px}
.comments-box .comment-list .comment-item .content{width:calc(100% - 48px)}
.comments-box .post_comment_form .inside .spoil-comment{bottom:9px;font-size:10px}
.comments-box .post_comment_form .inside button{bottom:5px;left:5px}

.comments-box .comment-list .comment-item,.comments-box .post_comment_form{padding:15px;margin-top:15px;border-radius:8px}
.comments-box .first-cm{margin-top:20px;font-size:13px}
.comments-box .first-cm.not-log{margin-top:20px;text-align:right}
.comments-box .comment-list .comment-item .content .reply-cm{font-size:11px}
.comments-box .comment-list .comment-item .comment-is-spoil{font-size:11px}
.comments-box .comment-list .children{width:calc(100% - 20px)}
.comments-box .comment-list .comment-item .content .date{font-size:10px}

}