.common__landing-comments {
  margin: 0 !important;
  border-top-left-radius: 30px !important;
  border-top-right-radius: 30px !important;
  background: rgba(23,23,23,0.90);
}

.common__landing-comments__pagination {
  background: rgba(23,23,23,0.5);
  padding: 20px 0;
  border-top-width: 2px;
  border-top-color: var(--bs-gray-dark);
}

.contentBorder {
  border-bottom: 1px solid #343A40 !important;
}

/* Comments Section */
.comments-section {
  margin: 0px auto 0 auto !important;
}

.comments-section .common__landing-comments__meta {
  display: flex !important;
  align-items: center !important;
  border-radius: 20px !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 30px !important;
  border-bottom-right-radius: 30px !important;
  background: rgba(23,23,23,0.5) !important;
  border-top: 1px solid var(--bs-gray-dark) !important;
  margin: 0 0 2px 0 !important;
  padding: 0 !important;
}

.comments-section .common__landing-comments__meta .row {
  margin: 0 !important;
  width: 100% !important;
}

.comments-section .common__landing-comments__meta .col-sm-6:first-child {
  flex: 0 0 33.333333% !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 10px !important;
}

.comments-section .common__landing-comments__meta .col-sm-6:last-child {
  flex: 0 0 66.666667% !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 10px !important;
}

.comments-section .common__landing-comments__meta .pull-left {
  font-family: 'Roboto Condensed', sans-serif !important;
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: normal !important;
  margin: 0 !important;
  padding: 10px !important;
  line-height: 18px !important;
}

.comments-section .common__landing-comments__meta .pull-right {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 10px !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
}

