.mainvideo {
    margin: 1.25rem auto;
    display: block;
}

.maintitle
{
    margin: 1.875rem auto;
    display: block;
    text-align: center;
    color: #656f77;
    margin-top:0.0rem;
}

.hiddenvideo {
    margin: 1.25rem auto;
    display: block;
}

.emailoverlay {
  margin-top: 2.5rem;
  background: #f7f8fc;
  text-align: center;
  margin-bottom: 2.5rem;
  padding-top: 0.625rem;
  border: 0.1875rem solid #60aea4;
  border-top: none;
  border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.5625rem 0 rgba(30,59,91,0.1);
}


  



.videopreview {
  width: 100%;
  position: relative;
    margin: 1.25rem auto;
    display: block;
    filter: blur(0.25rem);
   
}


.emailcatcher {
  max-width: 28.125rem;
  min-height: 15.625rem;
  text-align: center;
  margin-top: 1.25rem;
    
    background-repeat: no-repeat;
  background-size: 100% auto;
  opacity: 0.6;
  padding-top: 6.25rem;
  border-bottom: 0.0rem solid lightsteelblue;
      margin: 1.25rem auto;
      margin-bottom: 0.0rem;
  }

.smallprint {
font-size: small;
margin-top: 0.0rem;
text-align: center;
}

.emailform {
margin-top: 0.0rem;
}


h1.title {
    margin: 0.625rem auto;
    text-align: center;
    font-size: 2.0rem;
    padding-bottom: 0.875rem;
}

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

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

.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: 1.0rem;
    padding: 0.5rem;
    /* min-width: 9.375rem; */
    margin-left: 0.625rem;
    background-color: #ff8d4b;
    color: white;
    border-color: #60aea4;
    border-radius: 0.3125rem;
    margin-top: 0.625rem;
}

a.abutton, a.abutton2, a.abutton3
{
  text-align: center;
  width: 25.0rem;
    padding: 0.75rem;
    display: block;
    margin: 1.25rem auto;
    border-style: outset;
    border-radius: 0.3125rem;
    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: 0.625rem;}

.lock {
    width: 3.125rem;
    height: auto;
    margin-top: -6.25rem;
    }
 .orangearrow {
    width: 6.25rem;
    height: auto;
    }   
    @media screen and (max-width: 40.0rem) {
  .orangearrow {
    display:none;
  }
}


.hashover .hashover-comment > .hashover-balloon {
    padding: 1.375rem!important;
}

.error
{
    border: 0.0625rem solid red;
    color: red;
    background-color: #fde4e8;
    
    }
    
.whiterow
{

    background-color: white;
  border-radius:0.625rem;  
  padding: 0.625rem;
    padding-left: 3.75rem;
    padding-bottom: 2.5rem;  
    }
    
img.sideimgleft {
    float: left;
    margin-left: -5.0rem;
    margin-right: 1.25rem;
    width: 50%;
}

img.sideimgright {
    float: right;
    margin-right: -5.0rem;
    margin-left: 1.25rem;
    width: 50%;
}

h2 {
    display: block;
    padding: 0.625rem;
  border-bottom: 0.0rem solid #60aea4;
    margin-top: 0.625rem;
 
    
   
}



hr.max {
    display: block;
    width: 50.0rem;
    visibility: hidden;
    margin-bottom: 3.125rem;
    
}

hr.mini {

    visibility: hidden;
    
}



h2.short 
{
  background-color: #ffa500;
    color: white;
    padding: 1.875rem;
    width: 108%;
    text-align: center;
    margin-left: -3.75rem;
}

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: 0.625rem;
  padding: 1.875rem;
  
    }
    
 .centertxt
 {
 text-align: center;
  }  
.hashover form, .hashover-sort-section
   { 
 border-radius: 0.1875rem;
    box-shadow: 0 0.25rem 0.5625rem 0 rgba(30,59,91,0.1);
}

input[type='email']
   { 
 max-width: 16.25rem;
}
.centered 
{
    margin: 0.0rem auto;
    width: 16.25rem;
}


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

.welcometxt
{
text-align: center;
}


.greenside span.big
{
   font-size: 3.125rem;
}

a.small {
padding-left: 2.5rem;
font-size: smaller;
}

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

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

ul {
    padding: 1.875rem;
    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: 0.625rem!important;
}


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


h3.upsellt {
  text-align: center;
    border-bottom: 0.125rem solid #ff1400;
    /* text-decoration: underline; */
    width: 18.75rem;
    margin: 1.25rem auto;
    margin-top: 6.25rem; }

  img.upsellcard {
  margin: 1.25rem auto;
    width: 31.25rem;
    display: block;
    border-radius: 0.625rem;
    max-width: 100%;
  }
  
  .descupsell {
  margin: 0.625rem auto;
  text-align: center;
    width: 31.25rem;
    display: block;
    border-radius: 0.625rem;
    max-width: 100%;
  }

