/* PAGER */
ul.pagination{
    width: fit-content;
    padding: 0; margin: 0 auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: .25rem;
  }
.justify-content-center {justify-content: center!important;}
.pagination{display: flex;list-style: none;}

.sr-only {border: 0; clip: rect(0,0,0,0); height: 1px;width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;} 
.page-item {margin-left: -1px;border:1px solid var(--c-gray);line-height: 1.75rem;background-color:var(--c-bg-nav-contrast)}
.page-item .page-link{color: var(--main-text-color);}
.page-item > button{font-weight:var(--f-weight-nav);}
.page-item.active .page-link {color: var(--c-gray); pointer-events: none; cursor: auto; background-color:var(--c-bg-body);}
.page-item.disabled {color: var(--c-gray); pointer-events: none; cursor: auto; background-color:var(--c-bg-body); padding:var(--gap-body) calc(1.5 * var(--gap-body))}
.page-item:first-child {border-top-left-radius: .25rem; border-bottom-left-radius: .25rem;}
.page-item:last-child {border-top-right-radius: .25rem; border-bottom-right-radius: .25rem;}

.page-link:not(:disabled):not(.disabled){ cursor: pointer;}
.page-link {display: block;padding: var(--gap-body) calc(1.5 * var(--gap-body))}
.page-link:hover{box-shadow:inset 0 0 0 720px rgba(0, 0, 0, 0.2);}

/* Arrow holder */
.arrowed {
	position: relative;
	height: 4rem; width: 7rem;
	border: 1px solid rgba(122, 31, 87,0.25);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.arrowed:hover{ border: 1px solid rgba(122, 31, 87,1);}

/* Just centering the examples */
.arrowed div {position: absolute;	top: 0; bottom: 0; left: 0; right: 0;	margin: auto;}

/* -- ARROW     -- */
.arrow {
	height: 10px; width: 10px;
	border: 1px solid rgba(122, 31, 87, 0.6);
	border-width: 3px 3px 0 0;
}
.arrow:before, .arrow:after {
	content: '';
	position: absolute;
	display: block;
	height: 10px; width: 10px;
	border-width: 3px 3px 0 0;
}
.arrow:before {
	border: 1px solid rgba(122, 31, 87, 0.3);
	border-width: 3px 3px 0 0;
	top: 7px; left: -10px;
}
.arrow:after {
	border: 1px solid rgba(122, 31, 87,1);
	border-width: 3px 3px 0 0;
	top: -13px; left: 10px;
}
.arrow.next{transform: rotate(45deg);}
.arrow.prev{transform: rotate(225deg);}