/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

 .bcgov-comment-filters {
    padding-left: 2rem;
 }

 .bcgov-comment-filters .comment-list-sort-buttons {
   border-radius: 10px;
   border: 1px solid lightgrey;
   width: fit-content;
   background-color: #fff;
 }

 .pad-bottom {
    padding-bottom: 1rem;
 }

 .bcgov-comment-filters input[type=radio] {
   display: none;
   margin: 10px;
 }

 .bcgov-comment-filters input[type=radio] + label {
   display: inline-block;
   margin: 0;
   padding: 0.4rem 2.5rem;
   font-weight: 700;
   border-color: #ddd;
   border-radius: 10px;
 }

 .bcgov-comment-filters input[type=radio]:checked + label {
   background-image: none;
   background-color: #003366;
   color: #fff;
 }

.comment {
	padding-right: 10px;
	padding-bottom: 10px;
   margin-top: 10px;
}

 .bcgov-comment-children {
 	margin-left: 34px;
    border-left: 8px solid #999;
 }

 .bcgov-comment-box {
 	width: 100%;
 	margin-top: 10px;
 }

 .bcgov-comment-left {
 	display: table-cell;
 	height: 100%;
 	text-align: center;
 }

 .bcgov-comment-date-new-line {
    display: block;
 }

 .bcgov-comment-left-no-width {
   width: 0px;
}

 .bcgov-comment-chevrons > div > i {
 	font-size: 20px;
 }

 .bcgov-comment-avatar {
    width: 50px;
    display: table-cell;
    padding-right: 0.5rem;
 }

 .bcgov-comment-avatar img {
    width: 40px;
    height: 40px;
 }

 .bcgov-comment-chevrons {
    width: 40px;
    display: table-cell;
    padding-right: 0.5rem;
 }

 .bcgov-upvote {
 	cursor: pointer;
 }

 /* .bcgov-upvote.voted {
 	color: green;
 }

 .bcgov-downvote.voted {
    color: red;
 } */


 /* .bcgov-thumbs-up.voted {
    color: green;
   }

   .bcgov-thumbs-down.voted {
      color: red;
   } */
   .bcgov-downvote {
      cursor: pointer;
   }


  .bcgov-thumbs-up,
  .bcgov-upvote {
      cursor: pointer;
      display: inline;
   }

 .bcgov-thumbs-down,
 .bcgov-downvote {
    cursor: pointer;
    display: inline;
    padding-left: 5px;
 }

 .bcgov-vote-count {
   display: inline;
   padding-left: 5px;
 }

 .bcgov-comment-right {
 	display: table-cell;
   width: 100%;
 }

 .bcgov-comment-top {
 	padding: 5px;
   width: 100%;
   display: flex;
 }

 .bcgov-comment-stick-on-top {
    display: table-cell;
    /* width: 40px; */
    height: 100%;
    text-align: center;
    color: #38598a;
    font-size: 20px;
 }

 .bcgov-comment-top-text {
 	font-size: 12px;
    color: #888;
    padding: 0 0.25rem;
 }

 .bcgov-comment-author-title-mod, .bcgov-comment-author-title-vip {
   padding: 3px 10px 2px;
   margin-left: 5px;
   margin-right: 5px;
   font-size: 12px;
   font-weight: bold;
   border-radius: 15px;
   letter-spacing: 0.01rem;
}

 .bcgov-comment-author-title-mod {
    color: #fff;
    background-color: #38598a;
 }

 .bcgov-comment-author-title-vip {
    color: #000;
    background-color: #fcba19;
 }

 .bcgov-comment-min {
 	cursor: pointer;
 }

 .bcgov-comment-middle {
 	padding: 5px;
 }

 .bcgov-comment-bottom {
 	padding: 5px;
   display: flex;
   flex-wrap: wrap;
 }

 .bcgov-comment-link {
   display: inline-flex;
   vertical-align: middle;
   margin-right: 10px;
   margin-bottom: 10px;
   letter-spacing: 0.01rem;
 }

 .bcgov-comment-link.bcgov-permalink a {
   font-size: 12px;
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 0.7rem;
   border-radius: 4px;
   background-color: #fcba19;
   color: black;
   height: 40px;
   text-align: center;
   font-weight: bold;
   text-decoration: none;
   text-transform: capitalize;
 }

 .bcgov-comment-link.bcgov-comment-reply a {
   /* Need to use !important to override media query. */
   font-size: 12px !important;
   padding-top: 0.7rem !important;
   border: none !important;
   border-radius: 4px !important;
   min-width: 75px;
   background-color: #036;
   color: white;
   height: 40px;
   text-align: center;
   font-weight: bold;
 }

.bcgov-comment-replies-min {
   display: inline-flex;
   vertical-align: middle;
   margin-bottom: 10px;
   letter-spacing: 0.01rem;
   cursor: pointer;
}

.bcgov-comment-replies-min .show-replies-button, .bcgov-comment-replies-min .hide-replies-button {
   font-size: 12px;
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 0.55rem;
   border-radius: 4px;
   border: 2px solid #036;
   color: #036;
   height: 40px;
   text-align: center;
   font-weight: bold;
   text-decoration: none;
   text-transform: capitalize;
 }

.bcgov-comment-thumbs-below, .bcgov-comment-chevrons-below {
   font-size: 12px;
   color: #036;
   padding-right: 10px;
   padding-left: 10px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 4px;
   height: 40px;
   border: 2px solid #036;
   margin-right: 10px;
   margin-bottom: 10px;
}

.bcgov-comment-thumbs-above, .bcgov-comment-chevrons-above {
   display: flex;
   flex-grow: 1;
   justify-content: flex-end;
   align-items: center;
   font-size: 12px;
   color: #1a5a96;
   padding-right: 5px;
}

.bcgov-thumbs-up-count, .bcgov-thumbs-down-count, .bcgov-vote-count {
   font-size: 1rem;
   font-weight: 700;
}

.bcgov-comment-thumb-up-icon {
   background-image: url('../images/thumbs-up-regular.png');
}

.bcgov-comment-thumb-down-icon {
   background-image: url('../images/thumbs-down-regular.png');
}

.bcgov-comment-thumb-up-icon, .bcgov-comment-thumb-down-icon {
   max-width: 20px;
   height: 20px;
   width: 20px;
   display: inline-block;
   top: 4px;
   position: relative;
}

.comment-reply-link {
   color: #fff !important;
   text-decoration: none;
}


 .comment-reply-link a:active, .comment-reply-link a:hover, .comment-reply-link a:visited {
    color: #fff;
    background-color:  #036 !important;
    text-decoration: underline;
}

.bcgov-comment-filters {
	padding-bottom: 20px;
}

.bcgov-comment-search-trigger {
    margin-top: -30px;
    cursor: pointer;
    height: 25px;
    position: relative;
    right: 6px;
    float: right;
    width: 25px;
    background-image: url(../images/search-ico.png);
    background-position: 98% center;
    background-repeat: no-repeat;
}

ol.comment-list {
   padding-inline-start: 0;
}