/* CSS styles for Comments extension */
.full {
	width: 530px;
}

@media screen and ( max-width: 768px ) {
	.full {
		max-width: 100%;
	}
}

.reply {
	margin-left: 70px !important;
	width: 460px;
}

@media screen and ( max-width: 768px ) {
	.reply {
		/* This should be sufficient enough to visually distinguish replies on mobile, I hope */
		margin-left: 15% !important;
		max-width: 100%;
	}
}

.c-item {
	position: relative;
	border-bottom: 1px solid #dcdcdc;
	/*
	 * This works for Monaco, but not for Monobook.
	 * Besides, ny.css sets it back to 10px anyway, so this way everyone can be happy.
	 * padding: 0px 0px 10px 0px;
	 */
	padding: 0px 0px 35px 0px;
	margin: 0px 0px 15px 0px;
}

.c-avatar {
	position: absolute;
	top: 0px;
	left: 0px;
}

.c-avatar img {
	padding: 3px;
	border: 1px solid #dcdcdc;
	background-color: #fff;
}

.c-container {
	position: relative;
	top: 0px;
	top: 0px;
	margin: 0px 0px 0px 70px;
}

.c-user {
	font-weight: bold;
	position: relative;
	margin: 0px 0px 6px 0px;
}

.c-user a {
	font-size: 14px;
	text-decoration: none;
}

.c-time {
	font-size: 10px;
	color: #888;
	line-height: 11px !important;
	font-weight: normal !important;
}

.c-user-level {
	color: #666;
	font-size: 11px;
	margin: 0px 5px 0px 5px;
}

.c-comment {
	overflow: auto;
}

.c-ignored {
	color: #666;
	font-size: 11px;
	padding: 5px 0px 10px 0px;
	margin: 0px 0px 15px 0px;
	border-bottom: 1px solid #dcdcdc;
}

/* stylelint-disable-next-line block-no-empty */
.c-ignored-links a {
}

.f-message {
	width: 460px;
}

.r-message {
	width: 360px;
}

.c-score {
	position: absolute;
	top: -2px;
	right: 0px;
	font-size: 11px;
	padding-top: 6px;
	font-weight: bold;
	z-index: 4;
}

@media screen and ( max-width: 768px ) {
	.f-message,
	.r-message {
		max-width: 100%;
	}

	.c-score {
		/* Absolute positioning is bad...at least when there isn't enough
		 * screen space to position the elements the way they were meant to be
		 * positioned. This is hardly ideal but at least this way the score
		 * container element won't overlap with all the other elements nearby.
		 * Better solutions are more than welcome!
		 */
		position: unset;
	}
}

.c-score-title {
	margin: 0px 10px 0px 0px;
}

.c-actions {
	float: right;
	font-size: 10px;
	margin: 10px 0px 0px 0px;
}

.c-delete a {
	color: #f00 !important;
}

.c-score img {
	vertical-align: middle;
	margin: -5px 0px 0px 2px;
}

.c-form-title {
	color: #333;
	font-weight: bold;
	font-size: 17px;
	margin: 0px 0px 5px 0px;
}

.c-form-message {
	font-size: 11px;
	width: 400px;
	line-height: 13px;
	color: #666;
	padding: 5px 0px 10px 0px;
}

textarea#comment {
	width: 530px;
}

@media screen and ( max-width: 768px ) {
	.c-form-message {
		max-width: 100%;
	}

	textarea#comment {
		max-width: 100%;
	}
}

.c-form-button {
	padding: 10px 0px 0px;
}

.c-order {
	padding: 20px 0px;
}

.c-spy {
	float: left;
	font-size: 10px;
	margin: 0px 0px 0px 10px;
}

.c-order-select {
	float: left;
}

/* Pager */
ul.c-pager {
	clear: both;
	margin: 0;
}

li.c-pager-item {
	background-image: none;
	display: inline;
	font-size: 14px;
	list-style-type: none;
	padding: 0.5em;
}

.cod img {
	margin-bottom: 8px;
}