/* Sceneslive-specific overrides layered on top of the Friendbook theme */

.comment-load-more {
  margin-top: 15px;
}

.settings-subgroup-heading {
  width: 100%;
  margin: 4px 0 10px;
  opacity: 0.6;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* partials/video-thumb paints the real thumbnail as a background-image on its
   <a> (the <img> inside is just a hidden lazysizes placeholder) — that only
   shows up if the <a> actually has a size, which .people-list-item (built for
   circular 44x44 avatars) doesn't give it. This wrapper gives the history
   page's video rows a fixed-size box to paint into instead. */
.history-thumb {
  width: 64px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
}

.history-thumb a.bg-size {
  width: 100%;
  height: 100%;
}

/* The theme's mobile fixed bottom bar (dark.css, max-width: 576px) only knows
   how to reposition its own stock 5 icons (home/add-friend/profile/message/
   notification) via `position: fixed; left: N%`. We added 3 more icons to
   that same row (upload, friends-last-seen, active-users) that the theme has
   no rule for, so on mobile they were left behind in normal document flow at
   the top instead of joining the fixed bar. Home is hidden on mobile (the
   brand logo already goes home), so this re-spaces the remaining 7 evenly
   across the bar instead. Loads after dark.css, so equal-specificity
   selectors here win by cascade order without needing !important. */
@media (max-width: 576px) {
  html header .header-section .header-left .brand-logo {
    width: 80px;
  }
  html header .header-section .header-left .brand-logo img {
    width: 100px;
  }

  /* dark.css (theme vendor CSS) unconditionally hides these badges below
     576px — undoes that so unread message/notification/friend-request
     counts still show on mobile (partials/header.ejs already hides a
     zero-count badge itself via .d-none, so this only restores badges that
     actually have something to show). */
  header .header-section .header-btn .count:not(.d-none) {
    display: inline-block !important;
  }

  /* Video watch page's title + favorite/flag button row (watch.ejs) — too
     cramped side-by-side on narrow screens, so stack them instead. */
  .video-watch-meta > .d-flex.align-items-center.justify-content-between {
    flex-direction: column;
    align-items: flex-start;
  }
  .video-watch-meta > .d-flex.align-items-center.justify-content-between > * {
    width: 100%;
    margin-bottom: 10px;
  }

  /* Channel topbar's message/friend/subscribe buttons (channel-view.ejs) —
     same problem, don't fit side-by-side on narrow screens. */
  .channel-topbar-actions {
    flex-direction: column;
    width: 100%;
  }
  .channel-topbar-actions > * {
    width: 100%;
    margin-bottom: 10px;
  }
  .channel-topbar-actions span {
    display: block;
  }
  .channel-topbar-actions form {
    width: 100%;
    display: block !important;
  }
  .channel-topbar-actions form .btn {
    width: 100%;
  }

  /* Comment header row (comment-item.ejs/video-comment-item.ejs) — username
     and date side-by-side don't fit on narrow screens. */
  .title:has(> .comment-user):has(> .comment-date) {
    flex-direction: column;
  }
  .title > .comment-user,
  .title > .comment-date {
    width: 100%;
  }
  .blog-single-detail .blog-comment .comment-wrapper .comment-box .media .media-body .title .comment-date {
    margin-left: 0;
  }

  .blog-comment > .d-flex > * {
    margin: 15px 0px 0px 0 !important
  }
  .comment-box > .media > *
  {
    margin: 0px 0px 15px 0 !important
  }
  .comment-box > .media, .blog-comment > .d-flex
  {
    flex-direction: column;
  }

  /* Messages page (messages.ejs) — unlike the theme's original client-side
     Bootstrap-tab messenger, ours does a real page navigation per
     conversation, so there's no .tab-pane.active for dark.css's mobile
     "width: 0 unless a tab-pane is active" trick to ever un-collapse. Swap
     manually between list view and thread view based on whether a
     conversation is actually open (messanger-section.thread-open). */
  .messanger-section:not(.thread-open) .chat-content {
    display: none;
  }
  .messanger-section.thread-open .chat-users {
    display: none;
  }
  html .messanger-section.thread-open .chat-content {
    width: 100%;
    height: 100vh;
  }
  .messanger-section .chat-content .tab-box .user-chat .user-title {
    margin-top: 60px;
  }

  /* The theme's fixed red bottom bar (dark.css, shown on mobile as a
     backdrop for the header icon row) sits on top of the message
     composer's send box here — hide it and the icons it's a backdrop for,
     only on the messages page. */
  body:has(.messanger-section) header .mobile-fix-menu {
    display: none;
  }
  body:has(.messanger-section) header .header-section .header-left > .btn-group {
    display: none;
  }
  body:has(.messanger-section) .option-list > li:not(.app-btn) {
    display: none;
  }

  /* The brand logo already goes home — the dedicated home icon is redundant
     on the cramped mobile bar. */
  header .header-section .header-btn.home-btn {
    display: none;
  }

  /* 7 icons now, evenly spaced the same way the original 8 were (each at
     N * 100/(count+1), so the gaps before/after the row match the gaps
     between icons). All fixed to the same 16px bottom offset — several of
     these got 16px explicitly below because the theme's own default (still
     in effect for the others) is 15px, which misaligned them by 1px. */
  header .header-section .header-btn.upload-btn {
    position: fixed;
    left: 10%;
    bottom: 16px;
  }
  header .header-section .header-btn.add-friend {
    position: fixed;
    left: 22.5%;
    bottom: 16px;
  }
  header .header-section .header-btn.friends-last-seen {
    position: fixed;
    left: 35%;
    bottom: 16px;
  }
  header .header-section .header-btn.active-users {
    position: fixed;
    left: 47.5%;
    bottom: 16px;
  }
  header .header-section .header-btn.profile-btn {
    position: fixed;
    left: 60%;
    bottom: 16px;
  }
  header .header-section .header-btn.message-btn {
    position: fixed;
    left: 72.5%;
    bottom: 16px;
  }
  header .header-section .header-btn.notification-btn {
    position: fixed;
    left: 85%;
    bottom: 16px;
  }

  /* Now that all 7 icons are `position: fixed` in the same bottom bar (above),
     any of them can end up underneath a sibling icon's open dropdown (the
     dropdown-content fills the screen on mobile) since header-left/
     header-right are separate flex containers with no shared stacking order.
     Bumping the currently-open one's own <li> above everything else fixes it
     regardless of which icon opened it. */
  header .header-section .header-btn:has(> .dropdown-menu.show) {
    z-index: 9999;
  }
}

.warning-reason-preview {
  font-size: 11px;
  opacity: 0.7;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portfolio-section > .empty-state {
  margin-top: -15px;
}

.custom-dropdown .dropdown-menu .dropdown-content .friend-list .media .media-body > div {
  margin-bottom: unset;
}

.custom-dropdown .dropdown-menu .dropdown-content .friend-list .media img {
  object-fit: cover;
}

.table {
  color: #eee;
}

.form-control {
  color: #b7b7b7
}

.form-control:focus {
  color: #b7b7b7
}

.logo-sec {
  max-width: 150px;
}

.channel-warnings {
  margin-bottom: 16px;
}

.channel-warning-item {
  margin-bottom: 8px;
  font-size: 13px;
}

.channel-warning-date {
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.7;
}

footer h1, footer h2, footer p {
  margin-bottom: 15px;
}

.nav-tabs .nav-link.active {
  border-color: #0b1a2c #0b1a2c #0b1a2c;
}

.nav-tabs {
  border-bottom: unset;
}

.nav-tabs .nav-link {
  border: 0 none;
}

header .header-section .profile-btn .media-body {
  margin-bottom: unset;
}

.channel-topbar-avatar .available-stats {
  position: absolute;
  right: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border: 3px solid #0b1a2c;
  border-radius: 100%;
  cursor: default;
}

.channel-topbar-avatar .available-stats.online {
  background-color: #2bc60c;
}

.channel-topbar-avatar .available-stats.offline {
  background-color: #ff2f25;
}

.sidebar-panel .sidebar-icon > li + li a {
  margin-top: 10px;
}

.dropdown-footer {
  padding: 12px 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.page-center > .title-box + .portfolio-section {
  margin-top: 30px;
}

.video-watch-meta h3 {
  margin-bottom: 0;
}

.ih-15.feather {
  top: 3px;
}

.theme-form .form-control {
  border-color: rgba(100, 117, 137, 0.4);
}

.blog-single-detail .blog-comment .comment {
  color: unset;
  margin-bottom: 0;
}

.channel-type-blurb {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.channel-type-name {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.channel-type-blurb p {
  margin: 0;
  font-size: 13px;
  opacity: 0.8;
}

#favorite-btn.active {
  background-color: #c51721;
  border-color: #c51721;
  color: #fff;
}

#favorite-btn.active svg {
  fill: #fff;
}

#flag-btn.active {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}

#flag-btn.active svg {
  fill: #fff;
}

#more-videos-container > .channel-sidebar-heading {
  padding-bottom: 20px;
}

/* The heading is now nested inside the "all videos" button's flex wrapper
   (more-videos.ejs), so the `>` rule above no longer matches — this
   restores the spacing via a descendant selector instead. */
#more-videos-container .channel-sidebar-heading {
  margin-bottom: 20px;
}

