.comments {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.comment-block-title {
    font-size: 1.714285em;
    font-weight: 700;
}

.comment-area {
	margin-top: 10px;
    width: 100%;
}

.comment-area .comment-area-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.comment-area .send-form {
	margin-bottom: 20px;
}
.comment-area .comments .comment .comment-sent-container {
    display: flex;
    flex-direction: column-reverse;
    gap: 16px;
    padding: 24px;
    border-radius: 8px;
}
.comment-area .comments .comment .comment-sent-on {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.comment-area .comment .comment {
	position: relative;
}

/*.comment-area.form-area .send-form .inline-input {
    margin-bottom: 16px;
}*/

.comment .comment-sent-container .comment-sent-on .sent-by {
    font-size: 1.285em;
    font-weight: 500;
}
.comment-area .comments .comment .comment-reply {
    padding: 24px;
}
.comment-area .comments .comment .comment-reply .reply-container {
    display: grid;
    grid-template-areas:
    "logo name"
    "logo content";
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    row-gap: 8px;
}
.comments .comment .comment-reply .reply-container .replied-by-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    grid-area: name;
}
.comment-area .comments .comment .comment-reply .reply-container .reply-content {
	padding-bottom: 5px;
    grid-area: content;
}

.comment-area .comments .comment .comment-reply .reply-container .reply-user-image {
    grid-area: logo;
    width: 40px;
    height: 40px;
    border-radius: 100%;
}

.comment-area .comments-loading .comments-loading-icon {
    margin-right: 5px;
}

.comment-area.form-area .send-form .inline-input .input-field {
    max-width: initial;
}

.comment-area.form-area .send-form .block-input {
    max-width: initial;
}

.comment-area.form-area .send-form .block-input .input-field textarea {
    height: 160px;
    display: block;
}

.comment-area.form-area .new-comment-button {
    border-radius: 8px;
    padding: 4px 12px;
    border: none;
    font-weight: 700;
    line-height: 2;
    display: flex;
    align-items: center;
    gap: 4px;
}


.comment-area .comment-area-header .new-comment-button svg {
    transition: transform 0.2s ease;
}

.comment-area.new-comment-open .comment-area-header .new-comment-button svg {
    transform: rotate(-180deg);
}

.comment-area.form-area .captcha-submit-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px;
}

.comment .comment-reply .replied-by-wrapper .replied-by {
    font-size: 1.14285em;
    font-weight: 500;
}

.comments .comment .sent-at,
.comments .comment .replied-by-wrapper .replied-at {
    font-size: 0.85714em;
}

.comment-area:not(.new-comment-open) .send-form {
    display: none;
}

.comment-area:not(.new-comment-open) .new-comment-button .close-new-comment,
.comment-area.new-comment-open .new-comment-button .open-new-comment {
    display: none;
}

@media screen and (max-width: 560px) {
    .comment-area.form-area .captcha-submit-container {
        flex-direction: column;
        align-items: flex-start;
    }
}