﻿.comments-box{--bg:rgba(255, 255, 255, 0.05);padding:30px 50px}
.comments-box .rt-color2{background-color:#eee}
.comments-box .none{display:none}

.comments-box .post_comment_form{padding:20px;margin-top:20px}
.comments-box .login-to-comment{line-height:1.85;background-color:rgba(255, 255, 255, 0.25);border-radius:8px;color:#fff;padding:15px}
.comments-box .login-to-comment a{color:var(--color2)}
.comments-box .login-to-comment a:hover{opacity:.8}
.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)}
.comments-box .comment-list .comment-item .post_comment_form,.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 .avatar img{height:100%;top:0;right:0;}
.comments-box .post_comment_form .avatar .letter{margin-top:14px}
.comments-box .post_comment_form .inside{width:calc(100% - 70px)}
.comments-box .post_comment_form .inside .input-item{width:calc(50% - 7.5px)}
.comments-box .post_comment_form .inside .input-item .input{border:0;padding:12px 15px;margin-bottom:15px;background-color:#00000057}

.comments-box .post_comment_form .inside textarea{resize:none;border:0;padding:10px 15px 60px 15px;height:100px;max-width:100%;line-height:2;background-color:#00000057}
.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{opacity:.5;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{opacity:1}
.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-form>.post_comment_form{margin-bottom:5px;background:none;padding:0 0 25px;border-bottom:2px rgba(255, 255, 255, 0.1) dashed;border-radius:0}


.comments-box .comment-list{padding-top: 5px;}
.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:var(--bg);position:absolute;width:3px;border-radius:8px;content:""}

.comments-box .comment-list .comment-item{padding:20px;background:rgba(255, 255, 255, 0.07);margin-top:20px;border-radius:10px}
.comments-box .comment-list .comment-item .avatarx{width:40px;height:40px}
.comments-box .comment-list .comment-item .avatarx img{top:0;right:0;height:100%}
.comments-box .comment-list .comment-item .avatarx .letter{margin-top:8px}
.comments-box .comment-list .comment-item .info img{height: 14px;transform: translate(-3px,3px);}
.comments-box .comment-list .comment-item .content{width:calc(100% - 57px)}
.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-bottom:10px;line-height:1.9;color:#666;text-align:justify}
.comments-box .comment-list .comment-item .content .reply-cm{padding:5px 12px;margin-left:10px}
.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}
.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:1px 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:7px 12px 9px;margin:5px 0 15px;background-color:rgba(242, 148, 8, 0.1)}
.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%}
.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 var(--blur) solid;padding:10px 25px;display:inline-block;background-color:var(--body)}
.comments-box .showmore-comments .show-btn:hover{opacity:.8}
.comments-box .comment-list .comment-item .content .comment-content{color:#ddd}
.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,.comments-box .comment-list .comment-item .content .reply-cm:hover{opacity:.8}


@media only screen and (max-width:920px){
.comments-box{padding:0 18px 10px}
.comments-box .post_comment_form .avatar{width:40px;height:40px;margin:15px 0 0 15px}
.comments-box .post_comment_form .avatar .letter{margin-top:9px}
.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 .avatarx .letter{margin-top:6px}
.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}

.comments-box .showmore-comments .show-btn{font-size:13px;padding:9px 15px}

.comments-box .post_comment_form .inside .input-item{width:100%}
.comments-box .post_comment_form .inside .input-item .input{padding:10px 15px;margin-bottom:10px;font-size:13px}

.comments-box .login-to-comment{margin-top:10px;padding:10px;font-size:13px}

}