#chatting{position: relative;width: 450px;height: 500px;overflow: hidden;margin: 0 auto;padding-bottom: 60px;border: 1px solid #444c62;box-shadow: 0 0 10px rgba(0,0,0,0.1);background: #fff;}
#chatting .header{line-height: 60px;background: #444c62;padding: 0 20px;}
#chatting .header h3{font-size: 18px;color: #fff;letter-spacing: -1px;font-weight: normal;}

#chatbox{overflow-y: scroll;height: calc(100% - 60px);}
#chatbox .inner{position: relative;padding: 20px 15px;}
#chatbox .inner .comm{margin: 5px 0;}
#chatbox .inner .comm.to{text-align: left;}
#chatbox .inner .comm.from{text-align: right;}
#chatbox .inner .comm p{position: relative;display: inline-block;max-width:300px;padding: 15px;background: #fff;border: 1px solid #ddd;word-break:break-all;box-shadow: 2px 2px 5px rgba(0,0,0,0.1);letter-spacing: -1px;font-size: 14px;}
#chatbox .inner .comm p .added-file{margin-top: 5px;font-size: 11px;letter-spacing: -1px;color: #000;letter-spacing: -1px;display: block;max-width: 200px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-decoration: underline;}
#chatbox .inner .comm p .added-file i{display: inline-block;vertical-align: middle;margin-top: -2px;font-size: 14px;}
#chatbox .inner .comm p img{max-width: 150px;height: auto;display: block;margin-top: 5px;}
#chatbox .inner .comm .date{font-size: 11px;margin-top: 5px;color: #999;display: none;}
#chatbox .inner .comm .date strong{font-weight: 500;color: #999;}
#chatbox .inner .comm.defmsg{padding-left: 0 !important;display: none;}
#chatbox .inner .comm.defmsg p{display: block;margin: 0 auto;width: 250px;text-align: center;border-radius: 15px !important;}
#chatbox .inner .comm .chk{position: absolute;bottom: 0;left: -15px;font-size: 11px;color: #ffda59;font-weight: bold;}
#chatbox .inner .comm.from p{background: #9a6ab3;border-color: #9a6ab3;color: #fff;border-radius: 15px 0 15px 15px;}
#chatbox .inner .comm.from p .added-file,
#chatbox .inner .comm.from p .added-file a{color: #fff !important;}
#chatbox .inner .comm.to{position: relative;padding-left: 55px;min-height: 40px;}
#chatbox .inner .comm.to p{border-radius: 0 15px 15px 15px;}
#chatbox .inner .comm.to .pf{position: absolute;top: 0;left: 0;width: 40px;height: 40px;border-radius: 50%;overflow: hidden;background: no-repeat center center;background-size: cover;}
#chatbox .inner .comm.msg_html{padding: 0;margin: 40px 0;}
#chatbox .inner .old-btn{margin-bottom: 30px;text-align: center;}
#chatbox .inner .old-btn a{display: block;width: 200px;height: 40px;line-height: 40px;text-align: center;font-size: 14px;background: #eee;border-radius: 50px;margin: 0 auto;text-decoration: none;letter-spacing: -1px;color: #999;}
#chatbox .inner .date-tit{display: block;margin: 20px 0;text-align: center;font-size: 15px;color: #888888;letter-spacing: -1px;display: none;}

#chatbox-new{position: relative;z-index: 3;display: block;width: 200px;height: 40px;line-height: 40px;text-align: center;font-size: 14px;background: #9a6ab3;color: #fff;border-radius: 50px;margin: 0 auto;margin-top: -60px;margin-bottom: 20px;visibility: hidden;text-decoration: none;box-shadow: 0 0 10px rgba(0,0,0,0.1);}

#chatbox-add-file-btn{position: relative;display: inline-block;vertical-align: top;height: 20px;line-height: 20px;text-align: center;}
#chatbox-add-file-btn input[type=file]{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: transparent;opacity: 0;cursor: pointer;}
#chatbox-add-file-btn i{font-size: 18px;color: #000;}