#more-videos-container .channel-sidebar-heading + .btn {
  margin-bottom: 10px;
}

#more-videos-container .video-card-meta {
  padding: 5px 10px;
}

#more-videos-container .portfolio-section {
  margin-top: 1px;
  padding-top: 11px;
  padding-bottom: 11px;
}

.channel-page-content .comment-box {
  padding: 16px 16px;
}

/* .blog-single-detail .blog-comment .comment-wrapper .comment-box .media img
   (dark.css) forces every <img> under .media to 60x60 circular-crop —
   meant for the avatar, but it also catches embedded images/GIFs posted
   inside the comment body (.comment-detail is a descendant of .media too).
   That selector is 5 classes + a type deep, so beating it needs !important
   rather than just higher specificity. */
.blog-single-detail .blog-comment .comment-wrapper .comment-box .media img {
  width: 70px;
  height: 70px;
}

/* dark.css makes the mobile header dropdowns a full-screen overlay via
   `position: fixed; bottom: 0; height: 100vh`. On real Android Chrome (not
   desktop responsive-mode testing), 100vh includes the space behind the
   browser's dynamic address bar, so the box is taller than what's actually
   visible — and since it's anchored to the bottom, the top of the box
   (.dropdown-header, the first child) gets pushed off-screen above the
   visible area. `dvh` accounts for the real visible viewport instead. */
