.mainvideo {
    margin: 20px auto;
    display: block;
}

.maintitle
{
    margin: 30px auto;
    display: block;
    text-align: center;
    color: #656f77;
    margin-top:0px;
}

.hiddenvideo {
    margin: 20px auto;
    display: block;
}

.emailoverlay {
	margin-top: 40px;
	background: #f7f8fc;
	text-align: center;
	margin-bottom: 40px;
	padding-top: 10px;
	border: 3px solid #60aea4;
	border-top: none;
	border-radius: 8px;
    box-shadow: 0 4px 9px 0 rgba(30,59,91,0.1);
}


	



.videopreview {
	width: 100%;
	position: relative;
    margin: 20px auto;
    display: block;
    filter: blur(4px);
   
}


.emailcatcher {
	max-width: 450px;
	min-height: 250px;
	text-align: center;
	margin-top: 20px;
    
    background-repeat: no-repeat;
	background-size: 100% auto;
	opacity: 0.6;
	padding-top: 100px;
	border-bottom: 0px solid lightsteelblue;
	    margin: 20px auto;
	    margin-bottom: 0px;
	}

.smallprint {
font-size: small;
margin-top: 0px;
text-align: center;
}

.emailform {
margin-top: 0px;
}


h1.title {
    margin: 10px auto;
    text-align: center;
    font-size: 32px;
    padding-bottom: 14px;
}

p.desc {
 font-size: 90%;
}

p.desc span {
display: block;
 font-size: 80%;
 padding-left: 20px;
 overflow: hidden;
 margin-top: 20px;
}

.hashover-end-links, .hashover-date-permalink {
display: none!important;
}

table.nav {
width:100%
}

form.next {
text-align: right;
}

button, a.abutton, input.submit 
{
font-size: 16px;
    padding: 8px;
    /* min-width: 150px; */
    margin-left: 10px;
    background-color: #ff8d4b;
    color: white;
    border-color: #60aea4;
    border-radius: 5px;
    margin-top: 10px;
}

a.abutton, a.abutton2, a.abutton3
{
	text-align: center;
	width: 400px;
    padding: 12px;
    display: block;
    margin: 20px auto;
    border-style: outset;
    border-radius: 5px;
    max-width: 100%;
}

.upsellbutton 
{
cursor: pointer;
}


button:hover, a.abutton:hover, input.submit:hover 
{

    background-color: #60aea4;
	border-color: #ffffff;
	color: white;
	text-decoration: none;
}

input {
padding-left: 10px;}

.lock {
    width: 50px;
    height: auto;
    margin-top: -100px;
    }
 .orangearrow {
    width: 100px;
    height: auto;
    }   
    @media screen and (max-width: 640px) {
  .orangearrow {
    display:none;
  }
}


.hashover .hashover-comment > .hashover-balloon {
    padding: 22px!important;
}

.error
{
    border: 1px solid red;
    color: red;
    background-color: #fde4e8;
    
    }
    
.whiterow
{

    background-color: white;
	border-radius:10px;  
	padding: 10px;
    padding-left: 60px;
    padding-bottom: 40px;  
    }
    
img.sideimgleft {
    float: left;
    margin-left: -80px;
    margin-right: 20px;
    width: 50%;
}

img.sideimgright {
    float: right;
    margin-right: -80px;
    margin-left: 20px;
    width: 50%;
}

h2 {
    display: block;
    padding: 10px;
	border-bottom: 0px solid #60aea4;
    margin-top: 10px;
 
    
   
}



hr.max {
    display: block;
    width: 800px;
    visibility: hidden;
    margin-bottom: 50px;
    
}

hr.mini {

    visibility: hidden;
    
}



h2.short 
{
	background-color: #ffa500;
    color: white;
    padding: 30px;
    width: 108%;
    text-align: center;
    margin-left: -60px;
}

h2.right
{
    text-align: center;
    margin-left: 20%;
    width: auto;
    }
    
