.delete-details-list {
  list-style-type: none; /* Removes the bullet points */
  padding-left: 0; /* Removes default left padding */
  text-align: left; /* Aligns the list to the left */
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 16px;
}

.details-row {
  display: flex; /* Makes the li a flex container */
  justify-content: space-between; /* Pushes the first item (label) to the left and the second (value) to the right */
  margin-bottom: 5px; /* Adds space between list items */
}

.activesidebarselected
{
  background-color: rgba(15, 98, 106,1);
  color:white !important
}

.activesidebarselected>a
{
  color:white !important
}

.activesidebarselected svg {
    
    fill: white !important;
    /* stroke: white !important; */
}


.profile-container .person-details {
   
    text-align: left;
}

.remove-pic-button {
  position: absolute; /* Position relative to #imgPreview */
  top: 50%; /* Move the top edge to the vertical center */
  left: 50%; /* Move the left edge to the horizontal center */
  transform: translate(-50%, -50%); /* Adjust for the button's own width/height to truly center it */
  z-index: 10; /* Ensure it's above the image */

  /* Button styling */
  background-color: rgba(255, 0, 0, 0.7); /* Red with some transparency */
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px; /* Slightly larger for better visibility in the center */
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0;
  font-size: 16px; /* Larger icon */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease-in-out; /* Smooth transition */
}

/* Make button visible on hover over the preview area */
.avatar-preview:hover .remove-pic-button {
  opacity: 1;
}

.remove-pic-button:hover {
  background-color: rgba(255, 0, 0, 0.9);
}