@media (max-width: 767px) {
  .header-btn.custom-dropdown .dropdown-menu {
    height: 100dvh;
  }
}

.comment-detail .comment-embed-img {
  height: auto !important;
  max-width: 320px;
  width: 100% !important;
  display: block;
  object-fit: unset !important;
  border-radius: 4px !important;
}

/* Inline video embeds inside a comment body ([youtube]/[scenesfeed] tags) —
   capped at 320x180 (16:9) but shrinks on narrower comment columns instead
   of overflowing. */
.comment-embed-video-wrap {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 16 / 9;
  margin: 6px 0;
  margin-bottom: 15px;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}

.comment-embed-video-wrap iframe,
.comment-embed-video-wrap video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.comment-embed-video-wrap > div, .comment-embed-video-wrap > div video {
  max-height: 180px;
}

.comment-gif-panel {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px;
}

.comment-gif-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px;
  margin-top: 10px;
  max-height: 260px;
  overflow-y: auto;
}

.comment-gif-result {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
}

.comment-gif-result:hover {
  outline: 2px solid #c51721;
}

.feather {
  position: relative;
  top: 2px;
}

.blog-single-detail .blog-comment .comment-wrapper .comment-box .media .media-body .title .comment-user h6,
.blog-single-detail .blog-comment .comment-wrapper .comment-box .media .media-body .title .comment-date h6 {
  line-height: 18px;
}

.blog-single-detail .blog-comment .comment-wrapper .comment-box .media .media-body .title {
  margin-bottom: 5px;
  padding-bottom: 5px;
}

.channel-page-content .blog-single-detail .blog-comment .comment-wrapper .comment-box .media .media-body .title .comment-date h6 {
  text-transform: lowercase;
}

