#view-code{color:#89a2b5;opacity:0.7;font-size:14px;text-transform:uppercase;font-weight:700;text-decoration:none;position:absolute;top:660px;left:50%;margin-left:-50px;z-index:200}#view-code:hover{opacity:1}#chatbox{width:290px;background:#fff;border-radius:6px;overflow:hidden;height:484px;position:fixed;right:0;bottom:0;margin-left:-155px;direction:ltr;z-index:10000}#friendslist{position:absolute;top:0;left:0;width:290px;height:484px}#topmenu{height:69px;width:290px;border-bottom:1px solid #d8dfe3}#topmenu span{float:left;width:96px;height:70px;background:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/top-menu.png") -3px -118px no-repeat}#topmenu span.friends{margin-bottom:-1px}#topmenu span.chats{background-position:-95px 25px;cursor:pointer}#topmenu span.chats:hover{background-position:-95px -46px;cursor:pointer}#topmenu span.history{background-position:-190px 24px;cursor:pointer}#topmenu span.history:hover{background-position:-190px -47px;cursor:pointer}.friend{height:70px;border-bottom:1px solid #e7ebee;position:relative}.friend:hover{background:#f1f4f6;cursor:pointer}.friend img{width:40px;border-radius:50%;margin:15px;float:left}.floatingImg{width:40px;border-radius:50%;position:absolute;top:0;left:12px}.friend p{padding:15px 0 0 0;float:left;width:220px}.friend p strong{font-weight:600;font-size:15px;color:#597a96}.friend p span{font-size:13px;font-weight:400;color:#aab8c2}.friend .status{background:#26c281;border-radius:50%;width:9px;height:9px;position:absolute;top:31px;right:17px}.friend .status.away{background:#ffce54}.friend .status.inactive{background:#eaeef0}#search{background:#e3e9ed url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/search.png") -11px 0 no-repeat;height:60px;width:290px;position:absolute;bottom:0;left:0}#searchfield{background:#e3e9ed;margin:21px 0 0 55px;border:none;padding:0;font-size:14px;font-family:"Open Sans", sans-serif;font-weight:400;color:#8198ac}#searchfield:focus{outline:0}#chatview{width:290px;height:484px;position:absolute;top:0;left:0;display:none;background:#fff}#profile{height:153px;overflow:hidden;text-align:center;color:#fff}.p1 #profile{background:#fff url("header.png") 0 0 no-repeat}#profile .avatar{width:68px;border:3px solid #fff;margin:23px 0 0;border-radius:50%}#profile p{font-weight:600;font-size:15px;margin:118px 0 -1px;opacity:0;-webkit-transition:all 200ms cubic-bezier(0, 0.995, 0.99, 1);-moz-transition:all 200ms cubic-bezier(0, 0.995, 0.99, 1);-ms-transition:all 200ms cubic-bezier(0, 0.995, 0.99, 1);-o-transition:all 200ms cubic-bezier(0, 0.995, 0.99, 1);transition:all 200ms cubic-bezier(0, 0.995, 0.99, 1)}#profile p.animate{margin-top:97px;opacity:1;-webkit-transition:all 200ms cubic-bezier(0, 0.995, 0.99, 1);-moz-transition:all 200ms cubic-bezier(0, 0.995, 0.99, 1);-ms-transition:all 200ms cubic-bezier(0, 0.995, 0.99, 1);-o-transition:all 200ms cubic-bezier(0, 0.995, 0.99, 1);transition:all 200ms cubic-bezier(0, 0.995, 0.99, 1)}#profile span{font-weight:400;font-size:11px}#chat-messages{box-sizing:content-box;opacity:0;margin-top:30px;width:290px;height:270px;overflow-y:scroll;overflow-x:hidden;padding-right:20px;-webkit-transition:all 200ms cubic-bezier(0, 0.995, 0.99, 1);-moz-transition:all 200ms cubic-bezier(0, 0.995, 0.99, 1);-ms-transition:all 200ms cubic-bezier(0, 0.995, 0.99, 1);-o-transition:all 200ms cubic-bezier(0, 0.995, 0.99, 1);transition:all 200ms cubic-bezier(0, 0.995, 0.99, 1)}#chat-messages.animate{opacity:1;margin-top:0}#chat-messages label{color:#aab8c2;font-weight:600;font-size:12px;text-align:center;margin:15px 0;width:290px;display:block}#chat-messages div.message{direction:rtl;padding:0 58px 30px 0;clear:both;margin-bottom:45px}#chat-messages div.message.left{padding:0 0 30px 58px;margin-left:0;margin-right:19px}#chat-messages .message img{float:right;margin-right:-38px;border-radius:50%;width:30px;margin-top:12px}#chat-messages div.message.left img{float:left;margin-right:0;margin-left:-38px}.message .bubble{background:#689f38;font-size:13px;padding:12px 13px;border-radius:5px 5px 5px 0px;color:white;position:relative;float:right}#chat-messages div.message.left .bubble{background:#616161;float:left;border-radius:5px 5px 0px 5px}.bubble .corner{position:absolute;width:7px;height:7px;right:-5px;bottom:0}.bubble .corner:after{display:block;content:'';position:absolute;bottom:0;right:0;width:0;height:0;border-style:solid;border-width:20px 0 0 10px;border-color:transparent transparent transparent #689f38}div.message.left .corner{right:auto;left:-5px}div.message.left .corner:after{display:block;content:'';position:absolute;bottom:0;right:-3px;width:0;height:0;border-style:solid;border-width:0 0 20px 10px;border-color:transparent transparent #616161 transparent}.bubble span{color:#aab8c2;font-size:11px;position:absolute;right:0;bottom:-22px}#sendmessage{direction:rtl;height:60px;border-top:1px solid #e7ebee;position:absolute;bottom:0;right:0px;width:290px;background:#fff;padding-bottom:50px}#sendmessage input{width:220px;background:#fff;margin:21px 21px 0 0;border:none;padding:0;font-size:14px;font-family:"Open Sans", sans-serif;font-weight:400;color:#aab8c2}#sendmessage input:focus{outline:0}#sendmessage button{background:#fff url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/send.png") 0 -41px no-repeat;width:30px;height:30px;position:absolute;left:15px;top:23px;border:none}#sendmessage button:hover{cursor:pointer;background-position:0 0}#sendmessage button:focus{outline:0}#close{position:absolute;top:8px;opacity:0.8;right:10px;width:20px;height:20px;cursor:pointer}#close:hover{opacity:1}.cx,.cy{background:#fff;position:absolute;width:0px;top:15px;right:15px;height:3px;-webkit-transition:all 250ms ease-in-out;-moz-transition:all 250ms ease-in-out;-ms-transition:all 250ms ease-in-out;-o-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out}.cx.s1,.cy.s1{right:0;width:20px;-webkit-transition:all 100ms ease-out;-moz-transition:all 100ms ease-out;-ms-transition:all 100ms ease-out;-o-transition:all 100ms ease-out;transition:all 100ms ease-out}.cy.s2{-ms-transform:rotate(50deg);-webkit-transform:rotate(50deg);transform:rotate(50deg);-webkit-transition:all 100ms ease-out;-moz-transition:all 100ms ease-out;-ms-transition:all 100ms ease-out;-o-transition:all 100ms ease-out;transition:all 100ms ease-out}.cy.s3{-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:all 100ms ease-out;-moz-transition:all 100ms ease-out;-ms-transition:all 100ms ease-out;-o-transition:all 100ms ease-out;transition:all 100ms ease-out}.cx.s1{right:0;width:20px;-webkit-transition:all 100ms ease-out;-moz-transition:all 100ms ease-out;-ms-transition:all 100ms ease-out;-o-transition:all 100ms ease-out;transition:all 100ms ease-out}.cx.s2{-ms-transform:rotate(140deg);-webkit-transform:rotate(140deg);transform:rotate(140deg);-webkit-transition:all 100ms ease-out;-moz-transition:all 100ms ease-out;-ms-transition:all 100ease-out;-o-transition:all 100ms ease-out;transition:all 100ms ease-out}.cx.s3{-ms-transform:rotate(135deg);-webkit-transform:rotate(135deg);transform:rotate(135deg);-webkit-transition:all 100ms ease-out;-moz-transition:all 100ms ease-out;-ms-transition:all 100ms ease-out;-o-transition:all 100ms ease-out;transition:all 100ms ease-out}#chatview,#sendmessage{overflow:hidden;border-radius:6px}.fab-action-button{position:absolute;bottom:0;display:block;width:100%;height:100%;background-color:white;border-radius:50%;box-shadow:0 2px 15px 0 rgba(0,0,0,0.14),0 5px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2)}.fab{position:fixed;width:50px;height:50px;right:15px;bottom:15px;z-index:10001;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease}.fab-transform-active{bottom:390px;right:113px;width:68px;height:68px}.fab-transform-active .fab-img{width:50px;height:50px}.fab-img{width:35px;height:35px;position:absolute;left:0;right:0;top:8px;margin-left:auto;margin-right:auto;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease}