.jbsvis-sidenav {
    --jbsvis-sidenav-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    --jbsvis-sidenav-border-color: var(--bs-border-color);
    --jbsvis-sidenav-border-width: var(--bs-border-width);
    --jbsvis-sidenav-border-radius: var(--bs-border-radius);
    --jbsvis-sidenav-btn-color: var(--bs-body-color);
    --jbsvis-sidenav-btn-bg: var(--bs-sidenav-bg);
    --jbsvis-sidenav-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --jbsvis-sidenav-btn-icon-width: 0.75rem;
    --jbsvis-sidenav-btn-icon-transform: rotate(-180deg);
    --jbsvis-sidenav-btn-icon-transition: transform 0.2s ease-in-out;
    --jbsvis-sidenav-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23052c65'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --jbsvis-sidenav-btn-focus-border-color: #86b7fe;
    --jbsvis-sidenav-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --jbsvis-sidenav-body-padding-x: 1.25rem;
    --jbsvis-sidenav-body-padding-y: 1rem;
    --jbsvis-sidenav-active-color: var(--bs-primary-text-emphasis);
    --jbsvis-sidenav-active-bg: var(--bs-primary-bg-subtle);

    --jbsvis-sidenav-title-padding: 4px;

    padding: 8px;
}

.jbsvis-sidenav-link,
.jbsvis-sidenav-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--jbsvis-sidenav-btn-padding-y) var(--jbsvis-sidenav-btn-padding-x);
    font-size: 1rem;
    color: var(--jbsvis-sidenav-btn-color);
    text-align: left;
    background-color: var(--jbsvis-sidenav-btn-bg);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--jbsvis-sidenav-transition);
    padding: 0;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .jbsvis-sidenav-link,
    .jbsvis-sidenav-button {
        transition: none;
    }
}

.jbsvis-sidenav-link.active,
.jbsvis-sidenav-link:hover,
.jbsvis-sidenav-link:focus,
.jbsvis-sidenav-button.active,
.jbsvis-sidenav-button:hover,
.jbsvis-sidenav-button:focus {
    color: var(--jbsvis-sidenav-active-color);
    background-color: var(--jbsvis-sidenav-active-bg);
}

.jbsvis-sidenav-button:not(.collapsed) {
    color: var(--jbsvis-sidenav-active-color);
    background-color: var(--jbsvis-sidenav-active-bg);
}

.jbsvis-sidenav-button:not(.collapsed)::after {
    background-image: var(--jbsvis-sidenav-btn-active-icon);
    transform: var(--jbsvis-sidenav-btn-icon-transform);
}

.jbsvis-sidenav-button::after {
    flex-shrink: 0;
    width: var(--jbsvis-sidenav-btn-icon-width);
    height: var(--jbsvis-sidenav-btn-icon-width);
    margin-left: auto;
    content: "";
    background-image: var(--jbsvis-sidenav-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--jbsvis-sidenav-btn-icon-width);
    transition: var(--jbsvis-sidenav-btn-icon-transition);
}

@media (prefers-reduced-motion: reduce) {
    .jbsvis-sidenav-button::after {
        transition: none;
    }
}

.jbsvis-sidenav-link:hover,
.jbsvis-sidenav-button:hover {
    z-index: 2;
}

.jbsvis-sidenav-link:focus,
.jbsvis-sidenav-button:focus {
    z-index: 3;
}

.jbsvis-sidenav-link,
.jbsvis-sidenav-header {
    margin-bottom: 0;
}


















.jbsvis-sidenav-item {

}

.jbsvis-sidenav-item .jbsvis-sidenav-link,
.jbsvis-sidenav-item .jbsvis-sidenav-button {
    padding: 8px;
    display: flex;
}

.jbsvis-sidenav-item .jbsvis-sidenav-link span.title,
.jbsvis-sidenav-item .jbsvis-sidenav-button span.title {
    flex-grow: 1 !important;
    white-space: nowrap; /* Verhindert den Zeilenumbruch */
    overflow: hidden; /* Stellt sicher, dass der überschüssige Text verborgen wird */
    text-overflow: ellipsis; /* Fügt die ... am Ende des sichtbaren Textes hinzu */
    width: 100%;
    padding: 0px 8px;
}

.jbsvis-sidenav-item .jbsvis-sidenav-link span.title .badge,
.jbsvis-sidenav-item .jbsvis-sidenav-button span.title .badge {
    margin: 0px 8px;
}

.jbsvis-sidenav-item .jbsvis-sidenav-link .rounded-pill,
.jbsvis-sidenav-item .jbsvis-sidenav-button .rounded-pill {
    float: right;
    margin-right: 8px;
}

.jbsvis-sidenav-line {
    border-bottom:1px solid var(--bs-border-color);
    padding-top:12px;
    margin-bottom: 12px;
}

.jbsvis-sidenav-heading {
    padding: 8px;
    color: var(--bs-secondary-color);
    font-size: 0.675rem;
    font-weight: 900;
    text-transform: uppercase;
}

[data-bs-theme=dark] .jbsvis-sidenav-button::after {
    --jbsvis-sidenav-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --jbsvis-sidenav-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236ea8fe'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}