@import"https://fonts.googleapis.com/css2?family=Handjet:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";:root{--primary-color: #212D3F;--contrast-color: white;--secondary-color: #7AA6E9;--not-important-color: #555;--error-color: #D31023;--selection-color: #CADBF6;--basic-color: #e0dddd}*{box-sizing:border-box}body{background-color:var(--primary-color);font-size:16px;font-family:Roboto,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;margin:0}h1{font-family:Handjet,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}ul{list-style-type:none;padding:0}button{font-family:inherit;cursor:pointer}main{height:100vh}form{display:flex;flex-direction:column;align-items:center;gap:10px}.centering{display:flex;align-items:center;justify-content:center}.contrast-text{color:var(--contrast-color)}.centering-wrapper{display:flex;align-items:center;justify-content:center;height:100%}.centering-wrapper .block{background-color:var(--contrast-color);border-radius:36px;padding:20px;display:flex;flex-direction:column;align-items:center}img{width:100%;height:100%;max-width:100%;max-height:100%}button{font-size:1rem}.btn-standard{border-radius:10px;background-color:var(--primary-color);padding:5px 20px;color:var(--contrast-color);font-weight:700}.btn-link{border:none;color:var(--primary-color);background:none}.btn-standard-img{background:none;border:none}.input-wrapper{margin:10px 0}.input-error{color:var(--error-color);font-size:.8rem;max-width:250px}.input-error:before{content:"*"}.form-error{color:var(--error-color)}.chat-wrapper{display:flex}.sidebar-chat{background-color:var(--contrast-color);border-right:1px solid var(--primary-color);width:360px;flex-shrink:0;height:100%;position:relative}.sidebar-chat .sidebar-header{display:flex;padding:6px 15px;gap:15px}.sidebar-chat .sidebar-header .link-to-profile{display:inline-block;width:40px;height:40px;background-color:var(--primary-color);border:none;border-radius:50%;font-family:Handjet,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color:var(--contrast-color);text-decoration:none;font-size:24px;text-align:center;align-content:center;overflow:hidden}.sidebar-chat .sidebar-header .link-to-profile img{object-fit:cover}.btn-create-chat{border:none;background-color:var(--primary-color);width:40px;height:40px;border-radius:50%;position:absolute;right:10px;bottom:10px}.chat-window-wrapper{display:flex;align-items:center;justify-content:center;flex-grow:1}.pop-up-back{position:absolute;top:0;bottom:0;left:0;right:0;background-color:#0006}.btns-wrapper-horizontal{display:flex;width:100%;justify-content:space-between}.search-wrapper{display:flex;flex-direction:row;gap:5px;padding:0 5px;color:var(--not-important-color);background-color:var(--basic-color);flex:1;border-radius:40px}.search-wrapper button{background-color:transparent;border:none}.search-wrapper input{flex:1;font-family:inherit;background-color:transparent;border:none}.search-wrapper input:focus{outline:none}.chat-item-wrapper{height:74px;display:flex;flex-direction:row;align-items:center;gap:5px;padding:0 9px;border-bottom:1px solid var(--primary-color)}.chat-item-wrapper:hover{cursor:pointer}.chat-item-wrapper .avatar{width:62px;height:62px;background-color:var(--basic-color);border-radius:50%}.chosen{background-color:var(--selection-color)}.chat-info{flex:1}.chat-info .chat-info-header{display:flex}.chat-info .chat-info-header .chat-name{font-weight:700}.chat-info .chat-info-header .chat-time{margin-left:auto;color:var(--not-important-color)}.chat-window{height:100%;position:relative;display:flex;flex-direction:column;flex-grow:1;padding-bottom:10px}.chat-window-header{background-color:#fff;height:40px;position:relative;padding:10px;display:flex;justify-content:space-between;align-items:center}.chat-window-header span{font-weight:700}.messages-wrapper{display:flex;flex-direction:column;gap:14px;flex-grow:1;overflow-y:auto;padding:10px max(5vw,40px);padding-top:200px}.messages-wrapper .msg{max-width:400px;padding:5px}.messages-wrapper .user-msg{background-color:var(--selection-color);border-radius:10px 10px 0;align-self:flex-end}.messages-wrapper .other-user-msg{background-color:#fff;align-self:flex-start;border-radius:10px 10px 10px 0}.msg-time{font-size:.7rem;text-align:right;color:var(--not-important-color)}.form-message{display:flex;flex-direction:row;padding:0 max(5vw,40px)}.input-message{flex-grow:1}.btn-send-msg{background-color:transparent;border:none}#chat-menu{position:absolute;right:0;top:40px;margin:10px;background-color:var(--basic-color);box-shadow:0 0 10px var(--primary-color);border-radius:20px;overflow:hidden}#chat-menu ul{margin:0}#chat-menu li:last-child button{color:var(--error-color)}.btn-in-menu{display:flex;width:100%;align-items:center;margin:0;gap:10px;padding:10px;border:none;background:none}.btn-in-menu img{width:20px}.btn-in-menu span{font-weight:400;font-size:.9rem}.btn-in-menu:hover{background-color:hsl(from var(--basic-color) h s calc(l - 5))}.btn-link-in-profile{background:none;border:none;position:absolute;top:50vh;transform:translateY(-50%)}#avatar-input-wrapper{width:100px;height:100px;position:relative}#avatar-preview-wrapper{width:100%;height:100%;border-radius:50%;background-color:var(--basic-color);overflow:hidden}#avatar-preview-wrapper img{object-fit:cover}label#change-avatar-icon{position:absolute;right:5%;bottom:5%;cursor:pointer}label#change-avatar-icon img{width:30px;height:30px}input#avatar{display:none}
