.chart-box{background:#f0f2f4;padding:60px 80px;min-height:calc(100vh - 88px)}.chart-box h1{margin-bottom:40px;font-size:32px;font-weight:500;color:#080808}.chart-box .chart-main{display:flex}.chart-box .chart-main .channl-ul{width:640px;height:calc(100vh - 288px);overflow-y:auto;border-radius:8px 0 0 8px;background-color:#fff;position:relative;padding:40px}.chart-box .chart-main .channl-ul .channl-item{padding:18px 20px;width:100%;min-height:81px;display:flex;align-items:center;cursor:pointer}.chart-box .chart-main .channl-ul .channl-item .user_icon{width:46px;height:46px;border-radius:50%;margin-right:20px;background-size:cover;position:relative}.chart-box .chart-main .channl-ul .channl-item .user_icon .unread_count{position:absolute;right:-8px;top:0;border-radius:15px;min-width:16px;height:16px;background:#e7534e;border:1px solid #fff;display:flex;align-items:center;justify-content:center}.chart-box .chart-main .channl-ul .channl-item .user_icon .unread_count .min-count{text-align:center;font-style:normal;scale:.4;font-size:20px;font-weight:400;color:#fff}.chart-box .chart-main .channl-ul .channl-item .user_info .userName_box{font-size:15px;font-weight:500;color:#080808;line-height:25px}.chart-box .chart-main .channl-ul .channl-item .user_info .now_message{font-size:13px;font-weight:400;color:#8291a7;line-height:20px;height:20px}.chart-box .chart-main .channl-ul .channl-item .new_message_time{margin-left:auto;font-size:12px;font-weight:400;color:#8291a7;line-height:20px}.chart-box .chart-main .channl-ul .channl-item.active{background:#f5f7f9}.chart-box .chart-main .channl-ul .channl-item:hover{background-color:#f5f7f9}.chart-box .chart-main .channl-ul .channl-item .delete_btn{position:absolute;right:120px;background-color:#fff;margin-left:80px;width:100px;height:44px;font-size:16px;font-weight:400;color:#e7534e;padding:10px;border-radius:4px 8px 8px 8px;box-shadow:0 4px 8px 0 rgba(0,0,0,.05)}.chart-box .chart-main .message-box{flex:1;height:calc(100vh - 288px);background:#f5f7f9;border-radius:0 8px 8px 0;padding:40px 0 200px 0;position:relative}.chart-box .chart-main .message-box .messageUl{max-height:100%;overflow-y:auto;padding:0 40px}.chart-box .chart-main .message-box .messageUl .message_item{margin-bottom:30px}.chart-box .chart-main .message-box .messageUl .message_item .time_box{width:100%;height:14px;font-size:12px;font-weight:400;color:#606069;line-height:14px;text-align:center;margin-bottom:30px}.chart-box .chart-main .message-box .messageUl .message_item .user-message_box{display:flex;align-items:flex-start}.chart-box .chart-main .message-box .messageUl .message_item .user-message_box .user_icon{width:46px;height:46px;border-radius:0 0 0 0;opacity:1;background-color:#98fb98;border-radius:50%;margin-right:20px;background-size:cover}.chart-box .chart-main .message-box .messageUl .message_item .user-message_box .user_message{max-width:70%;min-height:41px;background:#fff;box-shadow:0 4px 8px 0 rgba(0,0,0,.05);border-radius:4px 16px 16px 16px;opacity:1;padding:12px 20px;font-size:14px;font-weight:400;color:#303030;line-height:20px}.chart-box .chart-main .message-box .messageUl .message_item .user-message_box .profile-image{width:150px;height:150px;-o-object-fit:cover;object-fit:cover;border:1px solid #ccc}.chart-box .chart-main .message-box .messageUl .message_item .user-message_myBox{display:flex;align-items:flex-start;justify-content:flex-end}.chart-box .chart-main .message-box .messageUl .message_item .user-message_myBox .user_message{max-width:70%;min-height:41px;background:#7b7b7b;box-shadow:0 4px 8px 0 rgba(0,0,0,.05);border-radius:4px 16px 16px 16px;opacity:1;padding:12px 20px;font-size:14px;font-weight:400;color:#fff;line-height:20px}.chart-box .chart-main .message-box .messageUl .message_item .user-message_myBox .profile-image{width:150px;height:150px;-o-object-fit:cover;object-fit:cover;border:1px solid #ccc}.chart-box .chart-main .message-box .messageUl .message_item .card-message{width:358px;height:110px;background:#fff;border-radius:16px 16px 16px 16px;opacity:1;padding:16px 27px;display:flex;align-items:center;margin:0 auto}.chart-box .chart-main .message-box .messageUl .message_item .card-message .card_img{width:54px;height:54px;border-radius:0 0 0 0;opacity:1;border-radius:50%;-o-object-fit:cover;object-fit:cover;margin-right:16px}.chart-box .chart-main .message-box .messageUl .message_item .card-message .card_msg{font-size:18px;font-family:Rubik-Medium,Rubik;font-weight:500;color:#080808;line-height:25px}.chart-box .chart-main .message-box .messageUl .message_item .card-message .card_msg .card_type{font-size:14px;font-family:Rubik-Regular,Rubik;font-weight:400;color:#8291a7;line-height:20px;margin-top:2px}.chart-box .chart-main .message-box .messageInput_box{position:absolute;width:100%;height:200px;bottom:0}.chart-box .chart-main .message-box .messageInput_box .input_line{width:100%;height:1px;background:#e9ecef;opacity:1}.chart-box .chart-main .message-box .messageInput_box .inner_box{height:calc(100% - 1px);padding:20px;display:flex;flex-direction:column;justify-content:space-between}.chart-box .chart-main .message-box .messageInput_box .inner_box .textarea_box{position:relative}.chart-box .chart-main .message-box .messageInput_box .inner_box .textarea_box:before{content:" ";position:absolute;top:5px;left:5px;width:1px;height:16px;background-color:#303030}.chart-box .chart-main .message-box .messageInput_box .inner_box .textarea_box .userMessage_input{background:#f6f7f9;width:100%;height:100px;resize:none;padding:5px;outline:none;border:none;font-size:16px;line-height:16px;color:#303030}.chart-box .chart-main .message-box .messageInput_box .inner_box .havaFocus:before{opacity:0}.chart-box .chart-main .message-box .messageInput_box .inner_box .left_r .fileInput_label{position:relative}.chart-box .chart-main .message-box .messageInput_box .inner_box .left_r .fileInput_label .upload_btn{width:24px;height:24px;-o-object-fit:contain;object-fit:contain;cursor:pointer}.chart-box .chart-main .message-box .messageInput_box .inner_box .left_r .fileInput_label #fileInput{position:absolute;width:10px;height:10px;z-index:-99;opacity:0}.chart-box .chart-main .message-box .messageInput_box .inner_box .left_r .sendMsg_btn{width:100px;height:44px;background:#080808;border-radius:8px 8px 8px 8px;opacity:1;font-size:14px;font-weight:400;color:#fff;line-height:40px;margin-left:auto}