.links
{
	text-align: center;
    margin: auto;
    color: grey;

     }
     
.links a 
{
text-decoration: none;
}

.greenglow 
{
background-color: #60aea4;
color: white;
}

.greenside
{
	
	background: white;
	border-radius: 10px;
	padding: 30px;
	
    }
    
 .centertxt
 {
 text-align: center;
  }  
.hashover form, .hashover-sort-section
   { 
 border-radius: 3px;
    box-shadow: 0 4px 9px 0 rgba(30,59,91,0.1);
}

input[type='email']
   { 
 max-width: 260px;
}
.centered 
{
    margin: 0px auto;
    width: 260px;
}


.hashover-header
{
background: #60aea473;
}

.welcometxt
{
text-align: center;
}


.greenside span.big
{
   font-size: 50px;
}

a.small {
padding-left: 40px;
font-size: smaller;
}

.navbar-brand {
    float: none;
    height: 60px;
  }
  
 .main-nav-container, .navbar-brand {
    display: inline!important;
  }

.navbar-brand>img {
    display: inline;
}

ul {
    padding: 30px;
    list-style-type: square;
}

span.subscribe
{
    text-align: center;
    border-left: none!important;
}

.hashover-deleted
{
    display:none;
}

.hashover-comment, .hashover-inputs
{
    border:none!important;
    overflow: visible!important;
    background: white!important;
}

.hashover-header, .hashover-inputs {
    background: white!important;
    padding: 10px!important;
}


.hashover-sort-section {
    box-shadow: none!important;
}


h3.upsellt {
	text-align: center;
    border-bottom: 2px solid #ff1400;
    /* text-decoration: underline; */
    width: 300px;
    margin: 20px auto;
    margin-top: 100px; }

	img.upsellcard {
	margin: 20px auto;
    width: 500px;
    display: block;
    border-radius: 10px;
    max-width: 100%;
	}
	
	.descupsell {
	margin: 10px auto;
	text-align: center;
    width: 500px;
    display: block;
    border-radius: 10px;
    max-width: 100%;
	}

.whiteblock
{
text-align: center;
    padding: 30px;
    background: white;
    margin-bottom: 30px;
    border-radius: 10px;
    }
    
meter {
    width: 260px;
    margin: 20px auto;
}

img.previewimg
{
max-width: 480px;
border-radius: 30px;
}
.entrez
{
margin: 20px 0px 0px 0px;
}

.whiterow2 {
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
    padding-bottom: 0px;
}