.blog-single-detail .blog-comment .comment-wrapper .comment-box .media .media-body .title .comment-date svg {
  margin-right: 5px;
}

.blog-single-detail .blog-comment .comment-wrapper .comment-box .media .media-body .comment-detail p {
  font-size: 15px;
  line-height: 26px;
}

.comment-reply-form.theme-form {
  margin-top: 15px;
}

.messanger-section .chat-content .tab-box .user-chat .chat-history .avenue-messenger .chat .message-box .message-submit {
  padding: 2px;
}

.messanger-section .chat-content .tab-box .user-chat .chat-history .avenue-messenger .chat .messages-content .message.message-personal {
  background: #391427;
}

.nav-tabs .nav-link {
  border-radius: 0;
}

.portfolio-section {
  background-color: #0b1a2c;
  margin-top: 16px;
  padding-right: 15px;
  padding-left: 15px;
  padding-bottom: 15px;
}

.setting-section .tab-section .nav-pills .nav-link.text-danger.active {
  color: #fff !important;
}

/* The dark theme build's own Bootstrap-reset rule hardcodes dark-gray text
   (#212529) directly alongside the dark navy background — fine for the
   theme's own components (they all set their own explicit light text color
   deeper in the cascade), but anything relying on plain inheritance (our own
   custom classes: .notification-list, .people-body, .channel-about, etc.)
   would render nearly invisible without this. */
body {
  color: #f4eed7;
}

/* Theme's own global link-color default (`* a`) — was the accent red for
   every plain link site-wide (channel/friend usernames, "uploaded by X",
   menu items, etc.) that doesn't have a more specific color rule of its own. */
* a {
  color: #e8e9db;
}

* a:hover {
  color: #dccdb6;
}

/* .dropdown-menu itself hardcodes #212529 (dark gray) directly against its
   own dark navy background — same class of bug as the body-level one above,
   just scoped to a more specific selector so the body override alone
   doesn't reach it. */
.dropdown-menu {
  color: #f4eed7;
}

/* Messenger conversation-list names — carried over as red by the earlier
   blue-to-red accent-color substitution, but this is a name label, not a
   themed accent/button, so it should read as regular light text like other
   titles instead. */
.messanger-section .chat-users .nav-tabs .list-media .media-body h5,
.messanger-section .chat-users .nav-tabs .list-media .media-body .h5 {
  color: #e8e9db;
}

/* The theme's .sidebar-panel is `position: sticky; height: max-content` —
   fine while it's short, but with no height cap it just keeps growing with
   its own content and has no independent scroll, so once the right-hand
   column gets much taller (e.g. an infinite-scroll video list), reaching the
   sidebar's own lower items means scrolling the whole page. Cap it to the
   viewport and let it scroll internally instead. */
header,
.sidebar-panel {
  background-color: #051826;
}

.sidebar-panel {
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  padding-left: 10px;
  padding-right: 10px;
}

/* The theme positions the flyout tooltip with `position: absolute; left:
   60px`, anchored to its <li> — but any ancestor with overflow-y: auto also
   clips (and reveals a scrollbar for) horizontal overflow, so the flyout
   would get clipped/scrollbarred by .sidebar-panel's new scroll above.
   `position: fixed` escapes all ancestor scroll clipping entirely; the JS in
   scripts.ejs sets its left/top on hover since fixed positioning has no
   anchor to a static offset like "60px from my li" the way absolute did. */
.sidebar-panel .sidebar-icon .tooltip-cls {
  position: fixed;
  left: 0;
  top: 0;
  /* Theme's own rule transitions `all`, which animated left/top sliding in
     from (0,0) the first time JS set them on hover. Only the scale should
     animate — position is set once, instantly, right before it appears. */
  transition: transform 0.3s ease;
}

.sidebar-panel .sidebar-icon > li > a {
  width: unset;
}

/* The theme re-declares `transition: all 0.5s ease` again on the :hover
   rule specifically — higher specificity than the rule above, so it still
   won during the actual hover and re-introduced the top/left slide-in. */
.sidebar-panel .sidebar-icon > li:hover .tooltip-cls {
  transition: transform 0.3s ease;
}

h3 {
  text-transform: uppercase;
  margin-bottom: 15px;
}

.video-card {
  position: relative;
}

