*,:after,:before{box-sizing:border-box}:root{--white:#fff;--black:#000;--bg:#f8f8f8;--grey:#999;--dark:#1a1a1a;--light:#e6e6e6;--blue:#00b0ff}.wrapper li,.wrapper ul{list-style:none}ul.people{padding:0}.container{position:relative;top:50%;left:50%;width:80%;height:75%;transform:translate(-50%,-50%)}.container,.container .left{background-color:var(--white)}.container .left{float:left;width:37.6%;height:100%;border:1px solid var(--light)}.container .left .top{position:relative;width:100%;height:96px;padding:29px}.container .left .top:after{position:absolute;bottom:0;left:50%;display:block;width:80%;height:1px;content:"";background-color:var(--light);transform:translate(-50%)}.container .left input{float:left;width:188px;height:42px;padding:0 15px;border:1px solid var(--light);background-color:#eceff1;border-radius:21px;font-family:Source Sans Pro,sans-serif;font-weight:400}.container .left input:focus{outline:none}.container .left a.search{display:block;float:left;width:42px;height:42px;margin-left:10px;border:1px solid var(--light);background-color:var(--blue);background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAOjSURBVHgBAJMDbPwB////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAABmAP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///0D////r////PgD////E//////////////////////////////////////////////8A////AP///0D////r////Pv///wAA/////////w////8A////AP///wD///8A////AP///wD///8A////AP///0D////r////Pv///wD///8AAP////////8A////AP///wD///8A////AP///wD///8A////AP///0D////r////Pv///wD///8A////AAD/////////AP///wD///8A////AP///wD///8A////AP///0D////r////Pv///wD///8A////AP///wAA/////////wD///8A////AP///wD///8A////AP///0D////r////Pv///wD///8A/////////wD///8AAP////////8A////AP///wD///8A////AP///zT////r////Pv///wD///8A////AP////////8A////AAD/////////AP///wD///8A////AP///wD///8K////NP///wD///8A////AP///wD/////////AP///wAB/////wAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/wAAAAEAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEgAAAAAAAAAAAAAAAAQAAADFAAAA7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADEAAAAAAAAAAABAAD//x2AjcOi8sd1AAAAAElFTkSuQmCC);background-repeat:no-repeat;background-position:top 12px left 14px;border-radius:50%}.container .left .people{margin-left:-1px;border-right:1px solid var(--light);border-left:1px solid var(--light);width:calc(100% + 2px);overflow-y:auto;overflow-x:hidden;height:400px}.container .left .people .person{position:relative;width:100%;padding:12px 10% 16px;cursor:pointer;background-color:var(--white)}.container .left .people .person:after{position:absolute;bottom:0;left:50%;display:block;width:80%;height:1px;content:"";background-color:var(--light);transform:translate(-50%)}.container .left .people .person img{float:left;width:40px;height:40px;margin-right:12px;border-radius:50%}.container .left .people .person .name{font-size:14px;line-height:22px;color:var(--dark);font-family:Source Sans Pro,sans-serif;font-weight:600}.container .left .people .person .time{font-size:14px;position:absolute;top:16px;right:10%;padding:0 0 5px 5px;color:var(--grey);background-color:var(--white)}.container .left .people .person .preview{font-size:14px;display:inline-block;overflow:hidden!important;width:70%;white-space:nowrap;text-overflow:ellipsis;color:var(--grey)}.container .left .people .person.active,.container .left .people .person:hover{margin-top:-1px;margin-left:-1px;padding-top:13px;border:0;background-color:var(--blue);width:calc(100% + 2px);padding-left:calc(10% + 1px)}.container .left .people .person.active span,.container .left .people .person:hover span{color:var(--white);background:transparent}.container .left .people .person.active:after,.container .left .people .person:hover:after{display:none}.container .right{position:relative;float:left;width:62.4%;height:100%}.container .right .top{width:100%;height:47px;padding:15px 29px;background-color:#eceff1}.container .right .top span{font-size:15px;color:var(--grey)}.container .right .top span .name{color:var(--dark);font-family:Source Sans Pro,sans-serif;font-weight:600}.container .right .chat{position:relative;display:none;overflow:hidden;padding:0 35px 92px;border-width:1px 1px 1px 0;border-style:solid;border-color:var(--light);height:calc(100% - 48px);height:480px;flex-direction:column;overflow-y:auto}.container .right .chat.active-chat{display:block;display:flex}.container .right .chat.active-chat .bubble{transition-timing-function:cubic-bezier(.4,-.04,1,1)}.container .right .chat.active-chat .bubble:first-of-type{-webkit-animation-duration:.15s;animation-duration:.15s}.container .right .chat.active-chat .bubble:nth-of-type(2){-webkit-animation-duration:.3s;animation-duration:.3s}.container .right .chat.active-chat .bubble:nth-of-type(3){-webkit-animation-duration:.45s;animation-duration:.45s}.container .right .chat.active-chat .bubble:nth-of-type(4){-webkit-animation-duration:.6s;animation-duration:.6s}.container .right .chat.active-chat .bubble:nth-of-type(5){-webkit-animation-duration:.75s;animation-duration:.75s}.container .right .chat.active-chat .bubble:nth-of-type(6){-webkit-animation-duration:.9s;animation-duration:.9s}.container .right .chat.active-chat .bubble:nth-of-type(7){-webkit-animation-duration:1.05s;animation-duration:1.05s}.container .right .chat.active-chat .bubble:nth-of-type(8){-webkit-animation-duration:1.2s;animation-duration:1.2s}.container .right .chat.active-chat .bubble:nth-of-type(9){-webkit-animation-duration:1.35s;animation-duration:1.35s}.container .right .chat.active-chat .bubble:nth-of-type(10){-webkit-animation-duration:1.5s;animation-duration:1.5s}.container .right .write{position:absolute;bottom:29px;left:30px;height:42px;padding-left:8px;border:1px solid var(--light);background-color:#eceff1;width:calc(100% - 58px);border-radius:5px}.container .right .write input{font-size:16px;float:left;width:347px;height:40px;padding:0 10px;color:var(--dark);border:0;outline:none;background-color:#eceff1;font-family:Source Sans Pro,sans-serif;font-weight:400}.container .right .write .write-link.attach:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQCAYAAAArij59AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAIgSURBVHgBABAC7/0BmZmZBgAAAIsAAABVAAAAAAAAAKsAAAB1AAAA+gAAAAACAAAAigAAAB8AAAAwAAAAMAAAAB8AAACCAAAAAAAAAAAEAAAAXQAAACoAAADqAAAAAAAAAGsAAADSAAAAeAAAAP8CAAAAEgAAAOkAAAAAAAAAAAAAAOUAAAASAAAAAAAAAAACAAAAAAAAAAAAAAD/AAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAA8gAAAA8AAADiAAAANgAAAAAAAADiAAAADwAAAPIEAAAAvAAAAFoAAABqAAAAsAAAAAAAAABlAAAAXAAAALwCAAAAegAAAH0AAAAbAAAAJAAAACQAAAAbAAAAewAAAHoCAAAA2QAAAD8AAABHAAAA5wAAAOcAAABHAAAAQAAAANkBAAD//2G2HFFdjEohAAAAAElFTkSuQmCC)}.container .right .write .write-link.attach:before,.container .right .write .write-link.smiley:before{display:inline-block;float:left;width:20px;height:42px;content:"";background-repeat:no-repeat;background-position:50%}.container .right .write .write-link.smiley:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAQgSURBVHgBABAE7/sBmZmZAAAAAAAAAAAAAAAAAAAAACoAAABkAAAASQAAACEAAAAAAAAA3gAAALgAAACcAAAA1gAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAYAAACUAAAAvwAAAOsAAABWAAAADwAAAA8AAABZAAAA7wAAAL8AAACYAAAACQAAAAAAAAAABAAAAAAAAAAGAAAAtQAAAPEAAAAmAAAA8QAAAAAAAAAAAAAAAAAAANEAAADRAAAAkQAAAJ4AAAC0AAAASQAAAPoCAAAAAAAAAI8AAADxAAAAVQAAAPEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADyAAAAVQAAAO8AAACPAAAAAAQAAAAsAAAAUgAAACcAAAD/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/AAAAYgAAANgAAACXAgAAAGMAAACWAAAA8gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADyAAAAkwAAAGQCAAAASAAAALIAAAAAAAAAAAAAAEoAAADxAAAASgAAAAAAAAAAAAAASgAAAPEAAABKAAAAAAAAAAAAAAC1AAAARAIAAAAiAAAA2AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAN4AAAAfBAAAAAAAAAAAAAAAAAAAAAAAAAC2AAAADwAAAAAAAAAAAAAAAAAAALYAAAAPAAAAAAAAAAAAAAAAAAAA+gAAAAYCAAAA3gAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAnAAAA3gIAAAC4AAAATgAAAAYAAAC9AAAAkwAAABwAAAAAAAAAAAAAAAAAAAAAAAAAHAAAAJMAAAC9AAAABgAAAEwAAAC5AgAAAJ0AAABqAAAACAAAAE0AAADnAAAAqQAAAOsAAAD9AAAA/QAAAOsAAACpAAAA5wAAAE0AAAAIAAAAbQAAAJwBmZmZAAAAAJUAAAAXAAAAVQAAAP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAKsAAADpAAAAawIAAAAAAAAAcQAAAA8AAACrAAAADwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4AAACrAAAAEQAAAHEAAAAAAgAAAAAAAAD6AAAASwAAAOgAAADaAAAAeQAAAC0AAAAGAAAABgAAAC8AAAB9AAAA2wAAAOwAAABMAAAA+gAAAAACAAAAAAAAAAAAAAD6AAAAbAAAAEIAAAAXAAAAqwAAAPQAAADuAAAApQAAABMAAABDAAAAaAAAAPcAAAAAAAAAAAEAAP//3UtRKNQY5cgAAAAASUVORK5CYII=)}.container .right .write .write-link.send:before{display:inline-block;float:left;width:20px;height:42px;margin-left:11px;content:"";background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAQgSURBVHgBABAE7/sBmZmZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABkAAAB2AAAATAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABsAAACRAAAA3QAAAHAAAAC1BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABwAAAB3AAAAWgAAAO4AAAAHAAAA9wAAAIoCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB0AAACVAAAA0QAAAPgAAACGAAAACwAAAMAAAACcAAAA5gIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB8AAACXAAAA0AAAAPQAAAAoAAAA3wAAAG8AAABYAAAAMAAAAIkAAAAAAgAAAAAAAAAAAAAAAAAAACAAAACaAAAAzQAAAO8AAAAnAAAAdwAAAGMAAAByAAAAPgAAAEwAAACnAAAA5QAAAAAEAAAAAAAAACEAAAB7AAAAUAAAAJgAAAAnAAAA7QAAAAAAAACEAAAAUQAAAD0AAAD8AAAAYwAAAC8AAAAAAAAAAAQAAACYAAAAVQAAAJUAAAAmAAAA7gAAAAAAAAABAAAAkQAAADsAAAA/AAAA7AAAAIcAAACpAAAA5AAAAAAAAAAABAAAAN4AAAD7AAAAJwAAAB4AAADuAAAAAwAAAJwAAAAkAAAAQgAAAPEAAAATAAAAZgAAADAAAAAAAAAAAAAAAAAEAAAAigAAAJUAAABlAAAAsgAAANQAAAD6AAAACQAAAEcAAAD2AAAAAAAAAHMAAACqAAAA4wAAAAAAAAAAAAAAAAQAAAAAAAAA9QAAAJAAAACWAAAAYAAAAJIAAAAdAAAA9gAAAAAAAAASAAAAZgAAADMAAAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAPoAAACaAAAAoQAAAG8AAAAAAAAAAAAAAHIAAACtAAAA4QAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACCAAAA0AAAAJMAAAD6AAAAaAAAADQAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOUAAACfAAAAfAAAAO8AAACvAAAA4AAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIoAAADWAAAAAgAAADUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7AAAAI8AAAAfAAAA3wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAP//tAFHgJij1kMAAAAASUVORK5CYII=);background-repeat:no-repeat;background-position:50%}.container .right .bubble{font-size:16px;position:relative;display:inline-block;clear:both;margin-bottom:8px;padding:13px 14px;vertical-align:top;border-radius:5px}.container .right .bubble:before{position:absolute;top:19px;display:block;width:8px;height:6px;content:"\00a0";transform:rotate(29deg) skew(-35deg)}.container .right .bubble.you{float:left;color:var(--white);background-color:var(--blue);align-self:flex-start;-webkit-animation-name:slideFromLeft;animation-name:slideFromLeft}.container .right .bubble.you:before{left:-3px;background-color:var(--blue)}.container .right .bubble.me{float:right;color:var(--dark);background-color:#eceff1;align-self:flex-end;-webkit-animation-name:slideFromRight;animation-name:slideFromRight}.container .right .bubble.me:before{right:-3px;background-color:#eceff1}.container .right .conversation-start{position:relative;width:100%;margin-bottom:27px;text-align:center}.container .right .conversation-start span{font-size:14px;display:inline-block;color:var(--grey)}.container .right .conversation-start span:after,.container .right .conversation-start span:before{position:absolute;top:10px;display:inline-block;width:30%;height:1px;content:"";background-color:var(--light)}.container .right .conversation-start span:before{left:0}.container .right .conversation-start span:after{right:0}@keyframes slideFromLeft{0%{margin-left:-200px;opacity:0}to{margin-left:30px;opacity:1}}@-webkit-keyframes slideFromLeft{0%{margin-left:-200px;opacity:0}to{margin-left:30;opacity:1}}@keyframes slideFromRight{0%{margin-right:-200px;opacity:0}to{margin-right:30px;opacity:1}}@-webkit-keyframes slideFromRight{0%{margin-right:-200px;opacity:0}to{margin-right:30px;opacity:1}}#teacher-chat{max-width:1000px}#teacher-chat .you{margin-left:30px;margin-top:30px}#teacher-chat .you .head{position:absolute;width:50px;height:50px;border-radius:50%;overflow:hidden;left:-60px;top:-3px}#teacher-chat .you span{position:absolute;left:-60px;top:-30px;color:#000;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:grey}#teacher-chat .me{margin-right:30px;margin-top:30px}#teacher-chat .me .head{position:absolute;width:50px;height:50px;border-radius:50%;overflow:hidden;left:calc(100% + 10px);top:-3px}#teacher-chat .me span{position:absolute;left:calc(100% - 25px);top:-30px;color:#000;width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:grey}#teacher-chat .write .send:before{margin-left:50px}#teacher-chat .student-list{width:200px;height:100%;border:1px solid var(--light);position:relative;left:100%;top:-100%;overflow-y:auto}#teacher-chat .student-list .student{display:flex;align-items:center;width:100%;height:70px;border-bottom:1px solid var(--light)}#teacher-chat .student-list .student:hover{background-color:#8b8aac}#teacher-chat .student-list .student img{width:40px;height:40px;border-radius:50%;margin-left:5px}#teacher-chat .student-list .student .name{width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:5px}#teacher-chat .student-list .student .del{width:15px;height:15px;line-height:15px;text-align:center;margin-left:10px;color:#004080;border-radius:50%;background-color:#8080ff;cursor:pointer}#teacher-chat .student-list .student .del:hover{background-color:#2424ff}