html{height:100%;margin:0;padding:0}body{height:100%;margin:0;padding:0;color:#1e1e1e;text-align:center;font-family:Inter,sans-serif;font-size:12px;font-style:normal;font-weight:500}#app{position:relative;display:flex;justify-content:center;height:100%}button{background:transparent;border:none}.wrapper{width:100%;display:flex;justify-content:center}.invalid{border-color:red}.error-message{color:red;font-size:12px;margin-top:5px}.button{width:280px;height:37px;border-radius:8px;border:none}.button-confirm{background-color:#3369f3;color:#fff}.button-cancel{background-color:transparent;color:#3369f3}.button-line{border-radius:0;border-bottom:1px solid #EAEAEA;text-align:left;width:510px;background:transparent}.button--red{color:red}.button--blue{color:#3369f3}.input-container{position:relative;width:100%;max-width:300px}.input-container .input-field{width:100%;padding:10px 0;border:none;border-bottom:2px solid #3369F3;background:transparent;font-size:16px;outline:none;transition:all .3s ease}.input-container .input-field::placeholder{opacity:0}.input-container .input-label{position:absolute;left:0;top:10px;color:#999;pointer-events:none;transition:all .3s ease;transform-origin:left center}.input-container .input-field:focus+.input-label,.input-container .input-field:not(:placeholder-shown)+.input-label{top:-15px;font-size:12px;color:#3369f3;transform:scale(.85)}.login{position:absolute;top:0;bottom:0;margin:auto 0;padding:50px 30px 20px;height:460px;width:340px;border:none;border-radius:12px;background:#fff;box-shadow:0 0 6px #00000024}.login__header{font-size:20px;margin-bottom:40px}.login__fields{display:flex;flex-direction:column;gap:16px;margin-bottom:160px}.signin{position:absolute;top:0;bottom:0;margin:auto 0;padding:50px 30px 20px;height:615px;width:340px;border:none;border-radius:12px;background:#fff;box-shadow:0 0 6px #00000024;display:flex;flex-direction:column;justify-content:space-between;overflow:auto}.signin__header{font-size:20px;margin-bottom:40px}.signin__fields{display:flex;flex-direction:column;gap:16px}.error{height:160px;position:absolute;top:0;bottom:0;margin:auto 0}.error__number{color:#1e1e1e;font-size:40px;margin-bottom:20px}.error__message{color:#1e1e1e;font-size:20px;margin-bottom:70px}.error__button{color:#3369f3;font-size:11px;cursor:pointer}.chat{width:100%;height:100%;display:flex}.chat__managing-area{border-right:#EAEAEA 1px solid;color:#999;font-size:12px;width:30%;overflow:auto;text-align:start}.managing-area__menu{position:sticky;top:0;background-color:#fff;border-bottom:#EAEAEA 1px solid;height:100px;display:flex;flex-direction:column;justify-content:space-between}.menu__buttons{display:flex;justify-content:space-between;align-items:center}.menu__profile{margin-top:20px;margin-right:10px;display:flex;justify-content:end;align-items:center}.menu__profile>img{margin-left:8px;width:8px;height:8px}.menu__plus{margin-top:20px;margin-left:15px}.menu_search{height:32px;margin:auto 10px 14px;border-radius:5px;background:#efefef;display:flex;justify-content:center;align-items:center}.menu_search>img{width:20px;height:20px;margin-right:4px}.dialogues__dialogue{width:100%;padding:12px 10px;display:flex;border-bottom:#EAEAEA 1px solid;background-color:#fff;cursor:pointer}.dialogues__dialogue--isCurrent,.dialogues__dialogue:hover{background-color:#e4edfd}.dialogue__picture{width:48px;height:48px;border-radius:50%;background-color:#efefef;margin-right:12px}.dialogue__info{flex:1}.info__name-and-time{width:auto;height:15px;margin-bottom:4px;display:flex;justify-content:space-between}.name-and-time__name{color:#1e1e1e;font-weight:600;width:140px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.name-and-time__time{color:#999;font-size:9px}.info__message-info{display:flex;justify-content:space-between;height:30px}.message-info__message{line-height:15px;display:-webkit-box;display:-moz-box;-webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-line-clamp:2;-moz-line-clamp:2;line-clamp:2;overflow:hidden;text-overflow:ellipsis}.message-info__message span{color:#1e1e1e}.message-info__quantity{color:#fff;font-size:11px;min-width:20px;height:20px;border-radius:100px;background-color:#3369f3;display:flex;justify-content:center;align-items:center;align-self:end;padding:0 7px;box-sizing:border-box}.chat__talking-area{width:70%;display:flex}.talking-area__mock{flex:1;color:#999;display:flex;justify-content:center;align-items:center}.talking-area__talk{width:100%;height:100%;color:#1e1e1e;overflow:auto}.talk__profile{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:#EAEAEA 1px solid;position:sticky;top:0;background:#fff}.talk__profile__info{display:flex;align-items:center;gap:10px}.talk__profile__info__picture{min-width:34px;height:34px;background-color:#efefef;border-radius:100px;overflow:hidden}.talk__profile__info__name{font-weight:600}.talk__profile__menu{min-width:20px;height:20px}.talk__messages{display:flex;flex-direction:column;gap:10px;margin:30px 20px}.messages__message{max-width:40%;padding:10px;flex-wrap:wrap;background-color:#f8f8f8;border-radius:0% 12px 12px;line-height:125%;align-self:self-start;text-align:left}.messages__message--isMine{background-color:#e4edfd;border-top-left-radius:12px;border-bottom-right-radius:0%;align-self:self-end}.info__time{font-weight:500;font-size:9px;text-align:right;color:#999}.info__time--isMine{font-size:9px;text-align:right;color:#3369f3}.talk__send-interface{position:sticky;bottom:0;background:#fff;display:flex;gap:10px;padding:10px}.send-interface__field{color:#999;background:#efefef;flex:1;text-align:left;padding:10px;border:none;border-radius:50px}.send-interface__field:focus{outline:none}.profile__info{display:flex;flex-direction:column;gap:60px;flex:1}.description__line{width:510px;height:33px;border-bottom:#999 1px solid;display:flex;justify-content:space-between}.description__line__value{color:#999}.info__manage-buttons{display:flex;flex-direction:column;justify-content:center;align-items:center}.info__manage-buttons .button{width:510px}.profile__info{position:relative;display:flex;flex-direction:column;gap:60px;flex:1}.info__main{display:flex;flex-direction:column;align-items:center;margin-top:20px;gap:20px}.info__main__image img{width:130px;height:130px;border:100px;overflow:hidden}.info__main__image--change-image{display:none;width:130px;height:130px;border:100px;overflow:hidden;background-color:#000;opacity:.5;text-align:center;color:#fff}.info__main__image--change-image:hover{display:inline}.info__main__image__modal{position:absolute;z-index:10;left:calc(50% - 200px);margin:auto 0;padding:20px;height:200px;width:400px;border:none;border-radius:12px;background:#fff;box-shadow:0 0 6px #00000024;display:flex;flex-direction:column;justify-content:space-between}.info__main__name{font-weight:600;font-size:16px;text-align:center}.image__modal__header{font-size:20px}.info__description__container{width:510px;height:33px;margin-bottom:10px;position:relative}.description__container__value{width:510px;position:absolute;top:0;z-index:-1;color:#999;text-align:right}.profile{display:flex;width:100%;height:100%;color:#1e1e1e}.profile__back{width:64px;height:100%;background-color:#fbfbfb;display:flex;align-items:center;justify-content:center}.profile__back img{transform:rotate(.5turn)}.profile__info{display:flex;flex-direction:column;gap:60px;flex:1;margin:auto}.profile__info button{align-self:center}.info__description{display:flex;flex-direction:column;justify-content:center;align-items:center}.info__description>div{width:510px}ul{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}