#frame{background:#e6eaea;height:92vh;max-height:600px;min-height:300px;min-width:320px;width:100%}@media screen and (max-width:360px){#frame{height:100vh;width:100%}}#frame #sidepanel{background:#fff;border-radius:4px 0 0 4px;-webkit-border-radius:4px 0 0 4px;border-right:1px solid #dee2e6;color:#f5f5f5;float:left;height:100%;max-width:340px;min-width:340px;overflow:hidden;position:relative;width:40%}@media screen and (max-width:900px){#frame #sidepanel{max-width:auto;min-width:auto}}@media screen and (max-width:735px){#frame #sidepanel{min-width:58px;width:58px}}#frame #sidepanel #profile{background:#f5f5f5;margin:0 auto;width:100%}@media screen and (max-width:735px){#frame #sidepanel #profile{border-bottom:1px solid #dee2e6;margin:0 auto;padding:5px 0 0;width:100%}}#frame #sidepanel #profile.expanded .wrap{height:210px;line-height:normal}#frame #sidepanel #profile.expanded .wrap p{margin-top:20px}#frame #sidepanel #profile.expanded .wrap i.expand-button{filter:FlipH;-ms-filter:"FlipH";-moz-transform:scaleY(-1);-o-transform:scaleY(-1);-webkit-transform:scaleY(-1);transform:scaleY(-1)}#frame #sidepanel #profile .wrap{height:60px;line-height:60px;overflow:hidden;-moz-transition:height .3s ease;-o-transition:height .3s ease;-webkit-transition:height .3s ease;transition:height .3s ease}@media screen and (max-width:735px){#frame #sidepanel #profile .wrap{height:55px}}#frame #sidepanel #profile .wrap img{border:2px solid #e74c3c;border-radius:50%;cursor:pointer;float:left;height:auto;padding:3px;-moz-transition:border .3s ease;-o-transition:border .3s ease;-webkit-transition:border .3s ease;transition:border .3s ease;width:50px}@media screen and (max-width:735px){#frame #sidepanel #profile .wrap img{margin-left:4px;width:40px}}#frame #sidepanel #profile .wrap img.online{border:2px solid #2ecc71}#frame #sidepanel #profile .wrap img.away{border:2px solid #f1c40f}#frame #sidepanel #profile .wrap img.busy{border:2px solid #e74c3c}#frame #sidepanel #profile .wrap img.offline{border:2px solid #95a5a6}#frame #sidepanel #profile .wrap p{color:#222;font-size:18px;font-weight:300;margin-left:18px}@media screen and (max-width:735px){#frame #sidepanel #profile .wrap p{line-height:51px;margin-left:20px}#frame #sidepanel #profile .wrap p span{display:none}}#frame #sidepanel #profile .wrap i.expand-button{color:#435f7a;cursor:pointer;float:right;font-size:.8em;margin-top:23px}@media screen and (max-width:735px){#frame #sidepanel #profile .wrap i.expand-button{display:none}}#frame #sidepanel #profile .wrap #status-options{background:#435f7a;border-radius:6px;line-height:normal;margin:70px 0 0;opacity:0;position:absolute;-moz-transition:all .3s ease;-o-transition:all .3s ease;-webkit-transition:all .3s ease;transition:all .3s ease;visibility:hidden;width:150px;z-index:99}@media screen and (max-width:735px){#frame #sidepanel #profile .wrap #status-options{margin-top:57px;width:58px}}#frame #sidepanel #profile .wrap #status-options.active{margin:75px 0 0;opacity:1;visibility:visible}@media screen and (max-width:735px){#frame #sidepanel #profile .wrap #status-options.active{margin-top:62px}}#frame #sidepanel #profile .wrap #status-options:before{border-bottom:8px solid #435f7a;border-left:6px solid transparent;border-right:6px solid transparent;content:"";height:0;margin:-8px 0 0 24px;position:absolute;width:0}@media screen and (max-width:735px){#frame #sidepanel #profile .wrap #status-options:before{margin-left:23px}}#frame #sidepanel #profile .wrap #status-options ul{border-radius:6px;overflow:hidden}#frame #sidepanel #profile .wrap #status-options ul li{cursor:pointer;display:block;padding:15px 0 30px 18px}@media screen and (max-width:735px){#frame #sidepanel #profile .wrap #status-options ul li{padding:15px 0 35px 22px}}#frame #sidepanel #profile .wrap #status-options ul li:hover{background:#496886}#frame #sidepanel #profile .wrap #status-options ul li span.status-circle{border-radius:50%;height:10px;margin:5px 0 0;position:absolute;width:10px}@media screen and (max-width:735px){#frame #sidepanel #profile .wrap #status-options ul li span.status-circle{height:14px;width:14px}}#frame #sidepanel #profile .wrap #status-options ul li span.status-circle:before{background:transparent;border-radius:50%;content:"";height:14px;margin:-3px 0 0 -3px;position:absolute;width:14px;z-index:0}@media screen and (max-width:735px){#frame #sidepanel #profile .wrap #status-options ul li span.status-circle:before{height:18px;width:18px}}#frame #sidepanel #profile .wrap #status-options ul li p{padding-left:12px}@media screen and (max-width:735px){#frame #sidepanel #profile .wrap #status-options ul li p{display:none}}#frame #sidepanel #profile .wrap #status-options ul li#status-online span.status-circle{background:#2ecc71}#frame #sidepanel #profile .wrap #status-options ul li#status-online.active span.status-circle:before{border:1px solid #2ecc71}#frame #sidepanel #profile .wrap #status-options ul li#status-away span.status-circle{background:#f1c40f}#frame #sidepanel #profile .wrap #status-options ul li#status-away.active span.status-circle:before{border:1px solid #f1c40f}#frame #sidepanel #profile .wrap #status-options ul li#status-busy span.status-circle{background:#e74c3c}#frame #sidepanel #profile .wrap #status-options ul li#status-busy.active span.status-circle:before{border:1px solid #e74c3c}#frame #sidepanel #profile .wrap #status-options ul li#status-offline span.status-circle{background:#95a5a6}#frame #sidepanel #profile .wrap #status-options ul li#status-offline.active span.status-circle:before{border:1px solid #95a5a6}#frame #sidepanel #profile .wrap #expanded{display:block;line-height:normal!important;padding:100px 0 0}#frame #sidepanel #profile .wrap #expanded label{clear:both;float:left;margin:0 8px 5px 0;padding:5px 0}#frame #sidepanel #profile .wrap #expanded input{background:#32465a;border:none;border-radius:3px;color:#f5f5f5;margin-bottom:6px;padding:7px;width:calc(100% - 43px)}#frame #sidepanel #profile .wrap #expanded input:focus{background:#435f7a;outline:none}#frame #sidepanel #search{border-bottom:1px solid #dee2e6;border-top:1px solid #dee2e6;font-weight:300}@media screen and (max-width:735px){#frame #sidepanel #search{display:none}}#frame #sidepanel #search label{font-size:13px;margin:10px 0 0 20px;position:absolute}#frame #sidepanel #search input{background:#fafafa;border:none;color:#222;font-size:14px;padding:10px 15px 10px 46px;width:100%}#frame #sidepanel #search input::placeholder{color:#969696!important;font-weight:300}#frame #sidepanel #search input:focus{outline:none}#frame #sidepanel #search input::-webkit-input-placeholder{color:#f5f5f5}#frame #sidepanel #search input::-moz-placeholder{color:#f5f5f5}#frame #sidepanel #search input:-ms-input-placeholder{color:#f5f5f5}#frame #sidepanel #search input:-moz-placeholder{color:#f5f5f5}#frame #sidepanel #contacts{background:#fff;height:calc(100% - 102px);overflow-x:hidden;overflow-y:scroll}@media screen and (max-width:735px){#frame #sidepanel #contacts{height:calc(100% - 149px);overflow-x:hidden;overflow-y:scroll}#frame #sidepanel #contacts::-webkit-scrollbar{display:none}}#frame #sidepanel #contacts.expanded{height:calc(100% - 334px)}#frame #sidepanel #contacts::-webkit-scrollbar{background:#fafafa;width:5px}#frame #sidepanel #contacts::-webkit-scrollbar-thumb{background-color:#969696}#frame #sidepanel #contacts ul li.contact{cursor:pointer;font-size:.9em;padding:10px 0 15px;position:relative}@media screen and (max-width:735px){#frame #sidepanel #contacts ul li.contact{padding:6px 0 46px 8px}}#frame #sidepanel #contacts ul li.contact.active,#frame #sidepanel #contacts ul li.contact:hover{background:#eaeaea}#frame #sidepanel #contacts ul li.contact .wrap{margin:0 auto;position:relative;width:92%}@media screen and (max-width:735px){#frame #sidepanel #contacts ul li.contact .wrap{width:100%}}#frame #sidepanel #contacts ul li.contact .wrap em{background:#95a5a6;border-radius:50%;height:10px;left:0;margin:-2px 0 0 -2px;position:absolute;width:10px}#frame #sidepanel #contacts ul li.contact .wrap em.online{background:#2ecc71}#frame #sidepanel #contacts ul li.contact .wrap em.away{background:#f1c40f}#frame #sidepanel #contacts ul li.contact .wrap em.busy{background:#e74c3c}#frame #sidepanel #contacts ul li.contact .wrap img{border-radius:50%;float:left;margin-right:10px;width:40px}@media screen and (max-width:735px){#frame #sidepanel #contacts ul li.contact .wrap img{margin-right:0}}#frame #sidepanel #contacts ul li.contact .wrap .meta{padding:0}@media screen and (max-width:735px){#frame #sidepanel #contacts ul li.contact .wrap .meta{display:none}}#frame #sidepanel #contacts ul li.contact .wrap .meta .name{color:#222;font-weight:600;margin-bottom:0}#frame #sidepanel #contacts ul li.contact .wrap .meta .preview{color:#969696;font-weight:300;margin:0;max-width:160px;min-height:20px;overflow:hidden;padding:0 0 1px;text-overflow:ellipsis;-moz-transition:all 1s ease;-o-transition:all 1s ease;-webkit-transition:all 1s ease;transition:all 1s ease;white-space:nowrap}#frame #sidepanel #contacts ul li.contact .wrap .meta .preview span{background:none;border:none;border-radius:initial;margin:0 0 0 1px;opacity:.5;padding:0 2px 0 0;position:static}#frame #sidepanel #bottom-bar{bottom:0;position:absolute;width:100%}#frame #sidepanel #bottom-bar button{background:#32465a;border:none;color:#f5f5f5;cursor:pointer;float:left;font-size:.85em;padding:10px 0;width:50%}@media screen and (max-width:735px){#frame #sidepanel #bottom-bar button{float:none;padding:15px 0;width:100%}}#frame #sidepanel #bottom-bar button:focus{outline:none}#frame #sidepanel #bottom-bar button:first-child{border-right:1px solid #2c3e50}@media screen and (max-width:735px){#frame #sidepanel #bottom-bar button:first-child{border-bottom:1px solid #2c3e50;border-right:none}}#frame #sidepanel #bottom-bar button:hover{background:#435f7a}#frame #sidepanel #bottom-bar button i{font-size:1em;margin-right:3px}@media screen and (max-width:735px){#frame #sidepanel #bottom-bar button i{font-size:1.3em}#frame #sidepanel #bottom-bar button span{display:none}}#frame .content{border-radius:0 4px 4px 0;-webkit-border-radius:0 4px 4px 0;float:right;height:100%;overflow:hidden;position:relative;width:60%}@media screen and (max-width:735px){#frame .content{min-width:300px!important;width:calc(100% - 58px)}}@media screen and (min-width:900px){#frame .content{width:calc(100% - 340px)}}#frame .content .contact-profile{background:#f5f5f5;border-bottom:1px solid #dee2e6;height:61px;line-height:61px;width:100%}#frame .content .contact-profile img{border-radius:50%;float:left;margin:12px 12px 0 14px;width:35px}#frame .content .contact-profile p{color:#222;float:left;margin-bottom:0}#frame .content .contact-profile .social-media{float:right}#frame .content .contact-profile .social-media i{cursor:pointer;margin-left:14px}#frame .content .contact-profile .social-media i:last-child{margin-right:20px}#frame .content .contact-profile .social-media i:hover{color:#2575dc}#frame .content .messages{background:#fff;height:auto;max-height:calc(100% - 132px);min-height:calc(100% - 132px);overflow-x:hidden;overflow-y:scroll;width:100%}@media screen and (max-width:735px){#frame .content .messages{max-height:calc(100% - 135px)}}#frame .content .messages::-webkit-scrollbar{background:transparent;width:5px}#frame .content .messages::-webkit-scrollbar-thumb{background-color:#969696}#frame .content .messages ul li{clear:both;display:inline-block;float:left;font-size:.9em;margin:15px 15px 5px;width:calc(100% - 25px);word-break:break-word}#frame .content .messages ul li:last-child{margin-bottom:20px;padding-bottom:20px}#frame .content .messages ul li.sent img{float:right;margin:6px 0 0 8px}#frame .content .messages ul li.sent p{background:#216abe;color:#fff;float:right;margin-bottom:0}#frame .content .messages ul li.replies img{margin:6px 8px 0 0}#frame .content .messages ul li.replies p{background:#f5f5f5;float:left;margin-bottom:0}#frame .content .messages ul li img{border-radius:50%;float:left;width:22px}#frame .content .messages ul li p{-webkit-font-smoothing:antialiased;border-radius:20px;display:inline-block;line-height:130%;max-width:205px;padding:10px 15px}@media screen and (min-width:735px){#frame .content .messages ul li p{max-width:300px}}#frame .content .message-input{bottom:0;height:70px;position:absolute;width:100%;z-index:99}#frame .content .message-input .wrap{position:relative}#frame .content .message-input .message-input__counter{background:#e7e7e7;border-radius:3px;color:#666;font-size:10px;left:15px;padding:2px 4px;position:absolute;top:-14px;z-index:1}#frame .content .message-input .wrap input[type=text],#frame .content .message-input .wrap textarea{background:#fafafa;border:none;color:#222;float:left;font-size:13px;height:46px;padding:0 14px;width:calc(100% - 90px)}#frame .content .message-input .wrap textarea{height:70px;padding:13px 16px;resize:none}#frame .content .message-input .wrap textarea::-webkit-scrollbar{width:5px}#frame .content .message-input .wrap textarea::-webkit-scrollbar-thumb{background-color:#bbb}#frame .content .message-input .wrap textarea::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px hsla(0,0%,100%,.3)}@media screen and (max-width:735px){#frame .content .message-input .wrap input[type=text]{padding:15px 32px 16px 8px}#frame .content .message-input .wrap textarea{padding:8px}#frame .content .message-input .message-input__counter{left:8px}}#frame .content .message-input .wrap input[type=text]:focus,#frame .content .message-input .wrap textarea:focus{border:0!important;outline:none}#frame .content .message-input .wrap .attachment{background:#fafafa;color:#435f7a;cursor:pointer;font-size:1.1em;height:70px;line-height:70px;position:absolute;right:50px;z-index:4}#frame .content .message-input .wrap .attachment label{cursor:pointer;padding:0 15px}#frame .content .message-input .wrap .attachment:hover{color:#2575dc}#frame .content .message-input .wrap button{background:#2575dc;border:none;color:#f5f5f5;cursor:pointer;float:right;height:70px;line-height:70px;width:50px}@media screen and (max-width:735px){#frame .contact-name-date{display:none}}#frame .content .message-input .wrap button:hover{background:#1f63bb}#frame .content .message-input .wrap button:focus{outline:none}#frame.frame-in-offer{max-height:480px}#frame.frame-in-offer .content{border-radius:4px!important;-webkit-border-radius:4px!important;width:100%!important}#frame .contact-name-date{color:#969696;float:right;font-size:80%;font-weight:300}#frame .not-read-yet{background:#e5f3fb}#frame .not-read-yet .contact-name-date{color:#2575dc;font-weight:400}.content-attch{color:#2575dc;font-size:.9em;font-style:normal}#frame .attch-count{background:#c00;border-radius:50%;color:#fff;font-size:11px;height:18px;line-height:20px;position:absolute;right:5px;text-align:center;top:-8px;width:18px}#frame .content .messages ul li.sent .content-attch{clear:both;float:right;margin:5px 40px 0 0;text-align:right;word-break:break-all}#frame .content .messages ul li.replies .content-attch{clear:both;float:left;margin:5px 0 0 40px;text-align:left;word-break:break-all}#frame .content .messages ul li.sent .content-attch+.content-attch{margin-top:3px}@media screen and (max-width:400px){#frame{max-height:550px}#frame .content{min-width:auto!important}}@media screen and (max-width:370px){#frame{min-width:280px}#frame .content .messages ul li img{display:none}#frame .content .messages ul li.replies .content-attch,#frame .content .messages ul li.sent .content-attch{margin:5px 0 0}}