body{font-family:"Open Sans",sans-serif;color:#4a4d52}*,:after,:before{box-sizing:border-box}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,button,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:""}table{border-collapse:collapse;border-spacing:0}a{color:inherit}a,a:hover{text-decoration:none}.page{height:100vh}.page__head{height:10vh;padding-left:80px}.page__title{font-size:33px;color:#333;line-height:12vh}.page__body{height:90vh;padding:20px 80px 50px;background-color:#586670}@media (max-width:800px){.page__body{height:90vh;padding:20px 10px;background-color:#586670}}.detail{display:grid;grid-template-columns:170px 1fr;grid-template-rows:100%;height:100%;background-color:#becbd9}.detail__img{width:inherit;height:inherit}.detail__inf{padding:15px 20px;color:#5a666f;font-size:14px;line-height:1.1rem;overflow:hidden}.detail__name{margin-bottom:3px;font-size:18px;color:#000}@media (max-width:800px){.detail__inf{font-size:11px}.detail__name{font-size:14px}}@media (max-width:670px){.detail{grid-template-columns:50px 1fr}.detail__name{font-size:16px}.detail__description{display:none}}.chat{height:inherit;background-color:#d7dfe7}.chat__detail{height:170px}.chat__messages{display:flex;flex-direction:column;align-items:start;justify-content:end;height:calc(100% - 230px);overflow-y:auto;scroll-behavior:smooth}.chat__messages::-webkit-scrollbar,.chat__messages::-webkit-scrollbar-track{border-radius:10px;background-color:#becbd9}.chat__messages::-webkit-scrollbar{width:15px}.chat__messages::-webkit-scrollbar-thumb{border-radius:10px;background-color:#9daab9}.chat__form{height:40px;width:100%}.chat__message{display:inline-block;width:66%;margin:20px}@media (max-width:800px){.chat{font-size:11px}}@media (max-width:670px){.chat__detail{height:50px}.chat__messages{height:calc(100% - 110px)}.chat__message{width:95%;margin:10px}}.message{color:#354659;font-weight:700;background-color:#becbd9;border-radius:7px;-webkit-filter:drop-shadow(2.5px 4.33px 4px rgba(0,1,1,.21));filter:drop-shadow(2.5px 4.33px 4px rgba(0,1,1,.21))}.message--from-me{align-self:flex-end;color:#814d2d;background-color:#f0cbb3}.message__head{display:flex;justify-content:space-between;align-items:center;height:36px;padding:0 18px}.message__date{opacity:.5}.message__text-wrp{position:relative;color:#4a4d52;border-radius:0 0 7px 7px;background-color:#f4f8fb}.message__text{display:inline-block;padding:15px 18px;overflow-wrap:anywhere}.message__poiter{position:absolute;top:50%;right:99%;width:15px;height:15px;background-color:#f4f8fb;transform:rotate(45deg) translateY(-50%)}.message__poiter--right{right:0}.form{display:grid;grid-template-columns:9fr 3fr;grid-gap:10px;gap:10px;height:100%;width:100%;padding:0 20px 0 10px}.form__input{padding-left:10px;font-size:14px;border-width:0}.form__button,.form__input{height:100%;border-radius:5px}.form__button{color:#fff;font-size:13px;background-color:#428bca;cursor:pointer;transition:opacity .3s}.form__button:after{content:"Send message"}.form__button:hover{opacity:.8}@media (max-width:800px){.form{grid-template-columns:1fr 50px}.form__button,.form__input{font-size:11px}.form__button{position:relative}.form__button:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url(https://img.icons8.com/nolan/64/filled-sent.png) no-repeat 50%;background-size:contain}}.contact{display:flex;justify-content:space-between;align-items:center;height:inherit;background-color:transparent;overflow:hidden}.contact__img-wrp{position:relative;height:60px;width:60px}.contact__img{width:inherit;height:inherit;border-radius:5px}.contact__online{position:absolute;top:93%;right:6%;width:15px;height:15px;border-radius:50%;background-color:#20d63e;transform:translate(50%,-50%)}.contact__inf{width:calc(100% - 84px)}.contact__name{font-weight:700}.contact__description{color:#999}.contact-list__item{height:70px;padding:0 12px;cursor:pointer;transition:opacity .3s}.contact-list__item:hover{opacity:.8}.contact-list__item--active{background-color:#f8f8f8}.sidebar-controlers{display:grid;grid-template-columns:repeat(2,1fr);height:100%}.sidebar-controlers__button{font-size:14px;color:#777;border:1px solid #ddd;cursor:pointer;transition:opacity .3s}.sidebar-controlers__button:hover{opacity:.7}.sidebar-controlers__button:focus{outline:none}.sidebar-controlers__button--active{border-width:0;background-color:#fff}.sidebar{position:relative;height:100%;background-color:#fff}.sidebar__controlers{height:40px;margin-bottom:15px}.sidebar__chats{height:calc(100% - 130px);overflow-y:auto}.sidebar__search{position:absolute;left:50%;bottom:30px;padding-left:10px;height:40px;width:80%;font-size:14px;transform:translateX(-50%)}.toggle-sidebar{width:inherit;height:inherit;background-color:transparent;transition:opacity .3s;cursor:pointer}.toggle-sidebar:hover{opacity:.8}.toggle-sidebar:focus{outline:none}.toggle-sidebar__img{width:inherit}.messager{display:flex;height:100%;overflow:hidden}.messager__toggle-sidebar{display:none}.messager__chat-wrp{height:inherit;width:calc(100% - 260px);background-color:khaki}.messager__sidebar-wrp{width:260px;height:100%}@media (max-width:1020px){.messager{position:relative}.messager__toggle-sidebar{position:absolute;top:0;right:0;display:block;width:30px;height:30px;background-color:transparent;z-index:1}.messager__chat-wrp{width:100%}.messager__sidebar-wrp{position:absolute;top:0;left:0;width:100%;z-index:-1}.messager__sidebar-wrp--visible{z-index:1}}@media (max-width:670px){.messager__toggle-sidebar{top:10px}}
/*# sourceMappingURL=main.33252cff.chunk.css.map */