.container{width:100%;max-width:1200px;display:flex;flex-direction:column}.container .container-options{padding:16px;margin-left:30px}.container .container-options .container-options-btns{margin-left:30px}.container .container-options .container-options-btns button{margin-left:20px}.container .container-content{display:flex;width:100%;height:77vh}.container .left{border-right:1px solid #d4d6d9;width:260px;min-width:260px;overflow:hidden;display:flex;flex-direction:column}.container .left .title-box{padding:0 12px 12px}.container .left .title-box .title{font-size:16px;font-weight:700;display:flex;align-items:center}.container .left .title-box .listCount{color:#999;font-size:12px}.container .left .title-box .box-btns{margin-top:4px;display:flex}.container .left .title-box .box-btns .box-btns-btn{flex:1}.container .left .title-box .box-btns .box-btns-btn:first-child{margin-right:6px}.container .left .title-box .box-btns .box-btns-btn:nth-child(2){margin-left:6px}.container .right-chat{width:100%;max-width:900px;display:flex;flex-direction:column}.list{overflow-y:scroll;flex:1}.list .userPinned{background-color:#dcdee0!important}.list .activat-item{background-color:#c3c5c7!important}.list .list-item{cursor:pointer;height:90px;background-color:#f2f2f2;padding:10px;display:flex}.list .list-item,.list .list-item .avatar-box{position:relative}.list .list-item .avatar-box .avatar{height:70px;width:70px}.list .list-item .avatar-box .dots{position:absolute;top:-6px;right:-6px;height:18px;width:18px;background-color:red;border-radius:50%;color:#fff;font-size:12px;font-weight:300;display:flex;justify-content:center;align-items:center;transform:scale(.9)}.list .list-item .item-right{margin-left:10px;display:flex;flex-direction:column;justify-content:space-around;min-width:0;flex:1}.list .list-item .item-right .userInfo{display:flex;justify-content:space-between;align-items:flex-end}.list .list-item .item-right .userInfo .userInfo-name{color:#2c2c2c;font-size:16px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.list .list-item .item-right .userInfo .userInfo-time{font-size:12px;min-width:-moz-max-content;min-width:max-content}.list .list-item .item-right .content{font-size:12px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:break-word}.empty{background-color:#f2f2f2;height:100%;flex-direction:column}.empty,.loading-box{display:flex;justify-content:center}.loading-box{margin:10px 0}