/*post box color #323436
fb card background: #252728
comment card #434346

full background:#1C1C1D
Dark Hashtag: #5AA7FF
DarkSecond Text: #B0B3B8
comment lines: #46484B Dark
*/

/* enable nice cross-fade once ready */
html:not(.no-theme-anim),
html:not(.no-theme-anim) body,
html:not(.no-theme-anim) .post-item,
html:not(.no-theme-anim) .layout_post_2,
html:not(.no-theme-anim) .header,
html:not(.no-theme-anim) .footer,
html:not(.no-theme-anim) .buzz-tag-box {
  transition:
    background-color .28s ease,
    color .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

@media (prefers-reduced-motion: reduce) {
  html:not(.no-theme-anim) * { transition: none !important; }
}

/*Light*/
:root
{
  --bg-container:#f6f2f3;
  --bg-post:#f9f9f9;
  --bg-formcontrol:#fff;
  --textcolor:#000;
  --reversetextcolor:#fff;
  --inputcolor:inherit !important;
  --commentinputbg:#f1f2f5 !important;
  --bottomlineborder:1px solid #e1e1e1;
  --skeleton-base: #f0f0f0;
  --skeleton-highlight: #e6e6e6;
  --linkbluecolor:#007bff;
  --orangebg: orange;
  --redbg: red;
  --commentbackgroundbg:#E5E4E2;
  --friendCardBg:#fff;
  --profiletabbg:#ffffff;
  --profiletabtext:#444;
  --headermenuIconcolor:#F85050;
  --secondarybuttonbg: -webkit-linear-gradient(top,#fcfcfc 0%,#f5f5f5 100%);
  --smalltextnote:#777;
  --tagboxbg:#f0f2f5;
  --commentspantext:#65676b;
  --theme-switcher-primary: #fff;
  --themeswitcherBg: #d4d8dd;
  --c-text-secondary: #737374;
  --c-bg-button:#fff;
  --postaction-button:rgb(229, 231, 235);
  --secondary-hover:silver;
  --profilebanner:#d4d8dd;
  --alertsuccess:#d6e9c6;
  --avatar-bg: #e2e5e9;   /* matches hierarchy line */
  --avatar-inner: #aaa;   /* inner user silhouette */
  --friend-btn-profile:#ffffffab;
  --dangeralert:#ebccd1;
}
:root[data-theme="light"]
{
  --bg-container:#f6f2f3;
  --bg-post:#f9f9f9;
  --bg-formcontrol:#fff;
  --textcolor:#000;
  --reversetextcolor:#fff;
  --inputcolor:inherit !important;
  --commentinputbg:#f1f2f5 !important;
  --bottomlineborder:1px solid #e1e1e1;
  --skeleton-base: #f0f0f0;
  --skeleton-highlight: #e6e6e6;
  --linkbluecolor:#007bff;
  --orangebg: orange;
  --redbg: red;
  --commentbackgroundbg:#E5E4E2;
  --friendCardBg:#fff;
  --profiletabbg:#ffffff;
  --profiletabtext:#444;
  --headermenuIconcolor:#F85050;
  --secondarybuttonbg: -webkit-linear-gradient(top,#fcfcfc 0%,#f5f5f5 100%);
  --smalltextnote:#777;
  --tagboxbg:#f0f2f5;
  --commentspantext:#65676b;
  --theme-switcher-primary: #fff;
  --themeswitcherBg: #d4d8dd;
  --c-text-secondary: #737374;
  --c-bg-button:#fff;
  --postaction-button:rgb(229, 231, 235);
  --secondary-hover:silver;
  --profilebanner:#d4d8dd;
  --alertsuccess:#d6e9c6;
  --avatar-bg: #e2e5e9;   /* matches hierarchy line */
  --avatar-inner: #aaa;   /* inner user silhouette */
  --friend-btn-profile:#ffffffab;
  --dangeralert:#ebccd1;
}
/*Dark*/
:root[data-theme="dark"]
{
  --bg-container:#1C1C1D;
  --bg-post:#252728;
  --bg-formcontrol:#333334;
  --textcolor:#fff !important;
  --reversetextcolor:#000;
  --inputcolor:#B0B3B8 !important;
  --commentinputbg:#333334 !important;
  --bottomlineborder:1px solid grey;
  --skeleton-base: #2a2a2b;
  --skeleton-highlight: #3a3a3c;
  --linkbluecolor:#007bff;
  --orangebg: orange;
  --redbg: red;
  --commentbackgroundbg:#333334 !important;
  --friendCardBg:#333334;
  --profiletabbg:inherit;
  --profiletabtext:#fff;
  --headermenuIconcolor:#fff;
  --secondarybuttonbg: rgba(255, 255, 255, .1);
  --smalltextnote:lightgrey;
  --tagboxbg:rgba(255, 255, 255, .1);
  --commentspantext:#EBF5FF;
  --theme-switcher-primary: #eee;
  --themeswitcherBg: #1C1C1D;
  --c-text-secondary: #d3d5db;
  --c-bg-button:#494a50;
  --postaction-button:#494a50;
  --secondary-hover:rgba(255, 255, 255, .1);
  --profilebanner:#333334;
  --alertsuccess:#35aa47;
  --avatar-bg: #2a3645;   /* darker neutral background */
  --avatar-inner: #ddd;   /* lighter inner silhouette for contrast */
  --friend-btn-profile:#d6d9dd;
  --dangeralert:#a94442;
}
.theme-switcher {
  background-color: var(--themeswitcherBg);
  border-radius: 10px !important;
  display: flex;
  padding: 1px 3px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.theme-switcher .slider {
  display: block;
  position: absolute;
  z-index: 1;
  width: calc((100% - 6px) / 2);
  top: -6px;
  transform: translatex(-110%);
  bottom: -5px;
  border-radius: 6px !important;
  transition: 0.15s ease, transform 0.25s ease-out;
  background-color: var(--c-bg-button);
  margin:10px 0px !important;
}
#comment_input
{
  resize:none !important;
}
.actlik{
  color: #428bca !important;
  font-weight: 700;
}
.dctlik{
  color: #F3565D !important;
  font-weight: 700;
}
.theme-switcher input {
  display: none;
}
.theme-switcher input:nth-of-type(1):checked ~ .slider {
  transform: translateX(0);
}
.theme-switcher input:nth-of-type(2):checked ~ .slider {
  transform: translateX(100%);
}
.theme-switcher label {
  position: relative;
  z-index: 2;
  width: calc(100% / 2);
  color: var(--c-text-secondary);
}
.theme-switcher label span {
  padding: 8px 0;
  border-radius: 6px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
}
.theme-switcher label svg {
  display: inline-block;
  margin-right: 0.5rem;
  width: 20px;
}
.alert-danger
{
  background-color: var(--dangeralert);
  color: var(--textcolor);
}
.guest-text
{
  font-size:18px; font-weight:bold; text-align:center;
}
.fftext
{
  color: var(--commentspantext);
  padding: 10px;
}
.form-control
{
  background: var(--bg-formcontrol);
  color: var(--textcolor) !important;
}
.has-error .form-control
{
  color: var(--reversetextcolor) !important;
}
.select2-container-multi .select2-choices .select2-search-field input
{
  background: var(--bg-formcontrol);
  color: var(--textcolor) !important;
}
.select2-container .select2-choice
{
  background: var(--bg-formcontrol);
}
.has-error .form-control {
    color: #000 !important;
}
.buzz-tag-box 
{
  background: var(--tagboxbg);
}
#header_main .container
{
  background: var(--bg-post);
  color: var(--textcolor);
  border-bottom: var(--bottomlineborder);
  border-top: var(--bottomlineborder);
}
.privilizehr
{
  margin:0;border-top:1px solid grey;margin-bottom:5px;margin-top:10px;
}
.publicform_header
{
  color:var(--textcolor);
  background: var(--secondarybuttonbg);
}
.buzz-container strong, .buzz-container b, a
{
  color:var(--textcolor);
}
.alert-success strong
{
  color: var(--textcolor);
}
.alert-success
{
  background-color: var(--alertsuccess);
  border-color: var(--alertsuccess);
  color: var(--textcolor);
}
button, input, optgroup, select, textarea
{
  color:var(--inputcolor);
  background: var(--bg-formcontrol);
}
.headerfIcon, #site_title
{
  color:var(--headermenuIconcolor);
}
/*.imgs-grid .imgs-grid-image::before
{
  background-color: var(--bg-post) !important;
}*/
.buzz-container
{
  background: var(--bg-container);
}
.post {
  padding: 10px 10px 10px 10px;
  margin: 15px 0;
  border-radius: 10px !important;
  background: var(--bg-post);
  color:var(--textcolor);
  box-shadow: 0px 0px 6px #00000038;
}
.breadcrumb > li + li::before
{
  color: var(--textcolor);
}
.ad-slot-row {
  display: flex;
  gap: 10px;
}
.ad-slot-row > div {
  flex: 1;
}
.nopadding
{
  padding-right: 0px;
  padding-left: 0px;
}
.threepadding
{
  padding-right: 3px;
  padding-left: 3px;
}
.story-thumbnail5 {
  width: 120px;
  height: 120px;
  border-radius: 50% !important;
  background: var(--bg-post);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-right: 5px;
  font-size: 22px !important;
}
.story-thumbnail5 img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* Optional */
  border-radius: 50%;
}
.btn:hover
{
  color:var(--textcolor);
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--skeleton-base) 25%,
    var(--skeleton-highlight) 37%,
    var(--skeleton-base) 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton-circle { border-radius: 50%; }
.skeleton-text   { border-radius: 6px; }
.skeleton-image  { border-radius: 8px; height: 180px; }

#loading
{
  line-height: 32px;
}
.image-grid-modal .download-btn {
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  z-index: 9999;
}
.image-grid-modal .download-btn:hover {
  background: #145cc3;
}
.float-right
{
  float: right;
}
.search-container {
    position: relative; /* Allows absolute positioning of child elements */
    display: inline-block; /* Adjusts container size to content */
  }

  .search-input {
    padding-right: 30px; /* Makes space for the clear icon */
  }

  .clear-icon {
    position: absolute;
    right: 10px; /* Adjust as needed for spacing */
    top: 50%;
    transform: translateY(-50%); /* Vertically centers the icon */
    cursor: pointer;
    display: none; /* Initially hide the icon */
    color: red; /* Adjust icon color */
    font-size: 35px;
  }
  .buzz-info-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-formcontrol);
}

.buzz-info-table tr {
  border-bottom: 1px solid #f4f4f4;
}

.buzz-info-table tr:last-child {
  border-bottom: none;
}

.buzz-info-table td {
  padding: 10px 8px;
  vertical-align: top;
}

.buzz-info-table h5 {
  font-size: 16px;
  margin: 20px 0 10px;
  color: #333;
}

.buzz-info-table a {
  color: var(--linkbluecolor);
  text-decoration: none;
}
.buzz-info-table a:hover {
  text-decoration: underline;
}

.badge {
  display: inline-block;
  padding: 5px 9px;
  height: 26px;
  border-radius: 12px;
  background-color: #eee;
  color: black;
  margin-right: 4px;
  font-size: 16px !important;
  font-weight: 700;
  margin: 2px;

}
.non-edit-title
{
  font-size: 21px;
  font-weight: 600;
  color: chocolate;
}
.suspended-post
{
  background: var(--redbg);
  color: white;
  border-radius: 4px !important
}
.adminapproval-post
{
  background: var(--orangebg);
  color: white;
  border-radius: 4px !important
}
.src_module
{
  background: var(--orangebg);
  color: white;
  border-radius: 4px !important
}
.custom-select {
  height: 34px;               /* 🔹 force consistent height */
  padding: 4px 12px !important;
  font-size: 14px;
  line-height: 1.4;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.filters-bar {
  display: flex;
  flex-wrap: wrap; /* allow them to wrap on small screens */
  gap: 6px;        /* spacing between items */
  margin-bottom: 10px;
}

.filters-bar select {
  flex: 1 1 auto; /* allow selects to grow/shrink evenly */
  min-width: 120px; /* prevent shrinking too much */
}

@media (max-width: 576px) {
  .filters-bar {
    flex-direction: column; /* stack on small screens */
    align-items: stretch;
  }

  .filters-bar select {
    width: 100%; /* full width on mobile */
  }
}
#searchtext-error
{
  font-size: 13px;
}
#sort
{
  margin-bottom: 2px !important;
}
.label-small
{
  line-height: 17px !important;
  margin-bottom: 10px;
}
.redcolor
{
  color:red !important;
}
.friend-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--friendCardBg);
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  gap: 12px;
  transition: all 0.2s ease;
  margin-bottom: 10px;
}
.friend-card .dropdown {
  flex-shrink: 0;
}

