#auto-comment {
	margin-bottom: 1.5rem;
}
#auto-comment .disclaimer {
	line-height: 1rem;
    font-size: 0.8rem;
}

.auto-comment-inner {
	display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    width: 100%;
}

.autocomment {
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
  width: 100%;
}

.autocomment:last-of-type {
  margin: 0;
}

.autocomment-img {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.autocomment-bubble {
  width: 75%;
  padding: 15px;
  border-radius: 15px;
  background: #efefef;
  position: relative;
  min-height: 200px;
}

.autocomment-bubble::before {
	content: "";
	position: absolute;
	bottom: 36px;
	left: -15px;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-left: 8px solid transparent;
	border-right: 8px solid #efefef;
	border-bottom: 8px solid transparent;
}

.autocomment-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.autocomment-info-name {
  margin-right: 10px;
  font-weight: bold;
}

.autocomment-info-time {
  font-size: 0.85em;
}

.left-comment .autocomment-bubble {
  border-bottom-left-radius: 0;
}

.right-comment {
  flex-direction: row-reverse;
}

.right-comment .autocomment-bubble {
  background: #c3f69d;
  color: #000;
  border-bottom-right-radius: 0;
}

.right-comment .autocomment-img {
  margin: 0 0 0 10px;
}

.autocomment-text {
	text-align: left;
}

/* Window width less than 600px */
@media (max-width: 599px) {
  .autocomment-bubble {
    min-height: 240px;
  }
}

/* Window width less than 500px */
@media (max-width: 499px) {
  .autocomment-bubble {
    min-height: 340px;
  }
}