.container {
    padding-top:20px;
  }
  
  .navbar-brand-container { /* Container for the logo */
      display: inline-block; /* Or float: left; if necessary */
  }
  
  .navbar-right.logout-link { /* Style for the logout link */
      float: right;
      margin-top: 10px; /* Adjust if needed */
  }
  
  .logged-in .navbar-brand-container {
      float: left; /* Float the logo left when logged in */
  }
  .left{
      float: left;
  }
  
  .navbar-right.logout-link a {
    padding : 10px;
    }
    
    /* Journey Tabs Styling */
    .journey-tabs-container {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }
    
    .journey-tab {
        background-color: #e4e6eb;
        color: #050505;
        border: none;
        padding: 6px 12px;
        border-radius: 15px;
        font-size: 0.9em;
        cursor: pointer;
        transition: background-color 0.2s, opacity 0.2s;
        white-space: nowrap;
    }
    
    .journey-tab:hover {
        background-color: #d8dadf;
    }
    
    .journey-tab.active {
        background-color: #1877f2;
        color: white;
        font-weight: bold;
    }
    
    .journey-tab.inactive {
        opacity: 0.6;
        cursor: default;
    }
    
    .navbar {
         margin-bottom: 0px!important; 
    }
    
    .pv6, body.user-site footer {
         padding-top: 0rem !important; 
         padding-bottom: 0rem !important; 
    }
    
    /* Basic Modal Styling */
    .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6); padding-top: 50px; }
    .modal-content { background-color: rgba(255, 255, 255, 0.9); margin: auto; padding: 10px; border: 1px solid #ddd; width: 95%; max-width: 700px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); position: relative; }
    .modal-close-btn { color: #aaa; position: absolute; top: 8px; right: 18px; line-height: 1; font-size: 28px; font-weight: bold; cursor: pointer; }
    .modal-close-btn:hover, .modal-close-btn:focus { color: black; text-decoration: none; }
    .modal-header { padding-bottom: 15px; border-bottom: 1px solid #eee; margin-bottom: 20px; display: flex; align-items: center; }
    .modal-header-avatar img { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; background-color: #eee; } /* Added placeholder background */
    .modal-header-info .user-name { font-weight: bold; }
    .modal-header-info .posting-in { font-size: 0.9em; color: #666; }
    .modal-footer { padding-top: 15px; border-top: 1px solid #eee; margin-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;} /* Added wrap and gap */
    .modal-footer .modal-actions { display: flex; gap: 15px; color: #666; font-size: 1.2em; align-items: center; flex-wrap: wrap;} /* Added wrap */
    .modal-footer .modal-buttons { display: flex; gap: 10px; margin-left: auto; } /* Push buttons right */
    .modal-btn { padding: 8px 15px; border: none; border-radius: 5px; cursor: pointer; font-weight: 500; }
    .modal-btn-cancel { background-color: #eee; color: #333; }
    .modal-btn-post { background-color: #5865f2; color: white; }
    .modal-btn-post:disabled { background-color: #ccc; cursor: not-allowed; }
    
    /* "Write Something" Trigger Styling */
    .create-post-trigger { background-color: #fff; padding: 12px 15px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; align-items: center; cursor: pointer; margin-bottom: 25px; border: 1px solid #eee; }
    .create-post-trigger:hover { background-color: #f9f9f9; }
    .trigger-avatar img { width: 40px; height: 40px; border-radius: 50%; margin-right: 12px; background-color: #eee; } /* Added placeholder background */
    .trigger-input { flex-grow: 1; background-color: #f0f2f5; border: none; padding: 10px 15px; border-radius: 20px; color: #666; font-size: 0.95em; }
    
    /* Filter Buttons Styling */
    .filter-buttons-container { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; align-items: center; }
    .filter-btn { background-color: #e4e6eb; color: #050505; border: none, padding: 6px 12px; border-radius: 15px; font-size: 0.9em; cursor: pointer; transition: background-color 0.2s; white-space: nowrap; } /* Added nowrap */
    .filter-btn:hover { background-color: #d8dadf; }
    .filter-btn.active { background-color: #1877f2; color: white; font-weight: bold; }
    .filter-more-btn, .filter-sort-btn { background-color: #e4e6eb; border: none; padding: 6px 10px; border-radius: 6px; cursor: pointer; margin-left: auto; font-size: 1.1em; line-height: 1; }
    
    /* Comment Card Styling */
    .hashover-comments-section .hashover-comment { background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 15px; padding: 15px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); cursor: pointer; transition: background-color 0.15s ease-in-out; }
    .hashover-comments-section .hashover-comment:hover { background-color: #f8f8f8; }
    .hashover-comment .hashover-header { display: flex; align-items: center; margin-bottom: 10px; }
    .hashover-avatar div { width: 40px; height: 40px; background-size: cover; background-position: center; border-radius: 50%; margin-right: 10px; background-color: #eee; } /* Added placeholder background */
    
    /* Specific styling for notification comment avatars */
    div.hashover-comment.notification-comment .hashover-avatar div {
        background-size: contain; /* Override general rule */
        background-repeat: no-repeat; /* Add no-repeat */
        background-position: center center; /* Ensure centering */
        background-color: #f0f0f0; /* Optional: lighter background for 'contain' */
    }
    
    .hashover-comment .hashover-comment-name span:first-child { font-weight: bold; color: #050505; }
    .hashover-comment .comment-time { display: none !important; }
    .hashover-comment .pinned-badge { margin-left: auto; font-size: 0.8em !important; background-color: #ddd; padding: 2px 6px; border-radius: 3px; color: #333; font-weight: bold; display: inline-flex; align-items: center; display: none;}
    .hashover-comment .pinned-badge svg { margin-right: 3px; vertical-align: -1px; }
    .hashover-comment .pinned-badge img { display: none; }
    
    /* Structure for Content + Image Preview */
    .hashover-comment .feed-comment-body {
        display: flex;
        gap: 15px; /* Space between content and image */
        /* align-items: center;  Vertical alignment */
        margin-bottom: 10px; /* Space before footer */
    }
    .hashover-comment .feed-comment-main-content {
        flex-grow: 1; /* Takes available space */
        min-width: 0; /* Prevent content from overflowing */
    }
    .hashover-comment .feed-comment-image-preview {
        flex-shrink: 0; /* Prevent image from shrinking */
        width: 180px; /* Fixed width for preview */
        height: 180px; /* Fixed height */
        border-radius: 16px;
        overflow: hidden;
        margin-top: -50px;
    }
    .hashover-comment .feed-comment-image-preview img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      /*  background-color: #eee;*/
    }
    .feed-comment-image-preview .play-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 48px;
        height: 48px;
        background-image: url('/img/playbutton.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.85;
        transition: opacity 0.2s;
        pointer-events: none;
        z-index: 2;
    }
    .feed-comment-image-preview:hover .play-overlay {
        opacity: 1;
    }
    
    /* Hide original image container in feed */
    .hashover-comment .comment-images-inside { display: none; }
    
    /* Balloon styling reset */
    .hashover-comment .hashover-balloon { padding: 0; background: none; box-shadow: none; }
    .hashover-comment .comment-title, .thread-main-comment .comment-title  { text-align: left; padding-left: 10px; font-size: 1em; font-weight: bold; margin-bottom: 8px; color: #050505; }
    .hashover-comment .hashover-content, .thread-main-comment .hashover-content, .thread-main-comment .description-content { text-align: left; font-size: 0.85em; padding-left: 10px; color: #1c1e21; line-height: 1.6; word-wrap: break-word; } /* Added pre-wrap */
    
    .hashover-comment .hashover-content p, .thread-main-comment .description-content p { margin: 0 0 18px 0; } /* Added pre-wrap */
    
    
    .hashover-comment .feed-comment-main-content .hashover-content {
        max-height: 4em;
        overflow: hidden;
        position: relative;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        padding-bottom: 1.5em; /* Add padding at bottom for gradient */
        line-height: 1.4em; /* Explicitly set line height */
    }
    
    .hashover-comment .feed-comment-main-content .hashover-content::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3em; /* Increase height of gradient */
        background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 60%, rgba(255, 255, 255, 1) 100%);
        pointer-events: none;
        top: auto; /* Ensure it stays at bottom */
        margin-top: 2.8em; /* Start gradient after two lines (2 * 1.4em) */
    }
    
    /* Ensure full visibility in thread view modal */
    #thread-view-modal .hashover-content {
        max-height: none !important;
        overflow: visible !important;
        -webkit-line-clamp: initial !important;
    }
    
    #thread-view-modal .hashover-content::after {
        display: none !important;
    }
    
    /* Horizontal Thumbnails Styling (within thread modal) */
    #thread-view-modal .attachment-thumbnails.horizontal-thumbnails {
        display: flex;
        flex-direction: row; /* Stack items horizontally */
        flex-wrap: wrap; /* Allow wrapping to next line if space is insufficient */
        gap: 8px; /* Space between thumbnails */
        margin-top: 10px; /* Space above the thumbnails block */
        padding-left: 10px; /* Align with content */
    }
    
    #thread-view-modal .attachment-thumbnails.horizontal-thumbnails img {
        width: 210px; /* Thumbnail width */
        height: 210px; /* Thumbnail height */
        object-fit: cover; /* Cover the area, cropping if necessary */
        border-radius: 4px;
        border: 1px solid #ccc;
        cursor: pointer; /* Indicate it's clickable */
        transition: opacity 0.2s;
    }
    
    #thread-view-modal .attachment-thumbnails.horizontal-thumbnails img:hover {
        opacity: 0.8;
    }
    
    
    #thread-view-modal .thread-replies  .attachment-thumbnails.horizontal-thumbnails img,  #thread-view-modal .thread-replies  .attachment-single {
        width: 180px; /* Thumbnail width */
        height: 180px; /* Thumbnail height */
        object-fit: cover; /* Cover the area, cropping if necessary */
        border-radius: 4px;
        border: 1px solid #ccc;
        cursor: pointer; /* Indicate it's clickable */
        transition: opacity 0.2s;
    }
    
    #thread-view-modal .thread-replies .thumbnail-item {
        position: relative;
        width: 180px;
        height: 180px;
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
        border: 0px solid #e0e0e0;
    }
    
    /* Image Preview Modal Styling */
    #image-preview-modal {
        background-color: rgba(0,0,0,0.85); /* Darker overlay */
        display: flex; /* For centering content */
        align-items: center; /* Vertical centering */
        justify-content: center; /* Horizontal centering */
    }
    
    #image-preview-modal .modal-close-btn { /* Style for the close button on this specific modal */
        color: white;
        font-size: 40px;
        top: 20px;
        right: 35px;
        line-height: 1;
    }
    
    #image-preview-modal .modal-content-image-preview {
        max-width: 80vw; /* Max width relative to viewport */
        max-height: 90vh; /* Max height relative to viewport */
        display: block; /* Remove extra space below image */
        object-fit: contain; /* Ensure whole image is visible */
    }
    
    /* Image Preview Modal Navigation Arrows */
    .preview-nav-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        font-size: 2em;
        padding: 10px 15px;
        cursor: pointer;
        z-index: 1001; /* Above the image */
        border-radius: 5px;
        user-select: none; /* Prevent text selection */
        transition: background-color 0.2s;
    }
    .preview-nav-arrow:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }
    #preview-nav-prev {
        left: 20px;
    }
    #preview-nav-next {
        right: 20px;
    }
    .hidden-nav {
        display: none !important;
    }
    
    
    .thread-replies .hashover-comment {
        padding: 5px;
        margin-bottom: 10px;
        font-size: 0.9em;
    }
    
    
    .thread-replies .hashover-comment .hashover-header {
        border-bottom: 0px solid #e7e7e3;
    }
    
    .thread-main-comment .hashover-comment-name span:first-child {
        font-weight: bold;
        color: #050505;
    }
    
    .thread-main-comment .hashover-header {
        display: flex;
        align-items: center;
        
    }
    
    .thread-main-comment .comment-time {
        display: none !important;
    }
    
    .thread-replies .hashover-header, .hashover-inputs {
        background-color: #fcfcfc;
        padding: 10px !important;
    }
    
    /* Footer positioning */
    .hashover-comment .hashover-footer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 10px;
        border-top: 1px solid #f0f0f0;
    }
    
    .thread-main-comment .hashover-footer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 10px;
        border-top: 1px solid #f0f0f0;
        
    }
    
    .thread-main-comment .hashover-footer .timestamp {
        
        font-size: 0.8em;
        padding-right: 8px;
    }
    /* Left side with interactions stats and profile pictures */
    .hashover-comment .footer-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    /* Styling for the engagement metrics */
    .hashover-comment .engagement-metrics, .thread-main-comment .engagement-metrics {
        display: flex;
        align-items: center;
        color: #606770;
        font-size: 0.9em;
    }
    
    .hashover-comment .engagement-count {
        color: #65676b;
        font-weight: 500;
        margin-right: 4px;
    }
    
    .hashover-comment .engagement-icon, .thread-main-comment .engagement-icon {
        display: inline-flex;
        margin-right: 5px;
        position: relative;
        top: 4px;
    }
    
    /* Timestamp styling */
    .hashover-comment .timestamp {
        color: #65676b;
        font-size: 0.8em;
        margin-left: auto;
    }
    
    /* Make the profile pictures styling look better */
    .hashover-comment .replier-avatars {
        display: flex;
        align-items: center;
        margin-left: 5px;
    }
    
    .hashover-comment .replier-avatar {
        width: 32px; /* Updated */
        height: 32px; /* Updated */
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid white;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    
    .hashover-comment .like-button,
    .hashover-comment .comment-button {
        background: none;
        border: none;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        color: #606770;
        font-size: 0.9em;
        font-weight: normal;
        
    }
    
    /* Like Button Styles */
    .like-section {
        display: flex;
        align-items: center;
        gap: 4px;
        position: relative; /* For tooltip positioning */
    }
    .like-button {
        background: none;
        border: none;
        padding: 2px 4px; /* Added some padding for easier clicking */
        cursor: pointer;
        color: #606770; /* Default color */
        transition: color 0.2s, transform 0.2s;
        display: flex; /* To align icon and potential text */
        align-items: center;
        gap: 8px; /* Increased gap for better spacing, was 4px */
    }
    
    .like-button:hover {
        background: none;
    }
    .like-button svg {
        width: 18px; /* Adjusted size */
        height: 18px; /* Adjusted size */
        fill: currentColor;
    }
    .like-button.liked {
        color: #1877f2; /* Blue when liked */
    }
    /* .like-button.liked svg { // Already handled by fill: currentColor on parent
        fill: #1877f2; 
    } */
    .like-button:hover svg {
        transform: scale(1.15); /* Slightly larger hover effect */
    }
    
    /* Animation for like click */
    .like-button.animated svg { /* Apply animation to SVG for better visual effect */
        animation: likePulse 0.4s ease-out;
    }
    @keyframes likePulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.4); }
        100% { transform: scale(1); }
    }
    
    .like-count {
        font-size: 0.9em;
        color: #606770;
        /* margin-left: 2px; Removed: Rely on parent like-section gap */
        cursor: default; /* Indicate it's not clickable, but hoverable for tooltip */
    }
    
    .likers-tooltip {
        display: none;
        position: absolute;
        bottom: calc(100% + 5px); /* Position above the like section */
        left: 5%;
        transform: translateX(-50%);
        background-color: rgba(20, 20, 20, 0.9); /* Darker background */
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 0.8em; /* Smaller font for tooltip */
        z-index: 1000; /* Ensure it's on top */
        width: max-content;
        min-width: 100px; /* Minimum width */
        max-width: 250px; 
        box-shadow: 0 3px 8px rgba(0,0,0,0.3);
        text-align: left;
    }
    .likers-tooltip ul {
        list-style: none;
        padding: 0;
        margin: 0;
        max-height: 150px; /* Max height for scrollability */
        overflow-y: auto;
    }
    .likers-tooltip li {
        display: flex;
        align-items: center;
        gap: 6px; /* Increased gap */
        padding: 4px 0; /* Increased padding */
        white-space: nowrap;
    }
    .liker-avatar-tooltip {
        width: 22px; /* Slightly larger avatar */
        height: 22px;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid #555; /* Small border for avatar */
    }
    /* End Like Button Styles */
    
    /* Hide Vimeo iframes in the main feed (not in modal/thread view) */
    .hashover-comment iframe[src*="player.vimeo.com"] {
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    
    /* Ensure Vimeo iframes embedded in comment content are visible in the thread view modal */
    #thread-view-modal .hashover-content iframe[src*="player.vimeo.com"] {
        visibility: visible !important;
        display: block !important;
        width: 100% !important;    /* Make it responsive */
        max-width: 560px; /* Standard video width, adjust as needed */
        height: auto !important;   /* Adjust height automatically to maintain aspect ratio */
        min-height: 310px !important; /* Ensure it's not too small, adjust as needed */
        aspect-ratio: 16/9; /* Common video aspect ratio, adjust if needed */
        margin: 15px auto !important; /* Center block element with some vertical margin */
        padding: 0 !important;
        border: none !important; /* Override default iframe border if any */
    }
    
    
    .hashover-comment.featured-comment {
        background-color: #fffadf; /* Light yellow background */
        box-shadow: -5px 0px 3px 0px rgba(255, 223, 0, 0.5); /* Yellow glow */
        border: 1px solid #ffe066; /* Slightly darker yellow border */
    }
    .thread-main-comment {
    
        border: 1px solid #e2d9d9; /* Slightly darker gray border */
        border-radius: 6px;
        margin-bottom: 30px;
        background: white;
        padding:10px;
        padding-bottom: 20px;
    }
    
    /* Style for footer-left specifically within thread-main-comment */
    .thread-main-comment .footer-left {
        display: flex;
        align-items: center;
        gap: 0px; /* Custom gap for items within footer-left */
        padding-left: 5px; /* Horizontal padding */
        padding-right: 5px; /* Horizontal padding */
    }
    
    .thread-reply-button {
        background: none;
        font-weight: bold;
        border: none;
        color: #606770;
        cursor: pointer;
        padding: 0 0 0 8px;
        font-size: 0.85em;
        margin-left: 5px;
        vertical-align: middle;
    }
    
    .thread-reply-button:hover {
                
                background: none;
    border: none;
    color: #007bff;
    
            }
            /* Ensure like section and reply button are on the same line */
            #thread-view-modal .like-section {
                display: flex;
                align-items: center;
            }
            
   .notification-comment .feed-comment-image-preview
            {
          /*      width: 320px;*/
            }
            
            .hashover-content p {
    margin: 0 0 12px;
    line-height: 1.7;
}
    
    /* Mobile specific adjustments */
    @media (max-width: 768px) {
        .hashover-comment .feed-comment-image-preview {
            margin-top: 0px;
        }
        
        #image-preview-modal .modal-content-image-preview {
            max-width: 90vw; /* Max width relative to viewport */
            max-height: 90vh; /* Max height relative to viewport */
            display: block; /* Remove extra space below image */
            object-fit: contain; /* Ensure whole image is visible */
        }
    }
