:root{--comment-background-color:#f5f5f7} .content-comment .empty-content{min-height:70px; height:70px; background-color:var(--comment-background-color); border:none} #modal-content .content-comment .empty-content .loading-container{min-height:auto} .post-comments-block{display:flex; flex:1; flex-direction:column} div.post-write-comment{position:sticky; width:100%; bottom:0; background-color:#fff; border-top:2px solid #ddd; -webkit-box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.2); box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.2); padding:10px; z-index:999} div.write-comment-top, div.write-comment-main, div.write-comment-bottom{max-width:700px; margin:auto} div.write-comment-overlay{display:flex; justify-content:center; align-items:flex-start; gap:5px} div.write-comment-text-container{position:relative; flex:1; display:flex; justify-content:center; align-items:flex-start; transition:opacity 0.3s ease} div.write-comment-text-container svg.write-comment-loading-icon{position:absolute; align-self:center} div.content-comment svg.delete-comment-loading-icon{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%)} div.write-comment-text-container.adding-comment, div.write-comment-bottom.adding-comment, div.item-comment.deleting-comment{opacity:0.5; pointer-events:none} div.write-comment-top, div.write-comment-bottom{display:none} .write-comment-bottom-content button.send-comment{border-radius:5px; padding:5px 10px; font-size:16px; color:white; background-color:#4A90E2; border:none; transition:background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out} .write-comment-bottom-content button.send-comment:hover{background-color:#357ABD} .write-comment-bottom-content button.send-comment:active{background-color:#2E6DA4} .send-comment-error{border-color:#e74c3c !important; background-color:#ffe6e6 !important} @keyframes shake{0%, 100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 50%{transform:translateX(4px)} 75%{transform:translateX(-4px)} } .write-comment{flex:1; height:auto; margin:0; resize:none; overflow:hidden; font:14px Segoe UI, Helvetica Neue, Arial, Helvetica, Geneva, sans-serif; border:1px solid #ddd; border-radius:4px; padding:8px 12px; line-height:20px; display:block; outline:0; appearance:none; -moz-appearance:none; . -webkit-appearance:none; transition:all 0.15s ease} .write-comment[readonly]{background-color:#eee} .write-comment.extended{overflow:auto; outline:none; border:1px solid #4A90E2; background-color:#f0f8ff} .post-comments{display:flex; flex-direction:column; flex:1} .post-comments-container{flex:1} .post-comments-header{margin:25px 10px 10px 10px} .post-comments-none{color:#878484; text-align:center; margin:20px; font-size:14px; font-style:italic} .content-comment{position:relative; background-color:var(--comment-background-color); padding:10px 10px; margin:15px 0; border-radius:20px; gap:7px; width:100%; display:flex; align-items:flex-start; justify-content:flex-start; transition:background-color 0.5s ease-out, opacity 0.3s ease-in-out} .content-comment.bg-blink{background-color:#dfe3f5} .post-comment-right{} .post-comment-reply{font-size:13px} div.item-comment div.post-author-details{gap:3px; height:28px} div.item-comment div.author-image{width:28px; height:28px; min-width:28px; min-height:28px} div.item-comment div.comment-replies div.post-author-details{gap:3px; height:20px} div.item-comment div.comment-replies div.author-image{width:20px; height:20px; min-width:20px; min-height:20px} div.item-comment div.post-author-username{display:flex; align-items:center; overflow:hidden} div.item-comment div.post-author-reply{display:flex; align-items:center; overflow:hidden; flex-grow:1} div.item-comment a.post-author-username{font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} div.item-comment .post-author-reply a.post-author-username{font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} span.arrow-right{width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; display:inline-block; margin:0 8px 2px 5px; border-left:5px solid #636363} div.comment-options{width:30px; display:flex; justify-content:center; align-items:center} div.comment-options button{border-radius:50%; object-fit:cover; padding:0} div.comment-options button:hover{outline:1px solid #ddd; background-color:#f7f7f7} div.comment-options, div.post-options, div.post-share{position:relative} span.post-option-text, span.post-comment-option-text, span.user-option-text{overflow:hidden} .post-comment-right{flex:1; min-width:0} .comment-text-block{padding:0 0 5px 0} .comment-text-container{position:relative; overflow:hidden} .comment-text{color:#262626; min-width:0; max-width:100%; max-height:300px; position:relative; transition:max-height 0.3s ease-in-out; line-height:20px; font-size:14px; font-family:"Noto Color Emoji", "Twemoji Mozilla", "Segoe UI Emoji", "Apple Color Emoji", sans-serif; overflow:hidden; white-space:pre-line; word-wrap:break-word; overflow-wrap:break-word; margin:3px 0} .comment-text.comment-expanded{max-height:none} .comment-text-fade{position:absolute; bottom:0; left:0; width:100%; height:100px; background:linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--comment-background-color) 100%); transition:background-color 0.5s ease-out, opacity 0.3s ease-in-out; display:none; pointer-events:none; border-radius:5px} .comment-text-fade.no-bg{background:none; opacity:0} .comment-text.comment-expanded+.comment-text-fade{opacity:0} .comment-text-toggle-button{line-height:25px; font-size:13px; margin:5px 0; cursor:pointer; font-weight:bold; color:#959595; display:none; text-decoration:none} body:not(.isMobile) .comment-text-toggle-button:hover{text-decoration:underline} .comment-actions{display:flex; align-items:center; gap:10px} .comment-rating{display:flex; align-items:center; justify-content:flex-start} .comment-rating button{width:20px; height:20px} span.comment-rating-value{min-width:30px; padding-left:2px; padding-right:2px; margin-left:3px; color:#808080; font-weight:bold; font-size:12px; text-align:center; display:inline-block; cursor:pointer} .item-comment .comment-replies{margin-left:35px} .comment-replies-view-icon{width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; display:inline-block; margin:2px 5px} .comment-replies-view-icon[data-arrow='down']{border-top:5px solid #436fb5} .comment-replies-view-icon[data-arrow='up']{border-top:0; border-bottom:5px solid #436fb5} .comment-replies-view, .comment-replies-view-more{cursor:pointer; font-size:13px; color:#436fb5; width:max-content; margin:10px 0} div.write-comment-bottom-content{display:flex; justify-content:flex-end; align-items:flex-start; margin:10px 0} .emoji-panel{flex:1; display:flex; gap:5px; max-height:30px; overflow:hidden; transition:max-height .3s ease; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap} .emoji-panel.open{max-height:300px} .add-emoji{cursor:pointer; font-size:22px} .write-comment-bottom-content .show-more-emojis-btn{background-color:#ffffff; cursor:pointer; padding:5px 0; margin-right:15px; display:flex; justify-content:center; align-items:center} body:not(.isMobile) .add-emoji:hover{transform:scale(1.2)} span.emoji{font-size:20px; line-height:30px; margin:0 2px} @media (max-width:615px){body:not(.isMobile) .emoji-panel{gap:10px} body.isMobile .emoji-panel{gap:15px} body.isMobile .emoji-panel.open{max-height:120px; overflow-y:auto; -webkit-overflow-scrolling:touch} body.isMobile .write-comment-bottom-content .show-more-emojis-btn{margin-right:20px} }