html, body {
	scroll-padding-top: 140px;
}

.pagination_container {
	position: relative;
	padding: 1rem 0;
	display: flex;
	box-sizing: border-box;
	justify-content: center;
	overflow: auto;
}

	.pagination_container.inactive,
	.pagination_container[data-pages="1"],
	.pagination_container[data-pages="0"] {
		display: none;
	}

.pagination {
	position: relative;
	display: flex;
}

	.pagination.inactive {
		display: none;
	}

	.pagination span {
		position: relative;
		margin: 0 .5em;
		padding: .5rem .75rem;
		border-radius: 4px;
		min-width: 2.25rem;
		text-align: center;
		display: block;
		cursor: pointer;
		box-shadow: 0 0 1px #000;
	}

		.pagination span.active {
			color: white;
			background-color: #2b2b2b;
			pointer-events: none;
			cursor: auto;
		}
		
		.pagination span.disabled {
			pointer-events: none;
			cursor: auto;
			opacity: .6;
		}

		.pagination span.overflowed {
			display: none;
		}

		.pagination span[data-overflow] {
			pointer-events: none;
			cursor: auto;
			opacity: .6;

			padding-left: 0;
			padding-right: 0;
			margin: 0;
			display: none;
			justify-content: center;
			cursor: auto;
		}
			
			.pagination.overflow_start span[data-overflow="start"],
			.pagination.overflow_end span[data-overflow="end"] {
				display: flex;
			}

		.pagination span:not(.active):not(.disabled):not([data-overflow]):hover {
			color: rgb(43 43 43);
			background-color: rgba(43, 43, 43, .1);
		}

@media (max-width: 577px) {
	div.pagination_container .pagination [data-page]:not(.active),
	div.pagination_container .pagination [data-overflow] {
		display: none
	}
	
	.pagination span.active {
		box-shadow: none;
		background: transparent;
		color: initial;
	}

	.pagination span.active:after {
		content: var(--maxpages);
		display: inline-block;
		margin-left: .25em;
	}
}