@font-face {
  font-family: SutonnyMJ;
  font-style: normal;
  font-weight: 400;
  src: url(../font/SutonnyMJ.woff2) format("woff2");
}

@font-face {
  font-family: ShurjoWeb;
  src: url(../font/ShurjoWeb_400_v5_1.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: ShurjoWeb;
  src: url(../font/ShurjoWeb_700_v5_1.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --nn-white-color: #fff;
  --nn-body-bg-color: #fff;
  --nn-gray-color: #eff3f4;
  --nn-text-color: #000;
  --nn-stext-color: #595959;
  --nn-subtitle-color: #00209d;
  --nn-primary-color: #124b65;
  --nn-secondary-color: #000;
  --nn-footer-bg: #fff;
  --nn-footer-top-bg: #f5f5f5;
  --nn-footer-top-color: #4d4d4d;
  --nn-footer-top-fs: 15px;
  --nn-footer-top-padding: 20px 0;
  --nn-footer-middle-bg: #fafafa;
  --nn-footer-middle-color: #4d4d4d;
  --nn-footer-middle-fs: 16px;
  --nn-footer-middle-padding: 40px 0;
  --nn-footer-bottom-bg: #1fbcff;
  --nn-footer-bottom-color: #fff;
  --nn-footer-bottom-fs: 14px;
  --nn-footer-bottom-padding: 15px 0;
  --nn-post-title-fs: 32px;
  --nn-post-content-fs: 18px;
  --nn-post-block-fs: 26px;
}


body {
  font-family: ShurjoWeb, sans-serif;
  background-color: var(--nn-body-bg-color);
  color: var(--nn-text-color);
  transition:
    background-color 0.3s,
    color 0.3s;
}

.nn-text {
  color: var(--nn-text-color) !important;
}

.nn-stext {
  color: var(--nn-stext-color) !important;
}

.nn-primary-bg {
  background-color: var(--nn-primary-color) !important;
}

.nn-primary-color {
  color: var(--nn-primary-color) !important;
}

.nn-white {
  background-color: var(--nn-white-color) !important;
}

.nn-white-bg {
  background-color: var(--nn-white-color) !important;
}

.nn-gray {
  background-color: var(--nn-gray-color) !important;
}

a {
  color: #000;
  transition: 0.3s;
}

a,
a:hover {
  text-decoration: none;
}

a:hover {
  color: #3d3d3d;
}

a.winner-text:hover {
  color: var(--nn-primary-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: ShurjoWeb;
  font-weight: 700;
}

.form-control:focus {
  box-shadow: unset !important;
}

#winner_backToTop {
  line-height: 3;
  display: none;
  border: 1px solid;
  color: #b0b0b0;
  font-size: 21px;
  transition: opacity 0.3s ease;
  height: 35px;
  text-align: center;
  width: 35px;
  line-height: 32px;
}
.nn_nav-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
}

ul.nn_nav-menu li {
  padding: 10px;
}

ul.nn_nav-menu li.has-children {
  padding-right: 20px;
}

.nn_nav-menu .nav-item {
  position: relative;
}

.nn_nav-menu .nav-item > a {
  display: block;
  text-decoration: none;
  position: relative;
  font-size: 18px;
  font-weight: 600;
}

.nn_nav-menu .nav-item > a:hover {
  color: var(--nn-secondary-color);
}

.nn_nav-menu .nav-item.has-children > a:after {
  content: "\F229";
  position: absolute;
  top: 2px;
  font-family: bootstrap-icons !important;
  right: -15px;
  font-weight: 700;
  font-size: 10px;
  line-height: 20px;
  transition: 0.3s;
}

.nn_nav-menu .nav-item.has-children:hover > a:after {
  transition: 0.3s;
}

.nn_nav-menu .child-menu {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  background-color: #f5f5f5;
  z-index: 10;
  list-style-type: none;
}

.nn_nav-menu .child-menu.child-menu--right {
  left: auto;
  right: 0;
}

.nn_nav-menu .child-menu .child-item {
  padding: 0;
}

.nn_nav-menu .child-item > a {
  display: block;
  padding: 10px 20px;
  color: var(--nn-primary-color) !important;
  text-decoration: none;
}

.nn_nav-menu .child-item > a:hover {
  color: var(--nn-primary-color);
}
.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 5px 5px -5px #000;
  z-index: 1041;
}
.mobile_navmenu,
.mobile_navmenu .child-item {
  margin: 0;
  padding: 0 30px 0 0;
  list-style-type: none;
}

.mobile_navmenu .child-item a,
.mobile_navmenu .nav-item a {
  font-size: 18px;
  padding: 4px 0;
  display: block;
}

.mobile_navmenu .nav-item.has-children {
  font-size: 50px;
  position: relative;
}

.mobile_navmenu .nav-item.has-children:before {
  font-size: 14px;
  position: absolute;
  right: -20px;
  top: 4px;
  width: auto;
  content: "\f107";
  font-family: Font Awesome\6 Free;
  font-weight: 900;
  transition: 0.3s;
  cursor: pointer;
}

.mobile_navmenu .nav-item.has-children .child-menu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition:
    max-height 0.3s ease-out,
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
}

