.icon-bar {
  width: 30px; /* Set a specific width */
  background-color: #555; /* Dark-grey background */
      animation:pfpDefault 800ms linear both;
}

.icon-bar a {
display: inline-block;/* Make the links appear below each other instead of side-by-side */
  text-align: right; /* Center-align text */
  padding: 10px; /* Add some padding */
  transition: all 0.3s ease; /* Add transition for hover effects */
  color: white; /* White text color */
  font-size: 15px; /* Increased font-size */
      animation:pfpDefault 800ms linear both;
}


.icon-bar a:hover {
  background-color: #000000; /* Add a hover color */
}

.active {
  background-color: #fa0505; /* Add an active/current color */
}

ion-icon {
  font-size: 50px;
color: white; 
 --ionicon-stroke-width: 18px; 


}


/* Popup container */
.popup {
  position: relative;
 top: 0px; 
  right: -0px;
  display: inline-block;
  cursor: pointer;
   animation:pfpDefault 800ms linear both;


background-color: #ff0004; 
}
 .popup :hover {
  text-align: top; /* Center-align text */
  background-color: #000000; /* Add a hover color */
  border-radius: 0px;
  transition: 0.5s;
} 


/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 380px;
  background-color: #555;
  color: #fff;
  text-align: top;
  border-radius: 6px;
  padding: 30px 30px;
  position: absolute;

  /*right: 1000px;*/
  z-index: 1;
  bottom: -685%;
  left: 160%;
  margin-left: -80px;
/* background-color: #fa0505; Add an active/current color */
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: fixed;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;



}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
 /* -webkit-animation: fadeIn 1s; */
 /*  animation: fadeIn 1s; */

/*  transition: 0.5s; */
  

}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}



/* Fake error box styling */
.error-popup {
  width: 350px;
  background-color: white;
  border: 2px solid red;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  text-align: center;
  display: none; /* Initially hidden */
  z-index: 9999; /* Ensure it's on top of other elements */
}

.error-popup h2 {
  color: red;
  margin-bottom: 15px;
}

.error-popup p {
  font-size: 14px;
  color: #333;
  margin-bottom: 20px;
}

/* Fix button width and styling */
.btn-close {
  padding: 10px 20px;
  background-color: red;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  max-width: 100%; /* Ensure it doesn't stretch */
  width: fit-content; /* Button width adjusts to content */
  display: inline-block; /* Prevent it from stretching */
  text-align: center;
}

.btn-close:hover {
  background-color: darkred;
}



.tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none; /* So it doesn't block clicks */
}

.container:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}