.login{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}.login__form-card{width:340px;min-height:450px;padding:50px 30px 30px;border-radius:12px;box-shadow:0 0 6px #00000024;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch}.login__title{margin-bottom:40px}.login__input{margin-bottom:16px}.login__input--error{margin-bottom:10px}.login__button-wrapper{display:flex;flex-direction:column;gap:14px;margin-top:14px}.registration__form-card{min-height:615px}.avatar{width:auto;width:var(--avatar-width, auto);height:auto;height:var(--avatar-height, auto);border-radius:50%;overflow:hidden;background-color:var(--background-fill-color)}.avatar img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.button{padding:12px 20px;border:none;background-color:var(--background-fill-color);color:var(--text-secondary-color);font-weight:500;font-size:13px;line-height:13px;white-space:nowrap;text-align:center;cursor:pointer}.button:hover,.button:focus,.button:focus-visible{opacity:.75}.button--primary{border-radius:8px;background-color:var(--primary-color);color:var(--white-color)}.button--link{background-color:transparent;color:var(--primary-color);padding:0}.button--icon{border-radius:50%;background-color:var(--primary-color);color:var(--white-color);padding:9px}.button--icon span{display:block;line-height:0}.button--icon svg{fill:var(--white-color)}.input-field{position:relative}.input-field input{border:none;width:100%;font-size:13px;line-height:13px;color:var(--text-primary-color)}.input-field__left-icon{position:absolute;display:block;left:10px;top:7px;line-height:0}.input-field__left-icon svg{width:20px;height:20px}.input-field__error-label{color:var(--error-color);font-weight:400;font-size:8px;line-height:8px;margin-top:7px}.input-field--standard input{padding:16px 20px 7px 0;border-bottom:1px solid var(--text-secondary-color);background-color:transparent}.input-field--standard input:focus,.input-field--standard input:focus-visible{border-bottom:1px solid var(--primary-color)}.input-field--standard label{display:block;position:absolute;top:0;left:0;font-size:9px;line-height:9px;color:var(--text-secondary-color)}.input-field--standard input:-moz-placeholder~label{visibility:hidden}.input-field--standard input:placeholder-shown~label{visibility:hidden}.input-field--outlined input{padding:10px 20px;border-radius:30px;background-color:var(--background-fill-color);font-size:12px;line-height:15px;white-space:wrap}.input-field--outlined label{display:none}.input-field--line input{font-size:13px;line-height:13px;padding:0;border:none;text-align:right;color:var(--text-secondary-color)}.input-field--line input:disabled{background-color:transparent}.input-field--error input{border-color:var(--error-color)}.input-field--error label{color:var(--error-color)}.input-field__left-icon+input{padding-left:34px}.chat-item{width:100%;height:72px;padding:12px 10px;border-bottom:1px solid var(--border-color);display:flex;gap:10px;cursor:pointer}.chat-item--selected{background-color:var(--background-message-blue-color)}.chat-item__avatar{flex-shrink:0}.chat-item__info{display:flex;flex-direction:column;gap:4px;flex:1}.chat-item__meta-info{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}.chat-item__badge{min-width:20px;border-radius:50%;background-color:var(--primary-color);padding:4px;font-size:11px;line-height:12px;text-align:center;color:var(--white-color)}.chat-item__badge--empty{display:none}.feed{height:100vh;display:flex;flex-direction:column;padding:10px 20px;font-size:12px;line-height:15px}.feed--empty{justify-content:center;align-items:center}.feed--empty>p{color:var(--text-secondary-color);line-height:12px}.feed__header{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.feed__contact{display:flex;gap:10px;align-items:center}.feed__main{width:100%;flex:1;height:calc(100vh - 108px);overflow-y:auto;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);padding:30px 0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end}.feed__new-message{margin-top:11px;width:100%}.feed__new-message form{display:flex;gap:10px;align-items:center}.feed__input{flex:1}.modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;justify-content:center;align-items:center;z-index:1000}.modal--active{display:flex}.modal__overlay{position:absolute;top:0;right:0;bottom:0;left:0}.modal__content{background:var(--white-color);padding:40px 30px;border-radius:12px;position:relative;max-width:90%;box-shadow:0 4px 16px #0003}.modal__title{font-size:15px;line-height:20px;font-weight:500;text-align:center}.menu-button{width:25px;height:25px;border-radius:50%;padding:5px 11px;background-color:transparent}.menu-button .point:nth-last-child{margin-bottom:0}.menu-button .point{width:3px;height:3px;background-color:var(--text-primary-color);margin-bottom:3px}.menu-button:hover,.menu-button--active{background-color:var(--hover-grey-color)}.menu-button:hover .point,.menu-button--active .point{background-color:var(--primary-color)}.message{position:relative;max-width:500px;width:auto;padding:11px;margin-bottom:10px;background-color:var(--background-message-grey-color);border-radius:12px}.message p{white-space:pre-wrap}.message--own{background-color:var(--background-message-blue-color)}.message--p0{padding:0;background-color:transparent}.message__image{max-width:100%;max-height:500px;border-radius:12px;border:1px solid var(--border-color)}.message__time{float:right;font-size:9px;line-height:9px;color:var(--text-secondary-color);background-color:transparent}.message__time--darkened{position:absolute;right:11px;bottom:11px;border-radius:30px;padding:2px 7px;color:var(--white-color);background-color:#52525280}.chats{width:100vw;display:flex}.chats__sidebar{width:25%;min-width:310px;height:100vh;background-color:var(--background-list-color);display:flex;flex-direction:column}.chats__header{padding:21px 10px 14px;display:flex;flex-direction:column}.chats__button-link{color:var(--text-secondary-color);font-size:12px;line-height:12px;margin-bottom:23px;align-self:flex-end}.chats__button-link:hover{color:var(--primary-color)}.chats__list{border-top:1px solid var(--border-color);overflow-y:auto;flex:1}.chats__main{flex:1;height:100vh;min-width:320px;border-left:1px solid var(--border-color)}.user-profile{width:100vw;height:100vh;display:flex}.user-profile__back-button{width:64px;display:flex;justify-content:center;align-items:center;background-color:var(--background-list-color)}.user-profile__back-button svg{transform:rotate(180deg)}.user-profile__main{flex:1;display:flex;justify-content:center;align-items:center}.user-profile__main>form{width:510px;display:flex;flex-direction:column;gap:60px}.user-profile__short-info{display:flex;flex-direction:column;align-items:center}.user-profile__short-info>p{margin-top:21px;font-size:16px;font-weight:600}.user-profile__avatar-button{position:relative;background-color:transparent;border:none;border-radius:50%;overflow:hidden}.user-profile__avatar-button>.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:none;justify-content:center;align-items:center;padding:20%;background-color:#00000080}.user-profile__avatar-button>.overlay>span{font-size:13px;line-height:14px;white-space:wrap;color:var(--white-color)}.user-profile__avatar-button:hover>.overlay{display:flex}.user-profile__line{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border-color);font-size:13px;line-height:13px}.user-profile__line:last-child{border-bottom:none}.user-profile__controls--edit{display:flex;justify-content:center}.user-profile__controls--edit>button{width:280px}.button--exit button{color:var(--error-color)}*{margin:0;padding:0;box-sizing:border-box;outline:none}:root{--primary-color: #3369F3;--error-color: #FF2F2F;--white-color: #FFF;--background-fill-color: #EFEFEF;--background-list-color: #FBFBFB;--background-message-grey-color: #F8F8F8;--background-message-blue-color: #E4EDFD;--border-color: #EAEAEA;--text-primary-color: #1E1E1E;--text-secondary-color: #999;--hover-grey-color: #F5F5F5}body{font-family:Inter,sans-serif;font-optical-sizing:auto;font-weight:500;font-size:12px;font-style:normal;color:#1e1e1e;color:var(--text-primary-color)}h1,h2,h3,h4,h5{font-weight:500;font-size:20px;text-align:center}