button#journey-button {
    
      position: relative;
      /* font-family: sans-serif; */
      font-size: 0.9em;
      padding: 6px 12px;
      background: #fff;
      border-radius: 15px;
      color: #050505;
      cursor: pointer;
      transition: background-color 0.2s, opacity 0.2s;
    }
    
    
    button#journey-button:hover {
    

      background: #f0f0f0;
      color: #1778f2;
      cursor: pointer;
      transition: background-color 0.5s, opacity 0.2s;
    }
     
    button#journey-button:before {
      content: '';
      position: absolute;
      /* this is the border width */
      inset: -2px;
      z-index: -1;
      background: linear-gradient(
      to bottom right,
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      violet
      );
      border-radius: 17px;
      transition: background-color 0.5s, opacity 0.2s;
    }
    
    button#journey-button:hover::before {
      content: '';
      position: absolute;
      /* this is the border width */
      inset: -2px;
      z-index: -1;
      background: linear-gradient(
      to top left,
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      violet
      );
      border-radius: 17px;
    }
    
  body {
    background: #f7f8fc;
  }
  
  .shadow-panel-wrapper {
      background: none!important;
  }
  
  .thread-reply-form-container, .thread-replies{
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 10px;
  }
  
  .create-post-modal .modal-content {
    max-width: 630px;
  }
  
  .modal-content.wide-content {
    max-width: 830px;
  }
  
  .container {
  max-width: 830px;
  }