.mobile_navmenu .nav-item.has-children:hover .child-menu {
  max-height: 500px;
  opacity: 1;
  transform: scaleY(1);
}
.secondary_menu_tt {
  list-style-type: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.secondary_menu_tt li {
  position: relative;
}

.secondary_menu_tt li:not(:last-child) {
  padding-right: 20px;
}

.secondary_menu_tt li:not(:last-child):after {
  content: "|";
  color: #acacac;
  font-size: 12px;
  position: absolute;
  font-weight: 700;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.winner_social_menu a {
  padding: 5px;
  color: gray;
  transition: 0.3s;
  font-size: 18px;
}

.winner_social_menu.bordered a {
  padding: 5px;
  color: gray;
  margin: 0 2px;
  transition: 0.3s;
  display: inline-block;
  font-size: 13px !important;
  height: 26px;
  text-align: center;
  width: 26px;
  border: 1px solid;
  line-height: 17px;
}

.winner_social_menu.squere.bordered a {
  border-radius: 6px;
}

.winner_social_menu a:hover {
  color: #666;
}

.winner_social_menu.color .facebook {
  color: #1877f2 !important;
  border-color: #1877f2;
}

.winner_social_menu.color .twitter {
  color: #000 !important;
  border-color: #000;
}

.winner_social_menu.color .linkedin {
  color: #0a66c2 !important;
  border-color: #0a66c2;
}

.winner_social_menu.color .instagram {
  color: #e4405f !important;
  border-color: #e4405f;
}

.winner_social_menu.color .youtube {
  color: red !important;
  border-color: red;
}

.winner_social_menu.color .whatsapp {
  color: #25d366 !important;
  border-color: #25d366;
}

.winner_social_menu.color .envelope {
  color: #d14836 !important;
  border-color: #d14836;
}

.filter .icon {
  color: #aab7cf;
  padding-right: 20px;
  padding-bottom: 5px;
  transition: 0.3s;
  font-size: 16px;
}

.filter {
  position: absolute;
  right: 0;
  top: 15px;
}

.cursor-pointer {
  cursor: pointer;
}
.winner_footer {
  background-color: var(--nn-footer-bg);
}

.winner_footer .footer_middle {
  background: var(--nn-footer-middle-bg);
  padding: var(--nn-footer-middle-padding);
}

.winner_footer .footer_middle,
.winner_footer .footer_middle a,
.winner_footer .footer_middle p,
.winner_footer .footer_middle span {
  color: var(--nn-footer-middle-color);
  font-size: var(--nn-footer-middle-fs);
}

.winner_footer .footer_bottom {
  background: var(--nn-footer-bottom-bg);
  padding: var(--nn-footer-bottom-padding);
}

.winner_footer .footer_bottom,
.winner_footer .footer_bottom a,
.winner_footer .footer_bottom i,
.winner_footer .footer_bottom p,
.winner_footer .footer_bottom span {
  color: var(--nn-footer-bottom-color);
  font-size: var(--nn-footer-bottom-fs);
}
.winner_subtitle {
  color: #c20000;
}

.winner-ntitle {
  line-height: 40px;
  font-size: 30px;
}

.news-title-2,
.winner-ntitle-1 {
  font-size: 18px;
  line-height: 27px;
  font-weight: 400;
  margin: 0;
}

.news-title-2,
.news-title-2 a,
.winner-ntitle-1,
.winner-ntitle-1 a,
.winner-ntitle-2,
.winner-ntitle-2 a {
  color: var(--nn-text-color);
}

.winner-ntitle-2 {
  font-size: 24px;
  line-height: 27px;
  font-weight: 700;
  margin: 0;
}

.summery-2,
.summery-3,
.summery-5 {
  line-height: 26px;
  font-size: 17px;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: justify;
  color: var(--nn-stext-color);
  font-size: 16px;
}

.summery-5 {
  -webkit-line-clamp: 5;
}

.summery-3 {
  -webkit-line-clamp: 3;
}

.summery-2 {
  -webkit-line-clamp: 2;
}

.winner-vertical-border {
  border-right: 2px solid #e2e2e2;
}

@media (max-width: 767.98px) {
  .winner-vertical-border {
    border-right: none;
  }
}

.winner-horizontal-border {
  border-top: 1px solid #e2e2e2;
  margin: 15px 0;
}
.story-image {
  position: relative;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 13px;
  background: #000000cf;
  display: block;
  height: 27px;
  width: 49px;
  text-align: center;
  line-height: 28px;
  border-radius: 50px;
  color: #fff;
}

.gallery-img-1 {
  height: 165px;
  width: 100%;
  object-fit: cover;
}

.gallery-img-cover-1 {
  height: 405px;
  width: 100%;
  object-fit: cover;
}

.featured-image-photo {
  position: relative;
}

.featured-image-photo i {
  position: absolute;
  top: 16px;
  left: 16px;
  display: block;
  line-height: 32px;
  height: 30px;
  width: 30px;
  color: #fff;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.51);
  text-align: center;
}

.ps-post-line-img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  background: var(--nn-gray-color);
  display: block;
}

.prothom-songbad-post-style .ps-post-line-img {
  transition: 0.3s;
}

.prothom-songbad-post-style:hover .ps-post-line-img {
  transform: scale(1.05);
}

.ps-most-populler .nav-item {
  background: #d7d7d7;
  width: 50%;
  text-align: center;
}

.nav-pills .nav-item.active {
  background: var(--nn-white-color);
  border-top: 3px solid #5e5e5e;
}

.nav-pills .nav-item a {
  font-size: 21px;
  font-weight: 700;
  color: var(--nn-text-color);
}

.ps-most-populler .side-tab-main {
  width: 100%;
}

.ps-most-populler .tab-content {
  overflow: auto;
}

.p_post_cat3 {
  font-size: 34px;
  transition: 0.3s;
}

.p_post_cat3:hover {
  color: var(--nn-primary-color);
}

.p_post_cat2 {
  font-size: 16px;
  color: var(--nn-stext-color);
}

.p_post_cat1 {
  font-size: 22px;
  color: var(--nn-primary-color);
}

.p_post_cat_sub {
  border: 1px solid;
  padding: 3px 10px;
}

.p_post_cat_sub,
.p_post_cat_sub2 {
  display: inline-block;
  margin-right: 5px;
}

.p_post_cat_sub2 {
  position: relative;
  font-size: 22px;
  margin-left: 20px;
  transition: 0.3s;
}

.p_post_cat_sub2:hover {
  color: var(--nn-primary-color);
}

.cat_sub_icon {
  position: absolute;
  font-size: 10px;
  color: #adadad;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
}

.winner-details {
  text-align: justify;
  font-size: var(--nn-post-content-fs);
}

.winner-details h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

.winner-details h2 {
  font-size: 1.5em;
  margin: 0.75em 0;
}

.winner-details h3 {
  font-size: 1.17em;
  margin: 0.83em 0;
}

.winner-details h5 {
  font-size: 0.83em;
  margin: 1.5em 0;
}

.winner-details h6 {
  font-size: 0.75em;
  margin: 1.67em 0;
}

.winner-details h1,
.winner-details h2,
.winner-details h3,
.winner-details h4,
.winner-details h5,
.winner-details h6 {
  font-weight: bolder;
}

/* Indent via padding only. Bootstrap Reboot already gives lists padding-left:
   2rem, so the previous margin-left stacked on top of it for a ~56px indent that
   no longer matched the ordered-list rule below. */
.winner-details ul {
  list-style-type: disc;
  margin-bottom: 10px;
  padding-left: 24px;
}

/* Summernote's drag-resize writes an inline `width` on the image, and an inline
   style always beats this rule — so `width` alone can never clamp anything. A
   px-sized image simply overflowed the column and put the whole page into
   horizontal scroll on a phone. `max-width` is a different property, so it
   still applies even when the inline `width` wins.

   `height: auto` deliberately carries no !important: it only needs to beat a
   pasted image's height *attribute* (any rule does), and marking it important
   would also override the fixed thumbnail heights the inline related-news
   callout sets further down — collapsing that widget. */
.winner-details img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.winner-details ul ul {
  list-style-type: circle;
  padding-left: 20px;
  margin-bottom: 10px;
}

.winner-tag{}

.tag-ul {
  margin: 0;
  padding: 0;
  margin: 24px 0 0;
  text-align: left;
}
.tag-ul li {
  color: #000;
  list-style: none;
  display: inline-block;
  margin-right: 6px;
  margin-bottom: 14px;
}
.tag-ul li:first-child {
  font-size: 15px;
  color: #222;
  padding: 3px 0px 2px 0;
}
.tag-ul li a {
  color: #000;
  background: #eee;
  border: 1px solid #e3e3e3;
  font-size: 16px;
  padding: 4px 12px 3px;
  transition: 0.3s;
}
.tag-ul li a:hover {
  background: #dbd6d6;
}
.google-news-link {
  background: #fff3e6;
  border: 0.5px solid #d3d3d3;
  font-size: 16px;
  font-weight: 700;
  margin: 20px 0;
  padding: 6px 5px 0 4px;
  text-align: center;
  margin-bottom: 0;
}
@media print {
  @page {
    size: A4;
  }

  #footer-placeholder,
  #winner_backToTop,
  .fb-comment,
  .mobile_header,
  .winner_header,
  .share-btn-custom,
  .sidebar,
  .social-bar,
  .winner-breadcrumb,
  .winner-tag,
  .newsletter-signup,
  .winner-comments,
  footer {
    display: none !important;
  }
}

.winner-details ul li {
  margin-bottom: 8px;
}

.winner-details p {
  font-size: var(--nn-post-content-fs);
  margin-top: 16px;
  text-align: justify;
}

.winner-details p,
.winner-details p:last-child {
  margin-bottom: 16px;
}

.winner-details a {
  color: #1e88e5;
}

.winner-details a:hover {
  color: var(--golden1);
}

/* ==========================================================================
   Editor-authored rich text
   --------------------------------------------------------------------------
   Everything the admin editor is allowed to produce (see the HTML.Allowed list
   in app/Services/HtmlSanitizer.php) needs a home here, or it reaches the
   reader unstyled and looks broken. Floats, tables, embeds, quotes, ordered
   lists and code blocks all had no rules at all, so image alignment did
   nothing and a pasted table or a 640px embed pushed the page sideways on a
   phone.

   .winner-details covers news articles and CMS pages; .story-details covers
   video and audio descriptions, which had no rules whatsoever.
   ========================================================================== */

.story-details img {
  /* Clamp only. No `width: 100%` here: unlike the article body these have
     never been stretched, and forcing it would resize every existing one. */
  max-width: 100%;
  height: auto;
}

.winner-details,
.story-details {
  /* A pasted URL or a long unbroken token has no break opportunity, so without
     this it overflows the column on narrow screens just like a wide image. */
  overflow-wrap: break-word;
}

/* Contain floated images so they cannot spill past the end of the body and
   overlap the tags, share bar or comments below. */
.winner-details::after,
.story-details::after {
  content: "";
  display: block;
  clear: both;
}

/* Summernote's float buttons mark the image with these classes, but they were
   only ever defined in the editor's own stylesheet — which the frontend does
   not load — so alignment silently did nothing once published. `width: auto`
   is needed to beat `.winner-details img { width: 100% }`; a full-width image
   leaves no room for text to wrap beside it. */
.winner-details img.note-float-left,
.story-details img.note-float-left {
  float: left;
  width: auto;
  margin: 4px 20px 12px 0;
}

.winner-details img.note-float-right,
.story-details img.note-float-right {
  float: right;
  width: auto;
  margin: 4px 0 12px 20px;
}

/* Embeds: the sanitizer also permits Spotify and SoundCloud players, which are
   not 16:9, so this deliberately clamps the width only. Forcing an
   aspect-ratio would squash them. */
.winner-details iframe,
.story-details iframe {
  max-width: 100%;
  border: 0;
}

.winner-details table,
.story-details table {
  width: 100%;
  margin-bottom: 16px;
  border-collapse: collapse;
}

.winner-details th,
.winner-details td,
.story-details th,
.story-details td {
  border: 1px solid rgba(128, 128, 128, 0.35);
  padding: 8px 10px;
}

.winner-details thead th,
.story-details thead th {
  background: rgba(128, 128, 128, 0.12);
  text-align: left;
}

.winner-details blockquote,
.story-details blockquote {
  /* No `font-style: italic`: ShurjoWeb ships weights 400 and 700 with no
     italic face at all, so italic Bengali is synthesised and looks wrong. */
  margin: 16px 0;
  padding: 10px 18px;
  border-left: 4px solid var(--nn-primary-color);
  background: rgba(128, 128, 128, 0.06);
}

/* Mirrors the .winner-details ul rules above, which ordered lists never had. */
.winner-details ol,
.story-details ol {
  list-style-type: decimal;
  margin-bottom: 10px;
  padding-left: 24px;
}

.winner-details ol ol,
.story-details ol ol {
  list-style-type: lower-alpha;
  padding-left: 20px;
  margin-bottom: 10px;
}

.winner-details ol li,
.story-details ol li {
  margin-bottom: 8px;
}

/* .winner-details ul is scoped to the article container, so video/audio notes
   would still get the base reset-free browser default and no marker colour
   consistency. Same disc/indent as the article body. */
.story-details ul {
  list-style-type: disc;
  margin-bottom: 10px;
  padding-left: 24px;
}

.story-details ul ul {
  list-style-type: circle;
  padding-left: 20px;
  margin-bottom: 10px;
}

.story-details ul li {
  margin-bottom: 8px;
}

.winner-details pre,
.story-details pre {
  overflow-x: auto;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: rgba(128, 128, 128, 0.1);
  border-radius: 6px;
}

.winner-details code,
.story-details code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

@media (max-width: 767.98px) {
  /* Let a wide table scroll inside itself rather than dragging the page with
     it. `display: block` is what makes overflow-x apply to a table element. */
  .winner-details table,
  .story-details table {
    display: block;
    overflow-x: auto;
  }
}

@media (max-width: 575.98px) {
  /* Too narrow for text to wrap beside an image: stack instead. */
  .winner-details img.note-float-left,
  .winner-details img.note-float-right,
  .story-details img.note-float-left,
  .story-details img.note-float-right {
    float: none;
    width: 100%;
    margin: 12px 0;
  }
}

.fb-comment {
  width: 100%;
}

.fb-comment h2 {
  width: 100%;
  background: var(--nn-primary-color);
  color: #fff;
  font-size: 18px;
}

.btn-more-details {
  background: var(--bg-color);
  color: var(--text-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  font-size: 18px;
  border: 1px solid #fff;
}
#winner-ticker-box.winner-ticker {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  border-radius: 0;
  position: relative;
}

#winner-ticker-box.winner-ticker ul {
  display: inline-block;
  padding: 0;
  list-style: none;
  margin: 5px 0 0;
}

