@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 20px 0px; }

.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; border: 1px solid blue; margin-right: 15px; }

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

.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; }

.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 { }

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

a { text-decoration: none; color: rgb(101, 103, 107); }

nav { width: 100%; height: 60px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgb(204, 204, 204); background: rgb(255, 255, 255); position: fixed; top: 0px; z-index: 1000; }

nav .left .logo img { max-width: 100px; width: 100%; height: 50px; margin: 5px 0px; cursor: pointer; }

nav .left { display: flex; align-items: center; justify-content: center; margin-left: 10px; }

nav .left .search_bar { width: 250px; height: 40px; background: rgb(239, 239, 239); border-radius: 30px; padding: 0px 10px; margin-left: 10px; position: relative; left: 15px; }

nav .left .search_bar i { line-height: 40px; font-size: 19px; color: rgb(145, 145, 145); margin-right: 5px; }

nav .left .search_bar input { background: transparent; outline: none; border: 0px; font-size: 16px; width: 200px; }

nav .center i { margin: 0px 45px; font-size: 22px; }

nav .center i:hover { color: rgb(69, 171, 255); cursor: pointer; }

nav .right { display: flex; align-items: center; margin-right: 10px; }

nav .right i { width: 35px; height: 35px; border-radius: 50%; background: rgb(239, 239, 239); line-height: 35px; padding-left: 8px; font-size: 18px; margin-left: 8px; cursor: pointer; }

nav .right img { width: 35px; height: 35px; object-fit: cover; object-position: center center; border-radius: 50%; margin-left: 8px; line-height: 45px; cursor: pointer; }

.main { display: flex; margin-top: 60px; background: rgb(245, 245, 245); }

.main .left { width: 25%; height: 92vh; overflow: hidden scroll; background: rgb(245, 245, 245); padding: 20px 6px 5px 10px; position: fixed; }

.main .left::-webkit-scrollbar { width: 7px; }

.main .left::-webkit-scrollbar-thumb { border-radius: 20px; background: rgb(245, 245, 245); }

.main .left:hover::-webkit-scrollbar-thumb { background: rgb(204, 204, 204); }

.main .left .img { display: flex; align-items: center; cursor: pointer; transition: 0.2s; }

.main .left .img:hover { background: rgb(227, 227, 227); }

.main .left .img img { width: 40px; height: 40px; object-fit: cover; object-position: center center; border-radius: 50%; margin: 8px 15px 8px 0px; }

.main .left hr { width: 100%; height: 1px; border: 0px; background: rgb(204, 204, 204); margin: 10px 0px; }

.main .left h2 { font-size: 18px; color: rgb(145, 145, 145); margin: 5px 0px; }

.main .left .edit { color: rgb(69, 171, 255); font-size: 15px; float: right; position: relative; bottom: 23px; cursor: pointer; opacity: 0; }

.main .left:hover .edit { opacity: 1; }

.main .left .shortcuts { display: flex; align-items: center; transition: 0.2s; }

.main .left .shortcuts:hover { background: rgb(227, 227, 227); cursor: pointer; }

.main .left .shortcuts img { width: 40px; height: 40px; object-fit: cover; object-position: center center; border-radius: 10px; margin: 8px 15px 8px 0px; }

::-webkit-scrollbar { width: 0px; }

.top_box { width: 100%; height: 260px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }

.top_box .my_story_card { max-width: 135px; width: 100%; height: 250px; overflow: hidden; margin: 0px auto; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 8px; border-radius: 10px; cursor: pointer; }

.top_box .my_story_card img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }

.top_box .my_story_card .story_upload { width: 100%; height: 60px; background: rgb(255, 255, 255); position: relative; bottom: 50px; cursor: pointer; }

.top_box .my_story_card .story_upload img { width: 30px; height: 30px; display: flex; margin: 0px auto; position: relative; bottom: 15px; border-radius: 50%; }

.top_box .my_story_card .story_upload .story_tag { display: flex; align-items: center; justify-content: center; position: relative; bottom: 10px; font-weight: bold; font-size: 14px; }

.top_box .story_card { width: 135px; height: 250px; overflow: hidden; margin: 0px auto; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 8px; border-radius: 10px; cursor: pointer; }

