address i{
    margin-left: 10px;
}
.fa-trash-alt{
    cursor: pointer;
}

.vm-url .vms-spinner{
    width:12px;
    height:12px;
    display: inline-block;
    margin-bottom:0;
}
.vm-circle-badge{
    display: inline-block;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    background-color: #000000;
    color: white;
    font-size: 0.6rem;
    font-weight: 600;
    border-radius: 50%;
}
.vm-login-form .vms-spinner{
    display: inline-block;
    margin: 0;
}
.vm-form-logged-out{
    opacity: 0.4;
}
.vm-login-form h2{
    margin-bottom:20px;
}
button .vms-spinner{
    display: inline-block;
    width: 14px;
    height: 14px;
    background: conic-gradient(#000 10%,#fff);
    margin: 0;
    margin-left: 0px;
    margin-left: 5px;
}

/*Loop wrapper*/
.vm-loop-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}
.vm-loop-grid-item{
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-radius: 0.4rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
}
.vm-loop-grid-item a{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.vm-loop-grid-item img{
    width: 100%;
}
.vm-loop-grid-item-content{
    padding:0.6rem;
}
.vm-loop-grid-item-content h2{
    font-size: 0.8rem;
    font-weight: 500;
    margin:0;
}
.vm-loop-grid-item-content-below-header{
    color: #848383;
    font-size: 0.6rem;
}

.vm-loop-grid-item .vm-product-loop-wrapper{
    margin-top:0;
}

.vm-loop-grid-item-footer .vm-product-price .price{
    margin-top:0.8rem;
    font-size: 0.8rem !important;
}

.vm-loop-grid-item-footer{
    margin-top: auto;
    font-size: 0.7rem;
}
.vm-loop-grid-item-footer-top{
    padding: 0.8rem;
}
.vm-loop-grid-item-footer-bottom{
    border-top: solid 1px #c4c3c3;
    padding: 0.8rem;
    padding-bottom: 0.3rem;
    color: #848383;
    text-transform: capitalize;
}

/* scroll*/
.vm-scroll-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.vm-scroll-snap {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 8px;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.vm-scroll-snap::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.vm-scroll-snap::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
.vm-scroll-card {
    flex: 0 0 auto;
    width: 200px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 8px;
    scroll-snap-align: start;
    scroll-snap-align: start; /* snap each card */
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}
.vm-scroll-card p{
    margin:0;
}

.vm-scroll-snap .vm-scroll-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vm-scroll-snap .vm-scroll-card:hover {
    transform: scale(1.05);   /* grows 5% bigger */
    z-index: 2; /* make sure it pops above neighbors */
}

.vm-scroll-btn {
    position: absolute;
    z-index: 100;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: rgba(255,255,255,0.9);
    font-size: 1.8rem;
    cursor: pointer;
    padding: .25em .5em;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    transition: opacity .2s;
  }
  
.vm-scroll-btn.prev { left: -1rem; }
.vm-scroll-btn.next { right: -1rem; }
.vm-scroll-btn.hidden { opacity: 0; pointer-events: none; }


/* Add green checkmark when slug is available */
.vm-available{
    position: relative;
}
.vm-available::after, .vm-checked::after {
    content: '\f00c'; /* Font Awesome check icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #4CAF50;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

/* Add red cross when slug is taken */
.vm-not-available::after {
    content: '\f00d'; /* Font Awesome times (X) icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #FF6F61;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

label.vm-success {
    font-size:0.8rem !important;
}

.vm-vendor-dashboard-invites .flex-table {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.vm-vendor-dashboard-invites .flex-row {
    display: flex;
    width: 100%;
}

.vm-vendor-dashboard-invites .flex-cell {
    flex: 1;
    border: 1px solid #ddd;
    padding: 8px;
    box-sizing: border-box;
}

.vm-vendor-dashboard-invites .flex-header .flex-cell {
    font-weight: bold;
    background-color: #f2f2f2;
}

/* Optional styling for better table look */
.vm-vendor-dashboard-invites .flex-row:nth-child(even) {
    background-color: #f9f9f9;
}

.vm-vendor-dashboard-invites .flex-row:hover {
    background-color: #ddd;
}
.gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Create a grid with three equal columns */
    gap: 10px; /* Space between columns */
    padding: 0px; /* Padding around the container */
}
.gallery figure{
    padding: 0px; /* Padding inside columns */
    box-sizing: border-box; /* Include padding and border in the item's total width */
}
.gallery br{
    display:none;
}
/* dokan */
.dokan-profile-completeness{
    display: none;
}
.request-popup-wrapper input{
    border-radius:50px !important;
    background-color:#E8F0E8;
    border:0 !important;
    color:#6C8C6C;
    cursor: pointer;
}
.request-popup-wrapper input::placeholder{
    color:#6C8C6C !important;
    font-weight: 500;
    opacity: 1;
} 
.request-popup-wrapper input:hover{
    background-color: #DEE6DE;
}

.messenger-popup-bottom{
    height:200px;
}
/* profile */
.vm-user-profile {
    display: flex; /* Align items in a row */
    align-items: center; /* Center items vertically */
    text-decoration: none; /* Remove underline from the link */
    border-top: solid 1px #B6BEB6;
    padding-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
}
.vm-user-profile-avatar{
   
}
.vm-user-profile p{
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 22px;
}
.vm-user-profile a {
    display: flex; /* Ensure the link also uses flexbox */
    align-items: center; /* Center items vertically within the link */
    text-decoration: none; /* Remove underline from the link */
    color: inherit; /* Inherit color from parent, or set a specific color */
}
#vm-user-profile-picture-wrapper{
    border: solid 1px #B6BEB6;
    border-radius: 10px;
    padding: 20px;
}
#vm-user-profile-picture, .vm-user-profile-picture{
    width: 30px;
    height: 30px;
    border-radius: 50%; /* Makes the div circular */
    overflow: hidden; /* Ensures the image doesn't spill outside the circle */
    background-size: cover; /* Scale the image to cover the container */
    background-position: center; /* Center the image within the container */
}
.vm-user-profile #vm-user-profile-picture{
    width: 24px; /* This should match or be slightly larger than the max-width of the image */
    height: 24px; /* Same as width to maintain a circular shape */
    
}
.vm-user-profile .vm-user-profile-name {
    margin-left: 10px;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
}