#winner-ticker-box.winner-ticker ul li {
  display: inline-block;
  margin-right: 10px;
}

#winner-ticker-box.winner-ticker ul li img.ticker_img_icon {
  height: 22px;
  border-radius: 0;
}

#winner-ticker-box.winner-ticker ul li .ticker-item {
  display: flex;
  margin: 0;
  align-items: center;
}

#winner-ticker-box.winner-ticker ul li a {
  padding-left: 7px;
  font-weight: 700;
}

.winner-ticker-container.winner-ticker-2 {
  padding: 3px;
  border: 1px solid #d7d7d7;
  border-radius: 5px;
}

.winner-ticker-container.winner-ticker-2 .winner-ticker-title {
  color: #fff;
  padding: 1px 11px;
  font-weight: 700;
  font-size: 21px;
  background: var(--nn-primary-color);
  border-radius: 5px;
  margin-right: 10px;
  margin-left: 1px;
}
.winner_poll {
  height: 100%;
}

.winner_poll_date {
  font-size: 18px;
}

.winner_poll_download {
  font-size: 20px;
  cursor: pointer;
}

.winner_poll_options_item {
  background: #ecf6f8;
  margin-top: 10px;
  cursor: pointer;
  user-select: none;
  position: relative;
  height: 30px;
  overflow: hidden;
}