.friend-card .friend-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.friend-card img {
  height: 70px;
  width: 70px;
  /*object-fit: cover;*/
  border-radius: 50%;
  flex-shrink: 0;
}

.friend-card .user-name {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--textcolor);
  line-height: 1.2;
  word-break: break-word;
  white-space: normal;
}
.friend-card .user-name:hover
{
  color:var(--textcolor);
}

.friend-card .dropdown {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .friend-card {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
  }

  .friend-card .friend-info {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
  }

  .friend-card .user-name {
    font-size: 15px;
  }
  .mt-50
  {
    margin-top: 0px !important;
  }
}
.d-none{
  display:none !important;

}
.mt-50
{
  margin-top: 50px;
}
.likeicon
{
  height: 18px;
}
.breadcrumb
{
  margin-bottom:0px !important;
}
.dreadcrumbdiv
{
  padding-left: 0px;
}
.popular-users-mobile {
        display: none;
  position: relative;
  overflow: hidden;
  padding: 10px;
}
@media (max-width: 768px) {
  .popular-users-mobile {
    display: block;
  }
  .story-thumbnail5 {
    width: 75px;
    height: 75px;
    min-width: 75px;
  }
}
.likedislike_button .thumbsup i
{
  color:black;
  margin-right: 5px;
}
.likedislike_button .thumbsdown
{
  color:black;
}
.user-slider {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 5px;
}

