#snackbar {
 visibility: hidden;   /* Hidden by default */
width: 90%;           /* Responsive width */
max-width: 400px;     /* Optional: limit max width */
background-color: #333;
color: #fff;
text-align: center;
border-radius: 20px;
padding: 16px;
position: fixed;
left: 50%;            /* Center horizontally */
transform: translateX(-50%);  /* Offset by half to center perfectly */
bottom: 30px;         /* Distance from bottom */
font-size: 17px;
z-index: 1;           /* Ensure it's above other content */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);  /* Optional shadow */
transition: visibility 0s, opacity 0.5s ease-out; /* Fade effect */
opacity: 0;           /* Initially invisible */
}

#snackbar.show {
  visibility: visible;
      opacity: 1;
}

#snackbar2 {
  visibility: hidden;
  margin: auto;
  background-color: #333;
  color: #fff;
  padding: 15px;
  text-align: center;
  border-radius: 25px;
  position: fixed;
  z-index: 2;
  bottom: 30px;
  font-size: 17px;
}

#snackbar2.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 15px;
}

.alert.success {background-color: #04AA6D;}
.alert.info {background-color: #2196F3;}
.alert.warning {background-color: #ff9800;}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  justify-content: center;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}