/**************************************/
/* Project styles for pw_comments */
/**************************************/

.tx-pwcomment-pi1 {
  font-size: var(--body-font-size);
  line-height: 1.5;
}

.tx-pwcomment-pi1 .comments-container {
  max-width: 100%;
}

.tx-pwcomment-pi1 .comments-list {
  padding-left: 0;
}

.tx-pwcomment-pi1 .comments-list .comment-box,
.tx-pwcomment-pi1 .reply-list .comment-box {
  float: none;
  width: 100%;
  max-width: 100%;
}

.tx-pwcomment-pi1 .reply-list {
  padding-left: var(--gutter);
}

.tx-pwcomment-pi1 .reply-list li:before {
  display: none;
}

.tx-pwcomment-pi1 .comment-box:before,
.tx-pwcomment-pi1 .comment-box:after {
  display: none;
}

.tx-pwcomment-pi1 .comment-box .comment-head span {
  font-size: var(--font-size-small, 0.875rem);
}

.tx-pwcomment-pi1 .comment-box .comment-name {
  font-size: var(--font-size-small, 0.875rem);
  font-variation-settings: var(--font-variation-settings-semibold);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}

.tx-pwcomment-pi1 .comment-box .comment-date {
  font-size: var(--font-size-small, 0.875rem);
  line-height: 1.3;
}

.tx-pwcomment-pi1 .comment-box .comment-head {
  padding: var(--base-size-quarter) var(--gutter-half);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--base-size-eighth) var(--gutter-quarter);
  overflow: visible;
}

.tx-pwcomment-pi1 .comment-box .comment-content {
  font-size: var(--body-font-size);
  line-height: 1.55;
  padding: var(--base-size-quarter) var(--gutter-half);
}

.tx-pwcomment-pi1 .comment-actions a.reply {
  font-size: var(--font-size-small, 0.875rem);
}

.tx-pwcomment-pi1 .comment-box .comment-name,
.tx-pwcomment-pi1 .comment-box .comment-head span {
  float: none;
  margin: 0;
  top: auto;
}

.tx-pwcomment-pi1 .comment-actions {
  position: static;
  margin-left: auto;
  min-width: max-content;
  white-space: nowrap;
}

.tx-pwcomment-pi1 .loggedInAs {
  display: inline-block;
  font-size: var(--font-size-small, 0.875rem);
  line-height: 1.4;
  margin-bottom: var(--base-size-half);
}

.tx-pwcomment-pi1 label {
  font-size: var(--font-size-small, 0.875rem);
}

.tx-pwcomment-pi1 #writeComment input[type="text"],
.tx-pwcomment-pi1 #writeComment textarea {
  font-size: var(--font-size-small, 0.875rem);
  line-height: 1.5;
  margin-bottom: var(--base-size-quarter);
}

.tx-pwcomment-pi1 #writeComment textarea {
  min-height: calc(var(--font-size-small, 0.875rem) * 1.5 * 4);
  height: calc(var(--font-size-small, 0.875rem) * 1.5 * 4);
}

.tx-pwcomment-pi1 #writeComment form > div {
  margin-bottom: var(--base-size-half);
}

.tx-pwcomment-pi1 #writeComment form > div.typo3-messages,
.tx-pwcomment-pi1 #writeComment form > div.hide_initally {
  margin-bottom: 0;
}

.tx-pwcomment-pi1 .typo3-messages {
  margin: 0 0 var(--base-size-half);
  padding: 0;
}

.tx-pwcomment-pi1 .typo3-messages .alert {
  margin-bottom: var(--base-size-half);
  padding: var(--base-size-quarter) var(--gutter-half);
}

.tx-pwcomment-pi1 .typo3-messages .alert-message {
  margin: 0;
}

@media only screen and (max-width: 766px) {
  .tx-pwcomment-pi1 .comments-container {
    width: auto;
    margin-top: var(--base-size-double);
  }

  .tx-pwcomment-pi1 .comments-list {
    margin-top: var(--base-size);
  }

  .tx-pwcomment-pi1 .reply-list {
    padding-left: var(--gutter-half);
    margin-top: var(--base-size-half);
  }

  .tx-pwcomment-pi1 .comment-actions {
    flex-basis: auto;
    margin-left: auto;
  }
}