.rj-comments{
max-width:700px;
margin:auto;
padding:20px;
font-family:inherit;
color:#fff;
border:1px solid rgba(255,255,255,.05);
background:rgba(255,255,255,.01);
}

.rj-post-box{
background:transparent;
padding:0;
margin-top:20px;
margin-bottom:10px;
}

.rj-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:12px;
}

.rj-title{
font-size:22px;
font-weight:700;
font-family:inherit;
letter-spacing:.3px;
}

.rj-login-btn{
display:flex;
align-items:center;
gap:7px;

background:#15171c;
border:1px solid rgba(255,255,255,.06);
border-radius:10px;

padding:8px 14px;

color:#fff;
font-size:14px;
font-weight:600;
font-family:inherit;

cursor:pointer;
transition:.2s;
}

.rj-login-btn:hover{
background:#1a1d24;
}

.rj-login-btn img{
width:20px;
height:20px;
display:block;
flex-shrink:0;
}

.rj-login-btn span{
font-size:14px;
font-weight:600;
font-family:inherit;
line-height:1;
}

.rj-user-avatar-btn{
width:36px;
height:36px;
border-radius:50%;
object-fit:cover;
cursor:pointer;
border:none;
}

.rj-textarea{
width:100%;
height:120px;
background:#111318;
border:1px solid rgba(255,255,255,.06);
outline:none;
resize:none;
padding:14px;
color:#fff;
font-size:14px;
border-radius:6px;
transition:.2s;
font-family:inherit;
margin-bottom:10px;
}

.rj-textarea:focus{
border-color:#2563eb;
}

.rj-textarea::placeholder{
color:rgba(255,255,255,.35);
}

.rj-post-btn{
background:#d40000;
border:none;
color:#fff;
padding:10px 24px;
font-size:13px;
font-weight:700;
border-radius:5px;
cursor:pointer;
transition:.2s;
font-family:inherit;
}

.rj-post-btn:hover{
opacity:.92;
}

.rj-comment{
padding:18px;
border:1px solid rgba(255,255,255,.06);
background:rgba(255,255,255,.015);
margin-bottom:16px;
}

.rj-user-wrap{
display:flex;
justify-content:space-between;
align-items:flex-start;
}

.rj-user{
display:flex;
align-items:center;
gap:12px;
}

.rj-avatar{
width:42px;
height:42px;
border-radius:50%;
object-fit:cover;
}

.rj-name{
font-size:14px;
font-weight:700;
}

.rj-time{
font-size:11px;
opacity:.45;
margin-top:3px;
}

.rj-text{
margin-top:14px;
line-height:1.8;
font-size:14px;
color:rgba(255,255,255,.92);
word-break:break-word;
}

.rj-actions{
display:flex;
gap:18px;
margin-top:14px;
flex-wrap:wrap;
}

.rj-action{
font-size:13px;
opacity:.75;
cursor:pointer;
transition:.2s;
user-select:none;
}

.rj-action:hover{
opacity:1;
}

.rj-replies{
margin-top:16px;
margin-left:18px;
padding-left:14px;
border-left:1px solid rgba(255,255,255,.08);
}

.rj-reply-box{
margin-top:14px;
}

.rj-menu{
position:relative;
}

.rj-menu-btn{
cursor:pointer;
font-size:18px;
padding:2px 6px;
opacity:.7;
line-height:1;
}

.rj-menu-btn:hover{
opacity:1;
}

.rj-menu-dropdown{
position:absolute;
right:0;
top:28px;
background:#1a1d24;
border:1px solid rgba(255,255,255,.08);
display:none;
min-width:110px;
z-index:100;
border-radius:6px;
overflow:hidden;
}

.rj-menu-dropdown.show{
display:block;
}

.rj-menu-dropdown div{
padding:10px 14px;
cursor:pointer;
font-size:13px;
transition:.2s;
}

.rj-menu-dropdown div:hover{
background:rgba(255,255,255,.05);
}

.rj-edit-box{
margin-top:14px;
}

@media(max-width:768px){

.rj-comments{
padding:15px;
}

.rj-title{
font-size:20px;
}

.rj-comment{
padding:15px;
}

.rj-textarea{
height:110px;
font-size:14px;
}

.rj-post-btn{
padding:9px 20px;
}

}