/* pagination */

/******************* TYPE 1 **********************/

/* light */

.sdp-pagination {
    margin: 1rem;
}

.page-item {
    min-height: 32px !important;
    min-width: 32px !important;
    text-align: center;
}


.page-link.sdp-page-link {
    padding: 0.28rem;
    background: #DEF8EB;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
    border-radius: 5px !important;
    color: #0A592B;
    border: 0;
    font-weight: 700;
}

.page-link.sdp-page-link:hover {
    background: #C0FFDA;
    color: #0A592B;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.page-link.sdp-page-link:focus {
    z-index: 3;
    color: #0A592B;
    background-color: #8DFFBD;
    outline: 0;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.page-item.sdp-page-item {
    margin: 0 0.25rem;
}

.page-item.sdp-page-item.active a.page-link.sdp-page-link {
    z-index: 3;
    color: #DEF8EB;
    background-color: #0A592B;
    border-color: black;
}

.page-item.sdp-page-item.active a.page-link.sdp-page-link:hover {
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.page-item.sdp-page-item.active a.page-link.sdp-page-link:focus {
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

/* dark */

.dark .page-link.sdp-page-link {
    padding: 0.28rem;
    background: #2E3A34;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.25);
    border-radius: 5px !important;
    color: #3ECF8A;
    border: 0;
    font-weight: 700;
}

.dark .page-link.sdp-page-link:hover {
    background: #8DFFBD;
    color: #08381C;
    box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%), 0px 1px 2px rgb(0 0 0 / 10%);
}

.dark .page-item.sdp-page-item.active a.page-link.sdp-page-link {
    z-index: 3;
    color: #2E3A34;
    background-color: #3ECF8A;
    border-color: black;
}


/********************** TYPE 2 (Stuck) **********************/

.stuck .page-item.sdp-page-item {
    margin: 0;
}

.page-item:not(:first-child) .page-link {
    margin: 0 !important;
}

.stuck .page-link.sdp-page-link {
    border-radius: 0 !important;
}

.stuck .page-link.sdp-page-link.left-item {
    border-radius: 5px 0px 0px 5px !important;
}

.stuck .page-link.sdp-page-link.right-item {
    border-radius: 0px 5px 5px 0px !important;
}

.stuck .page-link.sdp-page-link.next,
.stuck .page-link.sdp-page-link.prev {
    border-radius: 5px !important;
    margin: 0 0.5rem !important;
    font-size: 12px;
}

.page-link.sdp-page-link.disabled {
    color: #30a16b80 !important;
    font-size: 14px !important;
    padding: 6px 16px !important;
}

.dark .page-link.sdp-page-link.disabled {
    color: #93C7AE !important;
    font-size: 14px !important;
    padding: 6px 16px !important;
}


/* type 4 */
select.page-link {
    padding-right: 11px !important;
    padding-left: 40px !important;
    background-image: url(../image/pagination-arrow-light.svg) !important;
    background-size: 26px 26px !important;
    background-repeat: no-repeat !important;
    background-position-y: center !important;
    background-position-x: 5px !important;

}


.dark select.page-link {
    background-image: url(../image/pagination-arrow-dark.svg) !important;
    background-size: 26px 26px !important;
    background-position-y: center !important;
    background-position-x: 5px !important;
}