/*Vendor */
.woocommerce .vm-vendor-product-loop ul.products::before {
    display: none;
  }
.vm-vendor-product-loop ul{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}
.vm-vendor-product-loop ul.products li.product {
    width: 100% !important;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.vm-vendor-product-loop h2, .vm-vendor-product-loop .price{
    margin-right:10px;
    margin-left:10px;
}
.vm-vendor-product-loop img{
    width: 100%;
}
/*user interaction */
.social-details{
    margin-top:0px;
}
.social-details-count{
    display: flex;
    gap: 0.6rem;
}
.social-details-buttons{
    display: flex;
    align-items: center;
    margin-top:5px;
    padding-top: 8px;
    border-top: 1px solid #000;
}
.social-details-buttons .vm-product-i{
    flex: 1;
    text-align: right;
}
.social-details button {
    background-color: transparent !important;
    font-size: 18px;
    padding: 0px 8px;
    display: inline-block;
    font-size:12px;
    text-transform: capitalize;
    border:none;
    color:#000;
}
.social-details-buttons button:hover {
    background-color: #f2f2f2 !important;
    box-shadow: none !important;
}
.social-details button i{
    font-size: 18px;
    margin:0;
}
.social-details-wrapper.icon .social-details button i{
    font-size: 12px;
}
.vm-interactions-like-wrapper, .vm-interactions-comment-wrapper{
    display: none;
}
.vm-interactions-like-wrapper.active, .vm-interactions-comment-wrapper.active{
    display: block;
}
.vm-like-button i::before {
    font-family: "Font Awesome 6 Free";
    content: "\f164";
    font-weight: 400; /* regular */
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }
  
  /* solid */
  .vm-like-button.liked i::before {
    font-weight: 900;
}

.like-button{
    cursor: pointer;
}
.vm-like-button.liked{
    color: #6C8C6C;
}

.like-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px; /* Adjust size as needed */
    height: 15px; /* Adjust size as needed */
    background-color: #6C8C6C; /* Change to your desired background color */
    border-radius: 50%; /* Makes it round */
    color: #E8F0E8; /* Change icon color */
    font-size: 10px;
}
.like-round i{
    margin-right: 0 !important;
}

.comment-reply .social-details-count{
    display: inline-block;
}
/*comments*/
.vm-interactions-comment-post-content .content_image img{
    width: 100%;
}
.vm-comment-form-container{
    margin-top:2rem;
    margin-bottom:2rem;
    background-color: #f2f2f2;
    border-radius: 1rem;
    padding: 1rem;
}
.vm-comments-container .vm-comment-form-container{
    display: none;
}
.vm-comment-form .vm-btn{
    margin-top:10px;
    width: 100%;
}
.vm-comment-form .vm-text-comment{
    border-radius: 1rem;
}
.vm-comment, .vm-nested-comment {
    display: flex; /* Use flexbox for layout */
    align-items: flex-start; /* Align items at the start */
    margin-bottom: 20px; /* Space between comments */
    margin-top: 20px;
}
.vm-comment .vm-user-profile-picture {
    width: 40px; /* Adjust the width of the profile picture */
    height: 40px; /* Adjust the height of the profile picture */
    margin-right: 10px; /* Space between the image and the content */
}
.vm-comment-content-wrapper{
    flex: 1; /* Allow this section to grow */
}
.vm-comment-content {
    background-color: #f2f2f2;
    border-radius: 10px;
    padding: 10px;
    font-size: 14px;
}
.vm-comment-content h3{
    margin-bottom:0px;
    font-size: 14px !important;
    text-transform: capitalize !important;
    display: inline-block;
}
.published_time{
    float: right;
}
/* Footer */
/* Popup overlay styles */
#vmLoginPopup {
    display: none; /* Initially hidden */
    position: fixed; /* Fixed position */
    top: 0;
    left: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
    z-index: 1000; /* Higher stacking context */
}