.user-card {
  min-width: 100px;
  max-width: 100px;
  border-radius: 8px !important;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.story-thumbnail {
  width: 100px;
  height: 150px;
  background-size: cover;
  background-position: center;
  border-radius: 8px !important;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  font-size: 22px !important;
}

.profile-ring {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 32px;
  height: 32px;
  border: 2px solid #2196F3;
  border-radius: 50%;
  overflow: hidden;
  background: white;
}

.profile-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-name {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  padding: 4px 6px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: #fff;
  font-size: 12px;
  text-align: center;
  line-height: 1.2;
  max-height: 3em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scroll-arrow {
  position: absolute;
  top: 56%;
  transform: translateY(-50%);
  background: var(--bg-formcontrol);
  border: none;
  font-size: 20px;
  z-index: 1;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.scroll-arrow.left {
  left: 0;
}

.scroll-arrow.right {
  right: 0;
}
.love, .angry
{
  color:#FF5757 !important;
}
.haha, .wow
{
  color:#F9CF00 !important;
}
.like
{
  color:#3E93F8 !important;
}
.reacted
{
  font-weight: 700;
  position: relative;
  top: -3px;
}
.profile-img {
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  font-size:8px;
  max-width: 40px;
}
.page-no-image
{
  height: 70px;
  width: 70px;
}
.profile-no-img
{
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.title-text {
  font-weight: 600;
  font-size: 18px !important;
  color: #f85050 !important;
}

.description-text {
  margin-bottom: 10px;
}

.tags a {
  margin-right: 5px;
  color: var(--linkbluecolor);;
  text-decoration: none;
}

.like_button {
  background: none;
  border: none;
  color: var(--linkbluecolor);
  cursor: pointer;
}
#add-follow, #add-friend
{
  font-size:20px;
}
.pt-pb-10 {
  padding-bottom: 10px;
  padding-top: 10px
}
.pt-pb-20 {
  padding-bottom: 25px;
  padding-top: 20px
}

.pt-pb-8 {
  padding-bottom: 8px;
  padding-top: 8px
}

.pl-pr-15 {
  padding-left: 15px;
  padding-right: 15px
}

.pt-15 {
  padding-top: 15px;
}

.pl-0 {
  padding-left: 0;
}

.pr-0 {
  padding-right: 0;
}
.pr-5{
  padding-left: 5px;
}
.p-0 {
  padding: 0 !important;
}
.mb-10 {
  margin-bottom: 10px;
}
.mt-10 {
  margin-top: 10px;
}
.mt-15 {
  margin-top: 15px;
}
.mt-20 {
  margin-top: 20px;
}

.media {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.name-time {
  line-height: 1.2;
  margin-left: 10px;
  font-size: 16px;
}

.post-text {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 17px;
  line-height: 24px;
}

.overlay-count {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 10px;
  font-weight: bold;
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  border: 1.2px solid #fff;
}

.actions {
  border-top: var(--bottomlineborder);
  padding-top: 10px;
  margin-top: 10px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}

.actions button,
.comments-btn,
.share-btn {
  background: none;
  border: none;
  color: var(--textcolor);
  font-weight: 500;
  font-size: 14px;
}

.actions button:hover,
.comments-btn:hover,
.share-btn:hover,
.btn-link:hover {
  color: #F85050;
}

.comments-btn,
.share-btn {
  font-weight: 500;
}

.actions button i {
  color: #F85050;
  padding-right: 2px;
  font-size: 18px;
}
/*.likedislike-default
{
  color: var(--textcolor) !important;
}*/
.active-like
{
  color: #428bca !important;
  font-size: 20px;
}
.active-dislike
{
  color: #F3565D !important;
  font-size:20px;
}
.img-responsive-custom {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  padding: 5px;
}

.square-box {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}

.image-gallery .col-xs-4,
.image-gallery .col-xs-6,
.image-gallery .col-xs-12 {
  padding: 5px;
}

.row-no-gutter>[class*='col-'] {
  padding-left: 0;
  padding-right: 0;
}

.position-relative {
  position: relative;
}

.image-gallery .col-xs-12,
.image-gallery .col-xs-6,
.image-gallery .col-xs-4 {
  padding: 0;
}
.search-sort-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.search-block .search-inner {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.search-block input {
  flex: 1;
  min-width: 160px;
}

.search-block .btn {
  flex-shrink: 0;
}

.sort-block {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
}

@media (min-width: 768px) {
  .sort-block {
    margin-top: 0; /* remove gap in desktop */
    justify-content: flex-end;
  }
}
.m-0 {
  margin: 0 !important;
}
.reaction-icon
{
  font-size: 20px;
}
.likedislike-count
{
  text-decoration: none !important;
}
.reaction-style
{
  display: inline-block;
  position: relative;
  font-size: 20px;
  color:red !important;
}
.count-likes {
  margin-left: 3px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.time {
  font-size: 14px;
}

.count {
  cursor: pointer;

}

.list-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.list-group-item img {
  margin-right: 10px;
}



.post-modal {
  border-radius: 10px !important;
  overflow: hidden;
}

.post-tabs>li>a {
  border: none !important;
  background: none !important;
  font-weight: 600;
  color: var(--commentspantext);
  padding: 8px 15px;
  cursor: pointer;
  font-size: 20px;
}

.post-user-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
  border-radius: 6px;
  transition: background 0.2s;
  margin-bottom: 5px;
  color: var(--textcolor);
}

.post-user-item:hover {
  color: var(--linkbluecolor);
  background-color: var(--secondarybuttonbg);
}

.post-avatar {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.comment-avatar {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

.post-user-name {
  flex-grow: 1;
  font-weight: 500;
  margin-left: 10px;
}

.post-action-btn {
  font-weight: 600;
  padding: 3px 10px;
}

.popup-close {
  position: absolute;
  right: 10px;
  top: 19px;
  text-align: center;
  z-index: 999;
  opacity: .6 !important;
  border-radius: 50% !important;
  border: 2px solid var(--textcolor);
}

.All {
  padding: 12px !important;
  cursor: pointer;
}

.max-500 {
  max-width: 500px;
}

.position-relative.col-xs-12 .overlay-count {
  display: none;
}

.likedislike-popup, .share-popup, .reaction-popup {
  display: none;
  position: absolute;
  background: var(--skeleton-highlight);
  /* border: 1px solid #ccc; */
  padding: 8px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  bottom: 40px;
  /* top: -40px; */
}

.share-popup {
  right: 0;
  padding-top: 13px;
}

.likedislike-popup {
    display: flex;
    gap: 6px;
    z-index: 100;
    left:295px;
    padding: 10px 18px;
  }

  .cmnt-emoji{
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
  }
  .emoji-btn {
    width: 36px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
  }

  .cmnt-emoji:hover, .emoji-btn:hover {
    transform: scale(1.3);
  }

.share-buttons {
  font-size: 14px !important;
}
.share_button
{
  position: relative;
}

.emoji {
  cursor: pointer;
  font-size: 20px;
  transition: transform 0.2s ease-in-out;
  display: inline-block;
  margin: 5px;
}

.emoji:hover {
  transform: scale(1.3);
}

.m-10 {
  margin-left: -10px;
  margin-right: -10px;
}

.btn-link {
  color: var(--textcolor);
  font-size: 14px !important;
}
.btn-link:hover {
  color: #F85050 !important;
}
.modal {
  padding: 0 !important;
}

.pagesRow
{
  padding:5px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle !important;
}
.viewcomnts:hover
{
  text-decoration: none !important;
  color: var(--textcolor) !important;
}

.comments-section {
    /* max-height: 300px;
    overflow-y: auto; */
    padding: 15px 15px 0 ;
  }
   /* .fixed-comment
   {
    position: absolute;
    width: 96%;
    right: 10px;
    bottom: 10px;
   } */
  .comment, .comment-input {
    align-items: flex-start;
    display: flex;
  }
  .comment .bg-light {
    background-color: #f0f2f5 !important;
    display: inline-block;
    padding: 8px;
    border-radius: 8px;
  }
  .comment-input input {
    background-color: #f0f2f5;
    border: none;
    padding-left: 15px;
  }

  .comment-input {
  display: flex;
  align-items: flex-start;
  /* padding: 10px;
  background: #f1f2f5;
  border-radius: 20px; */
  /* margin-top: 15px; */
}

.comment-input .profile-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
}

.comment-input .input-container {
    flex: 1;
    position: relative;
    padding: 10px;
    background: var(--commentinputbg);
    border-radius: 20px !important; 
}

.comment-input textarea {
  width: 100%;
  resize: none;
  border: none;
  background: transparent;
  outline: none;
  padding: 8px 40px 8px 0;
  font-size: 14px;
  min-height: auto;
}

.comment-input .comment-icons {
  display: flex;
  gap: 8px;
  margin-top: 5px;
  color: #555;
  cursor: pointer;
}
.comment-icons i:hover {
  color: #F85050;
}

.comment-input .submit-btn {
  position: absolute;
  right: 10px;
  top: 16px;
  background: none;
  border: none;
  color: #007fd4;
  font-size: 16px;
}
.comment-input .submit-reply {
  position: absolute;
  right: 10px;
  top: 16px;
  background: none;
  border: none;
  color: #888;
  font-size: 16px;
}
.comment-gap
{
  padding-bottom: 100px;
  max-height: 400px;
  overflow-y: auto;
}
.comment-like-reply {
  display: flex;
  justify-content: space-between;
}
.comment-like {
background: #4B8DF8;
    color: #fff;
    border-radius: 50px !important;
    text-align: center;
    display: inline-block;
    width: 13px;
    height: 13px;
    position: relative;
    z-index: 9;
    vertical-align: middle;
    line-height: 1;
}
.comment-like i {
  font-size: 9px;
  
}
.comment-gap .post
{
  margin: 0 !important;
  border-radius: 0;
}
.likedislike-count:hover
{
  color: var(--textcolor) !important;
}
.max-650
{
  max-width: 650px;
}
.modal-footer
{
  border: 0 !important;
}
.postdel .modal-footer
{
  border-top: 1px solid #aaa !important;
}
#reportModal, #reactionModal
{
  z-index: 1050;
  border-radius:5px !important;
}
#reactionModal .modal-body
{
  max-height: 300px !important;
}
#reactionModal .nav-tabs > li.active
{
  border-bottom: 3px solid var(--linkbluecolor) !important;
  color: var(--linkbluecolor);;
  font-weight:600;
}
body.modal-open {
  padding-right: 15px; /* scrollbar width */
}
.adds-section
{
  margin-top: 17px;
}
.adds-section img {
  border: 1px solid #ddd;
}
.only-web
{
  display: block;
}
.only-tab
{
  display: none;
}
.only-mobile
{
  display: none;
}
@media screen and (min-width: 768px ) and (max-width: 991px) {
  .only-web {
    display: none;
  }
  .only-tab {
    display: flex;
    justify-content: space-evenly;
  }
  .only-mobile {
    display: none;
  }
  
}
@media screen and (max-width: 767px) {
  .only-web {
    display: none;
  }
  .only-tab {
    display: none;
  }
  .only-mobile {
    display: flex;
    justify-content: space-evenly;
  }
}
.active-reaction {
  font-weight: bold !important;
  color: #1877f2 !important; /* Facebook blue */
  font-size: 20px;
}
.sidebar-icons-font
{
  font-size:16px;
  margin-left: 5px;

}
.buzz_admintext
{
  font-size: 20px;font-weight: 600;color: chocolate;
}
.privilize:hover
{
  color: var(--linkbluecolor);
  background-color: var(--secondarybuttonbg);
  border-radius: 5px !important;
}
  .buzz-mini-profile {
  border-bottom: var(--bottomlineborder);
  transition: background 0.2s;
}
.buzz-mini-profile.last {
  border-bottom: none;
  margin-bottom: 15px;
}
.buzz-mini-profile:hover {
  color: var(--linkbluecolor);
  background-color: var(--secondarybuttonbg);
  border-radius: 5px !important;
  text-decoration: none;
}

.buzz-mini-text .fw-bold {
  font-size: 15px;
  margin-bottom: 2px;
}

.follow-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.d-flex {
  display: flex !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-center {
  align-items: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.me-2 {
  margin-right: 0.5rem !important;
}
.sidebar-text-muted
{
  font-size: 13px;
  color: #777;
}
.feed-box
{
  padding-right: 0px;
}
.btn-primary
{
  color: #fff !important;
  background-color: #0d6efd;
  border-color: #0d6efd;
  border-radius: 5px !important;
  margin-top: -10px;
}
.btn-secondary
{
  border-radius: 5px !important;
}
.btn-unfriend
{
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
  border-radius: 5px !important;
}
.reject-request-btn
{
  font-size: 12px;
  margin-left:5px;
  border-radius: 5px !important;
}
.accept-request-btn
{
  font-size: 12px;
  border-radius: 5px !important;
}
.friend-icons-font {
  font-size: 18px;
}
.friend-card
{
    border: 1px #eee solid;
    padding: 15px 5px 5px 5px;
    border-radius: 15px !important;
    margin-bottom: 10px;
}
.row .friends-list .col-md-6
{
  padding-left: 5px !important;
  padding-right: 5px !important;
}
/* Tab base style */

.custom-tab-pills .nav-link {
  border: none;
  border-radius: 0;
  font-weight: 500;
  color: var(--profiletabtext);
  padding: 10px 20px;
  margin-right: 10px;
  background-color: transparent;
  transition: all 0.3s ease-in-out;
  position: relative;
}
@media (max-width: 768px) 
{
  .custom-tab-pills .nav-link 
  {
    padding: 10px 10px !important;
  }
  .tab-responsive 
  {
    font-size: 16px !important;
  }
  .request-tab-responsive 
  {
    font-size: 12px !important;
  }
}
/* Hover effect */
.custom-tab-pills .nav-link:hover {
  color: var(--linkbluecolor);;
  background-color: var(--secondarybuttonbg);
}

/* Active state (li.nav-item.active .nav-link) */
.custom-tab-pills .nav-item.active .nav-link {
  color: var(--linkbluecolor);;
  background-color: var(--profiletabbg);
  border-bottom: 3px solid var(--linkbluecolor) !important;
  font-weight: 600;
}
/* ===== Search Box ===== */
#friendSearch {
  border: 1px solid #e4e6eb !important;
  border-radius: 8px !important;
  padding: 8px 30px !important;
  font-size: 14px !important;
  transition: 0.3s !important;
}
@media (min-width: 768px) {
#friendSearch {
  margin-top: -45px !important;
  width: 35%;
  float: right;
}
}
.search-input {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23888" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>') 
  no-repeat 10px center;
  background-size: 18px;
  padding-left: 35px;
  border: 1px solid #e4e6eb;
  border-radius: 8px;
  height: 38px;
  font-size: 14px;
}
#friendSearch:focus {
  outline: none !important;
  border-color: #df1573  !important;
  box-shadow: 0 0 5px rgba(24, 119, 242, 0.3) !important;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    border: 0px solid #ddd !important;
    color: var(--textcolor);
    background-color: #ffffff00;
}
.nav-tabs {
    border-bottom: 0px solid #ddd !important;
}
.nav-tabs>li>a, .nav-pills>li>a {
    font-size: 17px;
}
/* ===== Requests Section (3rd Section - Different Style) ===== */
.requests-box {
  background: #f9f9f9;
  border: 1px solid #e4e6eb;
  border-radius: 10px;
  padding: 15px;
  margin-top: 15px;
}
/* Requests Sub Tabs - Button Style */
.custom-tab-pills-requests {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
  border-bottom: none;
}
.custom-tab-pills-requests .nav-link {
  color: #555;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 14px;
  transition: all 0.3s ease;
}
.custom-tab-pills-requests .nav-item.active {
   color: var(--linkbluecolor);;
  background-color: var(--profiletabbg);
  border-bottom: 3px solid var(--linkbluecolor) !important;
}
.custom-tab-pills-requests .nav-link:hover {
  background: #f0f2f5;
}
.username{
  font-size: 18px;
}
.tag-fill
{
  margin-bottom:-2px;
}
.time{
  font-size:12px;
}
.profile-banner {
      background-color: var(--profilebanner);
      padding-top: 20px;
      padding-bottom: 20px;
      position: relative;
      display: flex;
      align-items: center;
    }
    .banner-title-text
    {
      text-align: center;
      color: var(--textcolor);
    }
    .profile-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0 2rem;
    }
    .profile-left {
      display: flex;
      align-items: center;
    }
    .profile-pic {
      width: 140px;
      height: 140px;
      border-radius: 50% !important;
      border: 4px solid #fff;
      object-fit: cover;
    }
    .profile-info {
      margin-left: 20px;
    }
    .profile-info h1 {
      margin: 0;
      font-weight: 600;
      font-size: 24px;
    }
    .profile-tabs {
      border-top: 1px solid #ddd;
      background: var(--bg-formcontrol);
      /*position: sticky;*/
      top: 0;
      /*z-index: 100;*/
    }
    .profile-action-buttons button {
      margin-left: 10px;
      border-radius: 5px !important;
    }
    .btn-danger {
      color: #fff !important;
    }
    @media (max-width: 768px) {
      .profile-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      /*.profile-left {
        flex-direction: column;
      }*/
      .profile-info {
        margin-left: 0;
        margin-top: 10px;
      }
      .profile-action-buttons {
        gap: 15px;
        display: flex;
        flex-direction: column;
      }
      .text-muted
      {
        margin: 0 0 20px 10px;
      }
      .mobilepostslinks .text-muted
      {
        margin: 0 0 0px 5px;
      }
      .custom-tab-pills .nav-link
      {
        padding:10px 8px;
      }
      .nav-tabs > li > a, .nav-pills > li > a
      {
        font-size:14px;
      }
      .profile-info h1 {
        font-size: 17px;
      }
      .likedislike-popup
      {
        left:125px;
      }
    }
    .text-muted
    {
      font-size: 14px;
      color: var(--textcolor);
    }
    /* Shared Scroll Behavior for Both Sidebars */
    .scrollable-sidebar {
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    position: sticky;
    top: 80px;
    padding-right: 0;
    padding-left: 0;

    /* Firefox hidden scrollbar */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent; /* initially hidden */
    transition: scrollbar-color 0.3s ease;
  }

  /* Default hidden (webkit browsers) */
  .scrollable-sidebar::-webkit-scrollbar {
    width: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .scrollable-sidebar::-webkit-scrollbar-track {
    background: transparent;
  }
  .scrollable-sidebar::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 6px;
  }

  /* Show on hover */
  .scrollable-sidebar:hover::-webkit-scrollbar,
  .scrollable-sidebar:active::-webkit-scrollbar {
    opacity: 1;
  }

  /* Light Mode thumb */
  :root[data-theme="light"] .scrollable-sidebar:hover::-webkit-scrollbar-thumb {
    background: #c1c1c1;
  }
  :root[data-theme="light"] .scrollable-sidebar:hover::-webkit-scrollbar-thumb:hover {
    background: #999;
  }

  /* Dark Mode thumb */
  :root[data-theme="dark"] .scrollable-sidebar:hover::-webkit-scrollbar-thumb {
    background: #2a3645;
  }
  :root[data-theme="dark"] .scrollable-sidebar:hover::-webkit-scrollbar-thumb:hover {
    background: #3c4a5c;
  }

  :root[data-theme="dark"] .nouser-svg
  {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 64 64'%3E%5C %3Ccircle cx='32' cy='32' r='32' fill='%232a3645'/%3E%5C %3Ccircle cx='32' cy='24' r='12' fill='%23ddd'/%3E%5C %3Cpath d='M16,58c0-11,8-20,16-20s16,9,16,20' fill='%23ddd'/%3E%5C %3C/svg%3E");
  }
  :root[data-theme="light"] .nouser-svg
  {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 64 64'%3E%5C %3Ccircle cx='32' cy='32' r='32' fill='grey'/%3E%5C %3Ccircle cx='32' cy='24' r='12' fill='%23ddd'/%3E%5C %3Cpath d='M16,58c0-11,8-20,16-20s16,9,16,20' fill='%23ddd'/%3E%5C %3C/svg%3E");
  }

  /* Reset for mobile view */
  @media (max-width: 991px) {
    .scrollable-sidebar {
      max-height: none;
      position: static;
      overflow: visible;
    }
    .feed-box
    {
      padding-left: 0px;
    }
    .card-padding
    {
      padding-left: 0px;
      padding-right: 0px;
    }
    #add-follow, #add-friend {
      font-size: 14px;
    }
  }
  @media (max-width: 1024px) and (min-width: 768px)
  {
    .ipaddiv {
      display: flex;
      gap: 6px;
    }
  }
  .has-error
  {
    color: #a94442;
  }
  .report_spam_form
  {
    border: 1px solid #cfcfcf;
    padding: 10px;
    text-align: left;
  }
.cmnt-view-div
{
  max-height: 650px;
  overflow-y: scroll;
  background: var(--bg-post);
}
#reactionModal .nav-tabs
{
  font-size: 20px !important;
  color: #000;
  border-bottom: 1px solid #ddd !important;
}
.post-modal-body
{
  max-height: 350px;
  overflow-y: scroll;
}
.cmnt-texts
{
  color:#65676b;
  font-size:12px;
}
#buzz-loader-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.7);
  z-index: 9999;
  display: none;
}

#buzz-loader-overlay .spinner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: #333;
}

/*View page comments css*/
.comments-count
{
  color:var(--textcolor);
}
.aa0 .ah2 {
  flex-direction: column;
  display: flex;
  width: 100%;
  gap: 16px;
  justify-content: center;
  margin: 0 auto
}

.aa0 .ah2 .ah1 {
  line-height: 1;
  width: 100%;
  color: var(--textcolor);
  cursor: auto;
  font-size: 24px;
  letter-spacing: -.5px;
  padding: 4px 0 4px 0;
  font-weight: 700
}

.aa0 .ah2 .ah1:last-of-type {
  font-size: medium;
  text-align: center
}

.aa0 .ah2 .ah0 {
  min-width: 250px;
  border: 1px solid #ccc;
  border-radius: 10.5px !important;
  padding: 16px 0 12px 0
}

.af9 {
  display: flex;
  flex-direction: column;
  min-height: 16px;
  gap: 2px;
  margin: 0;
  padding: 0 16px;
  color: var(--textcolor);
}

.ag5 {
  display: flex;
  gap: 6px;
  position: relative
}

.af9 > .af7 > :not(.ag6,.ag8,.ag9):nth-child(n+2){
  margin-left: 44px
}

.af7 > :not(.ag6,.ag8,.ag9):nth-child(n+2){
  margin-left: 44px;
  padding-left: 4px
}


.af7 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative
}

.af7 .ag5 img{
  cursor: pointer;
  border-radius: 50%;
  margin-top: 4px;
  position: relative;
  box-shadow: 0 0 0 3px var(--bg-container);
  z-index: 10
}

.af9 > .af7 :nth-child(1) img{
  height: 36px;
  width: 44px
}

.af9 > .af7 :nth-child(n+2) img{
  height: 28px;
  width: 28px
}


.ac2 {
  display: flex;
  flex-direction: column;
  z-index: 6
}
.ac2 .ac4 {
  line-height: 16px;
  font-size: 15px;
  margin: 0;
  font-weight: 600;
  cursor: pointer;
  color: var(--textcolor)
}   

.ac2 .ac1 {
  display: flex;
  column-gap: 16px;
  flex-wrap: wrap;
  padding: 4px 0 0 16px
}

.ac2 .ac1 u {
  font-size: 12px;
  text-decoration: none;
  color: var(--commentspantext)
}

.ac2 .ac1 u:hover {
  text-decoration: underline;
  cursor: pointer
}            
.time:hover
{
  text-decoration: none !important;
  cursor: none !important;
}
.ac2 .ac1 :nth-child(2){
  font-weight: 700
}  

.ac2 .ac1 .ac0 {
  position: relative;
  top: -5px;
  z-index:10;
}

.ac2 .ac1 .ac0>span, .ricon {
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
  overflow: hidden;
  background-color: var(--bg-post);
  border-radius: 50%;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 0px var(--bg-post);
  top: 4px
}

.ac2 .ac1 .ac0 :nth-child(n+2) {
  z-index: 1001
}

.ac2 .ac1 .ac0 :nth-child(n+3) {
  z-index: 1000;
  left: -6px
}

.ac2 .ac1 .ac0 :nth-child(n+4) {
  z-index: 999;
  left: -12px
}

.ac2 .ac3 {
  margin: 0;
  line-height: 21.3328px;
  font-size: 14px;
  margin-top: 5px;
}

.ag6{
  position: absolute;
  background-color: #e2e5e9;
  display: flex;
  width: 2px;
  top: 12px;
  left: 16px;
  z-index: 3
}
.ag7{
  position: relative;
  z-index: 6;
  color: #65686c;
  font-size: 15px;
  line-height: 20px;
  display: block;
  font-weight: 600;
  background-color: var(--bg-post);
  box-shadow: -4px 0 0 0 var(--bg-container);
  margin-bottom: 6px;
  text-decoration: none;
  cursor: pointer
}
.ag9{
  position: absolute;
  height: 35px;
  width: 46px;
  border: 2px solid #e2e5e9;
  border-radius: 10.5px !important;
  left:-28px;
  top:-11px;
  z-index:1
}
.af7 .af7 .af7 .ag9,
.af7 .af7 .ag5 .ag9{
  left: -24px
}
.ag5 > .ag7 ~ .ag9 {
  top: -24px
}            
.ag8{
  position: absolute;
  height: 18px;
  width: 48px;
  background-color: var(--bg-post);
  border-radius: 10.5px !important;
  left: -26px;
  top: -15px;
  z-index: 2
}
.ac2 .ac5 {
  padding: 8px 12px;
  background: var(--commentbackgroundbg);
  border-radius: 9px !important;
  text-align: start
}
.af7 .af7 .af7 .ag8,
.af7 .af7 .ag5 .ag8{
  left: -22px
}
.ag5 > .ag7 ~ .ag8 {
  top: -39px
}

@media (max-width: 450px) {
  .af9,.af7 {
    gap: 6px
  }
  .ac2 .ac1 {
    row-gap: 2px
  }
  .ac2 .ac1 u {
    font-size: 14px
  }
  .ac2 .ac1 .ac0 {
    position: relative;
    top: -2px
  }
  .ac2 .ac1 .ac0>span {
    width: 16px;
    height: 16px;
    box-shadow: 0 0 0 0px var(--bg-post);
    top: 3px
  }
}
/*View page comments css*/
/*Mobile view Bottom menu*/
#buzz-mobile-nav {
  display: none;
}

