.container-form {
    max-width: 75rem; /* 800px / 16px = 50rem (assuming 16px base font size) */
    margin: 0 auto;
    background: #fff;
    padding: 1.25rem; /* 20px / 16px = 1.25rem */
    border-radius: 0.5rem; /* 8px / 16px = 0.5rem */
    box-shadow: 0px 0px 0.3125rem #aaa; /* 5px / 16px = 0.3125rem */
}

.posts{
        max-width: 75rem; /* 800px / 16px = 50rem (assuming 16px base font size) */

}

.comments p {
    margin-bottom: 0.625rem; /* 10px / 16px = 0.625rem */
    padding-bottom: 0.3125rem; /* 5px / 16px = 0.3125rem */
    border-bottom: 0.0625rem solid #ddd; /* 1px / 16px = 0.0625rem */
    padding-left: 0.625rem; /* 10px / 16px = 0.625rem */
    font-size:1.1rem;
}

.comment-item {
    margin-bottom: 0.75rem; /* 12px / 16px = 0.75rem */
    padding: 0.5rem; /* 8px / 16px = 0.5rem */
    border-radius: 0.3125rem; /* 5px / 16px = 0.3125rem */
    background-color: #f8f9fa;
    border: 0.0625rem solid #ddd; /* 1px / 16px = 0.0625rem */
}

/* Forum Post Styling */
.forum-post {
    background: #e3f2fd;
    padding: 0.9375rem; /* 15px / 16px = 0.9375rem */
    border-radius: 0.5rem; /* 8px / 16px = 0.5rem */
    box-shadow: 0px 0px 0.3125rem #aaa; /* 5px / 16px = 0.3125rem */
    margin-bottom: 0.9375rem; /* 15px / 16px = 0.9375rem */    position: relative;
    z-index: 1;
}

/* Forum Header (User Info) */
.forum-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.625rem; /* 10px / 16px = 0.625rem */
}

.profile-pic {
    width: 2.5rem; /* 40px / 16px = 2.5rem */
    height: 2.5rem; /* 40px / 16px = 2.5rem */
    border-radius: 50%;
    margin-right: 0.625rem; /* 10px / 16px = 0.625rem */
}

/* Comment Container */
.comment-container {
    background: white;
    padding: 0.625rem; /* 10px / 16px = 0.625rem */
    border-radius: 0.5rem; /* 8px / 16px = 0.5rem */
    box-shadow: 0px 0px 0.1875rem #ddd; /* 3px / 16px = 0.1875rem */
    margin-top: 0.625rem; /* 10px / 16px = 0.625rem */
}

/* Individual Comment */
.comment {
    padding: 0.3125rem; /* 5px / 16px = 0.3125rem */
    margin-bottom: 0.3125rem; /* 5px / 16px = 0.3125rem */
    border-bottom: 0.0625rem solid #ccc; /* 1px / 16px = 0.0625rem */
}

.comment p {
    font-size: 18rem!important;
    margin: 0;
}

/* Comment Form */
.comment-form {
    margin-top: 0.625rem; /* 10px / 16px = 0.625rem */
}

input, textarea {
    width: 100%;
    padding: 0.5rem; /* 8px / 16px = 0.5rem */
    margin-top: 0.3125rem; /* 5px / 16px = 0.3125rem */
    border: 0.0625rem solid #ccc; /* 1px / 16px = 0.0625rem */
    border-radius: 0.3125rem; /* 5px / 16px = 0.3125rem */
    font-size: 1.4rem !important;
}

button.post{
    margin-top: 0.3125rem; /* 5px / 16px = 0.3125rem */
    padding: 0.5rem 0.75rem; /* 8px / 16px = 0.5rem; 12px / 16px = 0.75rem */
    border: none;
    background: #98c6f7;
    color: white;
    cursor: pointer;
    border-radius: 0.3125rem; /* 5px / 16px = 0.3125rem */
    font-size:1.2rem;
}

button.post:hover {
    background: #0056b3;
}

.post-options {
    position: absolute;
    top: 0;
    right: 0;
}

.comment-btn{
    background: #98c6f7;
    color: white;
    font-size:1.2rem;
}

.comment-btn:hover {
    background: #0056b3;
    color:white !important;
}
.comment-options {
    position: absolute;
    top: 5px;
    right: 10px;
}

.comment-item {
  position: relative;
  overflow: visible !important;
}
.comment-options .dropdown-menu {
  z-index: 9999 !important;
  position: absolute !important;

  
}

.post-time{
    font-size: 1.2rem;
} 
.desc{
    font-size:1.4rem;
}

.custom-modal {
  background: #fff8fc;
  border-radius: 20px;
  border: 2px solid #ffd1e0;
}

.custom-modal .modal-header {
  background-color: #ffeaf3;
  border-bottom: 1px solid #ffd1e0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.custom-modal .modal-footer {
  background-color: #ffeaf3;
  border-top: 1px solid #ffd1e0;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

#reportModal label {
  font-weight: 500;
  color: #43221b;
}

#reportModal textarea {
  resize: none;
  border-radius: 10px;
}



/* Bigger text for the entire report modal */
#reportModal .modal-content {
  font-size: 1.1rem; /* Increase overall font size */
}

/* Optional: make titles and labels even clearer */
#reportModal .modal-title {
  font-size: 1.4rem;
  font-weight: bold;
}

#reportModal .form-label,
#reportModal .form-check-label {
  font-size: 1.15rem;
}

#reportModal .form-control {
  font-size: 1.05rem;
}

#reportModal .btn {
  font-size: 1.1rem;
}