#comments {
  position: relative;
  margin: 0;
}
.comments-title i,
.add-comment-title i {
  font-size: 1em;
}
/* Comment -> comment form */
.comment-form-wrap {
  position: relative;
  margin: 2rem 0 1rem 0;
}
.add-comment-title a {
  color: var(--primary);
}
.add-comment-title,
.comments-title {
  font-size: 1em;
  color: var(--primary);
  font-weight: normal;
  margin-bottom: 12px;
  line-height: 1rem;
}
.add-comment-title:before {
  content: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='24px' height='24px' viewBox='240 240 32 32' enable-background='new 240 240 32 32' xml:space='preserve'%3E%3Cpath fill='%23D4D1D1' d='M264.143,244.859h-16.286c-2.129,0.002-3.854,1.728-3.857,3.857v10.285c0.002,2.13,1.728,3.855,3.857,3.857 h1.286v3.429c0,0.474,0.383,0.857,0.856,0.857c0.201,0,0.396-0.07,0.55-0.199l4.901-4.087h8.692 c2.129-0.002,3.855-1.728,3.857-3.857v-10.285C267.998,246.587,266.272,244.862,264.143,244.859z M250.857,255.574 c-0.947,0-1.714-0.768-1.714-1.715c0-0.947,0.767-1.714,1.714-1.714s1.714,0.768,1.714,1.714 C252.572,254.806,251.804,255.574,250.857,255.574z M256,255.574c-0.947,0-1.714-0.768-1.714-1.715c0-0.947,0.768-1.714,1.714-1.714 c0.947,0,1.714,0.768,1.714,1.714C257.714,254.806,256.948,255.574,256,255.574z M261.143,255.574c-0.946,0-1.714-0.768-1.714-1.715 c0-0.947,0.768-1.714,1.714-1.714c0.947,0,1.715,0.768,1.715,1.714C262.858,254.806,262.09,255.574,261.143,255.574z'/%3E%3C/svg%3E");
  display: inline-block; 
  vertical-align: middle;
  margin-right: 6px;
}
#comments #comment-form {
  display: none;
}

.comment-form label {
  display: block;
}
/* Comments -> single comment */
.comment {
  position: relative;
  background-color: var(--border);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 1rem;
  padding: 1rem;
}
.comment-header {
  position: relative;
  display: flex;
  width: 100%;
  border-bottom: 2px solid var(--light);
  padding: 0;
  margin-bottom: 1rem;
}
.comment-user-picture {
  position: relative;
  text-align: center;
  align-self: center;
}
.comment-user-picture img {
  max-width: 100px;
  height: auto;
}
.comment-user-picture .image-field {
  margin: 0;
}
.comment-meta {
  padding-left: 1rem;
}
h3.comment-title {
  font-size: 1.2rem;
  margin: 0.1rem 0;
}
.comment-meta p {
  margin: 0
}
.comment-body {
  position: relative;
  width: 100%;
  -webkit-box-flex: 1;
  -ms-flex: 1 1;
  flex: 1 1;
}
#comments .indented {
  margin-left: 3rem;
}
.comment-body .links {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 1rem;
}
.comment-body .links a {
  padding: 4px 12px;
  border: 1px solid var(--primary);
  border-radius: 4px;
}
.comment-body .links a:hover {
  background-color: #ffffff;
}