/* the feedback text */

.commentions-feedback {
	margin-top:4em;
}
.commentions-feedback p {
	padding:1em;
}
.commentions-feedback p.alert {
	color:#ff0000;
	background-color:#FFD8D8;
}
.commentions-feedback p.success {
	color:#0D6F00;
	background-color:#D2FFCC;
}


/* the form */

.commentions-form {
  margin:0 auto;
  padding-bottom : 2em;
  line-height:1.5em;
  max-width:35rem;
}
.commentions-form h3 {
	margin-top:2em;
  font-weight:500;
}
.commentions-form form > div {
	margin:2em 0;
}
.commentions-form-honeypot {
	position:absolute; left:-9999px;
}

.commentions-form label,
.commentions-form input,
.commentions-form textarea {
	display:block;
	width:100%;
}
.commentions-form input,
.commentions-form textarea {
	background:white;
	border:1px solid #ced4da;
	padding:.5em;
	font-size:100%;
	font-family:inherit;
}
.commentions-form textarea {
  resize: vertical;
}
.commentions-form input[type="submit"] {
	background:#0b1a31;
	color:white;
	font-weight:bold;
	width:33%;
}


/* the list of comments */

.commentions-list {
	margin:2em auto 0;
  line-height:1.5em;
  max-width:35rem;
}
.commentions-list h3 {
  margin-bottom:1em;
  font-weight:400;
}
.commentions-list > ul {
	padding:0;
	list-style:none;
}
.commentions-list > ul > li {
	margin-bottom:2em;
}
.commentions-list > ul.commentions-list-reactions {
	display:flex;
	flex-wrap: wrap;
}
.commentions-list > ul.commentions-list-reactions > li {
	flex-basis:200px;
}
.commentions-list h4 {
	margin-bottom:0;
}
.commentions-list a {
	text-decoration:underline;
}
p.commentions-list-date {
	font-size:80%;
	margin-top:0;
}