@media (max-width: 991px) {
  #buzz-mobile-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55px;
    background: #fff;
    border-top: 1px solid #ccc;
    z-index: 9999;
  }

  #buzz-mobile-nav a {
    flex: 1;
    text-align: center;
    font-size: 18px;
    color: #555;
    text-decoration: none;
  }

   #buzz-mobile-nav .nav-icon-img {
    display: block;
    margin: 0 auto 3px auto;
    width: 22px;
    height: 22px;
    object-fit: contain;
  }

  #buzz-mobile-nav span {
    font-size: 11px;
    display: block;
    line-height: 1;
  }

  body {
    padding-bottom: 60px; /* To prevent content hiding behind nav */
  }
}
@media (max-width: 991px) {
  .logged-in-sidebar {
    display: none !important;
  }
}
.twolines-css
{
  -webkit-line-clamp: 2;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/*Mobile view Bottom menu*/
#reactionModal.modal, #reportModal.modal
{
  background-color: var(--bg-formcontrol);
}
#reportModal.modal table>tbody
{
  background-color: var(--bg-formcontrol);
  color: var(--textcolor);
}
  .dots-container {
      position: relative;
    }

    .three-dots-btn {
      background-color: var(--postaction-button);
      border-radius: 8px !important;
      padding: 8px 12px;
      cursor: pointer;
      font-size: 15px;
      border: none;
    }

    .dropdown2 {
      position: absolute;
      top: 45px;
      right: 0;
      background-color: var(--commentinputbg);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
      width: 200px;
      display: none;
      z-index: 10;
    }

    .dropdown2::before {
      content: "";
      position: absolute;
      top: -10px;
      right: 15px;
      border-width: 6px;
      border-style: solid;
      border-color: transparent transparent white transparent;
    }

    .dropdown2 ul {
      list-style: none;
      padding: 10px 0;
      margin: 0;
    }

    .dropdown2 ul li {
      padding: 10px 16px;
      display: flex;
      align-items: center;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .dropdown2 ul li:hover {
      background-color: var(--smalltextnote);
      color: var(--reversetextcolor);
    }

    .dropdown2 ul li i {
      margin-right: 10px;
    }
    #add-friend, #add-follow
    {
        font-size: 15px;
    }
}
/*Mobile view Bottom menu*/
  .friend-icon-wrapper {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
  }

  .friend-icon-wrapper .fa-user {
    font-size: 24px;
  }

  .friend-icon-wrapper .fa-check {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 10px;
    color: #333;
    background: #fff;
    border-radius: 50%;
  }
  .friend-btn-profile
  {
    background: var(--friend-btn-profile);
    border-radius: 5px !important;
    color:black;
  }

  /* Gallery Tab
  Container for the rows */
  .gallery-row {
    display: flex;
    flex-wrap: wrap;
    gap:3px;
  }

  /* Each image link */
  .gallery-item {
    display: flex;
    width: 24.6%;
    box-sizing: border-box;
    aspect-ratio: 1 / 1.1;
    overflow: hidden;
    border-radius: 8px !important;
  }
  /* Image styling */
  .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .gallery-message {
      flex: 1 0 100%;       /* force new row in flex container */
      text-align: center;
      padding: 15px;
      color: #666;
      font-weight: bold;
  }
  /* Tablet (portrait) — 2 per row */
  @media (max-width: 1024px) {
    .gallery-item {
      width: 49.7%;
    }
  }

  /* Mobile — 1 per row */
  @media (max-width: 600px) {
    .gallery-item {
      width: 100%;
    }
  }

  @media (max-width: 767px) {
      .page_working_hours_cls .radio_options label {
          display: block;
          margin: 0;
          padding: 4px 0;
      }

      .page_working_hours_cls .radio_options input[type="radio"] {
          margin-right: 6px;
      }
  }
  #buzzpagedetails h4 {
    font-size: 21px;
    font-weight: bold;
    color: #0073e6; /* nice blue */
    margin-top: 20px;
    margin-bottom: 10px;
    padding-bottom: 5px;
}
.label-linkblue {
    background-color: var(--linkbluecolor);
    color: #fff;   /* or black if you want contrast */
}
#likesReactionsTabs li.active > a {
    color: #007bff !important;
}