#chatbox-added-file-name{position: absolute;bottom: 40px;left: 1px;width: calc(100% - 2px);box-sizing: border-box;padding: 10px 50px 10px 20px;background: rgba(0,0,0,0.5);display: none;}
#chatbox-added-file-name p{font-size: 12px;letter-spacing: -1px;color: #fff;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#chatbox-added-file-name .close{position: absolute;top: 50%;transform: translate(0, -50%);right: 20px;border: none;background: none;font-size: 12px;color: #fff;}

#chat-file-progressbar{position: sticky;bottom: 10px;left: 0;width: 100%;box-sizing: border-box;padding: 20px;padding-right: 40px;z-index: 3;}
#chat-file-progressbar .track{position: relative;height: 5px;width: 100%;background: #ddd;border-radius: 5px;}
#chat-file-progressbar .track .bar{position: absolute;top: 0;left: 0;width: 0;height: 100%;border-radius: 5px;background: #000;}
#chat-file-progressbar .cancel{position: absolute;top: 50%;transform: translate(0, -50%);right: 20px;height: 20px;background: none;border: none;}

#chatbox-write{position: absolute;bottom: 0;left: 0;width: 100%;z-index: 92;background: #efebe7;border-top: 2px solid #6f348d;box-shadow: 0 -2px 5px rgba(0,0,0,0.1);}
#chatbox-write legend{display: none;}
#chatbox-write fieldset{position: relative;padding: 10px 55px 10px 55px;}
#chatbox-write fieldset #image-add-btn{position: absolute;top: 50%;transform: translate(0, -50%);left: 15px;}
#chatbox-write fieldset .inp{width: 100%;border: none;height: 40px;background: none;letter-spacing: -1px;}
#chatbox-write fieldset .sbm{position: absolute;width: 30px;height: 30px;background: url('./board-button-send.png') no-repeat center center;background-size: contain;position: absolute;top: 50%;transform: translate(0, -50%);right: 15px;text-indent: -999em;border: none;}
#chatbox-write fieldset .image-added-file-text{display: none;margin-top: 5px;}
#chatbox-write fieldset .image-added-file-text *{display: inline-block;vertical-align: middle;}
#chatbox-write fieldset .image-added-file-text p{display: inline-block;vertical-align: middle;font-size: 11px;letter-spacing: -1px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #999;max-width: 100px;}
#chatbox-write fieldset .image-added-file-text button{border: none;background: none;margin-left: 10px;font-size: 11px;width: 15px;height: 15px;}
#chatbox-write.caht{bottom: 0;}
#chatbox-write.caht .image-added-file-text{}

#image-add-btn{display: inline-block;vertical-align: middle;width: 26px;height: 26px;background: url('./board-ico-comment.png') no-repeat center center;background-size: contain;position: absolute;top: 50%;transform: translate(0, -50%);left: 15px;}
#image-add-btn input{position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;}

.comment-form{position: fixed;bottom: 60px;left: 0;width: 100%;z-index: 92;background: #efebe7;border-top: 2px solid #6f348d;box-shadow: 0 -2px 5px rgba(0,0,0,0.1);}
.comment-form legend{display: none;}
.comment-form fieldset{position: relative;padding: 10px 55px 10px 55px;}
.comment-form fieldset .inp{width: 100%;border: none;height: 40px;background: none;letter-spacing: -1px;}
.comment-form fieldset .sbm{position: absolute;width: 30px;height: 30px;background: url('./board-button-send.png') no-repeat center center;background-size: contain;position: absolute;top: 50%;transform: translate(0, -50%);right: 15px;text-indent: -999em;border: none;}
.comment-form fieldset .image-added-file-text{display: none;margin-top: 5px;}
.comment-form fieldset .image-added-file-text *{display: inline-block;vertical-align: middle;}
.comment-form fieldset .image-added-file-text p{display: inline-block;vertical-align: middle;font-size: 11px;letter-spacing: -1px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #999;max-width: 100px;}
.comment-form fieldset .image-added-file-text button{border: none;background: none;margin-left: 10px;font-size: 11px;width: 15px;height: 15px;}
.comment-form.caht{bottom: 0;}
.comment-form.caht .image-added-file-text{}

@media screen and (max-width: 1300px) {

    #chatting{width: auto;}

}