.article-number-list {
	--anl-gap: var(--article-number-list-gap, 1.25rem);
	--anl-border: var(--article-number-list-border, 1px solid #e3e3e3);
	--anl-stripe: var(--article-number-list-stripe, var(--color-surface, #f4f4f4));
	--anl-accent: var(--article-number-list-accent, var(--color-primary, #319d31));
	--anl-accent-text: var(--article-number-list-accent-text, var(--color-primary-text, #ffffff));
	border: var(--anl-border);
	padding: var(--anl-gap);
	font-size: var(--article-number-list-font-size, 0.875rem);
}

.article-number-list .anl-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	padding-bottom: var(--anl-gap);
	border-bottom: var(--anl-border);
}

.article-number-list .anl-search {
	flex: 0 1 18rem;
	margin: 0;
}

.article-number-list .anl-search input {
	width: 100%;
	margin: 0;
	padding: 0.75em 1em;
	border: 0;
	border-radius: var(--article-number-list-border-radius, 0);
	background: var(--anl-stripe);
	font: inherit;
}

.article-number-list .anl-counter {
	margin: 0;
	font-size: 0.875em;
}

.article-number-list .anl-items {
	display: grid;
	grid-template-columns: repeat(var(--anl-columns, 1), minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: var(--anl-border);
}

.article-number-list .anl-items li {
	margin: 0;
	padding: 0.6em 0.75em;
	overflow-wrap: anywhere;
}

.article-number-list .anl-items li::before {
	display: none;
}

.article-number-list .anl-items li:nth-child(2n + 1) {
	background: var(--anl-stripe);
}

@media (min-width: 640px) {
	.article-number-list .anl-items {
		--anl-columns: 2;
	}

	.article-number-list .anl-items li:nth-child(n) {
		background: none;
	}

	.article-number-list .anl-items li:nth-child(4n + 1),
	.article-number-list .anl-items li:nth-child(4n + 2) {
		background: var(--anl-stripe);
	}
}

@media (min-width: 992px) {
	.article-number-list .anl-items {
		--anl-columns: 3;
	}

	.article-number-list .anl-items li:nth-child(n) {
		background: none;
	}

	.article-number-list .anl-items li:nth-child(6n + 1),
	.article-number-list .anl-items li:nth-child(6n + 2),
	.article-number-list .anl-items li:nth-child(6n + 3) {
		background: var(--anl-stripe);
	}
}

.article-number-list .anl-message {
	margin: var(--anl-gap) 0 0;
}

.article-number-list .anl-pagination {
	margin-top: var(--anl-gap);
}

.article-number-list .anl-pagination[hidden],
.article-number-list .anl-pagination [hidden] {
	display: none;
}

.article-number-list .anl-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.article-number-list .anl-pagination li {
	margin: 0 0 -1px -1px;
	padding: 0;
}

.article-number-list .anl-pagination li::before {
	display: none;
}

.article-number-list .anl-pagination a,
.article-number-list .anl-pagination button,
.article-number-list .anl-pagination span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5em;
	height: 2.5em;
	padding: 0 0.6em;
	border: var(--anl-border);
	background: none;
	color: var(--anl-accent);
	font: inherit;
	font-size: 0.875em;
	text-decoration: none;
	cursor: pointer;
}

.article-number-list .anl-pagination a:hover,
.article-number-list .anl-pagination button:hover {
	background: var(--anl-stripe);
}

.article-number-list .anl-pagination .anl-current {
	border-color: var(--anl-accent);
	background: var(--anl-accent);
	color: var(--anl-accent-text);
	font-weight: bold;
}

.article-number-list .anl-pagination .anl-current:hover {
	background: var(--anl-accent);
}

.article-number-list .anl-pagination .anl-disabled,
.article-number-list .anl-pagination .anl-gap {
	color: #9a9a9a;
	cursor: default;
}

.article-number-list .anl-jumps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25em 0.75em;
	margin: 0.75em 0 0;
	font-size: 0.8125em;
}

.article-number-list .anl-jumps span,
.article-number-list .anl-jumps a {
	display: inline;
	min-width: 0;
	height: auto;
	padding: 0;
	border: 0;
	font-size: inherit;
}

.article-number-list .anl-jumps span {
	color: inherit;
	cursor: default;
}

.article-number-list .anl-jumps a:hover {
	background: none;
	text-decoration: underline;
}

.article-number-list.anl-loading .anl-items {
	opacity: 0.5;
}