/* Styling for comments in "HOnK" and "Kurz gemeldet" */

.tx-comments-comment-single {
  overflow: hidden;
  position: relative;
  margin-bottom: 14px;
  width: 80%;
}

div.comment-info {
  font-weight: bold;
  color: #666;
  margin: 0 25px;
}

.tx-comments-comment-content {
  background: #fff;
  padding: 14px;
  color: #666;
}

/* Bubble zipfl */
.tx-comments-comment-content:before {
  content: '';
  display: block;
  position: absolute;
  border: 20px solid transparent;
  border-bottom-color: #fff;
  left: -20px;
  top: -20px;
}

/* Zipfl and info at the right on even bubbles */
.tx-comments-comment-single:nth-child(even) {
  float: right;
}

.tx-comments-comment-single:nth-child(even) .comment-info {
  text-align: right;
}

.tx-comments-comment-single:nth-child(even) .tx-comments-comment-content:before {
  content: '';
  display: block;
  position: absolute;
  border: 20px solid;
  border-color: transparent transparent #fff transparent;
  left: 96.5%;
  top: -20px;
}

/* Removes alternating layout for odd and even on small devices (col-xs equivalent) */
@media screen and (max-width: 767px) {
  .tx-comments-comment-single {
    width: 100%;
  }

  .tx-comments-comment-single:nth-child(even) .tx-comments-comment-content:before {
    left: -20px;
    top: -17px;

  }

  .tx-comments-comment-single:nth-child(odd) .tx-comments-comment-content:before {
    left: -20px;
    top: -17px;
  }

  .tx-comments-comment-single:nth-child(even) .comment-info {
    text-align: left;
  }
}

/* Hack to adjust bubbles on col-sm */
@media (min-width: 768px) and (max-width: 1023px) {
  .tx-comments-comment-single:nth-child(even) .tx-comments-comment-content:before {
    left: 94.5%;
  }
}