/*for . of patho.clinic color*/
.dot {
  color: #882222;
}

/*for preview button and 2 coulumn row*/
.previewcontainer {
  display: flex;
  gap: 0px;
}
.box1 {
  flex: 1;
  text-align: left;
}
.box2 {
  flex: 1;
  text-align: right;
}

#grandTotal {
  font-weight: bold;
  font-size: 18px;
  text-align: right;
}

/* edit, delete button hover*/
li {
  position: relative;

  cursor: pointer;
}

.icons {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.icons span {
  margin-left: 10px;
  cursor: pointer;
  font-size: 16px;
}

/* Show icons on li hover */
li:hover .icons {
  opacity: 1;
}

/* Hover color for icons */
.icons .edit:hover {
  color: #0275d8; /* blue for edit */
}
.icons .delete:hover {
  color: #d9534f; /* red for delete */
}
/*change password */
.strength { font-size: 14px; margin-top: -8px; }
.weak { color: red; }
.medium { color: orange; }
.strong { color: green; }

/*list and action */
#progressContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #eee;
    z-index: 9999; /* on top of other content */
}

#progressBar {
    height: 100%;
    width: 100%;
    background-color: #4CAF50;
    transition: width 60s linear, background-color 0.5s;
}
/*profile picture edit button */
.edit-icon {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 6px;
  border-radius: 50%;
  font-size: 16px;
  display: none;   /* hidden by default */
  cursor: pointer;
}

.profile:hover .edit-icon {
  display: block;  /* show only on hover */
}

/*place holder for graphs */
.bar-chart-placeholder {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  border-radius: 12px;
  background: #ffffff;
  padding: 20px;
}
.bar {
  width: 12%;
  background: linear-gradient(180deg, #ddd 0%, #bbb 100%);
  border-radius: 6px 6px 0 0;
  animation: shimmer 2s infinite linear;
}
@keyframes shimmer {
  0% { opacity: 0.8; }
  50% { opacity: 1; }
  100% { opacity: 0.8; }
}
.line-chart-placeholder {
  width: 100%;
  height: 300px;
  border-radius: 12px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}
.line-chart-placeholder svg {
  width: 90%;
  height: 80%;
  animation: pulse 2s infinite ease-in-out;
}
@keyframes pulse {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

.pie-chart-placeholder {
  border-radius: 12px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pie {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(#bbb 0% 25%, #ccc 25% 50%, #ddd 50% 75%, #eee 75% 100%);
}
@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

video, canvas {
    width: 90%;
    max-width: 150px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin-bottom: 10px;
    object-fit: cover;
}