@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}:where(ul,ol):where([class]){padding-left:0}body,:where(blockquote,figure):where([class]){margin:0}:where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl):where([class]){margin-block:0}:where(dd[class]){margin-left:0}:where(fieldset[class]){margin-left:0;padding:0;border:none}:where(ul[class]){list-style:none}p{--paragraph-margin-bottom: 24px;margin-block:0}p:where(:not([class]):not(:last-child)){margin-bottom:var(--paragraph-margin-bottom)}img{display:block;max-width:100%}input,textarea,select,button{font:inherit}html{scroll-behavior:smooth;height:100%}body{min-height:100%;line-height:1.5}svg *[fill]{fill:currentcolor}svg *[stroke]{stroke:currentcolor}svg *{transition-property:fill,stroke}body,h1,h2,h3,h4,h5,h6,p,figure,picture{margin:0}h1,h2,h3,h4,h5,h6{font-weight:600;text-transform:uppercase}p{font-weight:400}body{box-sizing:border-box;font-family:Libre Baskerville,serif;font-weight:400;font-style:normal;color:#344055;background:url(../clouds-bg.svg) center center/cover no-repeat}h1{font-size:20px;line-height:130%;letter-spacing:.05em}h2{font-size:18px;text-align:center;letter-spacing:.03em}h3{font-size:14px;text-align:center;letter-spacing:.03em}h4{font-size:17px;text-transform:none;letter-spacing:.03em}p{font-size:16px;line-height:148%;letter-spacing:.05em}.btn{cursor:pointer;padding:5px 16px;border:2px solid #344055;border-radius:8px;color:#344055;background-color:#fff;transition:all .5s ease-in}@media (hover: hover){.btn:hover{color:#030a1a;background-color:#9abed9}}.btn:active{color:#bd1111;background-color:#9abed9}.btn.active{color:#030a1a;background-color:#9abed9}.user{cursor:pointer;display:flex;gap:5px;align-items:center;margin-top:4px;border-radius:4px}@media (hover: hover){.user:hover{background-color:#9abed9}}.user.hide{display:none}.user-indicator{width:8px;height:8px;border:1px solid #344055;border-radius:50%}.user-indicator.online{background-color:#34f51a}.user-indicator.offline{background-color:#ff4646}.user-name{width:100%;color:#344055}.user-messages-info{width:24px;margin-right:5px;color:#71a7f3;text-align:center}.online{color:#34f51a}.offline{color:#ff4646}.user-dialogue-form{display:flex;gap:12px;align-items:center;padding:10px 0 5px}.user-dialogue-form-input{width:100%;padding:4px 8px;border:2px solid #71a7f3;border-radius:8px;font-size:16px;color:#344055}.user-dialogue-form-input:focus{background-color:#9abed9;outline:1px solid #71a7f3}.user-dialogue-form-input[disabled]{cursor:not-allowed;opacity:.5;background-color:#9abed9}.user-dialogue-form-button{width:70px;height:35px;padding:2px;border:2px solid transparent;border-radius:8px;background:url(../send_icon.svg) center center/contain no-repeat}.user-dialogue-form-button:hover{border:2px solid #71a7f3}.user-dialogue-form-button[disabled]{cursor:not-allowed;opacity:.5;background-color:#9abed9}.user-dialogue-form-button[disabled]:hover{border:2px solid transparent}@media (width < 550px){.user-dialogue-form-input{font-size:14px}}.message-container{display:flex;flex-direction:column;gap:5px;width:75%;margin-bottom:8px;padding:4px 8px;border-radius:8px;background-color:#71a7f3}.message-container.your-message{margin-left:auto}.message-container.contact-message{margin-right:auto}.message-header{display:flex;justify-content:space-between;padding:0 10px}.message-header-name,.message-header-time{font-size:12px;text-align:center}.message-header-name{font-weight:700;letter-spacing:.03em}.message-body-text{width:100%;min-height:32px;padding:4px 8px;border-radius:4px;text-align:start;background-color:#fff}.message-footer{display:flex;gap:6px;justify-content:end;padding:0 10px}.message-state{width:20px;height:20px;padding:0;border:none;border-radius:4px}.message-state.sent{background:url(../sended.svg) center center/contain no-repeat}.message-state.delivered{background:url(../delivered.svg) center center/contain no-repeat}.message-state.readed{background:url(../read.svg) center center/contain no-repeat}.message-state.message-btn-edit{background:url(../edit.svg) center center/contain no-repeat}.message-state.message-btn-remove{background:url(../remove.svg) center center/contain no-repeat}.message-state.edited{margin-right:auto;background:url(../edited.svg) center center/contain no-repeat}@media (width < 550px){.message-container{width:90%}.message-header-name,.message-header-time{font-size:11px}.message-body-text{font-size:14px}}.header{width:100%;padding:5px 0;background-color:#71a7f3}.logo-container{display:flex;gap:10px;align-items:center}.logo-container-img{width:45px;height:45px;background:url(../logo.svg) center center/contain no-repeat}.header-btns-container{display:flex;gap:10px}@media (width < 600px){.logo-container{gap:5px}.logo-container-img{width:40px}}@media (width < 550px){.logo-container-text{display:none}}.main{display:flex;align-items:center;width:100%;min-height:calc(100dvh - 110px);padding:15px 0;background-color:#ffffffb3}.wrapper{display:flex;align-items:center;width:100%;max-width:1200px;margin:0 auto;padding:0 15px}.header-wrapper,.footer-wrapper{justify-content:space-between}.main-wrapper{justify-content:center;min-height:calc(100vh - 140px)}.main-page-wrapper{flex-direction:column;justify-content:start}@media (width < 600px){.wrapper{padding:0 7px}}.form{width:100%;max-width:500px;padding:30px 20px 20px;border:3px solid #71a7f3;border-radius:12px;background-color:#fff;box-shadow:0 0 15px 4px #71a7f3}.form-label{display:inline-block;width:100%;margin:10px 0 5px;padding-left:10px;font-size:14px;color:#344055}.form-input{width:100%;padding:6px 20px;border:2px solid #71a7f3;border-radius:8px;font-size:18px;outline:none}.form-input:focus{background-color:#ddebf5}.form-input:valid{background-image:url(../valid_icon.svg);background-repeat:no-repeat;background-position:right 20px center;background-size:25px 25px}.input-invalid:invalid{background-image:url(../invalid-icon.svg);background-repeat:no-repeat;background-position:right 20px center;background-size:25px 25px}.login-span,.password-span{-webkit-user-select:none;user-select:none;display:inline-block;margin-left:10px;font-size:12px;color:transparent}.input-error{color:#ff4646}.form-btn{display:block;width:120px;margin:15px auto 10px}.about-container{width:100%;max-width:700px;padding:25px 10px 25px 15px;border:3px solid #71a7f3;border-radius:12px;background-color:#fff;box-shadow:0 0 15px 4px #71a7f3}.about-container-title-h3{margin:5px 0 15px}.about-container-description{margin-top:5px;text-align:justify}.about-container-btn-return{display:block;margin:10px auto}.footer{display:flex;align-items:center;width:100%;height:55px;padding:5px 0;background-color:#71a7f3}.footer-date{font-size:18px}.footer-link{cursor:pointer;font-size:18px;color:#344055;text-decoration:none;transition:all .5s ease-in}.footer-link:hover{text-shadow:0 2px 2px #fff}.popup{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#50639091}.popup-text-container{width:100%;max-width:500px;padding:30px 20px 20px;border:3px solid #71a7f3;border-radius:12px;background-color:#030a1a;box-shadow:0 0 15px 4px #71a7f3}.popup-text-title,.modal-error-text{color:#fff;text-align:center}.popup-img{width:40px;height:40px;margin:10px auto 0;background:url(../loop.svg) center center/contain no-repeat;animation:3s linear infinite rotate}@keyframes rotate{0%{transform:rotate(360deg)}to{transform:rotate(0)}}body:has(dialog[open]){overflow-y:hidden}.modal-window{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;max-width:500px;margin:0;padding:30px 20px 20px;border:3px solid #71a7f3;border-radius:12px;background-color:#030a1a;box-shadow:0 0 15px 4px #71a7f3}dialog[open]::backdrop{opacity:.8;background:#030a1a}.btn-error{display:block;width:100px;margin:15px auto 10px}.main-page-container{width:100%}.main-page-chat-container{display:flex;gap:10px;width:100%}.chat-container-users-list{width:calc(35% - 5px)}.chat-container-dialogue-container{display:flex;flex-direction:column;width:calc(65% - 5px)}.chat-container-users-list,.chat-container-dialogue-container{height:calc(100dvh - 140px);padding:8px;border:2px solid #71a7f3;border-radius:12px;background-color:#fff;box-shadow:0 0 10px 2px #71a7f3}.users-list-search-input{width:100%;margin-bottom:10px;padding:4px 8px;border:2px solid #71a7f3;border-radius:8px;font-size:16px;color:#344055;outline:none}.users-list-search-input:focus{background-color:#9abed9}.user-list-users-container{scrollbar-color:#9abed9 #fff;scrollbar-width:thin;overflow:hidden auto;max-height:calc(100% - 55px)}.user-dialogue-user-info{display:flex;gap:12px;justify-content:center;padding-bottom:5px;border-bottom:2px solid #71a7f3}.user-dialogue-content-container{scrollbar-color:#9abed9 #fff;scrollbar-width:thin;overflow-y:auto;display:flex;flex-direction:column;width:100%;height:calc(100vh - 85px);padding:8px 0 0;border-bottom:2px solid #71a7f3;text-align:center}.dialogue-filler{flex-grow:1}.dialogue-line-container{display:flex;align-items:center;justify-content:center;width:100%}.dialogue-line-line{flex-grow:1;height:1px;margin:0 10px;background-color:#030a1a}.dialogue-line-text{font-size:12px;color:#030a1a}@media (width < 550px){.users-list-search-input{font-size:14px}.user-name,.user-messages-info{font-size:12px}.user-indicator{width:6px;height:6px}.user-info-user-name{font-size:15px}.user-info-state-connect{font-size:14px}.chat-container-users-list,.chat-container-dialogue-container{padding:8px 2px}}.error-container{width:100%;max-width:700px;padding:25px 10px 25px 15px;border:3px solid #71a7f3;border-radius:12px;background-color:#fff;box-shadow:0 0 15px 4px #71a7f3}.error-container-title-h3{margin:5px 0 15px}.error-container-description{display:block;margin:20px auto;text-align:center}.error-container-btn-return{display:block;margin:10px auto}