.green-dot-active {
    width: 12px; /* Slightly larger for better visibility */
    height: 12px;
    background-color: #28a745; /* Elegant green shade */
    border: 2px solid #d4edda; /* Subtle border to add depth */
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px rgba(40, 167, 69, 0.5); /* Soft glow for elegance */
    animation: pulse-green 1.5s infinite; /* Pulsing effect */
}

.red-dot-active {
    width: 12px;
    height: 12px;
    background-color: #dc3545; /* Elegant red shade */
    border: 2px solid #f8d7da; /* Subtle border to add depth */
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px rgba(220, 53, 69, 0.5); /* Soft glow for elegance */
    animation: pulse-red 1.5s infinite; /* Pulsing effect */
}

/* Animation for green dot */
@keyframes pulse-green {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 0 12px rgba(40, 167, 69, 0.7);
    }
}

/* Animation for red dot */
@keyframes pulse-red {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(220, 53, 69, 0.5);
    }
    50% {
        transform: scale(1.2);
        box-shadow: 0 0 12px rgba(220, 53, 69, 0.7);
    }
}

/* siadbar
----------------------------------------------- */
.scroll-container {
    max-height: calc(100vh - 100px); /* Adjust for your layout */
    overflow-y: auto;
    scrollbar-width: thin;
  }
  
  .scroll-container::-webkit-scrollbar {
    width: 8px;
  }
  
  .scroll-container::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
  }
  
  .scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }
 
  /* membure name 
----------------------------------------------- */
.username-name .name-title,
.ref-name .name-title {
  font-weight: bold; /* Make the title bold */
  font-size: calc(100% + 2px);  /* Increase font size by 2px (~2-3%) */
  color: #555;      /* Darker color for the title */
  margin-right: 5px; /* Optional: space between title and name */
}



/* pop */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-box {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 400px;
  text-align: center;
}

.popup-box h4 {
  margin-bottom: 20px;
}



/* sidebar */
.sidebar {
  position: fixed;
  top: 70px;
  left: -250px;
  width: 220px;
  height: 100%;
  background: var(--vz-secondary-bg);
  transition: left 0.3s ease-in-out;
  padding: 20px;
  z-index: 999;
}
.sidebar.open {
  left: 2px;
}
.sidebar nav ul {
  list-style: none;
  padding: 0;
}
.sidebar nav ul li {
  padding: 10px 0;
}
.sidebar nav ul li a {
  text-decoration: none;
  color: inherit;
}

/* img */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  /* background: rgb(255, 253, 253); */
  padding: 10px;
  border-radius: 10px;
  max-width: 90%;
  max-height: 90%;
}

.modal-image {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 10px;
}

/* loder */
.loader {
  border: 8px solid #F3F3F3;
  margin: 0 auto;
  animation: spin 2s linear infinite;
  border-top: 8px solid #3498DB;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  /* Light gray background */
  /* Blue color */
  /* Rotate animation */
  /* Center the loader */
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* skeleton loader */
.skeleton-header1 {
  position: relative;
  overflow: hidden;
  /* background-color: #333; */
  /* border-radius: 0.25rem; */
  /* margin-bottom: 0.625rem; */
}
/* .skeleton-header1 {
  width: 70%;
  height: 2.5rem;
} */
.skeleton-header1::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(214, 173, 96, 0.2) 50%,
      rgba(255, 255, 255, 0) 100%);
  animation: loading 1.5s cubic-bezier(0.57, -0.01, 0.21, 0.89) infinite;
}
@keyframes loading {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}