.page-item.active .page-link
{
    background-color: #868e96;
    border-color: #868e96;
    color: white;
}

.page-link
{
    color: #868e96;
}

div.card
{
    margin-bottom:16px;
}

div.card div.card
{
    margin-bottom:0;
}

div.card-block
{
    padding: 8px;
}

div.card-block div.card
{
    display: inline-block;
}

div.card-block div.card div.card-block
{
    padding:0;
}

/* make dropdown menu's open on hover */
div.dropdown li.nav-item:hover + div.dropdown-menu {
    display: block;
}

div.dropdown-menu:hover {
    display: block;
}

div.dropdown-menu {
    top: 90%;
}

/* make anime status float right */
.right
{
    float:right;
}

/* make status buttons smaller */
div.card-header.compact
{
    padding:8px;
}

/*
give all buttons in button group
 */
div.btn-group a,
div.btn-group button
{
    cursor: pointer;
}

/* make status buttons smaller */
div.btn-group.compact a,
div.btn-group.compact button
{
    border-width: 0;
    padding:10px 6px;
    font-weight: bold;
}

/*
fix padding for first and last button
 */
div.btn-group.compact a:first-child,
div.btn-group.compact button:first-child
{
    padding-left: 10px;
}

div.btn-group.compact a:last-child,
div.btn-group.compact button:last-child
{
    padding-right: 10px;
}

/* selected */
div.btn-group.status button.selected
{
    background-color: #D2D2D2;
}
/* not defined */
div.btn-group.status button:nth-child(1) { color: rgb(0, 0, 0); }
div.btn-group.status button:hover:nth-child(1) { background-color: rgb(192, 192, 192); color: white; }
div.btn-group.status button.selected:nth-child(1) { background-color: rgb(128, 128, 128); color: white; }
/* watch later */
div.btn-group.status button:nth-child(2) { color: rgb(255, 165, 0); }
div.btn-group.status button:hover:nth-child(2) { background-color: rgb(255, 233, 191); color: white; }
div.btn-group.status button.selected:nth-child(2) { background-color: rgb(255, 210, 128); color: white; }
/* watching */
div.btn-group.status button:nth-child(3) { color: rgb(20, 210, 20); }
div.btn-group.status button:hover:nth-child(3) { background-color: rgb(191, 255, 191); color: white; }
div.btn-group.status button.selected:nth-child(3) { background-color: rgb(128, 255, 128); color: white; }
/* watched */
div.btn-group.status button:nth-child(4) { color: rgb(80, 80, 255); }
div.btn-group.status button:hover:nth-child(4) { background-color: rgb(191, 211, 255); color: white; }
div.btn-group.status button.selected:nth-child(4) { background-color: rgb(128, 168, 255); color: white; }
/* ignored */
div.btn-group.status button:nth-child(5) { color: rgb(255, 0, 0); }
div.btn-group.status button:hover:nth-child(5) { background-color: rgb(255, 191, 191); color: white; }
div.btn-group.status button.selected:nth-child(5) { background-color: rgb(255, 128, 128); color: white; }

/* new media cards */
div.chapter-release div.card-block
{
    padding:0;
}

button.btn-finished::before {
    content: "Finished";
}

button.btn-finished {
    background-color: rgb(191, 255, 191);
    color: var(--bs-body-color);
}

button.btn-finished:hover {
    background-color: rgb(228, 255, 228);
    color: var(--bs-body-color);
}

button.btn-open::before {
    content: "Not finished";
}

button.btn-open {
    background-color: rgb(213, 213, 213);
    color: var(--bs-body-color);
}

button.btn-open:hover {
    background-color: rgb(228, 255, 228);
    color: var(--bs-body-color);
}