.dict_comments_box {
	margin-left:1em;
	visibility: hidden;
	pointer-events: none;
	opacity: 1;
	height: 0;
    transition: opacity 0.3s ease, height 0.3s ease;

}
textarea.make_comment {
	border: 1px solid #ccc;

	border-radius:6px;

	padding:.5em .6em;
	display:inline-block;
	margin: 1px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	zoom: 1;

	font-size: 1rem;
	letter-spacing: normal;
	word-spacing: normal;
	text-rendering: auto;

	overflow-y: visible;

	width:100%;
	max-width:85vw;
}

textarea.make_comment:focus, textarea.make_comment:hover {
	border-color:#66afe9;
	outline:0;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(102,175,233,0.6);
}



div.make_comment_buttons {
	opacity: 0;
	height: 0;
	pointer-events: none;
}



.comments_list_container {
	width:100%;
	max-width:85vw;
}




.comment_display_box {
	display: flex;
	align-items: flex-start;
	margin-bottom: 1em;
}

.comment_profile_photo {
	width: 4em;
	height: 4em;
	flex-shrink: 0;

	border-radius: 50%;
	margin-left:auto;
	margin-right:auto;
	background-image: url("../img/user_profile_silhouette_default.svg");
	background-size: cover;
	background-position: center;
	overflow:hidden;
	box-shadow: inset 0 0 2px rgba(128,128,128,0.5);

	image-rendering: high-quality;
}

.comment_content {
	flex-grow: 1;
	margin-left: 1em;
}

.comment_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.commented_by_name {
	font-weight: bold;
}

.commented_when {
	opacity: 0.8;
}

.comment_display_toggle {
	background: none;
	border: none;
	color: blue;
	cursor: pointer;
}



.comment_text {
	margin: 5px 0;
	line-height: 1.4;
}

.comment-actions {
	display: flex;
	gap: 10px;
}


.comment_trash_icon {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><g><polyline points="3 6 5 6 21 6" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" /></g></svg>') no-repeat center center;
	background-size: contain;
	overflow: visible;
}

.comment_edit_icon {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon--Edit' aria-hidden='true'%3E%3Cg%3E%3Cpath d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34'/%3E%3Cpolygon points='18 2 22 6 12 16 8 16 8 12 18 2'/%3E%3C/g%3E%3C/svg%3E");
	background-size: contain;
	overflow: visible;
}

.comment_eye_icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: url('data:image/svg+xml,<svg x="0" y="0" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="stroke:currentColor;width:1em;height:1em"><path d="M15.0007 12C15.0007 13.6569 13.6576 15 12.0007 15C10.3439 15 9.00073 13.6569 9.00073 12C9.00073 10.3431 10.3439 9 12.0007 9C13.6576 9 15.0007 10.3431 15.0007 12Z" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.0012 5C7.52354 5 3.73326 7.94288 2.45898 12C3.73324 16.0571 7.52354 19 12.0012 19C16.4788 19 20.2691 16.0571 21.5434 12C20.2691 7.94291 16.4788 5 12.0012 5Z" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center center;
	background-size: contain;
	overflow: visible;
}