@media (min-width: 1080px) {
    .container {width: 1200px}
}
body{background: #F8F8F8;}

.hpoi-msg-container{display: flex;border-radius: 6px;background-color: #FFFFFF;min-height: 615px;}

/*左右的父元素*/
.hpoi-msg-lt{border-right: 1px solid #EEEEEE;width: 210px;}
.hpoi-msg-rt{flex: 1;}
/*左侧*/
/*消息中心*/
.message-tab-title{line-height:60px;height: 60px;text-align: center;color: #999999;font-size: 18px;border-bottom: 1px solid #EEEEEE;}
/*消息tab*/
.message-tab-list .item{color: #666666;display: flex;align-items: center;justify-content: space-between;height: 50px;padding: 0 10px 0 20px;cursor: pointer;}
.message-tab-list .item p{margin-left: 10px;flex: 1;margin-bottom: 0;font-size: 14px;}
.message-tab-list .item span{padding: 0 5px;background-color: #F74C31;color: #FFFFFF;border-radius: 162px;}

/*右侧*/
.message-space-top{display: flex;align-items: center;justify-content: flex-end;height: 60px;border-bottom: 1px solid #EEEEEE;margin-right: 20px;}
.mark-read{cursor: pointer;margin-right: 20px;padding: 0 10px;line-height: 24px;border: 1px solid #999999;border-radius: 4px;}

/*通用*/
.msg-unread-spot{position: absolute;top: 15px;right:0;background-color: #FF4400;border-radius: 50%;width: 8px;height: 8px;}
.icon-collection-setup{font-size: 18px;color: #666666;}
.message-space-bottom{padding: 0  20px;}
.message-space-bottom .reply-item,
.message-space-bottom .system-item,
.message-space-bottom .praise-item,
.message-space-bottom .official-item,
.message-space-bottom .followNews-item,
.message-space-bottom  .followNews-user-item,
.commodity-item{
    display: flex;padding:24px 0;border-bottom: 1px solid #EEEEEE;position: relative;
}
.system-item .info-box,
.commodity-item .info-box,
.reply-item .info-box,
.praise-item .info-box,
.official-item .info-box,
.followNews-item .info-box,
.commodity-item .info-box{
    margin-left: 10px;flex: 1;display: flex;flex-direction: column;justify-content: space-between;
}


.followNews-item .info-box .item2,
.official-item .info-box .item2 {
    display: flex;justify-content: space-between;
}
.system-item .info-box>.item2>.time,
.followNews-user-item .info-box>.item3 a,
.official-item .info-box .item2 a,
.followNews-item .info-box .item2 a,
.reply-item .info-box>.item3 div>a,
.praise-item .info-box>.item3 div>a,
.commodity-item .item2>div>a,
.followNews-item  .info-box .item2 .time{
    color: #999999;
}

/*系统通知*/
.system-item .img-box{width: 64px;height: 64px;}
.system-item .img-box>img{width: 100%;}
.system-item .info-box>.item1{padding-top: 6px;font-size: 14px;color: #444444;}

/*回复我的*/
.reply-ibox+.reply-ibox{border-top: 1px solid #EEEEEE;}
.message-space-bottom .reply-item{border: 0;}
.reply-item .img-box{width: 46px;height: 46px;}
.reply-item .img-box>img{width: 100%;border-radius: 50%;}
.reply-item .info-box>div{display: flex;font-size: 14px;}
.reply-item .info-box>.item1 .name{color: #444444;font-weight: bold;}
.reply-item .info-box>.item2 .reply>a{color: #999999;}
.reply-item .info-box>.item2{margin-top: 6px;color: #666666;}
.reply-item .info-box>.item2 .reply-discuss>a{margin-left: 0;}
.reply-item .info-box>.item3{margin-top: 6px;font-size: 14px;color: #444444;}
.reply-item .info-box>.item3>a{color: #35CDFF;margin-right: 6px;}
.reply-item .info-box>.item4{margin-top: 6px;color: #999999;display: flex;justify-content: space-between;font-size: 12px;}
.reply-item .info-box>.item4 div>a{color: #999999;}
.reply-item .info-box>.item4 div>a+a{margin-left: 6px;}

/*回复我的输入框*/
.reply-comment{border-radius: 6px;padding: 0 0 20px 20px;display: flex;align-items: center;}
.reply-comment>textarea{flex: 1;border-radius: 6px;background-color: #F8F8F8;height: 64px;border: 1px solid #EEEEEE;padding: 10px;font-size: 14px;resize: none;outline: none;}
.reply-comment>span{cursor: pointer;user-select: none;width: 70px;line-height: 64px;height: 100%;background-color: #35CDFF;color: #FFFFFF;border-radius: 6px;margin-left: 20px;font-size: 14px;text-align: center;}
.reply-comment>textarea:focus{border-color: #35CDFF;}

/*收到的赞*/
.praise-item .img-box{width: 46px;height: 46px;}
.praise-item .img-box>img{width: 100%;border-radius: 50%;}
.praise-item .info-box{margin-left: 10px;flex: 1;}
.praise-item .info-box>.item1 .name{color: #444444;font-weight: bold;font-size: 14px;}
.praise-item .info-box>.item2{color: #666666;font-size: 14px;}
.praise-item .info-box>.item2 a{margin-left: 10px;color: #999999;}
.praise-item .info-box>.item2,.praise-item .info-box>.item3{margin-top: 6px;}
.praise-item .info-box>.item3{display: flex;justify-content: space-between;color: #999999;}

/*官方推荐*/
.official-item .img-box{width: 100px;}
.official-item .img-box>img{width: 100%;border-radius: 6px;}
.official-item .info-box .item1>.name{font-size: 18px;color: #444444;}
.official-item .info-box .item1>p{margin-top: 8px;margin-bottom: 0;font-size: 14px;color: #666666;}
.official-item .info-box .item2 span{color: #999999;}

/*关注消息、用户*/
.followNews-item .img-box{width: 100px;height: 144px;}
.followNews-item .img-box>img{width: 100%;border-radius: 6px;}
.followNews-item  .info-box .item1 .title span{display: inline-block;padding: 0 8px;line-height: 22px;border: 1px solid #35CDFF;border-radius: 4px;color: #35CDFF}
.followNews-item  .info-box .item1 .title .name{margin-left: 10px;font-size: 18px;color: #444444;}
.followNews-item  .info-box .item1 p{margin-top: 8px;margin-bottom: 0;font-size: 14px;}
/*用户*/
.followNews-user-item .img-box{width: 46px;height: 46px;}
.followNews-user-item .img-box>img{width: 100%;border-radius: 50%;}
.followNews-user-item .info-box{margin-left: 10px;flex: 1;}
.followNews-user-item .info-box>.item1 .name{color: #444444;font-weight: bold;font-size: 14px;}
.followNews-user-item .info-box>.item2{color: #666666;font-size: 14px;}
.followNews-user-item .info-box>.item2 a{margin-left: 10px;color: #35CDFF;}
.followNews-user-item .info-box>.item2,.followNews-user-item .info-box>.item3{margin-top: 6px;}
.followNews-user-item .info-box>.item3{display: flex;justify-content: space-between;color: #999999;}

/*商品信息*/
.commodity-item .img-box{width: 100px;}
.commodity-item .img-box>img{width: 100%;border-radius: 6px;}
.commodity-item .item1>.title .name{font-size: 18px; color: #444444;}
.commodity-item .item1>p{margin-top: 8px;margin-bottom: 0;color: #666666;font-size: 14px;}
.commodity-item .item2{display: flex;justify-content: space-between;color: #999999;}
.commodity-item .item2>div>a+a{margin-left: 6px;}

/*选中样式*/
.message-tab-list .item:hover{background-color: #F8F8F8;}
.message-tab-list .item:hover span{color: #FFFFFF !important;}
.tab-active{background-color: #35CDFF !important;color: #FFFFFF!important;}
.tab-active>span{color: #FFFFFF!important;}

/*hover*/
.clear-btn:hover,
.reply-btn:hover,
.look-over-btn:hover,
.icon-collection-setup:hover {
    color: #35CDFF !important;
}
.mark-read:hover{color: #35CDFF;border-color: #35CDFF;}

/*暂无内容*/
.hpoi-defect-icon{text-align: center;user-select: none;padding-top: 145px;}
.hpoi-defect-icon img{width: 114px;}
.hpoi-defect-icon p{font-size: 14px;margin-top: 10px;}

@media screen and (max-width: 1024px) { .hpoi-msg-lt{width: 175px;} }