#toastContainer {
  position: fixed;
  display: none;
}

/* Backdrop */
#toastContainer::before {
  content: "";
  position: absolute;

  /* extend 100px around the toast container */
  top: -2rem;
  left: -2rem;
  right: -2rem;
  bottom: -1.25rem;

  box-shadow: 0 10px 30px rgba(0,0,0,.13);
  background: rgba(255, 255, 255, 0.95); 
  border-radius: 16px;
  
  /* 🔥 LEFT / RIGHT TYPE BORDER */
  border-left: 3.5px solid var(--toast-border-color, transparent);
  border-right: 3.5px solid var(--toast-border-color, transparent);  
  
  border-top: var(--bs-border-width) solid var(--bs-border-color-translucent);
  border-bottom: var(--bs-border-width) solid var(--bs-border-color-translucent); 
  
  transition: border-color 0.25s ease;  
  
  z-index: -1; /* place behind toast */
}

.app-toast {	
  border-radius: 10px;
  padding: 15px 20px 30px 20px;
  font-size: 15px;
  animation: fadeIn .25s ease-out;  
}

.app-toast .toast-header {
  padding: 0 0.1rem 0.8rem 0.1rem;
  color: #000;
  font-size: 1.1rem;
  border-bottom: 1px solid rgba(0,0,0,.2);
  margin-bottom: 1.5rem;
}

.app-toast .toast-header .btn-close {
  transform: scale(2);   /* 🔼 increase size */
  opacity: 0.5;
}

.app-toast .toast-header .btn-close:hover {
  opacity: 1;
}

.app-toast .toast-body {
  color: #000;	
  padding: 0.75rem;
}

.app-toast .toast-progress {
  height: 1rem;	
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  margin-top: 1.5rem;
}

.app-toast .toast-progress .progress-bar {
  position: absolute;
  left: -100%;          /* start completely outside */
  width: 100%;          /* fixed width */
  height: 100%;
  animation: slideProgress linear forwards;
}

.toast-icon {
  font-size: 1.3rem;        /* 🔼 increase icon size */
  line-height: 1;
}

@keyframes slideProgress {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

/* shrink / grow = better UX */
@keyframes toastProgress {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}