.video-card-meta {
  padding: 8px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.video-card-title {
  font-size: 12px;
  font-weight: 600;
  color: #e8e9db;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-card-title:hover,
.video-card-title:focus {
  color: #dccdb6;
}

.video-card-views {
  font-size: 12px;
  opacity: 0.65;
}

.empty-state {
  padding: 2rem 0;
  opacity: 0.7;
}

.video-watch-page {
  max-width: 640px;
}

#video-comments-container {
  margin-top: 30px;
}

.plyr audio,
.plyr iframe,
.plyr video {
  display: block;
  height: 100%;
  width: 100%;
}

.video-watch-page .plyr:not(:fullscreen) audio,
.video-watch-page .plyr:not(:fullscreen) iframe,
.video-watch-page .plyr:not(:fullscreen) video {
  max-height: 360px;
}

.channel-page-content  .plyr:not(:fullscreen) audio,
.channel-page-content  .plyr:not(:fullscreen) iframe,
.channel-page-content  .plyr:not(:fullscreen) video {
  max-height: 442px;
}

.video-player-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  overflow: hidden;
}

.video-player-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.plyr-video-wrap {
  overflow: hidden;
}

.video-watch-meta {
  padding-top: 12px;
  margin-bottom: 30px;
}

.video-watch-meta > h3 {
  margin-bottom: 0;
}

.empty-hint {
  padding: 12px 20px;
  opacity: 0.6;
  font-size: 13px;
}

.guest-auth-btns {
  display: flex;
  align-items: center;
  padding: 0 10px;
}

/* The theme's own style.css has a blanket rule zeroing out
   `.option-list .header-btn:last-child a` padding-right, assuming the last
   header button is always the profile dropdown. Our guest login/sign-up
   buttons became the new last-child, so restore their normal btn-sm padding
   here (same selector specificity, loaded after style.css). */
header .header-section .header-right .option-list .header-btn.guest-auth-btns a {
  padding-right: 20px;
}

.btn-solid.btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

.message-box button.message-submit {
  background: transparent;
  cursor: pointer;
}

.no-thread-selected {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  opacity: 0.6;
}

.notification-list,
.people-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notification-list li,
.people-list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.notification-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 6px;
}

.notification-list li a:hover {
  background-color: rgba(197, 23, 33, 0.06);
}

.notification-list img {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  object-fit: cover;
}

.notification-body h5 {
  margin-bottom: 3px;
  font-weight: 600;
}

.notification-body h5 span {
  font-weight: 700;
}

.notification-body h6 {
  opacity: 0.6;
  font-weight: 500;
}

.people-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 6px;
}

.people-list-item img {
  width: 44px;
  height: 44px;
  border-radius: 100%;
  object-fit: cover;
}

.people-body {
  flex: 1;
  min-width: 0;
}

.people-body h6 {
  opacity: 0.6;
}

.people-body a,
.notification-list a,
.mini-people-list a {
  color: inherit;
  text-decoration: none;
}

.video-watch-meta a {
  color: inherit;
}

.video-card-views a {
  text-decoration: underline !important;
}

.people-body a:hover {
  text-decoration: underline;
}

.people-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.people-actions form {
  margin: 0;
}

.plain-settings-form fieldset {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.plain-settings-form legend {
  width: auto;
  font-size: 15px;
  font-weight: 700;
  padding: 0;
}

.plain-settings-form input[type="color"] {
  width: 100%;
  height: 38px;
  max-width: 38px;
  display:block;
  padding: 2px;
}

.form-check-inline-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.btn-solid.btn-danger:hover,
.btn-solid.btn-danger:focus {
  background-color: #bb2d3b;
  border-color: #bb2d3b;
  color: #fff;
}

.theme-form, .theme-form .form-control {
  margin-bottom: 15px;
}

div.title-box {
  text-transform: uppercase;
  margin: 15px 0px;
}

.messanger-section .chat-content .tab-box .user-chat .chat-history .avenue-messenger .chat .messages-content .message .timestamp {
  position: static;
  color: #fff;
  font-style: italic;
}

/* Channel view page */

.channel-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 0;
  margin-bottom: 10px;
}