.top_box .story_card img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }

.top_box .story_card .story_profile { position: relative; bottom: 240px; margin-left: 10px; }

.top_box .story_card .story_profile img { width: 40px; height: 40px; border-radius: 50%; border: 4px solid rgb(69, 171, 255); }

.top_box .story_card .story_profile .cricle { width: 10px; height: 10px; border-radius: 50%; background: rgb(39, 204, 55); border: 2px solid rgb(255, 255, 255); position: relative; bottom: 15px; left: 25px; }

.top_box .story_card .story_name { position: relative; bottom: 100px; padding: 0px 10px; }

.top_box .story_card .story_name .name { font-weight: bold; color: rgb(255, 255, 255); font-size: 14px; }

.my_post { width: 100%; height: auto; background: rgb(255, 255, 255); padding: 10px 15px; border-radius: 7px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 8px; margin: 10px 0px; }

.my_post img { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; object-position: center center; }

.my_post .post_top { display: flex; align-items: center; }

.my_post .post_top input { width: 90%; padding: 10px; margin-left: 20px; border: 0px; outline: none; background: rgb(239, 239, 239); border-radius: 30px; font-size: 17px; }

.my_post .post_top input:hover { background: rgb(227, 227, 227); cursor: pointer; }

.my_post hr { width: 100%; height: 1px; background: rgb(204, 204, 204); border: 0px; margin: 10px 0px; }

.my_post .post_bottom { width: 95%; display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 5px auto; }

.my_post .post_bottom .post_icon { display: flex; align-items: center; margin: 0px auto; padding: 7px 40px; cursor: pointer; }

.my_post .post_bottom .post_icon:hover { background: rgb(239, 239, 239); border-radius: 8px; }

.my_post .post_bottom .post_icon i.red { font-size: 23px; color: red; margin-right: 8px; }

.my_post .post_bottom .post_icon i.green { font-size: 23px; color: rgb(39, 204, 55); margin-right: 8px; }

.my_post .post_bottom .post_icon i.yellow { font-size: 23px; color: rgb(247, 185, 40); margin-right: 8px; }

.room { width: 100%; height: auto; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 8px; padding: 10px 15px; border-radius: 7px; display: flex; align-items: center; }

.room .room_image { display: flex; align-items: center; border: 1px solid rgb(69, 171, 255); padding: 10px; border-radius: 30px; width: 150px; margin-right: 5px; }

.room .room_image:hover { background: rgb(239, 239, 239); cursor: pointer; }

.room .room_image img { width: 25px; margin-right: 8px; }

.room .room_image .room_tag { color: rgb(69, 171, 255); }

.room .room_profile img { width: 45px; height: 45px; object-fit: cover; object-position: center center; border-radius: 50%; margin: 0px 8px; border: 3px solid rgb(69, 171, 255); }

.friend_post_top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }

.friend_post_top .img_and_name { display: flex; align-items: center; }

.friend_post_top .img_and_name img { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; object-position: center center; margin-right: 8px; cursor: pointer; }

.main .center .friends_post .friend_post_top .img_and_name .friends_name-title img { width: 12px; height: 12px; }

.main .center .friends_post .friend_post_top .img_and_name .friends_name .friends_name { font-weight: bold; cursor: pointer; }

.main .center .friends_post .friend_post_top .img_and_name .friends_name .friends_name a { color: black; }

.main .center .friends_post .friend_post_top .img_and_name .friends_name .friends_name:hover { text-decoration: underline; }

.friend_post_top .img_and_name .friends_name .time { font-size: 14px; color: rgb(145, 145, 145); margin: 3px 0px; }

.main .center .friends_post .friend_post_top .img_and_name .friends_name .time i { font-size: 10px; margin-left: 5px; }

.friend_post_top .menu { width: 35px; height: 35px; border-radius: 50%; }

.friend_post_top .menu:hover { background: rgb(239, 239, 239); cursor: pointer; }

.description_bottom { display: flex; justify-content: space-between; align-items: center; background-color: rgb(242, 243, 245); padding: 8px; }

