#messages .wrapper{display:flex;width:100%;flex-grow:1}#messages .wrapper .c1{flex-grow:1;margin-right:20px}#messages .wrapper .list li{cursor:pointer}#messages .wrapper .list li h2 .count{position:absolute;right:20px;top:50%;transform:translateY(-50%)}#messages .wrapper .list li h3 span{margin-left:5px;opacity:0;color:var(--pri-bg);text-transform:capitalize;transition:.3s ease-in-out}#messages .wrapper .list li h3 span.typing{opacity:1}#messages .wrapper .preview{position:relative;display:flex;justify-content:space-between;min-height:350px;max-height:calc(100vh - 220px);padding-bottom:90px;box-shadow:none!important;background:none;overflow:visible}#messages .wrapper .preview>*{border-radius:8px;background:var(--pan-bg)}#messages .wrapper .preview div.messages{overflow:hidden;position:relative;flex-grow:1;width:340px;margin-bottom:0}#messages .wrapper .preview ul{height:100%;padding:20px 20px 6px 20px;overflow-x:hidden;overflow-y:auto}#messages .wrapper .preview ul:after,#messages .wrapper .preview ul:before{pointer-events:none;z-index:1;content:"";position:absolute;left:0;width:calc(100% - 20px);height:20px;display:block}#messages .wrapper .preview ul:before{top:0;background-image:linear-gradient(var(--pan-bg),transparent)}#messages .wrapper .preview ul:after{bottom:0;background-image:linear-gradient(transparent,var(--pan-bg))}#messages .wrapper .preview ul li{order:1;list-style-type:none}#messages .wrapper .preview ul li span{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:10px 20px;border-radius:20px;font-size:1.4rem}#messages .wrapper .preview ul li span:after{content:"";position:absolute;bottom:0;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid transparent}#messages .wrapper .preview ul li strong{display:flex;padding:6px 5px 14px 5px;font-size:1rem;font-weight:500;text-transform:uppercase;line-height:1;color:var(--pan-sub-col)}#messages .wrapper .preview ul li strong em{font-style:normal}#messages .wrapper .preview ul li strong svg{opacity:0;transition-duration:0s}#messages .wrapper .preview ul li strong svg .fill{fill:var(--pan-sub-col)}#messages .wrapper .preview ul li strong.read svg{opacity:1;transition-duration:.3s}#messages .wrapper .preview ul li.own{text-align:right}#messages .wrapper .preview ul li.own strong{justify-content:flex-end}#messages .wrapper .preview ul li.own strong svg{margin-right:5px}#messages .wrapper .preview ul li.own span{color:var(--pri-bg);background:var(--bod-bg)}#messages .wrapper .preview ul li.own span:after{right:0;border-bottom-color:var(--bod-bg)}#messages .wrapper .preview ul li:not(.own){text-align:left}#messages .wrapper .preview ul li:not(.own) strong{justify-content:flex-start}#messages .wrapper .preview ul li:not(.own) strong svg{margin-left:5px}#messages .wrapper .preview ul li:not(.own) span{color:var(--pri-col);background:var(--pri-bg)}#messages .wrapper .preview ul li:not(.own) span:after{left:0;border-bottom-color:var(--pri-bg)}#messages .wrapper .preview>.recipient{overflow:hidden;width:250px;padding:20px;margin-right:10px}#messages .wrapper .preview>.recipient .user{position:relative;top:auto;right:auto;width:120px;height:120px;margin-left:auto;margin-right:auto}#messages .wrapper .preview>.recipient .user:after{transform:translate(25%,25%)}#messages .wrapper .preview>.recipient span.user{font-size:2rem;font-weight:400}#messages .wrapper .preview>.recipient .hgroup{margin-top:20px;text-align:center}#messages .wrapper .preview>.recipient .hgroup h2{margin-bottom:5px;font-size:2rem;font-weight:400;color:var(--pan-hdg-col)}#messages .wrapper .preview>.recipient .hgroup p{font-size:1.2rem;margin:0;color:var(--pri-bg);opacity:0;transition:.3s ease-in-out}#messages .wrapper .preview>.recipient .hgroup p.typing{opacity:1}#messages .wrapper .preview .message{position:absolute;bottom:0;display:flex;height:80px;width:100%;padding:20px}#messages .wrapper .preview .message input{width:100%;height:40px;padding:0 60px 0 20px;border-radius:20px;background:var(--bod-bg)}#messages .wrapper .preview .message button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin:5px 0 0 -35px;text-indent:40px;border-radius:50%;background:var(--pri-bg)}#messages .wrapper .preview .message button .fill{fill:var(--pri-col)}#messages .wrapper .preview .message button:hover{background:var(--pri-bg-hvr)}#messages .wrapper .preview .message button:hover .fill{fill:var(--pri-col-hvr)}#messages .wrapper .preview .message button:disabled{opacity:0}#messages .wrapper .preview .message button svg{height:18px;width:18px;margin-left:-2px}#messages #contacts .search{width:calc(50% - 10px)}#messages #contacts .search input{width:100%}#messages .listbg2 .list{display:flex;flex-wrap:wrap;justify-content:space-between;margin-top:20px;min-width:300px}#messages .listbg2 .list li{cursor:pointer;width:calc(50% - 10px);transition:border .3s ease-in-out;border:1px solid transparent}#messages .listbg2 .list li:hover{border-color:var(--pri-bg)}@media only screen and (max-width:659px){#messages .listbg2 .list li,#messages .listbg2:after,#messages .listbg2:before{width:100%}}@media screen and (max-width:1239px){#messages .preview>.recipient{display:none}}