.winner_poll_item_info {
  position: absolute;
  width: 100%;
  top: 50%;
  z-index: 25;
  padding: 10px;
  left: 0;
  transform: translateY(-50%);
}

.winner_poll_options_item .winner_poll_item_bar {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  background: #c3efff;
  z-index: 20;
}

.dPoll {
  width: 500px;
  height: auto;
  background: red;
  position: fixed;
  top: -1000px;
  left: -1000px;
}

@media (min-width: 1400px) {
  .container {
    width: 1280px !important;
    max-width: 1370px;
  }
}

.river-flow {
  stroke-dasharray: 100;
  stroke-dashoffset: 90;
  animation: daash 3s linear infinite alternate;
}

@keyframes daash {
  0% {
    stroke-dashoffset: 500;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.winner_0:hover,
.winner_10:hover,
.winner_12:hover,
.winner_13:hover,
.winner_14:hover,
.winner_15:hover,
.winner_16:hover,
.winner_17:hover,
.winner_18:hover,
.winner_1:hover,
.winner_2:hover,
.winner_3:hover,
.winner_4:hover,
.winner_5:hover,
.winner_6:hover,
.winner_7:hover,
.winner_8:hover,
.winner_9:hover {
  strokewidth: 0.5851px !important;
  stroke-dasharray: 100;
  stroke-dashoffset: 90;
  animation: dash 3s linear infinite alternate;
  transition: all 0.8s ease;
  fill: #c1b4f0 !important;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 822;
  }

  to {
    stroke-dashoffset: 0;
  }
}

.winner_lp_1 h4 {
  font-size: 21px;
  color: gray;
  font-weight: 400;
}

.winner_sp_1 .winner-ntitle-1 {
  border-left: 3px solid #d5b631;
  padding-left: 10px;
  margin-top: 10px;
}

.winner_cat_title_1 a {
  transition: 0.3s;
}

.winner_cat_title_1 a:hover {
  color: green;
}

.winner_cat_title_1 {
  font-size: 25px;
  background: #f5f5f5;
  margin: 0;
  color: green;
  padding: 10px 10px 7px;
  border-bottom: 1px solid #e3e3e3;
}

.winner_cat_title_2 {
  color: #fff;
  display: inline-block;
  position: relative;
  margin: 0;
  overflow: hidden;
  font-size: 25px;
  padding: 7px 30px 0 10px;
}

.winner_cat_title_2 a {
  color: #fff;
}

.winner_cat_title_2:after {
  content: "";
  position: absolute;
  top: 0;
  transform: rotate(45deg);
  right: -27px;
  height: 37px;
  width: 37px;
  background: #fff;
}

.winner_cat_title_3 {
  margin: 0;
  overflow: hidden;
  position: relative;
}

.winner_cat_title_3 a {
  color: #fff;
  display: inline-block;
  font-size: 25px;
  padding: 7px 30px 2px 10px;
  position: relative;
}

.winner_cat_title_3 a:before {
  content: "";
  position: absolute;
  top: 10px;
  transform: rotate(61deg);
  right: -29px;
  height: 20px;
  z-index: 1;
  width: 56px;
  background: #fff;
}

.winner_cat_title_3:after {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjQ4NUVFODNGNzc1MTFFN0I4NTdCMTRBMzQ3RTIwNTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjQ4NUVFODRGNzc1MTFFN0I4NTdCMTRBMzQ3RTIwNTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCNDg1RUU4MUY3NzUxMUU3Qjg1N0IxNEEzNDdFMjA1NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCNDg1RUU4MkY3NzUxMUU3Qjg1N0IxNEEzNDdFMjA1NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk86A7EAAAASSURBVHjaYmBgYLBgIAgAAgwAB88AOccVbLsAAAAASUVORK5CYII=)
    repeat;
  opacity: 1;
  content: "";
  height: 16px;
  position: absolute;
  top: 10px;
  right: 0;
  width: 55%;
  z-index: -1;
}

