:root[data-theme=dark] .welcome_page{background-color:#080025;color:#fff}:root[data-theme=dark] .welcome_page .welcome_page_container,:root[data-theme=dark] .welcome_page .nav_line{background-color:#0f0533;box-shadow:0 2px 8px #0000001a}:root[data-theme=dark] .welcome_page .btn{background-color:#c523ca66;color:#fff;transition:all .3s ease}:root[data-theme=dark] .welcome_page .btn:hover{background-color:#da42de66;cursor:pointer}.welcome_page{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px;height:100vh;background-color:#cee2ff;color:#000}.welcome_page .nav_line{position:fixed;top:0;width:96%;margin-top:1%;display:flex;gap:20px;background-color:#d6e4fa;padding:10px 15px;box-shadow:0 2px 8px #0000001a;border-radius:30px}.welcome_page .nav_line .change_theme_btn{display:flex;align-items:center;justify-content:center;width:clamp(36px,6vw,56px);height:clamp(36px,6vw,56px);border-radius:50%;box-sizing:border-box;padding:6px;border:none;-moz-appearance:none;appearance:none;-webkit-appearance:none}.welcome_page .nav_line .change_theme_btn .theme_ico,.welcome_page .nav_line .change_theme_btn span{display:flex;align-items:center;justify-content:center;width:60%;height:60%}.welcome_page .welcome_page_container{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px;width:50%;background-color:#d6e4fa;padding:20px 15px;box-shadow:0 2px 8px #0000001a;border-radius:30px}.welcome_page .welcome_page_container .welcome_page_title{font-size:32px;width:50%;text-align:center}.welcome_page .btn{background-color:#1976d2;color:#fff;font-size:18px;width:50%;padding:10px 15px;border-radius:10px;transition:all .3s ease}.welcome_page .btn:hover{background-color:#145ca4;cursor:pointer}:root[data-theme=dark] .login_page{background-color:#080025;color:#fff}:root[data-theme=dark] .login_page form,:root[data-theme=dark] .login_page .nav_line{background-color:#0f0533;box-shadow:0 2px 8px #0000001a}:root[data-theme=dark] .login_page form .login_label,:root[data-theme=dark] .login_page form .password_label,:root[data-theme=dark] .login_page .nav_line .login_label,:root[data-theme=dark] .login_page .nav_line .password_label{border:2px solid #414141}:root[data-theme=dark] .login_page form .login_label input,:root[data-theme=dark] .login_page form .password_label input,:root[data-theme=dark] .login_page .nav_line .login_label input,:root[data-theme=dark] .login_page .nav_line .password_label input{color:#fff}:root[data-theme=dark] .login_page form .login_label,:root[data-theme=dark] .login_page form .password_label,:root[data-theme=dark] .login_page .nav_line .login_label,:root[data-theme=dark] .login_page .nav_line .password_label{transition:all .3s ease}:root[data-theme=dark] .login_page form .login_label:hover,:root[data-theme=dark] .login_page form .password_label:hover,:root[data-theme=dark] .login_page .nav_line .login_label:hover,:root[data-theme=dark] .login_page .nav_line .password_label:hover{border:2px solid rgba(197,35,202,.4)}:root[data-theme=dark] .login_page .btn{background-color:#c523ca66;color:#fff;transition:all .3s ease}:root[data-theme=dark] .login_page .btn:hover{background-color:#da42de66;cursor:pointer}.login_page{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px;height:100vh;background-color:#cee2ff;color:#000}.login_page .nav_line{position:fixed;top:0;width:96%;margin-top:1%;display:flex;gap:20px;background-color:#d6e4fa;padding:10px 15px;box-shadow:0 2px 8px #0000001a;border-radius:30px}.login_page .nav_line .change_theme_btn{display:flex;align-items:center;justify-content:center;width:clamp(36px,6vw,56px);height:clamp(36px,6vw,56px);border-radius:50%;box-sizing:border-box;padding:6px;border:none;-moz-appearance:none;appearance:none;-webkit-appearance:none}.login_page .nav_line .change_theme_btn .theme_ico,.login_page .nav_line .change_theme_btn span{display:flex;align-items:center;justify-content:center;width:60%;height:60%}.login_page form{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px;width:50%;background-color:#d6e4fa;padding:20px 15px;box-shadow:0 2px 8px #0000001a;border-radius:30px}.login_page .form_title{font-size:32px}.login_page .login_label,.login_page .password_label{width:50%;overflow:hidden;border:2px solid #000000;border-radius:15px;display:flex;flex-direction:row;align-self:center;gap:10px;padding:10px;transition:all .3s ease}.login_page .login_label:hover,.login_page .password_label:hover{border:2px solid #1976d2}.login_page .login_label input,.login_page .password_label input{border:none;outline:none;background-color:transparent;color:#000;font-size:18px;width:100%}.login_page .btn{background-color:#1976d2;color:#fff;font-size:18px;width:50%;padding:10px 15px;border-radius:10px;transition:all .3s ease}.login_page .btn:hover{background-color:#145ca4;cursor:pointer}.login_page .change_theme_btn{display:flex;align-items:center;justify-content:center;width:clamp(36px,6vw,56px);height:clamp(36px,6vw,56px);border-radius:50%;box-sizing:border-box;padding:6px;border:none;-moz-appearance:none;appearance:none;-webkit-appearance:none}.login_page .change_theme_btn .theme_ico,.login_page .change_theme_btn span{display:flex;align-items:center;justify-content:center;width:60%;height:60%}.login_page .back_btn{width:auto;border-radius:50%;aspect-ratio:1/1;padding:10px;display:flex;justify-content:center;align-items:center}:root[data-theme=dark] .signup_page{background-color:#080025;color:#fff}:root[data-theme=dark] .signup_page form,:root[data-theme=dark] .signup_page .nav_line{background-color:#0f0533;box-shadow:0 2px 8px #0000001a}:root[data-theme=dark] .signup_page form .login_label,:root[data-theme=dark] .signup_page form .password_label,:root[data-theme=dark] .signup_page .nav_line .login_label,:root[data-theme=dark] .signup_page .nav_line .password_label{border:2px solid #414141}:root[data-theme=dark] .signup_page form .login_label input,:root[data-theme=dark] .signup_page form .password_label input,:root[data-theme=dark] .signup_page .nav_line .login_label input,:root[data-theme=dark] .signup_page .nav_line .password_label input{color:#fff}:root[data-theme=dark] .signup_page form .login_label,:root[data-theme=dark] .signup_page form .password_label,:root[data-theme=dark] .signup_page .nav_line .login_label,:root[data-theme=dark] .signup_page .nav_line .password_label{transition:all .3s ease}:root[data-theme=dark] .signup_page form .login_label:hover,:root[data-theme=dark] .signup_page form .password_label:hover,:root[data-theme=dark] .signup_page .nav_line .login_label:hover,:root[data-theme=dark] .signup_page .nav_line .password_label:hover{border:2px solid rgba(197,35,202,.4)}:root[data-theme=dark] .signup_page .btn{background-color:#c523ca66;color:#fff;transition:all .3s ease}:root[data-theme=dark] .signup_page .btn:hover{background-color:#da42de66;cursor:pointer}.signup_page{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px;height:100vh;background-color:#cee2ff;color:#000}.signup_page .nav_line{position:fixed;top:0;width:96%;margin-top:1%;display:flex;gap:20px;background-color:#d6e4fa;padding:10px 15px;box-shadow:0 2px 8px #0000001a;border-radius:30px}.signup_page .nav_line .change_theme_btn{display:flex;align-items:center;justify-content:center;width:clamp(36px,6vw,56px);height:clamp(36px,6vw,56px);border-radius:50%;box-sizing:border-box;padding:6px;border:none;-moz-appearance:none;appearance:none;-webkit-appearance:none}.signup_page .nav_line .change_theme_btn .theme_ico,.signup_page .nav_line .change_theme_btn span{display:flex;align-items:center;justify-content:center;width:60%;height:60%}.signup_page form{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px;width:50%;background-color:#d6e4fa;padding:20px 15px;box-shadow:0 2px 8px #0000001a;border-radius:30px}.signup_page .form_title{font-size:32px}.signup_page .login_label,.signup_page .password_label{width:50%;overflow:hidden;border:2px solid #000000;border-radius:15px;display:flex;flex-direction:column;align-self:center;gap:10px;padding:10px;transition:all .3s ease}.signup_page .login_label:hover,.signup_page .password_label:hover{border:2px solid #1976d2}.signup_page .login_label input,.signup_page .password_label input{border:none;outline:none;background-color:transparent;color:#000;font-size:18px;width:100%}.signup_page .btn{background-color:#1976d2;color:#fff;font-size:18px;width:50%;padding:10px 15px;border-radius:10px;transition:all .3s ease}.signup_page .btn:hover{background-color:#145ca4;cursor:pointer}.signup_page .change_theme_btn{display:flex;align-items:center;justify-content:center;width:clamp(36px,6vw,56px);height:clamp(36px,6vw,56px);border-radius:50%;box-sizing:border-box;padding:6px;border:none;-moz-appearance:none;appearance:none;-webkit-appearance:none}.signup_page .change_theme_btn .theme_ico,.signup_page .change_theme_btn span{display:flex;align-items:center;justify-content:center;width:60%;height:60%}.signup_page .back_btn{width:auto;border-radius:50%;aspect-ratio:1/1;padding:10px;display:flex;justify-content:center;align-items:center}.error_message{color:#f44;font-size:.8rem}.submit_error{text-align:center;padding:.5rem;background:#ffe6e6;border-radius:.25rem}.login_label.input-error input::-moz-placeholder,.password_label.input-error input::-moz-placeholder{color:#f44;opacity:.8}.login_label.input-error input::placeholder,.password_label.input-error input::placeholder{color:#f44;opacity:.8}.messenger_page{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px;height:100vh;padding:1% 2%;background-color:var(--page-bg);color:var(--text-color)}.messenger_page .nav_line{position:static;flex-shrink:0;width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;background-color:var(--surface-bg);padding:10px 15px;box-shadow:0 2px 8px #0000001a;border-radius:30px}.messenger_page .nav_line .auth_user_div,.messenger_page .nav_line .online_status_div{font-size:24px;padding:10px 15px;border-radius:10px;background:var(--btn-bg);color:#fff}.messenger_page .nav_line .change_theme_btn{display:flex;align-items:center;justify-content:center;width:clamp(36px,6vw,56px);height:clamp(36px,6vw,56px);border-radius:50%;box-sizing:border-box;padding:6px;border:none;-moz-appearance:none;appearance:none;-webkit-appearance:none}.messenger_page .nav_line .change_theme_btn .theme_ico,.messenger_page .nav_line .change_theme_btn span{display:flex;align-items:center;justify-content:center;width:60%;height:60%}.messenger_page .nav_line .btn_log_out{width:auto}.messenger_page .messenger_container{flex:1;width:100%;gap:20px;display:flex;background-color:var(--surface-bg);padding:10px 15px;box-shadow:0 2px 8px #0000001a;border-radius:30px}.messenger_page .messenger_container .contacts_panel{display:flex;flex-direction:column;gap:10px;width:30%}.messenger_page .messenger_container .contacts_panel .contact_card_container{font-size:24px;display:flex;flex-direction:row;gap:20px;border-radius:15px;box-shadow:var(--box-shadow);padding:10px;transition:all .2s ease-in}.messenger_page .messenger_container .contacts_panel .contact_card_container:hover{background-color:var(--btn-bg);transform:scale(1.02);cursor:pointer}.messenger_page .messenger_container .contacts_panel .contact_card_container .contact_card_container_ico{display:flex;align-items:center;flex-shrink:0;background:var(--btn-bg);color:#fff;border-radius:50%;padding:10px}.messenger_page .messenger_container .contacts_panel .contact_card_container .contact_card_container_name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;align-self:center}.messenger_page .messenger_container .dialog_panel{display:flex;width:70%}.messenger_page .btn{background-color:var(--btn-bg);color:var(--btn-fg);font-size:18px;width:50%;padding:10px 15px;border-radius:10px;transition:all .3s ease}.messenger_page .btn:hover{background-color:var(--btn-bg-hover);cursor:pointer}.messenger_page .back_btn{width:auto;border-radius:50%;aspect-ratio:1/1;padding:10px;display:flex;justify-content:center;align-items:center}.loading_page{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px;height:100vh;padding:1% 2%;background-color:var(--page-bg);color:var(--text-color)}.loading_page .loading_circle{display:flex;justify-content:center;align-items:center;width:5rem;aspect-ratio:1/1;border-radius:50%;padding:20px;background-color:#aaa}.loading_page .btn{background-color:#1976d2;color:#fff;font-size:18px;width:50%;padding:10px 15px;border-radius:10px;transition:all .3s ease}.loading_page .btn:hover{background-color:#145ca4;cursor:pointer}:root[data-theme=light] .messenger_page{--page-bg: #cee2ff;--surface-bg: #d6e4fa;--text-color: #000000;--btn-bg: #1976d2;--btn-fg: #ffffff;--btn-bg-hover: rgb(19.5744680851, 92.3914893617, 164.4255319149);--box-shadow: 0px 2px 8px rgba(0, 0, 0, .1)}:root[data-theme=dark] .messenger_page{--page-bg: #080025;--surface-bg: #0f0533;--text-color: #ffffff;--btn-bg: rgba(197, 35, 202, .4);--btn-fg: #ffffff;--btn-bg-hover: rgba(217.5316455696, 65.7848101266, 222.2151898734, .4);--box-shadow: 0px 0px 8px rgba(197, 35, 202, .4)}*{margin:0;padding:0;box-sizing:border-box}body,html{width:100%;height:100%;font-family:Roboto,sans-serif}a{text-decoration:none;color:inherit}button{cursor:pointer;border:none;outline:none;background:none;font-family:inherit;font-size:inherit}input{border:none;outline:none;font-family:inherit}ul,li{list-style:none}