#nav_bar{display:flex;flex-direction:column;justify-content:space-between;height:calc(100vh - 40px);width:80px}#nav_bar img{width:60px;height:60px;align-self:center}#nav_bar a,#nav_bar button{outline:none;border:none;display:flex;flex-direction:column;padding:15px;cursor:pointer;align-items:center;gap:6px;background-color:transparent;color:#fff;opacity:.7;border-radius:10px;width:100%;text-decoration:none}#nav_bar a.active{background-color:#ffffff4d;opacity:1}#nav_bar a .anticon,#nav_bar button .anticon{font-size:36px}*{margin:0;padding:0;box-sizing:border-box;font-family:Verdana,Geneva,Tahoma,sans-serif}body{background-color:#252525;padding:20px}.main-container{display:flex;gap:20px;overflow:hidden}.chats-container{background-color:#fff;height:calc(100vh - 40px);overflow-y:scroll;padding:20px;border-radius:20px;flex-grow:1;flex-basis:0;max-width:100%;display:flex;gap:20px}.users-container{width:300px;height:calc(100vh - 80px);background-color:#fff;border-radius:15px}.chats-list{width:100%;display:flex;flex-direction:column;height:calc(100vh - 80px);overflow-y:scroll;overflow-x:hidden}.user-card{display:flex;gap:20px;align-items:center;cursor:pointer;padding:10px;transition:ease background-color .3s;border-radius:10px}.user-card:hover,.user-card.selected{background-color:#0000000d}.user-card>.avatar{height:60px;width:60px;border-radius:30px;background-color:#e7e7e7;display:flex;justify-content:center;align-items:center}.user-card>.avatar h3{opacity:.7}.user-card>.user-data{flex:1;text-overflow:ellipsis;overflow:hidden}.conversation-card{display:flex;flex-direction:column;justify-content:space-between;border-radius:10px;border:solid 1px rgba(0,0,0,.1);padding:10px;overflow:hidden;height:100%;cursor:pointer;transition:ease background-color .3s}.conversation-card:hover{background-color:#0000000d}