@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap);
*{box-sizing:border-box}body{background-color:#f8f9fd;font-family:"Roboto",sans-serif;display:flex;align-items:center;justify-content:center;height:100vh;overflow:hidden;margin:0}.container{border-radius:5px;box-shadow:3px 3px 10px rgba(0,0,0,.2);overflow:hidden;width:300px}.title{margin:0}.subtitle{display:inline-block;margin:5px 0 20px;opacity:.8}.header{background-color:#3e57db;color:#fff;padding:30px 20px}.header input{background-color:rgba(0,0,0,.3);border:0;border-radius:50px;color:#fff;font-size:14px;padding:10px 15px;width:100%}.header input:focus{outline:none}.user-list{background-color:#fff;list-style-type:none;margin:0;padding:0;max-height:400px;overflow-y:auto}.user-list li{display:flex;padding:20px}.user-list img{border-radius:50%;object-fit:cover;height:50px;width:50px}.user-list .user-info{margin-left:10px}.user-list .user-info h4{margin:0 0 10px}.user-list .user-info p{font-size:12px}.user-list li:not(:last-of-type){border-bottom:1px solid #eee}.user-list li.hide{display:none}