.ac1 .ab3 {
  /*likeIcon*/
  background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16.0001 7.9996c0 4.418-3.5815 7.9996-7.9995 7.9996S.001 12.4176.001 7.9996 3.5825 0 8.0006 0C12.4186 0 16 3.5815 16 7.9996Z' fill='url(%23paint0_linear_15251_63610)'/%3E%3Cpath d='M16.0001 7.9996c0 4.418-3.5815 7.9996-7.9995 7.9996S.001 12.4176.001 7.9996 3.5825 0 8.0006 0C12.4186 0 16 3.5815 16 7.9996Z' fill='url(%23paint1_radial_15251_63610)'/%3E%3Cpath d='M16.0001 7.9996c0 4.418-3.5815 7.9996-7.9995 7.9996S.001 12.4176.001 7.9996 3.5825 0 8.0006 0C12.4186 0 16 3.5815 16 7.9996Z' fill='url(%23paint2_radial_15251_63610)' fill-opacity='.5'/%3E%3Cpath d='M7.3014 3.8662a.6974.6974 0 0 1 .6974-.6977c.6742 0 1.2207.5465 1.2207 1.2206v1.7464a.101.101 0 0 0 .101.101h1.7953c.992 0 1.7232.9273 1.4917 1.892l-.4572 1.9047a2.301 2.301 0 0 1-2.2374 1.764H6.9185a.5752.5752 0 0 1-.5752-.5752V7.7384c0-.4168.097-.8278.2834-1.2005l.2856-.5712a3.6878 3.6878 0 0 0 .3893-1.6509l-.0002-.4496ZM4.367 7a.767.767 0 0 0-.7669.767v3.2598a.767.767 0 0 0 .767.767h.767a.3835.3835 0 0 0 .3835-.3835V7.3835A.3835.3835 0 0 0 5.134 7h-.767Z' fill='%23fff'/%3E%3Cdefs%3E%3CradialGradient id='paint1_radial_15251_63610' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='rotate(90 .0005 8) scale(7.99958)'%3E%3Cstop offset='.5618' stop-color='%230866FF' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%230866FF' stop-opacity='.1'/%3E%3C/radialGradient%3E%3CradialGradient id='paint2_radial_15251_63610' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='rotate(45 -4.5257 10.9237) scale(10.1818)'%3E%3Cstop offset='.3143' stop-color='%2302ADFC'/%3E%3Cstop offset='1' stop-color='%2302ADFC' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='paint0_linear_15251_63610' x1='2.3989' y1='2.3999' x2='13.5983' y2='13.5993' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2302ADFC'/%3E%3Cstop offset='.5' stop-color='%230866FF'/%3E%3Cstop offset='1' stop-color='%232B7EFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E")
}

