body{
        background-color: #F4F5F6;
    }
    .color357{
    background-color: #F3F5F7;
   }
   .fontcolorDA{
       color:#DADADA ;
   }
   .fontColor666{
       color: #666;
   }
   .fontColor999{
       color: #999999;
   }
   .mouseMoveIn{
       cursor: pointer;
   }
   p{
       margin: 10px 0px 10px;
   }
   a, a:link, a:visited, a:hover, a:active{color: #666; outline: 0; border: 0; text-decoration: none}
   .topBox{
       background-color: white;
   }
   .container{
       width: 100%;
       position: relative;
       /* top: 110px; */
       /* background-color:#F4F5F6 ; */
       height:auto;
       display: flex;
       justify-content: center;
   }
   .card{
       display: flex;
       width: 800px;
       /* height: 1000px; */
       height:auto;
       background-color: white;
       margin-top: 20px;
       padding: 20px 50px 50px 50px;
       border-radius: 18px;
       
   }
   .card .left{
       width: 100%;
       height:auto;
       /* height: 100%; */
       /* overflow: hidden; */
       /* background-color: aliceblue; */
   }
   .card .right{
       width: 20%;
   }
   .right .img1{
       position: sticky;
       top: 280px;
       display: flex;
       flex-direction: column;
       align-items: center;
   }

   .right .img2{
       position: sticky;
       top: 500px;
       display: flex;
       justify-content:center;
   }
   .right .img1 img{
       width: 60px;
   }
   /* .right .img1 img:hover{
       width: 65px;
   } */
   .thumbImg:hover{
       content: url('../../public/images/thumbs-up2Active.png');
   }
   .collectImg:hover{
       content: url('../../public/images/collectActive.png');
   }
   .repostImg:hover{
       content: url('../../public/images/repostActive.png');
   }
   .right .img2 img{
       width: 35px;
       height: 35px;
   }
   .left h1 {
       font-size: 20px;
       font-weight: 600;
   }
   .header .Msg{
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 15px;
   }
   .Msg .userMsg{
       display: flex;
       align-items: center;
   }
   .Msg .userMsg img{
       width: 35px;
       height: 35px;
       border-radius: 100%;
       margin-right: 10px;
   }
   .Msg .userMsg span{
       margin-right: 10px;
   }
   .left .header{
       display: flex;
       flex-direction: column;
       width: 100%;
       height: auto;
       border-bottom: 1px dashed #DADADA ;
       overflow: hidden;
   }
   .left .content{
       width: 100%;
       /* height: 300px; */
       margin: 10px;
       /* background-color: aliceblue; */
   }
   
   .content p video{
		margin: 0 auto;
		display: block;
		width: 85%;
	}

   .left .content img{
    width: 100%;
    height: 100%;
  }

   .left .comments{
       background-color: #FAFAFB;
       width: 95%;
       height:auto;
       border-radius: 18px;
       padding: 13px 20px 20px 20px;
   }
   .user{
       display:flex;
       /* margin-top:18px; */
   }
   .user img{
       width:35px;
       height: 35px;
       border-radius:100%;
   }
   .userMsg2{
       width: 150px;
           display: flex;
           flex-direction: column;
           justify-content: center;
           margin-left: 15px;
   }
   .reply{
	   margin-top: 20px;
       display:flex;
       flex-direction:column;
       justify-content: center;
   }
   .replyContent{
       margin-left:50px
   }
   .replybottom{
       display:flex;
       /* margin-left: 63px; */
       /* justify-content:space-around; */
       justify-content: space-between;
   }
   .replybottom .replyFont{
       font-size: 12px;
       }
   .reaction{
       display:flex;
       align-items: center;
   }
   .reaction img{
       width:16px;
       border-radius: 4px;
   }
   .reaction span{
       font-size:12px;
       margin-left:5px;
       margin-right:10px;
   }
   /* 评论框 */
   .Input_Box,.Input_Box1{
       width:100%;
       height:216px;
       background-color: white;
       border-radius: 16px;
       margin-top: 20px;
   }
   .Input_push{
      display: flex;
      justify-content: space-between;
   }
   .group{
       height: 16px;
       display: flex;
       justify-content: center;
   }
   .publishBtn{
       background-color: black;
       color: white;
       border: none;
       width: 80px;
       height: 30px;
       border-radius: 16px;
       margin-right:12px;
   }
   #editor,#editor1 {
       /* height: 180px; */
       background-color: #fff; 
       border-radius: 16px;
       outline: none;
       border: none;
       color: #555;
       display: block;
       font-size: 14px;
       line-height: 1.42857;
       padding: 12px 12px;
       width: 95%;
       height: 150px;
       resize: inherit;
       overflow:auto;
   }
   /* #editor::before{
       content: "记得友善评论他人哦~";
       color: #ccc;
   } */
   .mood{
       margin-left: 12px;
   }
   #editor:empty:before{
       content: "记得友善评论他人哦~";
       color: #DADADA;
   }
   #editor:focus:before {
       content: none;
   }
   .moreBtn{
    position: relative;
   }
   .moreBtn .report{
    position: absolute;
    top: -46px;
    left: 5px;
    width: 60px;
    height: 20px;
    padding: 10px 20px;
    background-color:#dbdbdb;
    text-align: center;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.thumb1,.collection{
    position: relative;
}
.thumbNum1,.collectNum{
    position: absolute;
    top: 5px;
    right: 10px;
}
.personMsg{
    display: flex;
    height: 60px;
    align-items: center;
}
 .personMsg .user{
   
    height: 45px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
}
.personMsg img{
    width: 45px;
    height: 45px;
}
.replybottom{
    display: flex;
    justify-content: space-between;
    margin-left: 50px;
}
.replybottom .reaction,.leftCommentCard .commentContent .reply .replybottom .replyReaction{
    display:flex;
    align-items: center;
}

 .replybottom .reaction img{
    width:16px;
    border-radius: 4px;
}
.replybottom .reaction span{
    
    margin-left:5px;
    margin-right:10px;
}


.group{
    height: 20px;
    display: flex;
    justify-content: center;
}
.mood{
    width: 30px;
    height: 30px;
}
.group{
    justify-content:space-around;
    align-items: center;
}
.functionBtns .img1{
    position: sticky;
    top: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.functionBtns .img2{
    position: sticky;
    top: 600px;
    display: flex;
    justify-content:center;
}
.functionBtns .img1 img{
    width: 70px;
}
.replyNest {
    margin-top: 30px;
    margin-left: 30px;
}

.showAllReplyBtn {
    width: 180px;
    height: 40px;
    background-color: white;
    border: none;
    border-radius: 6px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.commentContent{
    /* margin-top:20px; */
}


   @media screen and (max-width:890px){
       .card{
           width:600px ;
       }
       .card .header{
           height: 150px;
       }
       .left .comments{
           width: fit-content;
       }
       #editor{
           width: fit-content;
       }
       .publishBtn{
           width: 50px;
       }
       .input_right span{
           font-size: 12px;
       }
       .replyContent{
           font-size: 12px;
       }
       .replybottom .replyFont{
          font-size: 8px;
       }
   }