.winner_cat_title_4 {
  margin: 0;
  overflow: hidden;
  position: relative;
}

.winner_cat_title_4 a {
  color: #fff;
  display: inline-block;
  font-size: 22px;
  padding: 7px 10px 2px;
  position: relative;
}

.winner_cat_title_4 a:before {
  right: -29px;
  height: 20px;
  z-index: 1;
  width: 56px;
  background: #fff;
  content: "";
  position: absolute;
  top: 10px;
  transform: rotate(61deg);
  right: -26px;
  height: 43px;
  z-index: -1;
  width: 62px;
  opacity: 0.5;
}

.social-bar {
  background: #cfd8dc;
  border-top: 3px solid #b0bec5;
}

.social-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px;
  text-decoration: none;
  color: #fff;
  height: 100%;
}

.social-box i {
  height: 48px;
  width: 48px;
  font-size: 32px;
  background: rgba(0, 0, 0, 0.15);
  line-height: 57px;
  display: inline-block;
  text-align: center;
}

.social-box strong {
  display: block;
  font-size: 18px;
}

.social-box span {
  font-size: 13px;
  opacity: 0.9;
}
.bg-facebook {
  background: #4b63a3;
}

.bg-youtube {
  background: #d71920;
}

.bg-x {
  background: #5ec6f3;
}

.bg-instagram {
  background: #5f7d95;
}
.social-box:hover {
  filter: brightness(1.08);
  color: #fff;
}

.nn_nav-menu li.has-children > a:after {
  content: " \f107";
  font-family: Font Awesome\6 Free;
  font-weight: 900;
  font-size: 12px;
  transition: 0.3s;
}

.nn_nav-menu .child-menu {
  display: none;
  min-width: 180px;
}