.ac1 .ab2 {
  /*loveIcon*/
  background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg clip-path='url(%23clip0_15251_63610)'%3E%3Cpath d='M15.9963 8c0 4.4179-3.5811 7.9993-7.9986 7.9993-4.4176 0-7.9987-3.5814-7.9987-7.9992 0-4.4179 3.5811-7.9992 7.9987-7.9992 4.4175 0 7.9986 3.5813 7.9986 7.9992Z' fill='url(%23paint0_linear_15251_63610)'/%3E%3Cpath d='M15.9973 7.9992c0 4.4178-3.5811 7.9992-7.9987 7.9992C3.5811 15.9984 0 12.417 0 7.9992S3.5811 0 7.9986 0c4.4176 0 7.9987 3.5814 7.9987 7.9992Z' fill='url(%23paint1_radial_15251_63610)'/%3E%3Cpath d='M7.9996 5.9081c-.3528-.8845-1.1936-1.507-2.1748-1.507-1.4323 0-2.4254 1.328-2.4254 2.6797 0 2.2718 2.3938 4.0094 4.0816 5.1589.3168.2157.7205.2157 1.0373 0 1.6878-1.1495 4.0815-2.8871 4.0815-5.159 0-1.3517-.993-2.6796-2.4254-2.6796-.9811 0-1.822.6225-2.1748 1.507Z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3CradialGradient id='paint1_radial_15251_63610' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='matrix(0 7.9992 -7.99863 0 7.9986 7.9992)'%3E%3Cstop offset='.5637' stop-color='%23E11731' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23E11731' stop-opacity='.1'/%3E%3C/radialGradient%3E%3ClinearGradient id='paint0_linear_15251_63610' x1='2.3986' y1='2.4007' x2='13.5975' y2='13.5993' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FF74AE'/%3E%3Cstop offset='.5001' stop-color='%23FA2E3E'/%3E%3Cstop offset='1' stop-color='%23FF5758'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_15251_63610'%3E%3Cpath fill='%23fff' d='M-.001.0009h15.9992v15.9984H-.001z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")
}