.whiteblock
{
text-align: center;
    padding: 1.875rem;
    background: white;
    margin-bottom: 1.875rem;
    border-radius: 0.625rem;
    }
    
meter {
    width: 16.25rem;
    margin: 1.25rem auto;
}

img.previewimg
{
max-width: 30.0rem;
border-radius: 1.875rem;
}
.entrez
{
margin: 1.25rem 0.0rem 0.0rem 0.0rem;
}

.whiterow2 {
    background-color: white;
    border-radius: 0.625rem;
    padding: 0.625rem;
    margin-top: 0.625rem;
    padding-bottom: 0.0rem;
}


.container {
    padding-top:1.25rem;
  }
  
  .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: 0.625rem; /* 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 : 0.625rem;
    }
    
    /* Journey Tabs Styling */
    .journey-tabs-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.625rem;
        margin-bottom: 0.9375rem;
        padding-bottom: 0.625rem;
        border-bottom: 0.0625rem solid #eee;
    }
    
    .journey-tab {
        background-color: #e4e6eb;
        color: #050505;
        border: none;
        padding: 0.375rem 0.75rem;
        border-radius: 0.9375rem;
        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: 0.0rem!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: 3.125rem; }
    .modal-content { background-color: rgba(255, 255, 255, 0.9); margin: auto; padding: 0.625rem; border: 0.0625rem solid #ddd; width: 95%; max-width: 43.75rem; border-radius: 0.5rem; box-shadow: 0 0.25rem 0.9375rem rgba(0,0,0,0.2); position: relative; }
    .modal-close-btn { color: #aaa; position: absolute; top: 0.5rem; right: 1.125rem; line-height: 1; font-size: 1.75rem; font-weight: bold; cursor: pointer; }
    .modal-close-btn:hover, .modal-close-btn:focus { color: black; text-decoration: none; }
    .modal-header { padding-bottom: 0.9375rem; border-bottom: 0.0625rem solid #eee; margin-bottom: 1.25rem; display: flex; align-items: center; }
    .modal-header-avatar img { width: 2.5rem; height: 2.5rem; border-radius: 50%; margin-right: 0.625rem; 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: 0.9375rem; border-top: 0.0625rem solid #eee; margin-top: 1.25rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.625rem;} /* Added wrap and gap */
    .modal-footer .modal-actions { display: flex; gap: 0.9375rem; color: #666; font-size: 1.2em; align-items: center; flex-wrap: wrap;} /* Added wrap */
    .modal-footer .modal-buttons { display: flex; gap: 0.625rem; margin-left: auto; } /* Push buttons right */
    .modal-btn { padding: 0.5rem 0.9375rem; border: none; border-radius: 0.3125rem; 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; }
    .modal-btn-post:hover { background-color: #4854e0; color: #fff !important; text-decoration: none; }
    
    /* "Write Something" Trigger Styling */
    .create-post-trigger { background-color: #fff; padding: 0.75rem 0.9375rem; border-radius: 0.5rem; box-shadow: 0 0.0625rem 0.1875rem rgba(0,0,0,0.1); display: flex; align-items: center; cursor: pointer; margin-bottom: 1.5625rem; border: 0.0625rem solid #eee; }
    .create-post-trigger:hover { background-color: #f9f9f9; }
    .trigger-avatar img { width: 2.5rem; height: 2.5rem; border-radius: 50%; margin-right: 0.75rem; background-color: #eee; } /* Added placeholder background */
    .trigger-input { flex-grow: 1; background-color: #f0f2f5; border: none; padding: 0.625rem 0.9375rem; border-radius: 1.25rem; color: #666; font-size: 0.95em; }
    
    /* Filter Buttons Styling */
    .filter-buttons-container { display: none; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; padding-bottom: 0.9375rem; border-bottom: 0.0625rem solid #eee; align-items: center; }
    .filter-btn { background-color: #e4e6eb; color: #050505; border: none, padding: 0.375rem 0.75rem; border-radius: 0.9375rem; 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: 0.375rem 0.625rem; border-radius: 0.375rem; cursor: pointer; margin-left: auto; font-size: 1.1em; line-height: 1; }
    
    /* Comment Card Styling */
    .hashover-comments-section .hashover-comment { background-color: #fff; border: 0.0625rem solid #e0e0e0; border-radius: 0.5rem; margin-bottom: 0.9375rem; padding: 0.9375rem; box-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,0.05); cursor: pointer; transition: background-color 0.15s ease-in-out; padding-top: 0rem; padding-bottom: 0.3rem;}
    .hashover-comments-section .hashover-comment:hover { background-color: #f8f8f8; }
    .hashover-comment .hashover-header { display: flex; align-items: center; margin-bottom: 0.625rem; }
    .hashover-avatar div { width: 2.5rem; height: 2.5rem; background-size: cover; background-position: center; border-radius: 50%; margin-right: 0.625rem; 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: 0.125rem 0.375rem; border-radius: 0.1875rem; color: #333; font-weight: bold; display: inline-flex; align-items: center; display: none;}
    .hashover-comment .pinned-badge svg { margin-right: 0.1875rem; vertical-align: -0.0625rem; }
    .hashover-comment .pinned-badge img { display: none; }
    
    /* Structure for Content + Image Preview */
    .hashover-comment .feed-comment-body {
        display: flex;
        gap: 0.9375rem; /* Space between content and image */
        /* align-items: center;  Vertical alignment */
        margin-bottom: 0.625rem; /* 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: 11.25rem; /* Fixed width for preview */
        height: 11.25rem; /* Fixed height */
        border-radius: 1.0rem;
        overflow: hidden;
        margin-top: -3.125rem;
    }
    .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: 3.0rem;
        height: 3.0rem;
        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: 0.625rem; font-size: 1em; font-weight: bold; margin-bottom: 0.5rem; 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: 0.625rem; 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 1.125rem 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: 0.5rem; /* Space between thumbnails */
        margin-top: 0.625rem; /* Space above the thumbnails block */
        padding-left: 0.625rem; /* Align with content */
    }
    
    #thread-view-modal .attachment-thumbnails.horizontal-thumbnails img {
        width: 13.125rem; /* Thumbnail width */
        height: 13.125rem; /* Thumbnail height */
        object-fit: cover; /* Cover the area, cropping if necessary */
        border-radius: 0.25rem;
        border: 0.0625rem 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: 11.25rem; /* Thumbnail width */
        height: 11.25rem; /* Thumbnail height */
        object-fit: cover; /* Cover the area, cropping if necessary */
        border-radius: 0.25rem;
        border: 0.0625rem solid #ccc;
        cursor: pointer; /* Indicate it's clickable */
        transition: opacity 0.2s;
    }
    
    #thread-view-modal .thread-replies .thumbnail-item {
        position: relative;
        width: 11.25rem;
        height: 11.25rem;
        border-radius: 0.5rem;
        overflow: hidden;
        cursor: pointer;
        border: 0.0rem 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: 2.5rem;
        top: 1.25rem;
        right: 2.1875rem;
        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: 0.625rem 0.9375rem;
        cursor: pointer;
        z-index: 1001; /* Above the image */
        border-radius: 0.3125rem;
        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: 1.25rem;
    }
    #preview-nav-next {
        right: 1.25rem;
    }
    .hidden-nav {
        display: none !important;
    }
    
    
    .thread-replies .hashover-comment {
        padding: 0.3125rem;
        margin-bottom: 0.625rem;
        font-size: 0.9em;
    }
    
    
    .thread-replies .hashover-comment .hashover-header {
        border-bottom: 0.0rem 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: 0.625rem !important;
    }
    
    /* Footer positioning */
    .hashover-comment .hashover-footer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 0.625rem;
        border-top: 0.0625rem solid #f0f0f0;
    }
    
    .thread-main-comment .hashover-footer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 0.625rem;
        border-top: 0.0625rem solid #f0f0f0;
        
    }
    
    .thread-main-comment .hashover-footer .timestamp {
        
        font-size: 0.8em;
        padding-right: 0.5rem;
    }
    /* Left side with interactions stats and profile pictures */
    .hashover-comment .footer-left {
        display: flex;
        align-items: center;
        gap: 0.625rem;
    }
    
    /* 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: 0.25rem;
    }
    
    .hashover-comment .engagement-icon, .thread-main-comment .engagement-icon {
        display: inline-flex;
        margin-right: 0.3125rem;
        position: relative;
        top: 0.25rem;
    }
    
    /* 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: 0.3125rem;
    }
    
    .hashover-comment .replier-avatar {
        width: 2.0rem; /* Updated */
        height: 2.0rem; /* Updated */
        border-radius: 50%;
        overflow: hidden;
        border: 0.125rem solid white;
        box-shadow: 0 0.0625rem 0.1875rem 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: 0.25rem;
        cursor: pointer;
        color: #606770;
        font-size: 0.9em;
        font-weight: normal;
        
    }
    
    /* Like Button Styles */
    .like-section {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        position: relative; /* For tooltip positioning */
    }
    .like-button {
        background: none;
        border: none;
        padding: 0.125rem 0.25rem; /* 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: 0.5rem; /* Increased gap for better spacing, was 0.25rem */
    }
    
    .like-button:hover {
        background: none;
    }
    .like-button svg {
        width: 1.125rem; /* Adjusted size */
        height: 1.125rem; /* 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: 0.125rem; 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% + 0.3125rem); /* Position above the like section */
        left: 5%;
        transform: translateX(-50%);
        background-color: rgba(20, 20, 20, 0.9); /* Darker background */
        color: white;
        padding: 0.5rem 0.75rem;
        border-radius: 0.375rem;
        font-size: 0.8em; /* Smaller font for tooltip */
        z-index: 1000; /* Ensure it's on top */
        width: max-content;
        min-width: 6.25rem; /* Minimum width */
        max-width: 15.625rem; 
        box-shadow: 0 0.1875rem 0.5rem rgba(0,0,0,0.3);
        text-align: left;
    }
    .likers-tooltip ul {
        list-style: none;
        padding: 0;
        margin: 0;
        max-height: 9.375rem; /* Max height for scrollability */
        overflow-y: auto;
    }
    .likers-tooltip li {
        display: flex;
        align-items: center;
        gap: 0.375rem; /* Increased gap */
        padding: 0.25rem 0; /* Increased padding */
        white-space: nowrap;
    }
    .liker-avatar-tooltip {
        width: 1.375rem; /* Slightly larger avatar */
        height: 1.375rem;
        border-radius: 50%;
        object-fit: cover;
        border: 0.0625rem 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: 35.0rem; /* Standard video width, adjust as needed */
        height: auto !important;   /* Adjust height automatically to maintain aspect ratio */
        min-height: 19.375rem !important; /* Ensure it's not too small, adjust as needed */
        aspect-ratio: 16/9; /* Common video aspect ratio, adjust if needed */
        margin: 0.9375rem 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: -0.3125rem 0.0rem 0.1875rem 0.0rem rgba(255, 223, 0, 0.5); /* Yellow glow */
        border: 0.0625rem solid #ffe066; /* Slightly darker yellow border */
    }
    .thread-main-comment {
    
        border: 0.0625rem solid #e2d9d9; /* Slightly darker gray border */
        border-radius: 0.375rem;
        margin-bottom: 1.875rem;
        background: white;
        padding:0.625rem;
        padding-bottom: 1.25rem;
    }
    
    /* Style for footer-left specifically within thread-main-comment */
    .thread-main-comment .footer-left {
        display: flex;
        align-items: center;
        gap: 0.0rem; /* Custom gap for items within footer-left */
        padding-left: 0.3125rem; /* Horizontal padding */
        padding-right: 0.3125rem; /* Horizontal padding */
    }
    
    .thread-reply-button {
        background: none;
        font-weight: bold;
        border: none;
        color: #606770;
        cursor: pointer;
        padding: 0 0 0 0.5rem;
        font-size: 0.85em;
        margin-left: 0.3125rem;
        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: 20.0rem;*/
            }
            
            .hashover-content p {
    margin: 0 0 0.75rem;
    line-height: 1.7;
}
    
    /* Mobile specific adjustments */
    @media (max-width: 48.0rem) {
        .hashover-comment .feed-comment-image-preview {
            margin-top: 0.0rem;
        }
        
        #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: 0.375rem 0.75rem;
      background: #fff;
      border-radius: 0.9375rem;
      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: -0.125rem;
      z-index: -1;
      background: linear-gradient(
      to bottom right,
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      violet
      );
      border-radius: 1.0625rem;
      transition: background-color 0.5s, opacity 0.2s;
    }
    
    button#journey-button:hover::before {
      content: '';
      position: absolute;
      /* this is the border width */
      inset: -0.125rem;
      z-index: -1;
      background: linear-gradient(
      to top left,
      red,
      orange,
      yellow,
      green,
      blue,
      indigo,
      violet
      );
      border-radius: 1.0625rem;
    }
    
  body {
    background: #faf6ec;
  }
  
  .shadow-panel-wrapper {
      background: none!important;
  }
  
  .thread-reply-form-container, .thread-replies{
    max-width: 37.5rem;
    margin: 0 auto;
    margin-bottom: 0.625rem;
  }
  
  .create-post-modal .modal-content {
    max-width: 39.375rem;
  }
  
  .modal-content.wide-content {
    max-width: 51.875rem;
  }
  
  .container {
  max-width: 51.875rem;
  }

  html {
    font-size: 90%;
  }
#messageEnvelope {
      display: none !important;
  }