#server_list {
    position: fixed;

    top: 100px;
    left: 16px;

    width: 240px;

    max-height: 360px;
    overflow-y: auto;

    padding: 14px;

    border-radius: 24px;

    background: rgba(20,20,20,0.55);
    border: 1px solid rgba(255,255,255,0.12);

    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);

    box-shadow:
        0 20px 80px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.08);

    transition: all 0.3s ease-in-out;

    color:white;

    z-index:99;

    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

#server_list::-webkit-scrollbar {
    width:8px;
}

#server_list::-webkit-scrollbar-thumb {
    background:rgba(255,255,255,.18);
    border-radius:999px;
}

#server_list.hidden {
    opacity:0;
    pointer-events:none;
}

.server_title {
    font-size:14px;
    opacity:.7;
    margin-bottom:10px;
}

.server_item {
    display:flex;
    align-items:center;
    gap:10px;

    padding:8px 10px;
    padding-top:5px;

    margin-bottom:6px;

    border-radius:14px;

    background:rgba(255,255,255,.05);
}

.server_item.selected {
    background:rgba(255,255,255,.295);
    border:1px solid rgba(8,130,201,.384);
}

.server_item:last-child {
    margin-bottom:0;
}

.server_dot {
    width:8px;
    height:8px;

    border-radius:50%;

    background:#4ade80;
}

@media (max-width:700px) {

    #server_list {
        top:70px;
        left:-4px;

        transform:scale(.9);

        max-height:110px;
    }

}