.ac1 .ab1 {
  /*hahaIcon*/
  background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg clip-path='url(%23clip0_15251_63610)'%3E%3Cpath d='M15.9953 7.9996c0 4.418-3.5816 7.9996-7.9996 7.9996S-.004 12.4176-.004 7.9996 3.5776 0 7.9957 0c4.418 0 7.9996 3.5815 7.9996 7.9996Z' fill='url(%23paint0_linear_15251_63610)'/%3E%3Cpath d='M15.9973 7.9992c0 4.4178-3.5811 7.9992-7.9987 7.9992C3.5811 15.9984 0 12.417 0 7.9992S3.5811 0 7.9986 0c4.4176 0 7.9987 3.5814 7.9987 7.9992Z' fill='url(%23paint1_radial_15251_63610)'/%3E%3Cpath d='M15.9953 7.9996c0 4.418-3.5816 7.9996-7.9996 7.9996S-.004 12.4176-.004 7.9996 3.5776 0 7.9957 0c4.418 0 7.9996 3.5815 7.9996 7.9996Z' fill='url(%23paint2_radial_15251_63610)' fill-opacity='.8'/%3E%3Cpath d='M12.5278 8.1957c.4057.1104.6772.4854.623.9024-.3379 2.6001-2.5167 4.9012-5.1542 4.9012s-4.8163-2.3011-5.1542-4.9012c-.0542-.417.2173-.792.623-.9024.8708-.237 2.5215-.596 4.5312-.596 2.0098 0 3.6605.359 4.5312.596Z' fill='%234B280E'/%3E%3Cpath d='M11.5809 12.3764c-.9328.9843-2.1948 1.6228-3.5841 1.6228-1.3892 0-2.6512-.6383-3.5839-1.6225a1.5425 1.5425 0 0 0-.016-.0174c.4475-1.0137 2.2-1.3599 3.5999-1.3599 1.4 0 3.1514.3468 3.5998 1.3599l-.0157.0171Z' fill='url(%23paint3_linear_15251_63610)'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.3049 5.8793c.1614-1.1485-.6387-2.2103-1.7872-2.3717l-.0979-.0138c-1.1484-.1614-2.2103.6388-2.3717 1.7872l-.0163.1164a.5.5 0 0 0 .9902.1392l.0163-.1164c.0846-.6016.6408-1.0207 1.2424-.9362l.0978.0138c.6016.0845 1.0207.6407.9362 1.2423l-.0164.1164a.5.5 0 0 0 .9903.1392l.0163-.1164ZM2.6902 5.8793c-.1614-1.1485.6387-2.2103 1.7872-2.3717l.0979-.0138c1.1484-.1614 2.2103.6388 2.3717 1.7872l.0164.1164a.5.5 0 1 1-.9903.1392l-.0163-.1164c-.0846-.6016-.6408-1.0207-1.2423-.9362l-.098.0138c-.6015.0845-1.0206.6407-.936 1.2423l.0163.1164a.5.5 0 0 1-.9902.1392l-.0164-.1164Z' fill='%231C1C1D'/%3E%3C/g%3E%3Cdefs%3E%3CradialGradient id='paint1_radial_15251_63610' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='matrix(0 7.9992 -7.99863 0 7.9986 7.9992)'%3E%3Cstop offset='.5637' stop-color='%23FF5758' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23FF5758' stop-opacity='.1'/%3E%3C/radialGradient%3E%3CradialGradient id='paint2_radial_15251_63610' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='rotate(45 -4.5272 10.9202) scale(10.1818)'%3E%3Cstop stop-color='%23FFF287'/%3E%3Cstop offset='1' stop-color='%23FFF287' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='paint0_linear_15251_63610' x1='2.396' y1='2.3999' x2='13.5954' y2='13.5993' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF287'/%3E%3Cstop offset='1' stop-color='%23F68628'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint3_linear_15251_63610' x1='5.1979' y1='10.7996' x2='5.245' y2='14.2452' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FF60A4'/%3E%3Cstop offset='.2417' stop-color='%23FA2E3E'/%3E%3Cstop offset='1' stop-color='%23BC0A26'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_15251_63610'%3E%3Cpath fill='%23fff' d='M-.002 0h16v15.9992h-16z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")
}

