@charset 'utf-8';

.content-paging {
	position:relative;
	max-width:100%;
	overflow-x:auto;
	
	margin-top:1.5em;
	margin-bottom:1.5em;
	margin-left:auto;
	margin-right:auto;
	
	display:flex;
	flex-direction:column;
	align-items:stretch;
}

@media (min-width:768px) {
	.content-paging {
		align-items:center;
	}
}

.content-paging-next-block {
	margin:1em 0;
}
.content-paging-next-block-button {
	display:block;
	padding:.5em 1em;
}

.content-paging-prev-button.content-paging-link,
.content-paging-next-button.content-paging-link {
	padding:.5em 1em;
	margin:0;
	min-width: 20em;
	min-width: calc( 2em * 9 + .25em * 8 );
	margin-left:.125em;
	margin-right:.125em;
}

@media (max-width:767px) {
	.content-paging-prev-button.content-paging-link,
	.content-paging-next-button.content-paging-link {
		min-width:0;
		width:auto;
	}
}

.content-paging-prev-button > span,
.content-paging-next-button > span,
.content-paging-next-block-button > div {
	text-indent:-1em;
	padding-left:1em;
}


.content-paging-next-block-button > div:before,
.content-paging-prev-button > span:before,
.content-paging-next-button > span:before {
	font-family:FontAwesome;
	opacity:.5;
	width:1em;
	display:inline-block;
	text-indent:0;
}
.content-paging-prev-button > span:before,
.content-paging-next-button > span:before {
	margin-left:-1em;
}

.content-paging-prev-button > span:before {
	content:'\f100'; /* fa-angle-double-left */
	/* content:'\f053'; /* fa-chevron-left */
}
.content-paging-next-block-button > div:before,
.content-paging-next-button > span:before {
	content:'\f101'; /* fa-angle-double-right */
	/* content:'\f054'; /* fa-chevron-right */
}

.content-paging-links {
	display:flex;
	justify-content:flex-start;
	flex-wrap:wrap;
	
	margin-left:auto;
	margin-right:auto;
}

.content-paging-link {
	display:block;
	line-height:1;
	min-width:2em;
	min-height:2em;
	padding:.25em .25em .1em .25em;
	margin:0 .125em .25em .125em;
	border:1px solid #ccc;
	color:inherit;
	text-decoration:none;
	text-align:center;
	opacity:.6;
	
	display:flex;
	align-items:center;
	justify-content:center;
	
	transition:all .15s;
}

.content-paging-link:hover {
	text-decoration:none;
	opacity:1;
}

/* overwrite custom link color */
#main > .content .content-body-body a.content-paging-link { color:inherit; }

/* override colors.less */
#main>.content .content-body-body a.content-paging-link.content-paging-link-current,
#main>.content .content-body-body a.content-paging-link:hover {
	color: inherit;
	background: #ccc;
	border-color: #888;
}

/* default style */
.content-paging-top > .content-paging-prev,
.content-paging-top > .content-paging-next,
.content-paging:not(.has-prev) > .content-paging-prev,
.content-paging:not(.has-next) > .content-paging-next {
	display:none;
}

.content-paging-prev { display:none; }
.content-paging-links { order:2; }
.content-paging-next { order:1; margin-bottom:.5em; }

@media (max-width:767px) {
	.content-paging-link {
		min-width:calc( 11.1111vw - 3.33333px - 0.222222em );
		min-heigth:calc( 11.1111vw - 3.33333px - 0.222222em );
		min-width:calc( ( 100vw - 30px - .25em * 8 ) / 9 );
		min-height:calc( ( 100vw - 30px - .25em * 8 ) / 9 );
	}
	.content-paging:not(.ellipsis) .content-paging-links > :nth-child(9n) { margin-right:0; }
	.content-paging:not(.ellipsis) .content-paging-links > :nth-child(9n+1) { margin-left:0; }
	
	.content-paging[data-paging-max="2"] .content-paging-links,
	.content-paging[data-paging-max="3"] .content-paging-links,
	.content-paging[data-paging-max="4"] .content-paging-links,
	.content-paging[data-paging-max="5"] .content-paging-links,
	.content-paging[data-paging-max="6"] .content-paging-links,
	.content-paging[data-paging-max="7"] .content-paging-links,
	.content-paging[data-paging-max="8"] .content-paging-links {
		justify-content:center;
	}
}

.content-paging-link.ellipsis {
	border:none;
	pointer-events:none;
}
.content-paging-link.ellipsis::before {
	content:'...';
}
.content-paging-link.ellipsis > span,
.content-paging-link.ellipsis + .content-paging-link.ellipsis {
	display:none;
}

.content-paging.ellipsis .content-paging-links {
	flex-wrap:nowrap;
}
@media (max-width:767px) {
	.content-paging.ellipsis .content-paging-links > :first-child { margin-left:0; }
	.content-paging.ellipsis .content-paging-links > :last-child { margin-right:0; }
}