.comments-section .pagination {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.comments-section .pagination li a,
.comments-section .pagination li span {
  font-size: 24px !important;
  line-height: 24px !important;
  color: #ffffff !important;
  cursor: pointer !important;
  transition: color 0.3s ease !important;
  margin-right: 10px !important;
  padding: 0 10px !important;
  background: transparent !important;
  border: none !important;
}

.comments-section .pagination li.active span {
  background: var(--bs-cyan) !important;
  color: #000000 !important;
  padding: 0 10px !important;
  margin: 0 !important;
}

.comments-section .pagination li a:hover {
  color: #00ffff !important;
  background: transparent !important;
}

.comments-section .common__landing-comments__post {
  margin: 2px !important;
  border-radius: 20px !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin-left: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
}

.comments-section .common__landing-comments__post .js-comments-post .row {
  margin: 0 !important;
}

.comments-section .common__landing-comments__post .col-lg-3,
.comments-section .common__landing-comments__post .col-md-3 {
  padding: 10px !important;
}

.comments-section .common__landing-comments__post .col-lg-9,
.comments-section .common__landing-comments__post .col-md-9 {
  border-top-left-radius: 20px !important;
  border-bottom-left-radius: 20px !important;
  border-style: solid !important;
  border-top-style: none !important;
  border-right-style: none !important;
  border-bottom-style: none !important;
  border-left-color: #343A40 !important;
  display: flex !important;
  flex-direction: column !important;
}

.comments-section .common__landing-comments__post .col-lg-9 > .discussion__op-content,
.comments-section .common__landing-comments__post .col-md-9 > .discussion__op-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* User Avatar Section (ESI rendered) */
.comments-section .common__landing-comments__post .user-avatar-container {
  max-height: 500px !important;
}

.comments-section .common__landing-comments__post .profile-username a {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 18px !important;
  line-height: 18px !important;
  margin: 0 !important;
  padding: 10px !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.comments-section .common__landing-comments__post .user-full-avatar {
  width: 120px !important;
}
.comments-section .common__landing-comments__post .profile-subtitle.images:has(> .user-full-avatar.bordered) {
  margin: 15px 0;
}
.comments-section .common__landing-comments__post .profile-subtitle.images {
  display: flex;
  justify-content: center;
  align-items: center;
}
.comments-section .common__landing-comments__post .profile-subtitle.images img.border {
  max-height: 130px;
  aspect-ratio: 79 / 125;
}

.comments-section .common__landing-comments__post .profile-subtitle {
  font-family: 'Roboto Condensed', sans-serif !important;
  color: #ffffff !important;
  font-size: 14px !important;
}

.comments-section .common__landing-comments__post .d-flex.flex-row {
  display: none !important;
}

.comments-section hr {
  display: none !important;
}

.container-comment-form .comment-form .form-group {
  margin-bottom: 0;
}

.container-comment-form .comment-form .form-group label {
  display: none !important;
}

.container-comment-form .comment-form  .form-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px !important;
  background: rgba(23,23,23,0.5);
  width: 100% !important;
  border-top: 1px solid #343A40;
  margin-top: 0px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.comments-section .container-comment-form {
  padding: 0;
  border-radius: 30px !important;
}

.comments-section .container-comment-form .comment-form-content {
  padding: 10px;
  background: rgba(23,23,23,0.90);
  margin-top: 2px;
}

.comments-section .container-comment-form .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.comments-section .container-comment-form [class^="col-"],
.comments-section .container-comment-form [class*=" col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.container-comment-form .comment-form .form-actions button,
.container-comment-form .comment-form .form-actions a {
  margin: 0 !important;
  font-family: 'Roboto Condensed', sans-serif !important;
  color: #0DCAF0 !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 18px !important;
  padding: 10px !important;
  line-height: 24px !important;
  text-decoration: none !important;
  border: 2px solid #0DCAF0 !important;
  border-radius: 12px !important;
}

.container-comment-form .comment-form .form-actions button:hover,
.container-comment-form .comment-form .form-actions a:hover {
  color: #ffffff !important;
  background: transparent !important;
  border-color: #0DCAF0 !important;
}

.comments-section .form-actions .btn,
.comments-section .form-actions .btn-primary,
.comments-section .form-actions .btn-post-comment {
  border: 1px solid var(--bs-info) !important;
  border-radius: 12px !important;
}

.comments-section .common__landing-comments__post .d-flex.flex-row img {
  width: 120px !important;
  max-width: 120px !important;
}

.comments-section .common__landing-comments__post .contentBorder {
  border-radius: 0 !important;
  border-bottom: none !important;
}

.comments-section .common__landing-comments__post .mx-3 {
  padding: 10px !important;
  background: transparent !important;
}

.comments-section .common__landing-comments__post .timeago {
  font-family: 'Roboto Condensed', sans-serif !important;
  color: #ffffff !important;
  font-size: 14px !important;
  display: block !important;
  margin-bottom: 10px !important;
}

.comments-section .common__landing-comments__post .common__landing-comments__post-edited {
  margin: 5px 35px 0 35px !important;
  padding: 0 !important;
  text-align: right !important;
  line-height: 1 !important;
}

.comments-section .common__landing-comments__post .common__landing-comments__post-edited .timeago {
  display: inline !important;
  margin-bottom: 0 !important;
}

.comments-section .card.bg-dark a,
.comments-section .card.bg-light a,
.comments-section .card-body a {
  color: #0DCAF0 !important;
}

.comments-section .card.bg-dark a:hover,
.comments-section .card.bg-light a:hover,
.comments-section .card-body a:hover {
  color: #00ffff !important;
  text-decoration: underline !important;
}

.comments-section .common__landing-comments__post .mx-3 p,
.comments-section .common__landing-comments__post .mx-3 div {
  margin: 0 !important;
  font-family: 'Roboto Condensed', sans-serif !important;
  color: #ffffff !important;
  background: transparent !important;
  text-align: left !important;
  font-size: 18px !important;
  line-height: 24px !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
}

.comments-section .common__landing-comments__post .mx-3 {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.comments-section .common__landing-comments__post {
  position: relative !important;
  border-bottom: 1px solid #333 !important;
}

.comments-section .common__landing-comments__post .common__landing-comments__post-options {
  position: static !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 10px 20px !important;
  margin: 15px 15px 0 15px !important;
  border-top: 1px solid #343A40 !important;
  margin-top: auto !important;
}

.comments-section .common__landing-comments__post .common__landing-comments__post-option {
  margin: 0 5px !important;
  font-family: 'Roboto Condensed', sans-serif !important;
  color: #ffffff !important;
  background: transparent !important;
  text-align: left !important;
  font-size: 16px !important;
  padding: 5px 10px !important;
  line-height: 24px !important;
  text-decoration: none !important;
}

.comments-section .common__landing-comments__post .common__landing-comments__post-option:hover {
  color: #00ffff !important;
}

.comments-section .common__landing-comments__post .common__landing-comments__post-option i {
  margin-left: 5px !important;
}

.comments-section .btn-group .btn:hover,
.comments-section .btn-group a:hover,
.comments-section .btn-group button:hover,
.comments-section .btn-group .btn-default:hover,
.comments-section .btn-group .btn-reply:hover,
.comments-section .btn-group .send-message:hover,
.comments-section .btn-group .report-content:hover {
    color: #00ffff !important;
    background: rgba(0, 255, 255, 0.1) !important;
    border-color: #00ffff !important;
}

.comments-section .btn-group .btn i,
.comments-section .btn-group a i,
.comments-section .btn-group button i,
.comments-section .btn-group .btn-default i,
.comments-section .btn-group .btn-reply i,
.comments-section .btn-group .send-message i,
.comments-section .btn-group .report-content i {
    margin-right: 5px !important;
    color: #ffffff !important;
}

.comments-section .btn-group .btn .hidden-xs,
.comments-section .btn-group a .hidden-xs,
.comments-section .btn-group button .hidden-xs,
.comments-section .btn-group .btn-default .hidden-xs,
.comments-section .btn-group .btn-reply .hidden-xs,
.comments-section .btn-group .send-message .hidden-xs,
.comments-section .btn-group .report-content .hidden-xs {
    color: #ffffff !important;
}

.container-comment-form {
    border-radius: 0 0 15px 15px !important;
    border-top: none !important;
    padding-top: 2px !important;
}

/* Mobile: remove horizontal gutters on content + comments, and allow action buttons to wrap */
@media (max-width: 767px) {
    body .video-actions .btn-group,
    body .news-actions .btn-group,
    body .discussion__op-actions .btn-group,
    body .discussion__op-share .btn-group,
    body .discussion__op .btn-group {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
        max-width: 100% !important;
    }

    body .video-actions .btn-group > .btn,
    body .video-actions .btn-group > a,
    body .video-actions .btn-group > button,
    body .news-actions .btn-group > .btn,
    body .news-actions .btn-group > a,
    body .news-actions .btn-group > button,
    body .discussion__op-actions .btn-group > .btn,
    body .discussion__op-actions .btn-group > a,
    body .discussion__op-actions .btn-group > button,
    body .discussion__op-share .btn-group > .btn,
    body .discussion__op .btn-group > .btn,
    body .discussion__op .btn-group > a,
    body .discussion__op .btn-group > button {
        flex: 0 0 auto !important;
        border-radius: 4px !important;
        margin-left: 0 !important;
    }

    main.container,
    main.container-fluid,
    main > .container,
    main > .container-fluid,
    .forums-layout > .col-12,
    .discussion__op,
    .discussion__op-comments__listing,
    .comments-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .discussion__op > .row,
    .discussion__op-comments__listing > .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .discussion__op > .row > [class*="col-"],
    .discussion__op-comments__listing > [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