.ac1 .ab0 {
  /*wowIcon*/
  background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg clip-path='url(%23clip0_15251_63610)'%3E%3Cpath d='M15.9972 7.9996c0 4.418-3.5815 7.9996-7.9996 7.9996-4.418 0-7.9996-3.5816-7.9996-7.9996S3.5796 0 7.9976 0c4.4181 0 7.9996 3.5815 7.9996 7.9996Z' fill='url(%23paint0_linear_15251_63610)'/%3E%3Cpath d='M15.9973 7.9992c0 4.4178-3.5811 7.9992-7.9987 7.9992C3.5811 15.9984 0 12.417 0 7.9992S3.5811 0 7.9986 0c4.4176 0 7.9987 3.5814 7.9987 7.9992Z' fill='url(%23paint1_radial_15251_63610)'/%3E%3Cpath d='M15.9972 7.9996c0 4.418-3.5815 7.9996-7.9996 7.9996-4.418 0-7.9996-3.5816-7.9996-7.9996S3.5796 0 7.9976 0c4.4181 0 7.9996 3.5815 7.9996 7.9996Z' fill='url(%23paint2_radial_15251_63610)' fill-opacity='.8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.6144 10.8866c.159-1.8461 1.127-2.887 2.382-2.887 1.2551 0 2.2231 1.0418 2.3822 2.887.1591 1.8461-.7342 3.1127-2.3821 3.1127-1.648 0-2.5412-1.2666-2.3821-3.1127Z' fill='%234B280E'/%3E%3Cellipse cx='11.1978' cy='5.6997' rx='1.3999' ry='1.6999' fill='%231C1C1D'/%3E%3Cellipse cx='4.7979' cy='5.6997' rx='1.3999' ry='1.6999' fill='%231C1C1D'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3528 3.166a1.4744 1.4744 0 0 0-1.8591-.3279.4.4 0 1 1-.3976-.6941c.9527-.5457 2.1592-.333 2.8678.5056a.4.4 0 0 1-.6111.5163ZM5.4998 2.8381a1.4744 1.4744 0 0 0-1.859.3278.4.4 0 0 1-.6111-.5162c.7085-.8387 1.915-1.0514 2.8677-.5057a.4.4 0 0 1-.3976.6941Z' fill='%23E0761A'/%3E%3C/g%3E%3Cdefs%3E%3CradialGradient id='paint1_radial_15251_63610' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='matrix(0 7.9992 -7.99863 0 7.9986 7.9992)'%3E%3Cstop offset='.5637' stop-color='%23FF5758' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23FF5758' stop-opacity='.1'/%3E%3C/radialGradient%3E%3CradialGradient id='paint2_radial_15251_63610' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='rotate(45 -4.5262 10.9226) scale(10.1818)'%3E%3Cstop stop-color='%23FFF287'/%3E%3Cstop offset='1' stop-color='%23FFF287' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='paint0_linear_15251_63610' x1='2.3979' y1='2.3999' x2='13.5973' y2='13.5993' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF287'/%3E%3Cstop offset='1' stop-color='%23F68628'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_15251_63610'%3E%3Cpath fill='%23fff' d='M-.002 0h15.9992v15.9992H-.002z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")
}
.ac1 .ab4 {
  /*sadIcon*/
  background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg clip-path='url(%23clip0_15251_63610)'%3E%3Cpath d='M15.9943 8.0004c0 4.4181-3.5815 7.9996-7.9996 7.9996-4.418 0-7.9996-3.5815-7.9996-7.9996 0-4.418 3.5816-7.9995 7.9996-7.9995 4.4181 0 7.9996 3.5815 7.9996 7.9995Z' fill='url(%23paint0_linear_15251_63610)'/%3E%3Cpath d='M15.9973 7.9992c0 4.4178-3.5811 7.9992-7.9987 7.9992C3.5811 15.9984 0 12.417 0 7.9992S3.5811 0 7.9986 0c4.4176 0 7.9987 3.5814 7.9987 7.9992Z' fill='url(%23paint1_radial_15251_63610)'/%3E%3Cpath d='M15.9943 8.0004c0 4.4181-3.5815 7.9996-7.9996 7.9996-4.418 0-7.9996-3.5815-7.9996-7.9996 0-4.418 3.5816-7.9995 7.9996-7.9995 4.4181 0 7.9996 3.5815 7.9996 7.9995Z' fill='url(%23paint2_radial_15251_63610)' fill-opacity='.8'/%3E%3Cpath d='M12.3964 9.0861c0 1.1142-.3999 1.1142-1.1999 1.1142-.7999 0-1.2 0-1.2-1.1142 0-.8205.5373-1.4856 1.2-1.4856s1.1999.6651 1.1999 1.4856ZM5.9965 9.0861c0 1.1142-.4 1.1142-1.1999 1.1142-.8 0-1.2 0-1.2-1.1142 0-.8205.5373-1.4856 1.2-1.4856s1.2.6651 1.2 1.4856Z' fill='%231C1C1D'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.9946 11.2002c1.6447 0 2.3999 1.0936 2.3999 1.4122 0 .1095-.084.1877-.2248.1877-.3152 0-.752-.4-2.1751-.4s-1.8599.4-2.175.4c-.1409 0-.2249-.0782-.2249-.1877 0-.3186.7552-1.4122 2.3999-1.4122Z' fill='%234B280E'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.7861 6.3078a3.3942 3.3942 0 0 1 1.8777 1.0409.4.4 0 0 0 .5892-.5411 4.1944 4.1944 0 0 0-2.3202-1.2862.4.4 0 1 0-.1467.7864ZM5.206 6.3078a3.3946 3.3946 0 0 0-1.8777 1.0409.4.4 0 1 1-.5891-.5411 4.1946 4.1946 0 0 1 2.3202-1.2862.4.4 0 0 1 .1467.7864Z' fill='%23E0761A'/%3E%3Cg filter='url(%23filter0_i_15251_63610)'%3E%3Cpath d='M2.9952 11.2004c-.2647-.003-.435.1598-1.1536 1.3088-.3267.5231-.6468 1.0515-.6468 1.691 0 .994.8 1.7999 1.8 1.7999.9999 0 1.8008-.8 1.8008-1.7999 0-.6395-.32-1.1679-.6468-1.691-.7186-1.149-.8887-1.3118-1.1536-1.3088Z' fill='%2302ADFC' fill-opacity='.9'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CradialGradient id='paint1_radial_15251_63610' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='matrix(0 7.9992 -7.99863 0 7.9986 7.9992)'%3E%3Cstop offset='.5637' stop-color='%23FF5758' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23FF5758' stop-opacity='.1'/%3E%3C/radialGradient%3E%3CradialGradient id='paint2_radial_15251_63610' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='rotate(45 -4.5287 10.9195) scale(10.1818)'%3E%3Cstop stop-color='%23FFF287'/%3E%3Cstop offset='1' stop-color='%23FFF287' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='paint0_linear_15251_63610' x1='2.395' y1='2.4007' x2='13.5944' y2='13.6001' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF287'/%3E%3Cstop offset='1' stop-color='%23F68628'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_15251_63610'%3E%3Cpath fill='%23fff' d='M-.003.0009h15.9993v15.9984H-.003z'/%3E%3C/clipPath%3E%3Cfilter id='filter0_i_15251_63610' x='1.1948' y='11.2003' width='3.6006' height='4.7998' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='1.1999'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix values='0 0 0 0 0.278431 0 0 0 0 0.196078 0 0 0 0 0.952941 0 0 0 0.1 0'/%3E%3CfeBlend in2='shape' result='effect1_innerShadow_15251_63610'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E")
}
.ac1 .ab5 {
  /*angryIcon*/
  background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg clip-path='url(%23clip0_15251_63610)'%3E%3Cpath d='M15.9972 7.9996c0 4.418-3.5815 7.9996-7.9996 7.9996-4.418 0-7.9996-3.5816-7.9996-7.9996S3.5796 0 7.9976 0c4.4181 0 7.9996 3.5815 7.9996 7.9996Z' fill='url(%23paint0_linear_15251_63610)'/%3E%3Cpath d='M15.9973 7.9992c0 4.4178-3.5811 7.9992-7.9987 7.9992C3.5811 15.9984 0 12.417 0 7.9992S3.5811 0 7.9986 0c4.4176 0 7.9987 3.5814 7.9987 7.9992Z' fill='url(%23paint1_radial_15251_63610)'/%3E%3Cpath d='M15.9972 7.9996c0 4.418-3.5815 7.9996-7.9996 7.9996-4.418 0-7.9996-3.5816-7.9996-7.9996S3.5796 0 7.9976 0c4.4181 0 7.9996 3.5815 7.9996 7.9996Z' fill='url(%23paint2_radial_15251_63610)' fill-opacity='.8'/%3E%3Cpath d='M12.3955 9.0853c0 1.1142-.4 1.1142-1.2 1.1142-.7999 0-1.1999 0-1.1999-1.1143 0-.8205.5372-1.4856 1.1999-1.4856s1.2.6651 1.2 1.4857ZM5.9956 9.0853c0 1.1142-.4 1.1142-1.2 1.1142-.8 0-1.1999 0-1.1999-1.1143 0-.8205.5372-1.4856 1.2-1.4856.6626 0 1.1999.6651 1.1999 1.4857Z' fill='%231C1C1D'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.9936 11.5994c1.3257 0 2.3999.292 2.3999.8023 0 .4234-1.0742.3973-2.3999.3973-1.3256 0-2.3998.0261-2.3998-.3973 0-.5103 1.0742-.8023 2.3998-.8023Z' fill='%234B280E'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.3283 7.0331a.4.4 0 0 0-.5444-.1535c-.4415.2472-1.0866.4228-1.7434.5373-.6488.1132-1.2697.1604-1.6367.1691a.4.4 0 1 0 .0191.7997c.4037-.0096 1.0643-.0602 1.755-.1807.6828-.119 1.4354-.313 1.9969-.6275a.4.4 0 0 0 .1535-.5444ZM2.491 7.0331a.4.4 0 0 1 .5444-.1535c.4416.2472 1.0866.4228 1.7434.5373.6488.1132 1.2697.1604 1.6367.1691a.4.4 0 1 1-.019.7997c-.4038-.0096-1.0643-.0602-1.7551-.1807-.6827-.119-1.4353-.313-1.9968-.6275a.4.4 0 0 1-.1536-.5444Z' fill='%23BC0A26'/%3E%3C/g%3E%3Cdefs%3E%3CradialGradient id='paint1_radial_15251_63610' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='matrix(0 7.9992 -7.99863 0 7.9986 7.9992)'%3E%3Cstop offset='.8134' stop-color='%23FA2E3E' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23FA2E3E' stop-opacity='.1'/%3E%3C/radialGradient%3E%3CradialGradient id='paint2_radial_15251_63610' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='rotate(45 -4.5272 10.9202) scale(10.1818)'%3E%3Cstop stop-color='%23FFB169'/%3E%3Cstop offset='1' stop-color='%23FFB169' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='paint0_linear_15251_63610' x1='2.396' y1='2.3999' x2='13.5954' y2='13.5993' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFB169'/%3E%3Cstop offset='1' stop-color='%23FF5758'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_15251_63610'%3E%3Cpath fill='%23fff' d='M-.004 0h15.9993v15.9992H-.004z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")
}
.nouser-svg
{
  background-size: cover;
}
.main-avatar {
  height: 40px;
  background-size: cover;
}

.comnt-avatar {
  height: 32px;
  width: 32px;
  min-height: 32px;
  min-width: 32px;
  border-radius: 50% !important;
  box-shadow: 0 0 0 3px var(--bg-container); /* container background border */
  position: relative;
  display: inline-block;
}
.page-label {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 500;
  color: #222;
  text-align: center;
  line-height: 1.2;
  max-height: 2.4em;   /* allow 2 lines */
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  color: var(--textcolor);
}
.popular-pages-title {
  padding: 10px;
  font-weight: 600 !important;
  text-align: center;
  font-size: 25px !important;
  position: relative;
  color: var(--textcolor);
}

.popular-pages-title::after {
  content: "";
  width: 140px;
  height: 3px;
  background: #ee4e5e;
  display: block;
  margin: 15px auto 0;
}