/* Popup content styles */
.vm-popup-content {
    position: absolute; /* Absolute positioning */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust centering */
    background-color: white; /* Background color */
    border-radius: 8px; /* Rounded corners */
    padding: 50px; /* Padding inside the popup */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Shadow effect */
    width: 600px; /* Set a fixed width */
    text-align: center; /* Center text */
    overflow: scroll;
    max-height: 70vh;
}
#lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 1000;
    display: none;
}

#lightbox-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    background: #fff;
    padding: 10px;
    text-align: center;
}

/* Image Styles */
#lightbox-content img {
    max-width: 100%; /* Limit width to 100% of the content box */
    max-height: 80vh; /* Limit height to 80% of the viewport height */
    display: block; /* Make the image a block element */
    margin: 0 auto; /* Center the image */
}

#lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #000;
    border: none;
    cursor: pointer;
    height: 30px;
    width: 30px;
}

#lightbox-prev, #lightbox-next {
    position: absolute;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    color: #000;
    border: none;
    cursor: pointer;
    z-index: 1002;
    height: 30px;
    width: 30px;
}

#lightbox-prev {
    left: 10px;
}

#lightbox-next {
    right: 10px;
}

/*Follow*/
.vm-btn.vm-follow-button{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.6rem;
    font-weight: 500;
    padding: 3px 6px;
    
}
.vm-btn.vm-follow-button .avatar, .vm-btn.vm-follow-button .avatar-text{
    width: 20px;
    height: 20px;
    margin-right: 5px;
    font-size: 0.7rem;
}
/* Tablet view adjustments */
@media (max-width: 1024px) {
    /* vendor */
    .vm-vendor-product-loop ul{
        grid-template-columns: repeat(4, 1fr);
    }
}
/* Mobile view adjustments */
@media (max-width: 768px) {
    .vm-vendor-dashboard-invites .flex-row {
        flex-direction: column;
    }
    
    .vm-vendor-dashboard-invites .flex-cell {
        display: flex;
        justify-content: space-between;
        padding: 8px 16px;
    }

    .vm-vendor-dashboard-invites .flex-cell:before {
        content: attr(data-label);
        font-weight: bold;
    }

    .vm-vendor-dashboard-invites .flex-header {
        display: none;
    }
    .gallery {
        grid-template-columns: repeat(4, 1fr); /* Stack columns vertically on small screens */
    }
    /* Popup content */
    .popup-content {
        background-color: #fff;
        margin: 5% auto;
        padding: 20px;
        width: 90%;
        box-shadow: 0px 12px 28px 0px rgba(0, 0, 0, 0.5);
        border-radius: 10px;
    }
    /* vendor */
    .vm-vendor-product-loop ul{
        grid-template-columns: repeat(2, 1fr);
    }
    /* Popup content styles */
    .vm-popup-content {
        padding: 10px; /* Padding inside the popup */
        width: 90%; /* Set a fixed width */
        max-height: 80vh;
    }
    
    /*lightbox*/
    #lightbox-content{
        width: 90%;
    }
    .vm-scroll-btn{
        font-size: 1.2rem;
    }
    .vm-scroll-btn.prev {
        left: -0.1rem;
      }
      .vm-scroll-btn.next {
        right: -0.1rem;
      }
}
@keyframes spinner-zp9dbg {
    to {
       transform: rotate(1turn);
    }
 }


 .vm-loading {
    font-size: 20px; /* Adjust font size as needed */
    display: flex; /* Align items in a row */
    align-items: center; /* Center vertically */
}

.vm-dot {
    display: inline-block; /* Make the dots inline-block */
    width: 6px; /* Dot width */
    height: 6px; /* Dot height */
    margin-left: 2px; /* Space between dots */
    border-radius: 50%; /* Make dots circular */
    background-color: #c5c4c4; /* Dot color */
    animation: bounce 1s infinite; /* Animation for bouncing effect */
}

/* Define the bounce animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0); /* Start and end at the same height */
    }
    50% {
        transform: translateY(-6px); /* Move up by 10px at the middle */
    }
}

/* Add a staggered effect for each dot */
.vm-dot:nth-child(2) {
    animation-delay: 0.2s; /* Delay for the second dot */
}

.vm-dot:nth-child(3) {
    animation-delay: 0.4s; /* Delay for the third dot */
}