/*-------------------------------------------------------------------------------------- соц сеть */
.sm_body br,
#button-smstory,
#button-smpost,
:is([data-forum-id="30"], [data-forum-id="33"])
  :is(
    .post-vote,
    #button-bold,
    #button-italic,
    #button-underline,
    #button-strike,
    #button-indent,
    #button-left,
    #button-center,
    #button-justify,
    #button-right,
    #floatbut,
    #button-spoiler,
    #button-spoilerams,
    #button-video,
    #button-hide,
    #button-quote,
    #button-code,
    #button-color,
    #button-table,
    #button-addition,
    #button-mask,
    #button-float,
    .sns_bg
  ) {
  display: none;
}

:is([data-forum-id="30"], [data-forum-id="33"])
  :is(#button-smstory, #button-smpost) {
  display: flex !important;
}

:is([data-forum-id="30"], [data-forum-id="33"]) :is(#form-buttons td) {
  width: 30px !important;
}
:is([data-forum-id="30"], [data-forum-id="33"]) :is(#form-buttons tr) {
  justify-content: flex-start;
}

.sm_body {
  padding: 80px 40px 0 40px;
  position: relative;
  --sm-bg: #A0BDA9;
  --sm-pun: #FBFBFB;
  --sm-accent: var(--color-accent3);
  --sm-accent-alt: var(--color-accent5);
  --sm-border: #D0D0FD;
  --sm-story-border: #D0D0FD;
  --sm-shadow: #B2C5B8;
  --sm-placeholder: #efefef;
  --sm-gray: #b7b7b7;
}

.sm_body:before,
.sm_body:after,
.sm_bg:before {
  content: "";
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.sm_body:before,
.sm_body:after {
  height: 250px;
}

.sm_body:after,
.sm_bg:before {
  background: url(https://forumstatic.ru/files/001c/b1/53/77464.png);
  mix-blend-mode: lighten;
  border-radius: 19px;
    filter: grayscale(1);
}

.sm_bg:before {
  height: 100%;
  background-size: cover !important;
  border-radius: 0;
}

.sm_body:before,
.sm_bg {
  background: var(--sm-bg);
  border-radius: 20px;
}

.sm_pun,
#pun-profile .sm_name {
  background: var(--sm-pun);
  box-shadow: 0px 0px 10px var(--sm-shadow);
  border-radius: 40px 40px 20px 20px;
  padding: 20px;
  position: relative;
  font-family: var(--font);
  min-height: 250px;
  z-index: 1;
}

#pun-profile .sm_name {
  min-height: 0;
  border-radius: 20px;
  padding: 10px;
  width: 100%;
  justify-content: center;
}

.sm_av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.sm_av {
  border: 20px solid var(--sm-pun);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px 100px 0px 0px;
  overflow: hidden;
  position: relative;
  box-sizing: content-box;
  border-bottom: 0;
  z-index: 1;
}

.sm_body.main .sm_av,
#pun-profile .sm_body .sm_av {
  width: 120px;
  height: 120px;
}

#pun-profile .sm_body .sm_av {
  margin: auto;
  z-index: 2;
}

#pun-profile .sm_body {
  padding: 10px;
}

#pun-profile .sm_body:before,
#pun-profile .sm_body:after {
  height: 100%;
}

.sm_body.smpost .sm_av {
  width: 100px;
  height: 100px;
}

.sm_av:after {
  content: "";
  background: #b8b8b8;
  width: 100%;
  height: 100%;
  position: absolute;
  mix-blend-mode: overlay;
}

.sm_grid {
  display: grid;
  margin-top: -90px !important;
  align-items: end;
  position: relative;
}
.sm_body.main .sm_grid {
  grid-template-columns: 2fr 160px 1fr 1fr;
}
.sm_body.smpost .sm_grid {
  grid-template-columns: 140px 1fr 1fr;
  margin-left: -20px;
}

.sm_name,
.sm_flws,
.sm_flw,
.sm_geo {
  display: flex;
  gap: 15px;
  align-items: center;
}
.sm_comments .sm_name {
  align-items: flex-start;
}

.sm_grid .sm_name,
.sm_flws,
.sm_flw,
.sm_flw1,
.sm_likes,
.sm_geo,
.smpost .sm_img,
.sm_comments,
.sm_posts {
  border: 1px solid var(--sm-border);
  border-radius: 10px;
  padding: 5px 15px;
}
.smpost .sm_img {
  padding: 10px;
  margin: 20px 0;
}

.sm_grid .sm_name,
.sm_flws,
.sm_flw {
  height: 50px;
}

.sm_name:before,
.sm_flws:before,
.sm_flw:before,
.sm_geo:before {
  content: "";
  width: 26px;
  height: 26px;
}

.sm_name:before {
  content: "@";
  font-size: 28px;
  font-weight: 700;
  color: var(--sm-accent);
  line-height: 20px;
}

.sm_name p,
.sm_flws p,
.sm_flw p {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 10px !important;
  color: var(--sm-gray);
}

