@charset "utf-8";

.postWrapper * { font-family: GothamBook, sans-serif; margin: 0px; padding: 0px; box-sizing: border-box; }

.postWrapper { background: rgb(255, 255, 255); width: 100%; border: 1px solid rgba(101, 103, 107, 0.2); border-radius: 8px; max-width: 654px; margin: 68px auto; }

.postBody { padding: 20px; }

.postHeader { display: flex; justify-content: space-between; width: 100%; align-items: center; margin-bottom: 8px; }

.postAuthor { display: flex; align-items: center; }

.postAuthor__avatar { width: 40px; height: 40px; border-radius: 50%; padding: 2px; margin-right: 15px; }

.postAuthor__info p { margin: 0px; font-weight: 700; color: rgb(5, 5, 5); font-size: 15px; }

.postAuthor__info p::after { content: url("../img/postApproved.svg"); position: relative; top: -2px; }

.postAuthor__info span { color: rgb(101, 103, 107); font-size: 12px; }

.postAuthor__info span::after { content: url("../img/postWorld.svg"); position: relative; top: 2px; }

.postAuthor__info span.today2::after { content: none; }

.postAuthor__info span.today::after { content: none; }

.postContent p { font-size: 15px; color: rgb(5, 5, 5); margin-bottom: 20px; }

.postContent video { width: 100%; }

.postContent__links { display: flex; gap: 10px; padding: 15px 20px; align-items: center; border-bottom: 1px solid rgba(101, 103, 107, 0.2); }

.postContent__links--links { width: 100%; display: flex; flex-direction: column; justify-content: center; }

.postContent__links--links a { text-decoration: none; font-size: 13px; color: rgb(0, 55, 255); padding-bottom: 8px; }

.postContent__links--links p { font-size: 16px; color: rgb(5, 5, 5); letter-spacing: -0.2px; margin: 0px; }

.postRegister { box-sizing: border-box; display: flex; align-items: center; justify-content: center; max-width: 654px; text-decoration: none; font-size: 14px; color: rgb(255, 255, 255); text-align: center; background: rgb(8, 20, 65); border-radius: 8px; padding: 15px; height: max-content; width: 100%; margin: 0px auto 32px; }

.postLikes { padding: 10px 20px; border-bottom: 1px solid rgba(101, 103, 107, 0.2); display: flex; justify-content: space-between; align-items: center; }

.postLikes__left { display: flex; align-items: center; gap: 10px; }

.postLikes__left span { color: rgb(101, 103, 107); font-size: 13px; }

.postLikes__right { display: flex; gap: 12px; }

.postLikes__right--comments, .postLikes__right--reposts { display: flex; align-items: center; gap: 4px; }

#postComments, #postReposts { font-size: 13px; color: rgb(101, 103, 107); position: relative; top: -1px; }

.postFooter { display: flex; justify-content: space-around; align-items: center; padding: 10px 0px; }

.postFooter > * { display: flex; align-items: center; text-decoration: none; gap: 7px; }

.postFooter > * span { color: rgb(101, 103, 107); font-size: 15px; }

.postComments { padding: 20px; }

.postComments > p { font-size: 15px; color: rgb(101, 103, 107); }

.postComment { margin-top: 10px; display: grid; grid-template-columns: 32px 1fr; column-gap: 5px; }

.commentAvatar { align-self: flex-start; }

.commentAvatar img { width: 32px; height: 32px; border-radius: 50%; }

.postComment__body { padding: 10px; background: rgb(240, 242, 245); border-radius: 15px; width: 100%; }

.commentAuthor { font-size: 13px; color: rgb(5, 5, 5); font-weight: 700; }

.commentContent { font-size: 15px; color: rgb(5, 5, 5); }

.commentFooter { margin-top: 5px; display: flex; justify-content: space-between; align-items: center; }

.commentFooter * { font-size: 13px; color: rgb(101, 103, 107); text-decoration: none; }

.commentFooter__left { display: flex; gap: 10px; font-weight: 700; }

.commentFooter__right { display: flex; gap: 4px; font-weight: 700; align-items: center; }

.replyComment { margin-left: 42px; }

.commentAuthor__approved::after { content: url("../img/postApproved.svg"); }

.fbImage { width: 100%; border-radius: 32px; margin-top: 12px; }

@media screen and (max-width: 450px) {
  .postAuthor img { margin-right: 7px; }
}

.top { z-index: 100000; }

.top { position: sticky; top: 0px; z-index: 100; background: rgb(255, 255, 255); }

.top { display: flex; padding: 17px; border-bottom: 1px solid rgb(190, 190, 190); position: relative; gap: 10px; }

.actions { display: flex; align-items: center; gap: 26px; font-family: Arial, sans-serif; color: rgb(102, 102, 102); }

.action { display: flex; align-items: center; gap: 6px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: transparent; color: rgb(102, 102, 102); font-size: 14px; cursor: pointer; padding: 4px; }

.action span:first-child { font-size: 18px; line-height: 1; }

.action:hover { color: rgb(24, 119, 242); }

.action.active { color: rgb(24, 119, 242); }

.reactions { position: relative; display: flex; align-items: center; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: transparent; cursor: pointer; padding: 4px; margin-left: auto; }

.circle { width: 18px; height: 18px; border-radius: 50%; color: rgb(255, 255, 255); font-size: 10px; display: flex; align-items: center; justify-content: center; border: 2px solid rgb(255, 255, 255); }

.circle.like { background: rgb(24, 119, 242); z-index: 2; }

.circle.heart { background: rgb(240, 40, 73); margin-left: -5px; z-index: 1; }

.reactions:hover { transform: scale(1.08); }

.commentFooter__right a { display: flex; gap: 4px; }

.commentFooter__right a img { width: 20px; }

.comment_input { display: flex; align-items: center; margin-top: 10px; padding: 15px; }

.comment_input img { width: 20px; height: 20px; }

.comment_input-person { margin-right: 5px; border-radius: 15px; }

.comment_input input { flex-grow: 1; padding: 10px; border: 1px solid rgb(204, 204, 204); border-radius: 20px; }

.comment_input button { color: white; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 10px 20px; border-radius: 15px; margin-left: 10px; cursor: pointer; }

.comment__block { }

.comment__block img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; object-position: center center; margin-right: 5px; margin-top: 8px; }

.comment_search { }