.li-box {
    padding: 1rem 0px 1rem 15px;
    margin-left: 5px;
    border-left: 1px solid var(--bs-body-color);
    position: relative;
    display: block;
    color: var(--bs-body-color);
}
.li-box::after {
    content: "";
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border: 1px solid var(--border-color-primary);
    border-radius: 50%;
    background-color: var(--bs-body-color);
}
.li-box.li-box-active::after {
    content: "";
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border: 1px solid var(--border-color-primary);
    border-radius: 50%;
    background-color: var(--base-color-light);
}
.li-box:hover::after {
    background-color: var(--base-color-light);
}
.li-box:hover {
    color: var(--base-color-light);
}
.li-box::after:hover {
    color: var(--base-color-light);
}

.li-box.li-box-active {
    color:var(--base-color-light);
}
.li-box.li-box-active:hover {
    color:var(--base-color-light);
}
.li-box.li-box-active:hover::after {
    background-color: var(--base-color-light);
}

[data-bs-theme="light"] {
    .global-inner-btn {
        color: hsl(from var(--gray-500) h s l) !important;
    }

    .global-inner-btn.active {
        color: hsl(from var(--gray-100) h s l) !important;
    }

    .episode-btn.breadcrumb-link:hover {
    color: hsl(from var(--base-color) h s l) !important;
    border-bottom: 2px solid var(--base-color);
    }
    .episode-btn.breadcrumb-link.active {
        color: hsl(from var(--base-color) h s l) !important;
        border-bottom: 2px solid var(--base-color);
    }
}

[data-bs-theme="dark"] {
    .episode-btn.breadcrumb-link:hover {
        color: hsl(from var(--yellow-100) h s l) !important;
        border-bottom: 2px solid var(--yellow-100);
    }
    .episode-btn.breadcrumb-link.active {
        color: hsl(from var(--yellow-100) h s l) !important;
        border-bottom: 2px solid var(--yellow-100);
    }
}