body{background-color:pink;position:relative}body .chat .chat-content{position:absolute;left:50%;transform:translateX(-50%);margin:1rem 0;border-radius:1rem;background-color:purple}body .chat .chat-content .login{background-color:#ccc;text-align:center;margin:10rem 1rem;padding:2rem 1rem;border-radius:1rem}body .chat .chat-content .login input{width:100%;border-radius:2rem;margin:1rem 0;border:none}body .chat .chat-content .login input:focus{box-shadow:none}body .chat .chat-content .login input::-moz-placeholder{font-size:.9rem}body .chat .chat-content .login input:-ms-input-placeholder{font-size:.9rem}body .chat .chat-content .login input::placeholder{font-size:.9rem}body .chat .chat-content .login .log-bt{width:100 body .chat .chat-content .login .log-bt;width:100%;border-radius:2rem;border:none;color:#fff;background-color:plum;font-weight:700;margin-bottom:1rem}body .chat .chat-content .login .log-bt:focus{outline:none}@media (max-width:567px){body .chat .chat-content{width:70%}}body .chat .chat-area header{padding:1rem}body .chat .chat-area header,body .chat .chat-area header .header-user{display:flex;align-items:center}body .chat .chat-area header .header-user .user-icon{width:2rem;height:2rem;border-radius:50%;background-color:#eee;text-align:center;color:#757575;font-weight:700;margin-right:.6rem}@media (max-width:567px){body .chat .chat-area header .header-user .user-icon{margin-right:.3rem}}body .chat .chat-area header .header-user .user-name{color:#fff;font-size:1rem}body .chat .chat-area header .header-logout{margin-left:auto;color:#fff;cursor:pointer}body .chat .chat-area main{background-color:#fff;border-radius:1rem;padding:1rem 1rem;height:26rem;overflow-y:scroll}body .chat .chat-area main .message-box{display:flex;margin-top:1rem;max-width:20rem}body .chat .chat-area main .message-box .user-icon{width:2rem;height:2rem;border-radius:50%;background-color:#ccc;margin-right:1rem;text-align:center;font-weight:700;color:#757575;font-size:.9rem}@media (max-width:567px){body .chat .chat-area main .message-box .user-icon{margin-right:.5rem}}body .chat .chat-area main .message-box .message{background-color:#faebd7;padding:.5rem;border-radius:1rem}body .chat .chat-area main .current-user{justify-content:flex-end}body .chat .chat-area main .current-user .message{background-color:#000!important;color:#fff}body .chat .chat-area main .current-user .user-icon{order:1;margin-left:1rem;margin-right:0!important;width:2rem;height:2rem;color:#757575;font-size:.9rem;text-align:center}@media (max-width:567px){body .chat .chat-area main .current-user .user-icon{margin-left:.5rem}}body .chat .chat-area footer{padding:1rem}body .chat .chat-area footer form{display:flex;align-items:center;flex-direction:row;border-radius:1rem}body .chat .chat-area footer form input{border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:1rem;border-bottom-left-radius:1rem}body .chat .chat-area footer form input:focus{box-shadow:none;border:none}body .chat .chat-area footer form .send-bt{border:none;background-color:#f0f;height:calc(1.5em + .75rem + 2px);border-top-right-radius:1rem;border-bottom-right-radius:1rem}body .chat .chat-area footer form .send-bt:focus{outline:none}h3[data-v-64c5a022]{margin:40px 0 0}ul[data-v-64c5a022]{list-style-type:none;padding:0}li[data-v-64c5a022]{display:inline-block;margin:0 10px}a[data-v-64c5a022]{color:#42b983}