.card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 5px;
}
#upload_feed_div{
position:absolute;
left:6px;
bottom:14px;
font-size:14px;
}

.upload_feed_div_ar{
position:absolute;
right:6px;
bottom:14px;
font-size:14px;
}




.for_upload_gallery_album {
    width: 212px; /* Fixed width for the div */
    height: 159px; /* Fixed height for the div */
    background-size: 90%; /* Make the image slightly smaller than the div */
    background-position: center; /* Center the image within the div */
    background-repeat: no-repeat; /* Ensure the image doesn’t repeat */
    background-color: #f8f9fa; /* Light background (Bootstrap's bg-light equivalent) */
    border-radius: 5px; /* Optional: Rounded corners */
    border: 1px solid #ddd; /* Optional: Add a border */
    box-sizing: border-box; /* Include padding and border in dimensions */
	margin:0 auto;
}




.for_upload_gallery_album:hover{cursor:pointer}

#choosen_gallery_img{margin: 0 auto;background-position: center;background-repeat: no-repeat;background-size:contain;width:640px;height:480px;}

#choosen_gallery_img:hover{cursor:zoom-in;opacity:.7}







/* Ensure modal takes the full screen */
#myModal .modal-fullscreen .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#myModal .modal-fullscreen .modal-content {
    height: 100%;
    border: none;
    border-radius: 0;
}

#myModal .modal-body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0;
    background-color: black; /* Optional: dark background for better visibility */
}

#myModal #view_img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ensures the image scales proportionally */
}





@media screen and (max-width:991px){.tooltip{font-size:16px}#choosen_gallery_img{width:320px;height:240px;}}
@media screen and (max-width:575px){.also_list_text{font-size:inherit}#upload_images{width: 75% !important;}#choosen_gallery_img{width:240px;height:180px;}}
@media screen and (max-width:300px){.un_description{display:none}#choosen_gallery_img{width:120px;height:90px;}

.for_upload_gallery_album {
    width: 74px; /* Fixed width for the div */
    height: 55px; /* Fixed height for the div */

}
}



@media screen and (max-width: 768px) {
#upload_images{
font-size:14px;	
width:75% !important;
}
}














/* Parent container styling */
.random_parent {
    padding: 10px; /* Add spacing around the images */
}



/* Spacing between rows and columns */
.row-cols-md-6 > .col {
    padding: 5px; /* Add spacing between columns */
}

/* User Info styling */
.text-center {
    margin-top: 5px;
    font-size: 0.9rem; /* Adjust font size */
    color: #666; /* Default color */
}
.text-success {
    color: green !important; /* Override for logged-in user's image */
}
.text-secondary {
    color: #999 !important; /* Override for others */
}














/* Body container */
.comments-body {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 0 0 5px 5px;

}

/* Row layout for comments */
.comments-row {
    display: flex;
    flex-direction: column;
	gap:15px;
}

/* Individual comment container */
.comment-container {
    width: 100%;

}

/* Comment block styling */
.comment-block {
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 25px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Text alignment and direction */
.comment-text {
    margin-bottom: 10px;
    font-size: 1rem;
    line-height: 1.5;
}

.comment-text.rtl {
    text-align: right;
    direction: rtl;
}

.comment-text.ltr {
    text-align: left;
    direction: ltr;
}

/* Comment text content */
.comment-text-content {
    color: #495057;
    font-weight: bold;
}

/* Divider between text and metadata */
.comment-divider {
    border-top: 1px solid #dee2e6;
    margin: 10px 0;
}

/* Metadata styling */
.comment-metadata {
    font-size: 0.9rem;
    color: #6c757d;
}

.comment-author {
    color: #343a40;
}

/* Reference styling */
.comment-reference {
    font-size: 0.9rem;
    color: #6c757d;
}

.comment-reference-link {
    text-decoration: none;
    color: #007bff;
}

.comment-reference-link:hover {
    text-decoration: underline;
}










/* Parent Container Styling */
.comment-container-wrapper {
    padding: 20px;
    border-radius: 5px;
    background-color: #f1f3f5;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Comments Info */
.comment-section-info {
    margin-bottom: 20px;
    font-family: 'Verdana', sans-serif;
    line-height: 1.5;
}

.comment-section-notice {
    font-size: 0.95rem;
    color: #495057;
    display: block;
    margin-bottom: 8px;
}

.comment-section-lang {
    font-weight: bold;
    color: #6c757d;
}

.comment-section-login {
    font-size: 0.9rem;
}

.comment-section-login a {
    color: #007bff;
    text-decoration: none;
}

.comment-section-login a:hover {
    text-decoration: underline;
}

/* Comment Form Styling */
.comment-form-box {
    margin-top: 15px;
    padding: 20px;
    border: 1px solid #dcdcdc;
    border-radius: 5px;
    background-color: #ffffff;
}

.comment-form-group-box {
    margin-bottom: 15px;
}

.comment-form-textarea {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 10px;
    font-size: 1rem;
    resize: vertical;
    min-height: 100px;
}

.comment-form-textarea:focus {
    border-color: #ffc107; /* Bootstrap warning color */
    outline: none;
}



.comment-form-submit-btn:hover {
    background-color: #218838;
}

/* Feedback Notification */
.comment-review-box_en {
    font-size: 0.85rem;
    color: #6c757d;
    background-color: #e9ecef;
    border-radius: 5px;
    text-align: left;
    padding: 10px;
}

.comment-review-box_ar {
    font-size: 0.85rem;
    color: #6c757d;
    background-color: #e9ecef;
    border-radius: 5px;
    text-align: right;
    padding: 10px;
}