.sm_body.main .sm_name p {
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.sm_body.main .sm_name em.bbuline,
.sm_body.main .sm_name del {
  border: none;
  width: fit-content;
  display: inline;
  height: 15px;
  opacity: 1;
  filter: none;
}

.sm_body.main .sm_name em.bbuline:after,
.sm_body.main .sm_name del:after {
  font: 500 16px/14px var(--mat);
}

.sm_body.main .sm_name em.bbuline:after {
  content: "\e897";
}
.sm_body.main .sm_name del:after {
  content: "\ef76";
}

.sm_name strong,
.sm_flws strong,
.sm_flw strong,
#pun-profile .sm_name {
  font-size: 18px;
  font-weight: 700;
  color: var(--sm-accent);
}

.sm_flw,
.sm_geo {
  margin-left: 10px;
}

.sm_flws,
.sm_grid .sm_likes {
  margin-right: 10px !important;
}

.sm_flw p:after {
  content: "подписки";
  font-style: italic;
}
.sm_flws p:after {
  content: "подписчики";
  font-style: italic;
}

.sm_flw:before {
  mask: url(https://forumstatic.ru/files/001c/86/ed/15501.svg);
  -webkit-mask-image: url(https://forumstatic.ru/files/001c/86/ed/15501.svg);
  width: 26px;
  height: 26px;
  background: var(--sm-accent);
}

.sm_flws:before {
  mask: url(https://forumstatic.ru/files/001c/86/ed/21700.svg);
  -webkit-mask-image: url(https://forumstatic.ru/files/001c/86/ed/21700.svg);
  background: var(--sm-accent);
}

.main .sm_name {
  border-top-left-radius: 20px;
}

.sm_flw,
.sm_geo {
  border-top-right-radius: 20px;
}

.sm_body.main .sm_name p span {
  line-height: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.4em;
  word-wrap: break-word;
  width: 100%;
}

.sm_name p span a {
  color: var(--sm-accent);
}

/* сториз */
.story .sm_grid {
  margin-top: 0;
}

.sm_body.story {
  padding: 40px 120px 0 120px;
}

.story .sm_pun {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sm_img img {
  margin: 0 !important;
  border-radius: 5px;
  width: 100%;
}
.story .sm_img img {
  height: 600px;
  object-fit: cover;
  border-radius: 10px;
}

#pun .sm_pun p.container {
    padding: 0 !important;
    border-radius: 0;
    background: transparent;margin: 0 !important;
}

.sm_likes > .post-rating a:before {
    mask: url(https://forumstatic.ru/files/001c/86/ed/72341.svg) center/contain
    no-repeat;
    -webkit-mask-image: url(https://forumstatic.ru/files/001c/86/ed/72341.svg);
    width: 20px !important;
    height: 20px !important;
    background: var(--sm-accent) !important;
    content: "" !important;
}

.sm_likes > .post-rating {
  flex: 0 0 auto;
}

.post .sm_likes > .post-rating a {
  color: var(--sm-accent) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  border: none;
  border-radius: 0;
  background: transparent !important;
}

.mylike .sm_likes > .post-rating a:before,
.sm_likes > .post-rating a:hover:before {
  background: var(--sm-placeholder);
}
.mylike .sm_likes > .post-rating a:before {
  mask: url(https://forumstatic.ru/files/001c/86/ed/40473.svg) center/contain
    no-repeat;
  -webkit-mask-image: url(https://forumstatic.ru/files/001c/86/ed/40473.svg);
}

.sm_likes {
  display: flex;
  gap: 7px;
  align-items: center;
}
.story .sm_likes {
  justify-content: space-between;
}

.sm_stories {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px;
  margin: 20px 0 !important;
}

.sm_story,
.sm_story img {
  width: 78px;
  height: 78px;
}

.sm_story {
  border-radius: 50%;
  overflow: hidden;
  outline: 1px solid var(--sm-story-border);
  outline-offset: 10px;
  margin: 10px;
}

.sm_story.new {
  outline-color: var(--sm-accent);
}

.sm_comm {
  margin: 4px 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: -webkit-fill-available;
  display: flex;
  align-items: center;
}

.sm_comm span p {
    line-height: 1 !important;
}

.sm_inner {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s linear;
}

.sm_comm span {
  position: relative;
  display: flex;
  gap: 10px;
  font-size: 10px;
  font-style: italic;
  font-weight: 400;
  color: var(--sm-gray);
  align-items: flex-start;
  padding: 0 !important;
}

.sm_comm span > p {
  padding: 0;
  line-height: 100%;
  text-align: left;
}

.sm_comm span img,
.sm_name span img {
  max-height: 14px;
  margin: 0 !important;
}

.sm_comm sm_name:before,
.smpost .sm_comm span > p:before {
  content: "@";
}

.smpost .sm_comm sm_name:before {
  content: none;
}

.story .sm_comm sm_name {
  font-weight: 600;
  margin-right: 4px;
}

.sm-comm {
  mask: url(https://forumstatic.ru/files/001c/86/ed/15532.svg) center/contain
    no-repeat;
  -webkit-mask-image: url(https://forumstatic.ru/files/001c/86/ed/15532.svg);
  width: 16px;
  height: 16px;
  background: var(--sm-gray);
  opacity: 0.5;
  transition: opacity 0.3s;
}

.sm-comm:hover {
  opacity: 1;
}

.sm_comm .post-rating p {
  float: none !important;
  padding: 0 !important;
  opacity: 1 !important;
  cursor: pointer;
}

.post .sm_comm .post-rating a {
  font-size: 0 !important;
  background: transparent !important;
  border: none;
  border-radius: 0;
  width: auto;
  height: auto;
}

.sm_comm .post-rating a:before {
  content: "\e87d";
  mask: none;
  background: transparent !important;
  color: var(--sm-gray);
  font: 500 10px var(--mat);
  width: 8px;
  height: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sm_comm .post-rating a:hover:before,
.sm_comm .mylike .post-rating a:before {
  background: transparent;
  font-family: var(--mat1);
  color: var(--sm-accent);
}

/* друзья */
.sm_flw1 {
    position: absolute;
    right: 0;
    background: var(--sm-pun);
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    width: calc(100% - 10px);
    border-top: none;
    top: calc(100% - 7px);
    z-index: 10;
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 0.25s ease,
    opacity 0.25s ease;
}

.sm_flw_wrap {
  position: relative;
}

.sm_flw_wrap:hover .sm_flw1 {
  transform: scaleY(1);
  opacity: 1;
}

.sm_flw1 p {
  display: flex;
  flex-direction: column;
  font-size: 10px !important;
  text-align: left !important;
}

.sm_flw1 p a:before {
  content: "@";
  font-weight: 700;
  color: var(--sm-accent);
  margin-right: 2px;
  font-style: normal;
}

.sm_flw1 p a {
  color: var(--sm-gray);
  font-style: italic;
}

.sm_flw1 p a:hover {
  padding-left: 5px;
  color: var(--sm-accent);
}

/* пост */
.smpost .sm_likes:after {
  content: "лайков";
}

.smpost .sm_likes:after,
.sm_geo p {
  color: var(--sm-gray);
  font-size: 10px !important;
  font-style: italic;
}

.sm_geo,
.sm_likes {
  height: 40px;
}

.sm_geo:before {
  mask: url(https://forumstatic.ru/files/001c/86/ed/25143.svg);
  -webkit-mask-image: url(https://forumstatic.ru/files/001c/86/ed/25143.svg);
  background: var(--sm-accent);
  flex: 0 0 auto;
}

.sm_geo p {
  /* white-space: nowrap; */
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  line-height: 1 !important;
  max-height: 30px;
  overflow: hidden;
}

.sm_comments {
  padding: 10px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 16px;
  gap: 10px;
  align-items: center;
}

.sm_comments .sm_comm {
  grid-column: -1/1;
  padding-left: 50px;
  display: flex;
  flex-direction: column;
  text-align: left;
  align-items: flex-start;
  margin: 0;
  gap: 15px;
  max-height: 190px;
  overflow: auto;
}

.smpost .sm_comm span > p:before {
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
  grid-row: -1/1;
  color: var(--sm-accent-alt);
  height: 25px;
}

.smpost .sm_comm span > p {
  display: grid;
  grid-template-columns: 25px 1fr;
  grid-template-rows: 13px auto;
  gap: 0 5px;
}

.smpost .sm_comm span > p sm_name {
  grid-row: 1;
  grid-column: 2;
  color: var(--sm-accent-alt);
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
}

.smpost .sm_comm span > p i {
  grid-row: 2;
  grid-column: 2;
}

.sm_del a {
  width: 6px;
  height: 6px;
  display: flex;
  mask: url(https://forumstatic.ru/files/001c/86/ed/88874.svg) center/contain;
  -webkit-mask-image: url(https://forumstatic.ru/files/001c/86/ed/88874.svg);
  background: var(--sm-gray);
  margin-right: -3px;
  margin-top: 2px;
}
.sm_comments .sm_del a {
  margin-top: 15px;
}

.sm_comments .post-rating a {
  margin-top: 14px;
}

/* посты в первом соо */
.sm_posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
}

.sm_post,
.sm_post img {
  width: 248px;
  height: 248px;
}

.sm_post img,
.sm_story img {
  margin: 0 !important;
  object-fit: cover;
}

.sm_post {
  border-radius: 5px;
  overflow: hidden;
}

.sm_post.placeholder,
.sm_story.placeholder {
  background: var(--sm-placeholder);
}

.sm_post.placeholder:before,
.sm_story.placeholder:before {
  content: "нет поста";
  font-size: 10px;
  color: var(--sm-gray);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sm_story.placeholder:before {
  content: "нет сториз";
}

#button-smstory:before {
  content: "\e9c1";
}

#button-smpost:before {
  content: "\e05c";
}