

.comment_add_details summary{
	display: flex;
	margin-left: auto;
	width: fit-content;
}

.comment_add_details[open] summary{
	background-color:  var(--grey-light);
	color: white;
	transition: var(--transition);
}

.comment_add_details[open] summary svg{
	rotate: 135deg;
	transition: var(--transition);
}

.comment_form{
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.comment_form_label {
	font-weight: var(--heavy);
}

.comment_form_submit {
	margin-top: 1rem;
}

.comments_list{
	display: flex;
	flex-direction: column;
	gap: var(--gap-tiny);
}

.comment{
	display: grid;
	grid-template-columns: 24px 1fr 24px;
	gap: 16px;
	background: var(--pale-blue, #E5F3FF);
	border: 1px solid var(--active, #3F88C4);
	padding:16px 20px;
	color: var(--dark);
}


.comment.is_child{
	display: none;
}

.comments_list_all .comment.is_child{
	display: grid;
}

.comment_image{
	background:url('/site/assets/images/icons/person.svg') no-repeat center top;
	background-size: 24px;
}

.comment_system{
	background: var(--pale-red, #FFDDD6);
	border: 1px solid var(--red, #DE4F34);
}

.comment_system .comment_image{
	background:url('/site/assets/images/icons/system-log.svg') no-repeat center top;
}

.comment_technical{
	background: var(--pale-yellow, hsla(46, 100%, 90%, 1));
	border: 1px solid var(--warning, #FFC300);
}

.comment_technical .comment_image{
	background:url('/site/assets/images/icons/system-log.svg') no-repeat center top;
}

.comment_trainer{
	background: var(--pale-green, #D9F0DD);
	border: 1px solid var(--green, #61A970);
}

.comment_trainer .comment_image{
	background:url('/site/assets/images/icons/trainers.svg') no-repeat center top;
}


.comment_content{
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.comment_date{
	font-size: 14px;
	color: var(--grey-mid, #555);
	display: block;
}

.cm_page_meta{
	display: none;
	opacity: 0;
	transition: var(--transition);
}

.comments_list_all .cm_page_meta{
	display:inline;
	opacity: 1;
	transition: var(--transition);
}
.comment_body{
	color: var(--grey-black, #222);
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}

.comment_actions{
	display: flex;
	flex-direction: column;
	align-items: end;
	justify-content: end;
}

.comment_admin_butt{
	background-color: var(--theme);
	border: 0;
	padding: 0;
	color: white;
	cursor: pointer;
	padding:4px;
	height: 24px;
	margin-top: -8px;
	border-radius: var(--border-radius);
	display:flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
}

.comment_admin_butt:hover{
	background-color: var(--dark);
	color: white;
	transition: var(--transition);
}

/* Ntofication tweaks */
.uk-notification-message{
	font-size: 14px;
}