.chat-parent{width:100%;height:calc(100vh - 75px)!important;overflow:hidden}.chat-content{height:100%;overflow-y:scroll;scrollbar-width:none;padding-right:17px;-webkit-box-sizing:content-box;box-sizing:content-box;padding:10px}div.chat-messages{position:relative;margin-top:15px;z-index:10}div.chat-messages div.chat{position:relative;background:#fcfcfe;border-radius:5px;font-size:15px}div.chat div.chat-content>span{margin-bottom:12px}div.chat div.chat-content span.friend{position:relative;width:70%;height:auto;display:inline-block;background:#fff;padding:10px;padding-bottom:25px;-webkit-box-shadow:2px 2px 20px -2px rgba(60,51,176,.2);box-shadow:2px 2px 20px -2px rgba(60,51,176,.2);color:#3c33b0}div.chat div.chat-content span.friend.first{border-radius:15px 15px 15px 2px}div.chat div.chat-content span.friend.last{border-radius:2px 15px 15px 15px}div.chat div.chat-content span.friend span.time{position:absolute;display:block;right:0;margin-top:5px;margin-right:10px;font-size:10px;font-weight:500;color:rgba(60,51,176,.5)}div.chat div.chat-content span.you{position:relative;float:right;width:70%;height:auto;background:#5850c0;display:inline-block;padding:10px;padding-bottom:25px;color:#fff;-webkit-box-shadow:2px 2px 20px rgba(60,51,176,.2),inset -10px -10px 55px hsla(0,0%,100%,.1);box-shadow:2px 2px 20px rgba(60,51,176,.2),inset -10px -10px 55px hsla(0,0%,100%,.1)}div.chat div.chat-content span.you span.time{position:absolute;display:block;right:0;margin-top:5px;margin-right:10px;font-size:10px;font-weight:500;color:hsla(0,0%,100%,.5)}div.chat div.chat-content span.you.first{border-radius:15px 15px 2px 15px}div.chat div.chat-content span.you.last{border-radius:15px 2px 15px 15px}div.chat div.chat-content span.empty{position:relative;float:right;width:70%;height:auto;background:#fff;display:inline-block;padding:10px;padding-bottom:15px;color:#fff}div.msg-box{position:absolute;width:100%;bottom:0;left:0;border-top:1px solid rgba(60,51,176,.1);overflow:hidden;background-color:#fff}div.msg-box .ip-msg{width:80%;font-size:14px;padding:15px;padding-right:10px;color:rgba(60,51,176,.9);border:none;background:rgba(0,0,0,.03)}div.msg-box .ip-msg::-webkit-input-placeholder{color:rgba(60,51,176,.4)}div.msg-box .ip-msg::-moz-placeholder{color:rgba(60,51,176,.4)}div.msg-box .ip-msg:-ms-input-placeholder{color:rgba(60,51,176,.4)}div.msg-box .ip-msg::-ms-input-placeholder{color:rgba(60,51,176,.4)}div.msg-box .ip-msg::placeholder{color:rgba(60,51,176,.4)}div.msg-box span.btn-group{position:absolute;right:0;top:0;margin-top:14px;display:inline-block;margin-right:10px}div.msg-box span.btn-group i{color:#3c33b0;font-size:18px;padding:0 7px}div.footer{position:absolute;width:100%;bottom:0;z-index:10;background:#271c5d;border-top:1px solid hsla(0,0%,100%,.35);-webkit-box-shadow:inset 0 15px 25px -5px rgba(0,0,0,.3);box-shadow:inset 0 15px 25px -5px rgba(0,0,0,.3)}div.footer ul li{list-style:none;float:left;width:20%;display:inline-block;padding:18px 0;font-size:18px;text-align:center;color:#8b86ed}div.footer ul li.active{color:#fff;-webkit-box-shadow:inset 0 -6px 0 rgba(139,134,237,.8),inset 0 -25px 25px -10px rgba(139,134,237,.2);box-shadow:inset 0 -6px 0 rgba(139,134,237,.8),inset 0 -25px 25px -10px rgba(139,134,237,.2)}.yt{position:fixed;padding:7px 10px 3px 10px;top:5px;right:5px;background:rgba(0,0,0,.3);border-radius:7px}.yt:hover{background:rgba(0,0,0,.4)}