@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";:root{--chat-block-light: rgba(255, 255, 255, .656);--chat-block-dark: #080707}body{font-size:14px;font-weight:400;font-family:Roboto,sans-serif;background-color:#dbdde1}.chat__block{display:flex;max-width:100%;min-height:700px;height:100vh;margin:0 auto;background-color:var(--chat-block-light)}.chat__block.dark{background-color:var(--chat-block-dark)}.friends{position:relative;display:flex;flex-direction:column;max-width:360px;min-width:360px;border-right:1px solid #DBDDE1}.header{border-bottom:1px solid #DBDDE1;padding:9px 14px}.header__inner{display:flex;align-items:center;gap:17px}.header__inner-btn{width:32px;height:32px}.header__inner-label{display:flex;align-items:center;width:100%;max-width:283px;padding:8px 16px;outline:1px solid #DBDDE1;border-radius:30px}.header__inner-label--img{margin-right:8px}.header__inner-label input::placeholder{font-size:14px}.header__inner-label input{width:100%}.main__frineds-user--item{max-width:380px;padding:10px 8px;cursor:pointer}.main__frineds-user--item__inner{display:flex;align-items:center;font-weight:400;font-size:14px}.main__frineds-user--item__inner-img-block,.main__frineds-user--item__inner-img-block img{content:"";width:40px;height:40px;display:inline-block;vertical-align:middle;border:1px solid #DBDDE1;border-radius:50%;margin-right:8px}.main__frineds-user--item__inner-information{display:flex;gap:16px}.main__frineds-user--item__inner-information--name{font-weight:500;font-size:16px;padding-bottom:2px}.main__frineds-user--item__inner-information--lastMessage{font-weight:400;font-size:14px}.main__frineds-user--item__inner-time{font-weight:400;font-size:14px;color:#747881;align-self:flex-end}.main__frineds-user--item__inner-time.active{color:#000}.chat{position:relative;display:flex;flex-direction:column;max-width:100%;width:100%}.chat__header{border-bottom:1px #DBDDE1 solid}.chat__header-inner{display:flex;align-items:center;padding:9px 10px}.chat__header-inner-img-block,.chat__header-inner-img-block img{content:"";width:40px;height:40px;display:inline-block;vertical-align:middle;border-radius:50%;margin-right:8px}.chat__header-inner-information--title{font-weight:500;font-size:16px;margin-bottom:6px}.chat__main{position:relative;height:85%;overflow-y:scroll;padding:8px}.chat__main-message--block{margin-top:20px}.chat__main-message--block__inner{display:flex}.chat__main-message--block-text{max-width:280px;padding:6px 16px;font-weight:400;font-size:16px;word-break:break-all;border-radius:20px 20px 20px 0;background-color:#c8e0ff;margin-bottom:2px}.chat__main-message--block-text.you{background-color:#c8e0ff}.chat__main-message--block-text.user{background-color:#e9eaed}.chat__footer{position:fixed;padding:8px 12px;bottom:0;left:0;width:100%;background-color:#dbdde1;display:flex;align-items:center;justify-content:space-between}.chat__footer-send__message-btn{content:"";width:45px;height:40px;display:inline-block;vertical-align:middle;background-color:#b4b7bb;border-radius:50%;transition:all .1s}.chat__footer-send__message-btn svg{margin-left:4px;margin-top:3px}.chat__footer-send__message-btn.active{background-color:#527ec9}.chat__footer input{width:100%;padding:10px;outline:1px solid #DBDDE1;margin-right:10px;margin-left:8px;border-radius:20px;font-size:16px}.chat__footer input:focus{outline:2px solid #DBDDE1}.chat__footer input::placeholder{font-weight:400;font-size:16px}#login{margin:250px auto;width:390px;padding:20px;background-color:#e1e1e1}.login__title{font-size:20px;margin-bottom:10px}.facebook-before{background:#0064ab;border-radius:3px 0 0 3px;color:#f4f4f4;display:block;float:left;height:50px;line-height:50px;text-align:center;width:50px}.google{background:#be3702;border:none;border-radius:0 3px 3px 0;color:#f4f4f4;cursor:pointer;height:50px;text-transform:uppercase;width:100%;transition:all .1s;transition-duration:.2s}.menu{position:absolute;z-index:50;top:50px;left:35px;transition:all .2s;opacity:0;transform:translateY(0)}.menu.active{position:absolute;z-index:50;top:50px;left:35px;opacity:1;transform:translateY(10px)}.menu__lists-item{width:300px;padding:10px;cursor:default;border-bottom:1px solid #DBDDE1;background-color:#f7f7f7}.menu__lists-item:first-child{border-radius:10px 10px 0 0}.menu__lists-item:last-child{padding:0}.menu__lists-item-profile{display:flex;align-items:center}.chat__header-inner-img-block{content:"";position:relative;z-index:1;width:40px;height:40px;display:inline-block;vertical-align:middle;border-radius:50%;background-color:#88b3eb}.text-avatar{position:relative;top:6px;font-size:22px;color:#000;font-weight:500;margin-left:12px;text-align:center}.menu__lists-item-logout--btn{width:100%;padding:10px;font-size:16px;font-weight:500;color:#fdfdfd;background-color:#d34e1a}.scroll-down{opacity:1;-webkit-transition:all .5s ease-in 3s;transition:all .5s ease-in 3s}.scroll-down{position:absolute;bottom:95px;left:50%;margin-left:-16px;display:block;width:40px;height:40px;background-size:14px auto;border-radius:50%;z-index:2;-webkit-animation:bounce 2s infinite 2s;animation:bounce 2s infinite 2s;-webkit-transition:all .2s ease-in;transition:all .2s ease-in;transform:scale(1);background:#88b3eb}.scroll-down:before{position:absolute;top:calc(50% - 8px);left:calc(50% - 6px);transform:rotate(-45deg);display:block;width:12px;height:12px;content:"";border:2px solid white;border-width:0px 0 2px 2px}.checkbox-wrapper-6{display:flex;justify-content:space-between}.checkbox-wrapper-6 .tgl{display:none}.checkbox-wrapper-6 .tgl,.checkbox-wrapper-6 .tgl:after,.checkbox-wrapper-6 .tgl:before,.checkbox-wrapper-6 .tgl *,.checkbox-wrapper-6 .tgl *:after,.checkbox-wrapper-6 .tgl *:before,.checkbox-wrapper-6 .tgl+.tgl-btn{box-sizing:border-box}.checkbox-wrapper-6 .tgl::-moz-selection,.checkbox-wrapper-6 .tgl:after::-moz-selection,.checkbox-wrapper-6 .tgl:before::-moz-selection,.checkbox-wrapper-6 .tgl *::-moz-selection,.checkbox-wrapper-6 .tgl *:after::-moz-selection,.checkbox-wrapper-6 .tgl *:before::-moz-selection,.checkbox-wrapper-6 .tgl+.tgl-btn::-moz-selection,.checkbox-wrapper-6 .tgl::selection,.checkbox-wrapper-6 .tgl:after::selection,.checkbox-wrapper-6 .tgl:before::selection,.checkbox-wrapper-6 .tgl *::selection,.checkbox-wrapper-6 .tgl *:after::selection,.checkbox-wrapper-6 .tgl *:before::selection,.checkbox-wrapper-6 .tgl+.tgl-btn::selection{background:none}.checkbox-wrapper-6 .tgl+.tgl-btn{outline:0;display:block;width:4em;height:2em;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.checkbox-wrapper-6 .tgl+.tgl-btn:after,.checkbox-wrapper-6 .tgl+.tgl-btn:before{position:relative;display:block;content:"";width:50%;height:100%}.checkbox-wrapper-6 .tgl+.tgl-btn:after{left:0}.checkbox-wrapper-6 .tgl+.tgl-btn:before{display:none}.checkbox-wrapper-6 .tgl:checked+.tgl-btn:after{left:50%}.checkbox-wrapper-6 .tgl-light+.tgl-btn{background:#f0f0f0;border-radius:2em;padding:2px;transition:all .4s ease}.checkbox-wrapper-6 .tgl-light+.tgl-btn:after{border-radius:50%;background:#fff;transition:all .2s ease}.checkbox-wrapper-6 .tgl-light:checked+.tgl-btn{background:#9fd6ae}@keyframes bounce{0%,to,20%,50%,80%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)}60%{-webkit-transform:translateY(-5px);-ms-transform:translateY(-5px);transform:translateY(-5px)}}.loader{width:20px;aspect-ratio:1;border-radius:50%;background:#000;box-shadow:0 0 #0004;animation:l2 1.5s infinite linear;position:relative}.loader:before,.loader:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:0 0 #0004;animation:inherit;animation-delay:-.5s}.loader:after{animation-delay:-1s}@keyframes l2{to{box-shadow:0 0 0 40px #0000}}.loader-header-chat{width:120px;height:20px;background:linear-gradient(90deg,#0001 33%,#0005 50%,#0001 66%) #f2f2f2;background-size:300% 100%;animation:l1 1s infinite linear}@keyframes l1{0%{background-position:right}}.loader-main-chat{position:absolute;top:50%;left:50%;width:20px;aspect-ratio:1;border-radius:50%;background:#000;box-shadow:0 0 #0004;animation:l1 1s infinite}@keyframes l1{to{box-shadow:0 0 0 30px #0000}}.modal-close{display:none}@media (hover: hover){.main__frineds-user--item:hover{opacity:.5}.chat__footer-send__message-btn.active:hover{opacity:.7}.google:hover{background-color:#cfcfcfdb;color:#000}.scroll-down:hover{background-color:#527ec9}}@media (hover: none){.main__frineds-user--item:active{background-color:#dbdde1}.chat__footer-send__message-btn.active:active{transform:scale(.8)}.google:active{transform:scale(.9)}.google:focus{background-color:#cfcfcfdb;color:#000}}@media (max-width: 820px){.friends{position:absolute;z-index:100;height:100vh;max-width:100%;width:100%;display:none}.header__inner-label{max-width:100%}.modal-close{display:block}}*{padding:0;margin:0;border:none}*,*:before,*:after{box-sizing:border-box}a,a:link,a:visited,a:hover{text-decoration:none}aside,nav,footer,header,section,main{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}input,textarea,button,select{font-family:inherit;font-size:inherit;color:inherit;background-color:transparent}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background-color:transparent;background:none;cursor:pointer}input:focus,input:active,button:focus,button:active{outline:none}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}legend{display:block}