@import"https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{display:flex;flex-direction:column;align-items:center;justify-content:center}.comments{width:50%;margin:0 auto;padding:10px}@media (max-width: 800px){.comments{width:70%}}@media (max-width: 600px){.comments{width:90%}}@media (max-width: 500px){.comments{margin:0 auto 40px}}.comments__heading{font-family:Poppins,sans-serif;color:#000;font-weight:700;font-size:18px;margin-bottom:20px}.comments__filters{margin-bottom:20px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}@media (max-width: 500px){.comments__filters{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}}.comments__filters .button{margin:5px 10px;font-size:12px;font-weight:500;font-family:Poppins,sans-serif;border-radius:30px;padding:5px 20px;text-transform:capitalize;background-color:#e8e9f3;color:#505050;border:1px solid #e8e9f3;box-shadow:none;outline:none;border:none;cursor:pointer}@media (max-width: 500px){.comments__filters .button{padding:5px 15px;margin:5px}}.comments__filters .active-button{background-color:#5357b6;color:#fff}.comments__addComment{width:95%;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;grid-gap:30px;margin-block:20px;align-items:center}@media (max-width: 500px){.comments__addComment{width:100%;grid-gap:10px;position:fixed;background-color:#fff;left:0;right:0;bottom:0;padding:20px;z-index:1;margin-block:0;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px}}.comments__addComment__isReply{display:none}@media (max-width: 500px){.comments__addComment__isReply{display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:#d3d3d3;position:absolute;bottom:70px;left:0;right:0;padding:10px}}.comments__addComment__isReply p{font-family:Poppins,sans-serif;color:gray;font-weight:500;font-size:14px;line-height:22px}@media (max-width: 400px){.comments__addComment__isReply p{font-size:12px}}.comments__addComment__isReply .close-icon{color:gray;font-size:18px}.comments__addComment img{width:40px;height:40px}@media (max-width: 500px){.comments__addComment img{width:25px;height:25px}}.comments__addComment__textarea-wrapper{border-bottom:1px solid lightgrey}.comments__addComment__textarea-wrapper textarea{resize:none;border:none;overflow:hidden;outline:none;width:100%;padding:0;font-family:Poppins,sans-serif;color:#000;font-weight:500;font-size:14px;line-height:22px}@media (max-width: 400px){.comments__addComment__textarea-wrapper textarea{font-size:12px}}.comments__addComment .material-button{background-color:#5357b6;color:#fff;border-radius:30px;text-transform:lowercase;padding:5px 20px;font-family:Poppins,sans-serif;font-weight:500;text-align:center}@media (max-width: 500px){.comments__addComment .material-button{padding:5px 10px;font-size:12px}}.comments__comment{border-radius:5px;display:grid;grid-template-columns:auto 1fr;align-items:center;grid-gap:5px 30px;padding:15px;margin-bottom:10px}@media (max-width: 500px){.comments__comment{align-items:flex-start;grid-gap:5px 15px;margin-bottom:5px;padding:0}}.comments__comment__userImage{display:flex;flex-direction:row;align-items:center;justify-content:center}.comments__comment__userImage img{width:40px;height:40px}@media (max-width: 500px){.comments__comment__userImage img{width:25px;height:25px}}.comments__comment__update{display:grid;grid-template-rows:1fr auto;grid-gap:10px}.comments__comment__update textarea{resize:none;border:none;overflow:hidden;outline:none;width:100%;padding:0 0 5px;border-bottom:1px solid lightgrey;font-family:Poppins,sans-serif;color:#000;font-weight:500;font-size:14px;line-height:22px}@media (max-width: 400px){.comments__comment__update textarea{font-size:12px}}.comments__comment__update__buttons{margin-left:auto}.comments__comment__update__buttons .button{background-color:#5357b6;color:#fff;border-radius:30px;text-transform:lowercase;padding:5px 20px;font-family:Poppins,sans-serif;font-weight:500;text-align:center}@media (max-width: 500px){.comments__comment__update__buttons .button{padding:5px 10px;font-size:12px}}.comments__comment__update__buttons .cancel-button{background-color:#d3d3d3;color:gray;margin-right:10px;border:1px solid lightgrey}.comments__comment__user-content__user-info{margin-bottom:5px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.comments__comment__user-content__user-info img{width:40px;height:40px}@media (max-width: 500px){.comments__comment__user-content__user-info img{width:25px;height:25px}}.comments__comment__user-content__user-info h3{font-family:Poppins,sans-serif;color:#000;font-weight:700;font-size:14px;margin-inline-end:10px}.comments__comment__user-content__user-info p{font-family:Poppins,sans-serif;color:#505050;font-weight:500;font-size:14px;line-height:22px}@media (max-width: 400px){.comments__comment__user-content__user-info p{font-size:12px}}.comments__comment__user-content__user-info .you{color:#fff;background-color:#5357b6;margin-inline-start:10px;font-size:12px;border-radius:5px;padding:0 10px}@media (max-width: 500px){.comments__comment__user-content__user-info .you{padding:0 6px;margin-inline-start:5px;font-size:10px}}.comments__comment__user-content__user-info .current-user-actions{margin-left:auto;position:relative}.comments__comment__user-content__user-info .current-user-actions .iconButton{width:20px;height:20px}.comments__comment__user-content__content p{font-family:Poppins,sans-serif;color:#505050;font-weight:500;font-size:14px;line-height:22px}@media (max-width: 400px){.comments__comment__user-content__content p{font-size:12px}}.comments__comment__user-content__content p span{font-family:Poppins,sans-serif;color:#5357b6;font-weight:500;font-size:14px;line-height:22px}@media (max-width: 400px){.comments__comment__user-content__content p span{font-size:12px}}.comments__comment__actions{grid-column:2;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.comments__comment__actions__likes{margin-inline-end:20px;display:flex;flex-direction:row;align-items:center;justify-content:center}.comments__comment__actions__likes .icon{font-family:Poppins,sans-serif;color:gray;font-weight:500;font-size:14px;line-height:22px;cursor:pointer;text-transform:lowercase;border-radius:30px}@media (max-width: 400px){.comments__comment__actions__likes .icon{font-size:12px}}.comments__comment__actions__reply{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.comments__comment__actions__reply .icon{font-family:Poppins,sans-serif;color:gray;font-weight:500;font-size:14px;line-height:22px;cursor:pointer;text-transform:lowercase;border-radius:30px}@media (max-width: 400px){.comments__comment__actions__reply .icon{font-size:12px}}.comments__comment__replies{grid-column:2;display:flex;flex-direction:row;align-items:center;justify-content:flex-start}.comments__comment__replies .icon{font-family:Poppins,sans-serif;color:#5357b6;font-weight:500;font-size:14px;line-height:22px;cursor:pointer;text-transform:lowercase;border-radius:30px}@media (max-width: 400px){.comments__comment__replies .icon{font-size:12px}}.child-comments{margin-left:10px}.modal{background-color:#fff;padding:10px;height:100px;width:120px;position:absolute;border:1px solid lightgrey;border-radius:5px;right:20px;top:20px;z-index:2}.modal .icon{text-transform:capitalize;font-family:Poppins,sans-serif;font-weight:500;font-size:14px}.modal .edit{color:#505050}.modal .delete{color:#ff2b36}.delete-modal{position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:#0003;display:flex;flex-direction:row;align-items:center;justify-content:center}.delete-container{background-color:#fff;max-width:360px;border-radius:5px;padding:20px;display:grid;grid-template-columns:1fr;grid-gap:10px}@media (max-width: 500px){.delete-container{max-width:300px}}.delete-container h3{font-family:Poppins,sans-serif;color:#000;font-weight:700;font-size:18px}.delete-container p{font-family:Poppins,sans-serif;color:#505050;font-weight:500;font-size:14px;line-height:22px}@media (max-width: 400px){.delete-container p{font-size:12px}}.delete-container .delete-buttons{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.delete-container .delete-buttons .button{background-color:#ff2b36;color:#fff;border-radius:5px;text-transform:capitalize;padding-inline:10px}.delete-container .delete-buttons .cancel{background-color:gray}.toaster{position:fixed;bottom:20px;left:20px;right:20px;width:200px;z-index:100;border-radius:5px;background-color:#e8e9f3;padding:5px 10px;display:flex;flex-direction:row;align-items:center;justify-content:space-between}@media (max-width: 500px){.toaster{bottom:80px}}.toaster p{font-family:Poppins,sans-serif;color:#000;font-weight:500;font-size:14px;line-height:22px}@media (max-width: 400px){.toaster p{font-size:12px}}.toaster .button{color:#000;font-size:18px}