/* reaction sec */
.jpCommenter .reaction-sec { margin-top: 2em;}
.jpCommenter .reaction-sec h6 { text-align: center; font-size: 1.2em; color: #444; margin-bottom: 0.5em;}
.jpCommenter .reaction-sec span { text-align: center; font-size: 1em; color: #777; display: block;}
.jpCommenter .reaction-sec .reaction-list { display: flex; flex-wrap: wrap; justify-content: space-between; width: 95%; margin: 1em auto;  max-width: 600px;}
.jpCommenter .reaction-sec .reaction-list a { display: block; background: #eee; padding: .5em; border-radius: 20px; }
.jpCommenter .reaction-sec .reaction-list a img { width: 38px; margin-right: 1em;}
.jpCommenter .reaction-sec .reaction-list a em { font-size: 1.2em; color: #333;}
.jpCommenter .reaction-sec .reaction-list a:hover { background: #69af86; text-decoration: none; }
.jpCommenter .reaction-sec .reaction-list a:hover em {color: #fff; }
.jpCommenter .reaction-sec .reaction-list a:hover img { width: 42px;}

.jpCommenter .reaction-sec .reaction-list a.selected { background: #28583c; text-decoration: none; }
.jpCommenter .reaction-sec .reaction-list a.selected em {color: #fff; }
.jpCommenter .reaction-sec .reaction-list a.selected img { width: 42px;}

.jpCommenter .comment-sec { margin-bottom: 2em;}

/* typing sec */
.jpCommenter .comment-sec .top-sec {display: flex; justify-content: space-between; margin-bottom: 1em;}
.jpCommenter .comment-sec .top-sec .left { font-size: 1.6em; color: #333;}
.jpCommenter .comment-sec .top-sec .right { font-size: 1.1em; color: #555;}

.jpCommenter .comment-sec .typing-sec { border: 2px solid #ccc; border-radius: 15px; background: #fff; width: 95%; }
.jpCommenter .comment-sec .typing-sec  textarea { display: block; width: 88%; border: none; min-height: 80px; background: none;  }
.jpCommenter .comment-sec .typing-sec  textarea { font-family: "Roboto", serif; padding: 1em; margin-left: .5em;}
.jpCommenter .comment-sec .typing-sec .action-sec {background: #eee; padding: .2em 0; }
.jpCommenter .comment-sec .typing-sec .action-sec a.comment-btn { float: right; margin-right: 2em; display: block; border-radius: 10px; text-align: center;}
.jpCommenter .comment-sec .typing-sec .action-sec a.comment-btn { background: #333; color: #fff; padding: .3em; font-size: .9em; width: 80px; }
.jpCommenter .comment-sec .typing-sec .action-sec a.comment-btn:hover { text-decoration: none; background: #0a7001;}


/* no comment */
.jpCommenter .comment-listing .no-comments { font-size: 1.1em; color: #999; text-align: center; margin-top: 3em;} 

/*  Sort*/
.jpCommenter .comment-listing .sort-sec { margin-top: 1em; }
.jpCommenter .comment-listing .sort-sec ul { display: flex; width: 95%; justify-content: end; }
.jpCommenter .comment-listing .sort-sec li { margin-left: 1.2em; }
.jpCommenter .comment-listing .sort-sec a {  color: #555; font-size: .8em; }
.jpCommenter .comment-listing .sort-sec a:hover {  color: #153661;  }
.jpCommenter .comment-listing .sort-sec a.selected {  text-decoration: underline; color: #444; font-weight: bold;  }


/* g */
.jpCommenter .comment-listing .comment-item { display: flex; margin-top: 1em;  border-bottom: 1px solid #eee; padding-bottom: 1em;}
.jpCommenter .comment-listing .comment-item.pending { border-left: 5px solid #d4cf7c; background: #f0f1ab; padding: 0.3em;} 
.jpCommenter .comment-listing  .comment-item .left {margin-right: 0.7em;}


/* avatar sec */
.jpCommenter .comment-listing .avatar { width: 40px; height: 40px;}
.jpCommenter .comment-listing .avatar img { width: 100%; height: 100%; object-fit: cover; }
.jpCommenter .comment-listing .avatar .initials { display: flex; width: 100%; height: 100%; background: #0f4577; color: #fff; font-size: 1.6em;}
.jpCommenter .comment-listing .avatar .initials { justify-content: center; align-items: center; border-radius: 15px;}
.jpCommenter .comment-listing .avatar .initials.multiple { font-size: 1.4em;}


/* comment list */
.jpCommenter .comment-listing .comment-item .right .user_info { margin-bottom: 0.8em;}
.jpCommenter .comment-listing .comment-item .right .user_info em { font-size: .9em; color: #555; display: block;}
.jpCommenter .comment-listing .comment-item .right .user_info .date { font-size: .8em; color: #999;}

.jpCommenter .comment-listing .comment-item .content p { font-size: .95em; color: #444; line-height: 1.6em; }
.jpCommenter .comment-listing .comment-item .bottom { margin-top: .5em; display: flex;}
.jpCommenter .comment-listing .comment-item .bottom ul { display: flex; margin-right: 1.8em;}
.jpCommenter .comment-listing .comment-item .bottom li { margin-right: 0.3em; }
.jpCommenter .comment-listing .comment-item .bottom li a.vote  { display: block; padding: .2em .8em; border-radius: 15px;}
.jpCommenter .comment-listing .comment-item .bottom li a.vote img {  width: 20px; vertical-align: middle; opacity: 0.7;}
.jpCommenter .comment-listing .comment-item .bottom li a.vote em {  color: #555; font-size: .8em; vertical-align: middle;}
.jpCommenter .comment-listing .comment-item .bottom li a.vote.selected { background: #5e7b96; color: #fff;   }
.jpCommenter .comment-listing .comment-item .bottom li a.vote.selected em { color: #fff;}
.jpCommenter .comment-listing .comment-item .bottom li a.vote.selected img {  filter: brightness(0) invert(1); opacity: 0.9;}

.jpCommenter .comment-listing .comment-item .bottom li a.vote:hover { background: #eee; text-decoration: none;  }
.jpCommenter .comment-listing .comment-item .bottom li a.vote:hover img {  filter: brightness(0) invert(0); opacity: 0.9;}

.jpCommenter .comment-listing .comment-item .bottom li a.vote.selected:hover { background: #2aa10c; color: #fff;   }
.jpCommenter .comment-listing .comment-item .bottom li a.vote.selected:hover img {  filter: brightness(0) invert(1); opacity: 0.9;}

.jpCommenter .comment-listing .comment-item .bottom li a.vote.downvote.selected:hover { background: #a1360c; color: #fff;   }

.jpCommenter .comment-listing .comment-item .bottom a.reply {font-size: .8em; color: #444;  display: block; margin-top: 0.4em;}
.jpCommenter .comment-listing .comment-item .bottom a.reply:hover { font-weight: bold; text-decoration: none;}

/* replt sec */
.jpCommenter .comment-listing .comment-item .reply-sec { display: flex; margin: 1.5em 0; background: #f4f4f4; padding: .5em;}
.jpCommenter .comment-listing .comment-item .reply-sec .user-info { margin-right: 1em; }
.jpCommenter .comment-listing .comment-item .reply-sec .typing-sec  {  width: 90%;}
.jpCommenter .comment-listing .comment-item .reply-sec .typing-sec textarea {  width: 85%;}
.jpCommenter .comment-listing .comment-item .reply-sec .action-sec .cancel { font-size: .8em; color: #555; margin-left: .5em;  }


/* child */
.jpCommenter .comment-listing .child-comments li:first-child .comment-item { border-top: 1px dotted #aaa; padding-top: 1em; }

.jpCommenter .comment-listing .child-comments .show-replies { display: block;  color: #20507c;  font-size: .8em; width: 80px; font-weight: bold;  }
.jpCommenter .comment-listing .child-comments .show-replies { padding: .5em .5em; text-align: center; border-radius: 15px; margin-top: 1em;}
.jpCommenter .comment-listing .child-comments .show-replies em { font-size: 1.4em;}

.jpCommenter .comment-listing .child-comments .show-more-replies { display: block;  color: #145992; text-decoration: underline; font-size: .8em; width: 90%; max-width: 150px; text-align: center; margin: 1em auto 0 auto;}


.jpCommenter .comment-listing a.load-more-comments { display: block; background: #0f4577; color: #fff; padding: .5em; font-size: .9em; width: 90%; max-width: 500px; border-radius: 15px; text-align: center; margin: 2em auto;}
.jpCommenter .comment-listing a.load-more-comments:hover { background: #0a7001; text-decoration: none;}




/* Guest mode popup */
.jpCommenter .guest-mode-popup { position: fixed;  background: #000; z-index: 9999; width: 100%; height: 100%; left: 0; top: 0; overflow: auto; display: none;}
.jpCommenter .guest-mode-popup { background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.7); }
.jpCommenter .guest-mode-popup .p_content-sec { width: 85%; max-width: 800px;  margin: 15% auto; background: #222; }
.jpCommenter .guest-mode-popup .p_content-sec { border-radius: 10px; padding: 1em;}
.jpCommenter .guest-mode-popup .close { float: right; font-size: 2.2em; color: #fff; padding: .5em; margin-bottom: 1em;  }
.jpCommenter .guest-mode-popup .p_content-sec h6 { color: #eee; font-size: 1.3em; margin-bottom: 1em; text-align: center;}
.jpCommenter .guest-mode-popup .p_content-sec .error { color: #e4a3a3; font-size: .9em; margin-bottom: 1em; text-align: center;}
.jpCommenter .guest-mode-popup .p_content-sec fieldset input { border:1px solid #777; display: block; width: 90%; max-width: 400px;  background: #eee;  padding: .4em; font-size: 1em; margin: 0 auto;}
.jpCommenter .guest-mode-popup .p_content-sec a.submit { background: #145992; color: #fff; width: 150px; padding: .5em; display: block; border-radius: 10px; margin: 2em auto; text-align: center;  font-size: .9em;}

/*--------------------------------------------------------
  			Small Screen
---------------------------------------------------------*/


@media screen and (max-width: 800px) {

    .jpCommenter .reaction-sec .reaction-list  { max-width: 310px;}
    .jpCommenter .reaction-sec .reaction-list  a { margin-bottom: 1.5em;}
    
 }
    
    
 @media screen and (max-width: 500px) {
    
 }