.nn_nav-menu .nav-item:hover .child-menu {
  display: block;
}
@keyframes ticker-marquee {
  0% {
    transform: translateZ(0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
.swiper-button-next,
.swiper-button-prev {
  color: var(--nn-primary-color) !important;
}
#winner_backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #fff;
  border: 1px solid var(--nn-primary-color);
  color: var(--nn-primary-color);
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 1000;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

#winner_backToTop:hover {
  background: var(--nn-primary-color);
  color: #fff;
}
.side-tab-main li.active {
  position: relative;
}

.side-tab-main li.active:before {
  content: "";
  height: 4px;
  width: 60%;
  background: var(--nn-primary-color);
  bottom: -2px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
.hidden-search-result {
  display: none !important;
}
.header_date_location {
  background: #9e9d24 !important;
  color: #fff !important;
  padding: 3px 8px !important;
}
.nn_navbar {
  background: #f9fbe7 !important;
}
.winner_h8_icon {
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  gap: 4px !important;
  margin-bottom: 6px;
}

.winner_h8_icon a,
.winner_h8_icon span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #000;
  transition: color 0.2s ease-in-out;
  text-decoration: none;
}

.winner_h8_icon a:hover,
.winner_h8_icon span:hover {
  color: #124b65 !important;
}
.acbtn-tt {
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  gap: 16px !important;
}

.acbtn-tt a,
.acbtn-tt button,
.acbtn-tt span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #000;
  transition: color 0.2s ease-in-out;
  text-decoration: none;
}

.acbtn-tt a:hover,
.acbtn-tt button:hover,
.acbtn-tt span:hover {
  color: #124b65 !important;
}
.mobile_header_six .mlogo img {
  width: 100% !important;
  height: auto !important;
}
.mobile_header_six .acbtn-tt a {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
}
.acbtn-tt i {
  font-size: 23px;
  padding: 0 11px;
  display: inline-block;
  height: 51px;
  line-height: 51px;
  border-left: var(--bs-border-width) var(--bs-border-style)
    var(--bs-border-color) !important;
}
.nn_navbar {
  background: #f9fbe7;
}
.header_date_location {
  display: block;
  background: #9e9d24;
  color: #fff;
  padding: 3px 8px;
}
.ps-most-populler.ps-most-populler-3 .nav-pills .nav-item.active {
  background: var(--nn-primary-color);
  background: #e3eaee;
  border-top: unset;
  color: red;
  position: relative;
}
.ps-most-populler.ps-most-populler-3 .nav-pills .nav-item a {
  font-size: 20px;
  font-weight: 400;
}
.ps-most-populler.ps-most-populler-3 .nav-pills .nav-item.active a {
  color: #000;
}
.ps-most-populler .tab-content {
  height: 100%;
  overflow: hidden;
}
.ps-most-populler .nav-item {
  background: unset;
}
.ps-most-populler .side-tab-main {
  border-bottom: 2px solid #e3eaee;
  padding-bottom: 1px;
}
.ps-most-populler.ps-most-populler-3 .nav-pills .nav-item.active:before {
  content: "";
  height: 10px;
  width: 46%;
  background: var(--nn-primary-color);
  bottom: -8px;
  left: 50%;
  position: absolute;
  z-index: 11;
  transform: translateX(-50%);
}
.winner_cat_title_4 a:before {
  background: #124b65 !important;
}
.winner_footer.winner_footer_2 .secondary_menu_tt {
  justify-content: start;
}
@media (max-width: 768px) {
  .winner_footer.winner_footer_2 .secondary_menu_tt {
    justify-content: center;
  }
  .winner_footer.winner_footer_2 .middle_info {
    border-right: unset;
    border-left: unset;
  }
}
.winner_footer.winner_footer_2 .middle_info {
  border-right: 3px solid #cecece;
  border-left: 3px solid #cecece;
}
.winner_header .nn_nav-menu {
  justify-content: left;
  column-gap: 4px;
}
.winner_header .nn_navbar {
  background: #f9fbe7;
}
.winner_header .nn_nav-menu li {
  padding: 6px 10px;
}
.winner_header .nn_nav-menu .nav-item > a {
  font-size: 16px;
  white-space: nowrap;
}
.winner_header .main_logo img {
  height: 40px;
  width: auto;
}
.winner_h8_icon i {
  font-size: 18px;
  padding: 0 8px;
}
.nn_search_btn {
  background-color: #00aeef !important;
  color: #fff !important;
  border-radius: 0;
}
.nn_search_bar {
  border-color: #00aeef;
  border-radius: 0;
}
.winner_country_news {
  display: flex;
  background: #ededed;
  align-items: center;
}
.winner_country_news .winner_sc {
  width: 25%;
}
@media (max-width: 767.98px) {
  .winner_country_news {
    display: block;
  }
  .winner_country_news .winner_sc {
    width: 100%;
  }
}
.share-btn-custom {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.share-btn-custom a,
.share-btn-custom button {
  height: 32px;
  width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e6e7e8;
  color: #212529;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  text-decoration: none;
  transition:
    background-color 0.2s,
    transform 0.2s;
  cursor: pointer;
}
.share-btn-custom a:hover,
.share-btn-custom button:hover {
  background: #d8d9da;
  transform: translateY(-2px);
  color: #212529;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  border-radius: 8px;
  background: #000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.nn_video_wrapper {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 15px;
  background: transparent;
}
.nn_video_wrapper .video-thumbnail-link {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 6px;
  background: #000;
}
.nn_video_wrapper .video-thumbnail-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 0.3s ease,
    opacity 0.2s;
  opacity: 0.9;
}
.nn_video_wrapper:hover .video-thumbnail-link img {
  transform: scale(1.04);
  opacity: 1;
}
.nn_video_wrapper .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.95);
  z-index: 2;
  transition:
    transform 0.2s ease,
    color 0.2s,
    background-color 0.2s;
  background: rgba(0, 0, 0, 0.4);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.nn_video_wrapper:hover .play-icon {
  color: #fff;
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--nn-primary-color, #124b65);
}
.nn_video_wrapper .video-title-link {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 8px;
  color: var(--nn-text-color, #000);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.8em;
}
.nn_video_wrapper .video-title-link:hover {
  color: var(--nn-primary-color, #124b65);
  text-decoration: underline;
}

@media (max-width: 576px) {
  .nn_video_wrapper .video-title-link {
    font-size: 12px;
    height: 2.8em;
  }
  .nn_video_wrapper .play-icon {
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
  }
}

.archive-filter-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.archive-btn-search {
  background-color: var(--nn-primary-color, #124b65);
  color: #fff;
  font-weight: bold;
  transition: background-color 0.2s;
}
.archive-btn-search:hover {
  background-color: var(--nn-primary-color-hover, #0e3b50);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Advertisement slots
   The placement is fixed; the content depends on the ad type the user chose
   (image banner, custom HTML, AdSense <ins>, or Google Ad Manager div). These
   rules make every type occupy the same centred, responsive box so the layout
   stays consistent regardless of which type is served.
   -------------------------------------------------------------------------- */
.content-slot {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
}
.content-slot > a,
.content-slot > .adsbygoogle,
.content-slot > [id^="gam-ad-"] {
  display: block;
  margin: 0 auto;
}
.content-slot .content-creative {
  display: block;
  /* max-width (not width): fill the slot when the creative is at least as
     wide as it, but never stretch a smaller banner past its native
     resolution — that upscale is what made undersized creatives blurry. */
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
/* In-content and sidebar banners sit inside narrow columns; cap the width so a
   large creative doesn't blow out the grid. */
.content-slot--sidebar,
.content-slot--in_content {
  max-width: 336px;
}
.content-slot--section-break {
  max-width: 970px;
}

/* Inline "আরো পড়ুন" related-news callout embedded in the article body (rendered
   in place of each [related:ID] token). Scoped under .winner-details so it beats
   the inherited body rules: .winner-details img{width:100%}, .winner-details
   a{color:#1e88e5}, and .nn-text{color:!important}. */
.winner-details .winner-inline-related {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  padding: 10px 14px;
  background: #f7f8f9;
  border: 1px solid #e9edef;
  border-left: 4px solid var(--nn-primary-color);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.winner-details .winner-inline-related:hover {
  background: #eef1f2;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}
.winner-details .winner-inline-related__thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 60px;
  overflow: hidden;
  border-radius: 4px;
}
/* Explicit width beats .winner-details img{width:100%}. */
.winner-details .winner-inline-related__thumb img {
  width: 84px !important;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  transition: transform 0.3s ease;
}
.winner-details .winner-inline-related:hover .winner-inline-related__thumb img {
  transform: scale(1.05);
}
.winner-details .winner-inline-related__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.winner-details .winner-inline-related__label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.3px;
  color: var(--nn-primary-color);
}
/* Explicit color beats the inherited .winner-details a{color:#1e88e5}. */
.winner-details .winner-inline-related__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  color: var(--nn-text-color);
}
.winner-details .winner-inline-related:hover .winner-inline-related__title {
  text-decoration: underline;
}
@media (max-width: 575.98px) {
  .winner-details .winner-inline-related__thumb,
  .winner-details .winner-inline-related__thumb img {
    width: 68px !important;
    height: 50px;
  }
  .winner-details .winner-inline-related__title {
    font-size: 15px;
  }
}

/* Grouped inline related-news block: two+ picks placed together (blank lines
   between them) render as one bordered box with a single heading and a row per
   item. Reuses .winner-inline-related__thumb / __title from the callout above. */
.winner-details .winner-inline-related-group {
  margin: 22px 0;
  padding: 12px 14px;
  background: #f7f8f9;
  border: 1px solid #e9edef;
  border-left: 4px solid var(--nn-primary-color);
  border-radius: 4px;
}
.winner-details .winner-inline-related-group__label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--nn-primary-color);
  margin-bottom: 8px;
}
.winner-details .winner-inline-related-group__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  text-decoration: none;
  border-top: 1px solid #e6e9eb;
}
.winner-details .winner-inline-related-group__item:first-child {
  border-top: 0;
}
.winner-details .winner-inline-related-group__item:hover .winner-inline-related__title {
  text-decoration: underline;
}
.winner-details .winner-inline-related-group__item:hover .winner-inline-related__thumb img {
  transform: scale(1.05);
}

/* ------------------------------------------------------------------------
   Native reader comments (article page, resources/views/frontend/partials/comments/*)
   Guest-authored comments with one level of replies. Sits inside the
   .col-lg-8 article column and reuses the widget-card recipe
   (nn-white-bg + border + rounded + shadow-sm) applied in the Blade, so
   only the inner pieces are styled here.
   ------------------------------------------------------------------------ */
.winner-comments__count {
  font-size: 15px;
  font-weight: normal;
}

/* The honeypot must be reachable by bots parsing the HTML but never visible
   or focusable for a human, so it is moved off-canvas rather than
   display:none (which some bots specifically skip).

   NOTE: the guarantee now lives in an inline style attribute on the element
   itself (see comments/form.blade.php). This rule is only a second layer —
   relying on it alone meant a stale cached stylesheet exposed the field. */
.winner-comment-form__decoy {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.winner-comment-form__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--nn-text-color);
}
.winner-comment-form__note {
  font-size: 12px;
  color: #6c757d;
}
.winner-comment-form .form-control {
  font-size: 14px;
  border-radius: 4px;
}
.winner-comment-form .form-control:focus {
  border-color: var(--nn-primary-color);
  box-shadow: 0 0 0 0.15rem rgba(18, 75, 101, 0.15);
}
.winner-comment-form__submit {
  background: var(--nn-primary-color);
  color: #fff;
  font-size: 14px;
  padding: 6px 20px;
  border-radius: 4px;
}
.winner-comment-form__submit:hover,
.winner-comment-form__submit:focus {
  background: #0d3a4f;
  color: #fff;
}
.winner-comment-form--reply {
  background: #f6f8f9;
  border: 1px solid #e6e9eb;
  border-radius: 6px;
  padding: 12px;
}
.winner-comment-form__submit:disabled {
  opacity: 0.65;
  cursor: progress;
}
/* Bootstrap only reveals .invalid-feedback next to a .is-invalid sibling; the
   AJAX handler writes into this slot directly, so it needs to show on its own. */
.winner-comment-form__error:not(:empty) {
  display: block;
  font-size: 12px;
}
.winner-comment-form__note.is-over {
  color: #b02a37;
  font-weight: 600;
}

/* ---- Emoji picker ---- */
.winner-emoji {
  position: relative;
  display: inline-block;
}
.winner-emoji__toggle {
  background: none;
  border: 1px solid #e6e9eb;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 5px 8px;
}
.winner-emoji__toggle:hover,
.winner-emoji__toggle[aria-expanded="true"] {
  border-color: var(--nn-primary-color);
}
.winner-emoji__panel {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 268px;
  max-height: 208px;
  overflow-y: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid #d7dcdf;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.winner-emoji__group {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid #eef1f2;
}
.winner-emoji__group:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.winner-emoji__item {
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 4px 0;
}
.winner-emoji__item:hover,
.winner-emoji__item:focus {
  background: #eef1f2;
  outline: none;
}

@media (max-width: 575.98px) {
  .winner-emoji__panel {
    width: 240px;
  }
  .winner-emoji__group {
    grid-template-columns: repeat(7, 1fr);
  }
}

.winner-comments__empty {
  font-size: 14px;
  color: #6c757d;
  text-align: center;
  padding: 16px 0;
  margin: 0;
}

.winner-comment {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid #e6e9eb;
}
.winner-comment:first-child {
  border-top: 0;
}
.winner-comment--reply {
  margin-left: 32px;
  padding-left: 12px;
  border-top: 0;
  border-left: 2px solid #e6e9eb;
}

/* Initial-letter avatar. Deliberately not Gravatar — that would leak a hash
   of every commenter's email address to a third party. */
.winner-comment__avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--nn-primary-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
}
.winner-comment--reply .winner-comment__avatar {
  flex-basis: 32px;
  width: 32px;
  height: 32px;
  font-size: 15px;
}
.winner-comment__avatar--staff {
  background: #b8860b;
}