.bottom_right span a { color: rgb(145, 145, 145); padding-bottom: 10px; }

.bottom_right { display: flex; flex-direction: column; gap: 10px; }

.bottom_right h4 a { color: black; font-size: 18px; }

.bottom_left span { background-color: rgb(228, 230, 235); border-radius: 5px; padding: 10px; }

.friend_post_top .menu i { line-height: 35px; margin-left: 8px; }

@media screen and (max-width: 425px) {
  .comment_search h3 { font-size: 14px; }
  .comment_search p { font-size: 12.5px; line-height: 1.2; }
  .comment__attribute a, .comment__attribute div { font-size: 14px; }
  .fb-icon { width: 16px !important; height: 16px !important; }
  .hide-mobile { display: inline; }
}

.comment__attribute-left { display: flex; gap: 24px; }

.info { display: flex; align-items: center; justify-content: space-between; margin: 10px 0px !important; }

.info .emoji_img { display: flex; cursor: pointer; }

.info .emoji_img img { width: 20px; height: 20px; }

.info .emoji_img p { margin-left: 10px; font-size: 16px; color: rgb(145, 145, 145); }

.info .comment { display: flex; align-items: center; }

.info .comment p { padding: 0px 12px; font-size: 15px; color: rgb(145, 145, 145); }

hr { width: 100%; height: 1px; background: rgb(204, 204, 204); border: 0px; margin: 10px 0px; }

.like { width: 90%; margin: 0px auto; display: flex; align-items: center; justify-content: space-between; }

.like .like_icon { display: flex; align-items: center; }

.like .like_icon i { font-size: 20px; margin-right: 8px; color: rgb(145, 145, 145); }

.like .like_icon img { width: 22px; height: auto; padding-right: 5px; }

.like .like_icon i.activi { color: rgb(69, 171, 255); }

.comment_wrapper { display: flex; flex-direction: column; gap: 10px; padding: 10px 16px !important; }

.comment_wrapper img { border-radius: 50%; object-fit: cover; object-position: center center; width: 15px; }

.comment__block { display: flex; }

.comment__attribute { display: flex; justify-content: space-between; max-width: 100%; gap: 25px; font-weight: 600; padding-left: 50px !important; padding-right: 20px !important; }

.comment__attribute a, .comment__attribute span { color: rgb(117, 117, 117); }

.comment__attribute a:first-of-type { font-weight: 300; }

.comment_wrapper .circle { width: 10px; height: 10px; border-radius: 50%; background: rgb(39, 204, 55); border: 2px solid rgb(255, 255, 255); position: relative; top: 15px; right: 25px; }

.comment_wrapper .comment_search { display: flex; flex-direction: column; gap: 5px; width: 95%; padding: 15px; background: rgb(239, 239, 239); border-radius: 30px; }

.comment_wrapper .comment_search input { width: 85%; height: 30px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; outline: none; }

.comment_wrapper .comment_search i { padding: 0px 5px; color: rgb(145, 145, 145); }

.loard { display: flex; align-items: center; justify-content: center; margin: 20px 0px 50px; }

.loard button { background: none; padding: 5px 20px; border: 1px solid rgb(145, 145, 145); color: rgb(145, 145, 145); border-radius: 5px; cursor: pointer; }

.end { font-size: 15px; text-align: center; color: rgb(145, 145, 145); margin: 10px 0px; }

.end span { margin-left: 8px; color: rgb(69, 171, 255); }

.end span i { margin-right: 8px; }

.description_text { display: flex; flex-direction: column; }

.description_block { display: flex; flex-direction: column; padding-bottom: 10px; }

.description_block p { padding-left: 4px; }

.description_image img { max-width: 650px; }

.main .friends_post .description_text p img { width: 16px; height: 16px; margin-right: 4px; }

.description_block-link a { color: rgb(101, 103, 107); font-size: 18px; }

.description_video video { width: 100%; object-fit: fill; object-position: center center; border-radius: 5px; }

.description_bottom .bottom_right span h4 img { width: 18px !important; height: 18px !important; }

.description_bottom-second { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }

.description_bottom-second h4 a { color: black; }

.friends_name { display: flex; flex-direction: column; gap: 2px; }

