@charset "utf-8";

:root {
	--pageControllerColor: #aaa;
	--pageControllerColorActive: #70c1b3;
	--pageControllerColorDisabled: #ccc;
	--pageControllerBorderColor: #aaa;
	--pageControllerFontColor: #000;
	--pageControllerFontColorDisabled: #888;
	--pageControllerFontSize: 16px;

	--comingFontColor: #000;
	--comingFontSize: 3em;
}

.pageControllerBox {
	display: flex; flex-flow: row wrap; align-items: center; justify-content: center; margin: 20px auto;
}
.pageControllerBox > div {
	width: 18px; height: 18px; border: var(--pageControllerColor) 1px solid; border-radius: 5px; padding: 10px; margin: 5px; cursor: auto;
	color: var(pageControllerFontColor); font-size: var(--pageControllerFontSize); line-height: 1em; text-align: center;
	transition: color 0.3s 0s ease-in, background 0.3s 0s ease-in;
}
.pageControllerBox > div:hover,
.pageControllerBox > div.active {
	background: var(--pageControllerColorActive);
}
.pageControllerBox > div.disabled {
	background: var(--pageControllerColorDisabled) !important; color: var(--pageControllerFontColorDisabled) !important; border: var(--pageControllerColorDisabled) 1px solid !important;
}

.noData {
	padding: 0 10px;
}
.coming {
	color: var(--comingFontColor); font-size: var(--comingFontSize); line-height: 1.2em; text-align: center;
}

@media only screen and (max-width:1060px) {
	.pageControllerBox > div.first,
	.pageControllerBox > div.last {
		display: none;
	}
}
@media only screen and (max-width:620px) {
	.pageControllerBox > div.previous,
	.pageControllerBox > div.next {
		display: none;
	}
}