.winner-comment__main {
  flex: 1 1 auto;
  min-width: 0;
}
.winner-comment__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.winner-comment__author {
  font-weight: bold;
  font-size: 14px;
  color: var(--nn-text-color);
}
.winner-comment__badge {
  background: #b8860b;
  color: #fff;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
}
.winner-comment__time {
  font-size: 12px;
  color: #6c757d;
}
/* An explicit emoji fallback chain. body is "ShurjoWeb, sans-serif" and
   browsers already fall back per glyph, so emoji render without this — but
   naming the emoji fonts avoids tofu boxes on older Android builds. */
.winner-comment__body,
.winner-comment-form .form-control,
.winner-emoji__toggle,
.winner-emoji__item {
  font-family:
    ShurjoWeb,
    sans-serif,
    "Segoe UI Emoji",
    "Noto Color Emoji",
    "Apple Color Emoji";
}

.winner-comment__body {
  font-size: 15px;
  line-height: 1.7;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* A short all-emoji comment reads better large, the way chat apps show it. */
.winner-comment__body--emoji {
  font-size: 26px;
  line-height: 1.35;
}

/* Briefly marks a comment the reader just posted via AJAX. */
.winner-comment--new {
  animation: winner-comment-in 2.5s ease-out;
}
@keyframes winner-comment-in {
  0% {
    background: rgba(18, 75, 101, 0.12);
  }
  100% {
    background: transparent;
  }
}

/* Like / dislike / report row. Each control is its own form (so it works with
   JavaScript off), hence the flex row of forms rather than of buttons. */
.winner-comment__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
.winner-comment__action-form {
  display: inline-flex;
  margin: 0;
}
.winner-comment__action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 2px 0;
  font-size: 13px;
  color: #6c757d;
  cursor: pointer;
  line-height: 1.2;
}
.winner-comment__action:hover:not(:disabled) {
  color: var(--nn-primary-color);
}
.winner-comment__action.is-active {
  color: var(--nn-primary-color);
  font-weight: 600;
}
.winner-comment__action--report.is-active,
.winner-comment__action--report:hover:not(:disabled) {
  color: #b02a37;
}
.winner-comment__action:disabled {
  cursor: default;
  opacity: 0.75;
}

.winner-comment__reply-box {
  margin: 0 0 4px 52px;
}
.winner-comment__reply-toggle {
  display: inline-block;
  font-size: 13px;
  color: var(--nn-primary-color);
  cursor: pointer;
  padding: 2px 0;
}
.winner-comment__reply-toggle:hover {
  text-decoration: underline;
}
.winner-comment__reply-box[open] .winner-comment__reply-toggle {
  margin-bottom: 6px;
}

.winner-comments__more {
  background: transparent;
  border: 1px solid var(--nn-primary-color);
  color: var(--nn-primary-color);
  font-size: 14px;
  padding: 5px 22px;
  border-radius: 4px;
}
.winner-comments__more:hover {
  background: var(--nn-primary-color);
  color: #fff;
}
.winner-comments__pagelink {
  font-size: 13px;
  color: var(--nn-primary-color);
  text-decoration: none;
}
.winner-comments__pagelink:hover {
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  .winner-comment--reply {
    margin-left: 16px;
  }
  .winner-comment__reply-box {
    margin-left: 24px;
  }
}