.channel-topbar img {
  width: 64px;
  height: 64px;
  border-radius: 100%;
  object-fit: cover;
}

.channel-topbar-avatar {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.avatar-edit-btn {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background: #c51721;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid var(--body-bg, #fff);
}

.avatar-edit-btn svg {
  width: 13px;
  height: 13px;
  top: 0;
}

.avatar-edit-btn input[type="file"] {
  display: none;
}

.url-field-with-upload {
  position: relative;
}

.url-field-with-upload .form-control {
  padding-right: 40px;
}

.inline-upload-btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #647589;
}

.inline-upload-btn:hover {
  color: #c51721;
}

.inline-upload-btn svg {
  width: 16px;
  height: 16px;
}

.inline-upload-btn input[type="file"] {
  display: none;
}

.channel-topbar-name h3 {
  margin: 0;
}

.channel-topbar-name h6 {
  opacity: 0.6;
  margin: 0;
}

.channel-topbar-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.channel-stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-bottom: 16px;
}

.channel-stat-box div {
  text-align: center;
}

.channel-stat-box h4 {
  margin: 0;
}

.channel-stat-box span {
  font-size: 12px;
  opacity: 0.6;
  text-transform: uppercase;
}

.channel-about {
  margin-bottom: 16px;
  font-size: 13px;
  opacity: 0.85;
}

.channel-about img {
  max-width: 100%;
}

.mini-people-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 0;
  margin: 0 0 16px;
  border-radius: 8px;
}

.comment-box {
  border-radius: 8px;
}

.mini-people-list li {
  width: 64px;
  text-align: center;
}

.mini-people-list img {
  width: 48px;
  height: 48px;
  border-radius: 100%;
  object-fit: cover;
}

.mini-people-list span {
  display: block;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 4px;
}

.mini-pager-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
}

.mini-pager-btn > .feather {
  top: 0;
}

.mini-pager-btn.disabled {
  opacity: 0.3;
  pointer-events: none;
}

.mini-pager-label {
  font-size: 11px;
  opacity: 0.7;
}

/* Featured channels — full-width, always exactly one row (unlike the
   sidebar's friends/subscribers/subscriptions lists, which wrap to 3 rows
   in their narrow column) — scrolls horizontally instead of wrapping. */
.mini-people-list--single-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: flex-start;
  padding-bottom: 4px;
}

.mini-people-list--single-row li {
  flex-shrink: 0;
  margin: 5px 10px;
}

.featured-channels-box {
  margin-bottom: 24px;
}

.featured-channels-edit-form .form-group {
  margin-bottom: 12px;
}

.featured-channels-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.featured-channel-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
}

.featured-channel-chip img {
  width: 22px;
  height: 22px;
  border-radius: 100%;
  object-fit: cover;
}

.featured-channel-chip-remove {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  line-height: 1;
  padding: 0 0 0 4px;
}

.featured-channel-chip-remove:hover {
  opacity: 1;
}

.featured-channels-search-wrap {
  position: relative;
  margin-bottom: 10px;
}

.featured-channels-search-results {
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--body-bg, #fff);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.featured-channels-search-results:empty {
  border: none;
}

.featured-channels-search-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: #000;
}

.featured-channels-search-result:hover {
  background: rgba(197, 23, 33, 0.08);
}

.featured-channels-search-result img {
  width: 24px;
  height: 24px;
  border-radius: 100%;
  object-fit: cover;
}

.channel-sidebar-heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 16px 0 8px;
}

header .header-section .header-left .brand-logo {
  width: 110px;
}

header .header-section .header-left .brand-logo img {
  filter: drop-shadow(0 0 20px rgba(197, 23, 33, 0.35));
}

.logo-sec img {
  filter: drop-shadow(0 0 20px rgba(197, 23, 33, 0.35));
}

/* Channel view has no sidebar-panel (old SL didn't have one either) — let
   .page-center reclaim the width the theme normally reserves for it. */
