div.comments {overflow-y: scroll; max-height: 23rem; font-size: 0.8rem}
div.comments .dropdown-menu {margin: inherit; padding: inherit}

div.comment div.comment-author, div.comment div.comment-under {
  font-weight: bold;
  font-size: 0.8rem;
}
div.comment div.comment-date {font-weight: normal; color: var(--comment-date-color)}
div.comment-date svg.flag {fill: var(--comment-date-color); width: 1.2rem}
div.comment svg.icon.heart {width: 1.2rem}
div.comment svg.icon.ellipsis {width: 1.2rem}
div.comment svg.icon.heart.filled {fill: red}
div.comment-under form {margin-left: 1.5rem}
div.comment button.btn-link {padding: 0; font-weight: bold; font-size: 1em}
div.comment-content {
  border-radius: 1rem !important;
  background-color: var(--bg-comments) !important;
}
.lev1 {margin-left: 1.5rem}
.lev2 {margin-left: 3rem}
.lev3 {margin-left: 4.5rem}
.lev4 {margin-left: 6rem}

form.lev0, form.lev1, form.lev2, form.lev3,  form.lev4 {margin-bottom: 1rem}
label[for='id_comment'], h4.comments-header {
  font-size: 1.3rem; font-weight: bold; color: var(--main-red)
}
#comments-loading {
    opacity:0;
    transition: opacity 500ms ease-in;
}
#comments-loading.htmx-request {opacity:1}
#comments-loading .htmx-request {opacity:1}
.scroll-sentinel { min-height: 1px; }