/**
 * Defaults, resetting default list layout and adding layout of the pager element
 */

.pbuic-pager {
	margin: 2em 0 1em;
	padding: 0;
	list-style: none;
}

.pbuic-pager li {
	display: inline-block;
	margin: 0 .3em .3em 0;
}

.pbuic-pager a,
.pbuic-pager span {
	display: block;
	min-width: 20px;
	height: 24px;
	margin: 0;
	padding: 0 2px;
	border: 1px solid #fff;
	line-height: 24px;
	text-decoration: none;
	text-align: center;
	color: #113d8d;
}

.pbuic-pager .pgr-previous a:before {
	content: '\21d0'; /** icon-left */
	margin-right: .3em;
	color: #c6285f;
}

.pbuic-pager .pgr-next a:after {
	content: '\21d2'; /** icon-right */
	margin-left: .3em;
	color: #c6285f;
}

/**
 * Hover state
 */

.pbuic-pager a:hover {
	border-bottom-color: #133d8d;
}

/**
 * Active state
 */

.pbuic-pager .pgr-active span {
	border-radius: 20px;
	border-color: #c6285f;
	color: #c6285f;
}

/**
 * Inactive state
 */

.pbuic-pager .pgr-inactive {
	display: none;
}

/**
 * Spacers ("...")
 */

.pbuic-pager .pgr-space span {
	display: block;
	height: 18px;
}

.pbuic-pager-container {
    container: pbuic-pager / inline-size;
}

@container pbuic-pager (max-width: 400px) {
    .pbuic-pager-container .pgr-previous a,
    .pbuic-pager-container .pgr-next a {
        text-indent: -999em;
    }
}