#friends-messages-list {
    display:none;
    position:fixed;
    cursor: default;
    bottom: var(--friends-list-btn-height);
    right: calc(var(--messages-btn-width) - 1rem);;
    width: var(--friends-list-container-width);
    height: 24rem;
    background: var(--primary-friends-color);
    color:white;
    z-index: 80;
}
#friends-messages-btn {
    /* position:fixed; */
    display:flex;
    justify-content: center;
    align-items: center;
    /* right: var(--friends-list-btn-width); */
    /* bottom: 0rem; */
    /* margin:0; */
    width: var(--messages-btn-width);
    height: var(--friends-list-btn-height);
    /* background: var(--primary-friends-color); */
}
#friends-messages-notification-count {
    position:absolute;
    display:none;
    justify-content: center;
    align-items: center;
    left: -0.75rem;
    top: -0.75rem;
    background: red;
    width: 1.5rem;
    height: 1.5rem;
    padding-top:2px;
    border-radius:200px;
    color:white;
    fill: currentColor;
    z-index: 50;
}
#friends-message-img {
    width:1.75rem;
    height:1.75rem;
  /* stroke: #353535;
  stroke-width: 1.5px; */
}
#friends-messages-friends {
    position: absolute;
    width:4rem;
    height:90%;
    padding: 0.5rem;
    left:-1rem;
    white-space: nowrap;
    z-index:20;
    background: var(--primary-friends-color);
}
#friends-messages-friends:hover {
    width:12rem;
}
#friends-messages-messages {
    position:absolute;
    left:4rem;
    display:flex;
    flex-direction: column;
    border:none;
    margin-top:20px;
    height: 95%;
    width: calc(var(--friends-list-container-width) - var(--messages-btn-width) - 1rem);
    background: var(--primary-friends-color);
    z-index:10;
}
#friends-message-form {
    margin-top:auto;
}
#friends-messages-friends-friends {
    overflow:hidden;
}
#friends-messages-friends-friends div {
    position: relative;
    padding: 0.25rem;
    padding-left: 0;
}
#friends-messages-friends-friends button {
    padding: 0 0.5rem 0 0.5rem;
}
#friends-messages-friends-friends button.active {
    background:white;
    color:black;
}
.friends-messages-friend-message {
    float:left;
    background: transparent;
    color: white;
    word-break: break-word;
}
.friends-messages-self-message {
    margin-left:auto;
    background: rgb(221, 221, 221);
    color: rgb(51, 51, 51);
    word-break: break-word;
}
#friends-messages-user-messages {
    overflow:auto;
    margin-bottom: 1rem;
    padding: 0 0.5rem 0 0.5rem;
}
#friends-messages-user-messages > div {
    display: flex;
    flex-direction: column;
}
#friends-messages-user-messages div div {
    margin-top:0.5rem;
    padding: 0.3rem 0.5rem 0.3rem 0.5rem;
    max-width: 80%;
    width: fit-content;
}
#send-friend-message-input {
    margin-top:auto;
}
#friends-messages-user-messages::-webkit-scrollbar { width: 15px; height: 15px; }

#friends-messages-user-messages::-webkit-scrollbar-track { background: #51555d; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 6px solid transparent; border-bottom: 6px solid transparent; background-clip: padding-box; }

#friends-messages-user-messages::-webkit-scrollbar-corner { background: unset; }

#friends-messages-user-messages::-webkit-scrollbar-thumb { background: #888; border-radius: 20px; border: 4px solid transparent; background-clip: content-box; }

#friends-messages-user-messages::-webkit-scrollbar-thumb:hover { background: #555; border: 4px solid transparent; background-clip: content-box; }