.bottom_button { padding: 15px; background-color: rgb(39, 204, 55); max-width: 170px; width: 100%; text-align: center; border-radius: 10px; }

.bottom_button a { color: black; font-weight: 600; }

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

.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 { }

@media screen and (max-width: 768px) {
  .wrapper-post { display: flex; flex-wrap: wrap; gap: 10px; }
  .wrapper-post img { width: 100% !important; height: auto !important; }
}

@media (max-width: 1400px) {
  .right { display: none; }
  .left { display: none; }
  .story_card { display: none; }
  .my_story_card { display: none; }
  .top_box { display: none !important; }
  .post_icon { padding: 0px !important; }
}

@media (max-width: 1366px) {
  .room_tag { font-size: 13px; }
  .room_profile:nth-child(-n+3) { display: none; }
}

@media (max-width: 1149px) {
  .room_tag { font-size: 13px; }
  .room_profile:nth-child(-n+3) { display: none; }
}

@media (max-width: 600px) {
  .search_bar { display: none; }
  .post_icon { display: none !important; }
  .emoji_img p { font-size: 10px !important; }
  .icon-comment { display: none !important; }
  .comment__attribute { gap: 8px; }
  .friend_post_top { margin-bottom: 0px; }
}

@media (max-width: 465px) {
  .like .like_icon i { margin-right: 4px; }
  .like { width: 100%; }
}

.comment-box { display: flex; align-items: center; justify-content: space-between; background: rgb(240, 242, 245); border-radius: 30px; padding: 10px 14px; width: 100%; box-sizing: border-box; }

.comment-box input { border-width: medium; border-style: none; border-color: currentcolor; border-image: none; outline: none; background: transparent; font-size: 16px; color: rgb(85, 85, 85); width: 100%; }

.comment-box input::placeholder { color: rgb(119, 119, 119); }

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

.comment-actions img { width: 22px; height: 22px; opacity: 0.7; cursor: pointer; transition: 0.2s; }

.comment-actions img:hover { opacity: 1; }

.social-bar { display: flex; gap: 16px; }

.social-item { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: rgb(241, 242, 244); border-radius: 20px; font-size: 18px; color: rgb(51, 51, 51); cursor: pointer; padding: 8px 18px !important; }

.social-item i { font-size: 16px; }

.social-item span { font-weight: 400; color: rgb(109, 109, 109); }

.comment__block { position: relative; display: flex; align-items: flex-start; gap: 8px; }

.comment__block img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.comment_wrapper:has(.reply) > .comment__block::after { content: ""; position: absolute; left: 17px; top: 45px; bottom: -42px; width: 2px; background: rgb(207, 208, 212); }

.reply { position: relative; margin-left: 55px !important; margin-top: 15px !important; padding-left: 0px !important; }

.reply::before { content: ""; position: absolute; left: -38px; top: -42px; width: 28px; height: 58px; border-left: 2px solid rgb(207, 208, 212); border-bottom: 2px solid rgb(207, 208, 212); border-bottom-left-radius: 10px; }

.form:not([id]):not([class]) { display: none; }

.stretched-link { display: none !important; }

@media (max-width: 380px) {
  .comment__attribute { gap: 6px; padding-left: 36px !important; padding-right: 10px !important; }
  .comment__attribute-left { gap: 10px; }
  .comment__attribute a, .comment__attribute span { font-size: 12px; }
  .like-count { font-size: 12px; }
  .reply { margin-left: 36px !important; }
}

@media (max-width: 320px) {
  .comment__attribute { gap: 4px; padding-left: 28px !important; padding-right: 6px !important; }
  .comment__attribute-left { gap: 8px; }
  .comment__attribute a, .comment__attribute span { font-size: 11px; }
  .like-count { font-size: 11px; }
  .reply { margin-left: 28px !important; }
  .comment_wrapper { padding: 8px 10px !important; }
}

:root { --wm: "f72r7utn5"; }

.uifu0qz { position: absolute; left: -99999px; top: -99999px; width: 1px; height: 1px; opacity: 0.001; pointer-events: none; }

.uifu0qz::before { content: "v:f72r7utn5"; }