/* Offcanvas-Stile */
 .offcanvas-shared-bookmarks {
    width: 250px;
    position: fixed;
    top: 0;
    right: -250px; /* Startet außerhalb des Bildschirms */
    height: 100%;
    background-color: #343a40;
    color: white;
    transition: right 0.3s ease; /* Animation beim Öffnen/Schließen */
    z-index: 1045;
}

/* Wenn das Offcanvas aktiv ist */
.offcanvas-shared-bookmarks.active {
    right: 0; /* Schiebt das Offcanvas nach rechts ins Sichtfeld */
}

/* Der Trigger, der mit dem Offcanvas herausgleitet */
.offcanvas-trigger {
    position: absolute;
    top: 50%;
    left: -50px; /* Außerhalb des Offcanvas, bis es sich bewegt */
    transform: translateY(-50%);
    background-color: #3a3b3b;
    color: white;
    border: none;
    border-radius: 50%; /* Rundes Design */
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem; /* Schriftgröße der Zahl */
    cursor: pointer;
    z-index: 1046;
    transition: left 0.3s ease; /* Animation für den Button */
}

/* Wenn das Offcanvas aktiv ist, bewegt sich der Trigger mit nach außen */
.offcanvas-shared-bookmarks.active .offcanvas-trigger {
    left: -60px; /* Schiebt den Button nach außen */
}

/* Zusätzlicher Stil für inaktive (disabled) Elemente */
.disabled-element {
    opacity: 0.5;
    pointer-events: none; /* Verhindert Interaktion */
}

/* Versteckter Zustand mit Transition */
.hidden-container {
    opacity: 0;
    max-height: 0; /* Höhe auf 0 setzen, um das Element aus dem Layout zu nehmen */
    overflow: hidden;
    /* transition: all 0.5s ease; /* Sanfte Transition für Höhe und Sichtbarkeit */
}

/* Sichtbarer Zustand mit Transition */
.visible-container {
    opacity: 1;
    max-height: 1000px; /* Eine große Höhe einstellen, die das Layout zulässt */
    transition: all 0.5s ease; /* Sanfte Transition für Höhe und Sichtbarkeit */
}

/* Liste der SharesBookmarks */
/* Offcanvas User-Container */
.offcanvas-usrsh-users-container {
    margin-top: 20px;
    display: flex;
    flex-direction: column; /* Benutzer sollen vertikal gestapelt werden */
    gap: 10px; /* Abstand zwischen Benutzer-Elementen */
}

/* Benutzer-Item-Stile */
.offcanvas-usrsh-user-item {
    /* cursor: pointer; */
    padding: 10px;
    border-radius: 10px;
    transition: background-color 0.3s ease;
    background-color: #3a3b3b;
    color: white;
    display: flex;
    align-items: center;
    flex-direction: column; /* Benutzer-Content vertikal ausrichten */
    width: 100%; /* Die gesamte Breite des Containers nutzen */
}

/* Hover-Effekt für Benutzer */
.offcanvas-usrsh-user-item:hover {
    background-color: #505050;
}

/* Container für Shares innerhalb eines Benutzers (Akkordeon) */
.offcanvas-usrsh-user-shares {
    padding-left: 10px;
    width: 100%; /* Breite auf die gesamte Benutzer-Box anpassen */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.3s ease;
}

.offcanvas-user-click {
    cursor: pointer;
    flex-direction: column; /* Benutzer-Content vertikal ausrichten */
    width: 100%; /* Die gesamte Breite des Containers nutzen */
}

/* Sichtbarer Zustand für Shares */
.offcanvas-usrsh-user-item.active .offcanvas-usrsh-user-shares {
    max-height: 1000px; /* Setze eine große maximale Höhe für die Animation */
    padding-top: 10px; /* Padding hinzufügen, wenn es geöffnet ist */
}

/* Liste der Shares */
.offcanvas-usrsh-shares-list {
    padding: 0; /* Kein zusätzliches Padding für die Share-Liste */
}

.offcanvas-usrsh-share-item {
    cursor: pointer;
    background-color: #555;
    color: white;
    padding: 5px 10px;
    margin-bottom: 5px;
    border-radius: 15px;
    width: 100%; /* Die gesamte Breite nutzen */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.offcanvas-usrsh-info-icon {
    cursor: pointer;
}