.page-body.no-sidebar .page-center {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.page-body.custom-padding.channel-page-body {
  padding-left: 0;
  padding-right: 0;
  padding-top: 80px;
}

.comment-date > *, .comment-user > * {
  display: inline-block;
}
.comment-user > h6 {
  font-weight: bold;
}

header .header-section .header-right .post-stats ul li h3 {
  margin-bottom: 0;
}

header .header-section .header-left .brand-logo {
  margin-right: 15px;
}

/* Video thumbnails: fixed 16:9 box (matches a 640x360 source), cropped via
   a centered `cover` background instead of the browser's native <img>
   scaling, which was cutting off the top/bottom on non-16:9 sources. */
.video-card .bg-size {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: inherit;
}

.video-card .bg-size:before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.theme-pagination > li {
  background-color: #fff;
  opacity: 1;
}

.theme-pagination {
  margin-top: 30px;
  margin-bottom: 15px;
}

[aria-label="moderator users pagination"] > .theme-pagination,
[aria-label="channels pagination"] > .theme-pagination,
[aria-label="channel videos pagination"] > .theme-pagination {
  overflow-x: auto;
  width: 100%;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
}

.theme-pagination .page-item {
  padding: 0;
  margin: 0;
}

.theme-pagination .page-item .page-link {
  margin: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.theme-pagination .page-item.active .page-link {
  border-radius: 0;
  color: #fff;
  background-color: #391427;
}

.theme-pagination .page-item > a {
  border-radius: 0;
}

.theme-pagination .page-item .page-link:hover,
.theme-pagination .page-item .page-link:focus {
  background-color: #391427;
  color: #fff;
  border-radius: 0;
}

/* Bootstrap's own .page-item:first-child/:last-child .page-link rules have
   higher specificity (3 classes/pseudo vs. our 2 classes + type selector),
   so they were still winning and rounding the end pagination items. */
.theme-pagination .page-item:first-child .page-link,
.theme-pagination .page-item:last-child .page-link {
  border-radius: 0;
}

/* Header dropdown menus (message/notification/profile) — twice as dark as
   the page navy, sampled from the logo's own hue. */
.dropdown-menu {
  background-color: #050d16;
}

.custom-dropdown .dropdown-menu:after {
  border-bottom-color: #050d16;
}

/* .nav-tabs (homepage/category tabs): the dark-theme conversion flipped the
   active tab's background from white to navy but left its text/border colors
   tuned for a white background, making the active tab unreadable. */
.nav-tabs .nav-link,
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #e8e9db;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: #dccdb6;
}

/* On tablet/mobile the settings sidebar goes off-canvas and this is the only
   button that reveals it (views/settings.ejs), but it sits right at the top
   of the content column where the fixed header covers it. */
.setting-menu {
  margin-top: 60px;
}

html .theme-pagination .feather {
  top: 0;
}

.inner-comment {
  padding: 5px;
  background-color: transparent !important;
}

.blog-single-detail .blog-comment .comment-wrapper .comment-box .media .media-body {
  max-width: 100%;
  overflow: hidden;
}
.blog-single-detail .blog-comment .comment-wrapper .comment-box .media .media-body .comment-detail {
  max-width: 100%;
  overflow: auto;
}

.custom-dropdown.profile-btn .dropdown-menu .dropdown-content .friend-list li {
  padding: 10px 5px;
}

.theme-form > .row > .form-group > .form-control {
  margin-bottom: 0;
}
.theme-form > .row > .form-group {
  margin-bottom: 15px !important;
}

/* Box-model for the channel banner strip — the actual image(s)/repeat/scale
   are user-customizable and generated per-channel (channelCss.js); this is
   just the fixed shape/fallback. */
.channel-banner {
  height: 200px;
  margin-bottom: 16px;
  border-radius: 8px;
  background-color: #000;
}

/* Channel type description / about me on the channel videos page
   (channel-videos.ejs) — collapsed by default so a long bio/description
   doesn't push the video grid down; expandable via the show more/less
   toggle rendered next to it. */
.collapsible-text {
  max-height: 100px;
  overflow: hidden;
}
.collapsible-text.expanded {
  max-height: none;
}
.collapsible-toggle {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.8;
}

.progress-bar {
  color: #fff;
}

.sortable-header {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.sortable-header:hover {
  text-decoration: underline;
}

.messanger-section .chat-content .tab-box .user-chat .chat-history .avenue-messenger .chat .message-box .message-input {
  color: #fff;
}