:root {
    --toast-bottom: auto;
    --toast-top: 20px;
    --toast-right: 20px;
    --toast-left: auto;
  }
.my-toast {
  position: fixed;
  bottom: var(--toast-bottom);
  top: var(--toast-top);
  right: var(--toast-right);
  left: var(--toast-left);
  background: #333;
  color: #fff;
  padding: 12px 20px;
  border-radius: 5px;
  z-index: 9999;
  font-family: sans-serif;
  font-size: 25px;
  opacity: 0;
  transform: translateX(100%);
  transition: transform 0.4s ease, opacity 0.4s ease;
  display: flex;
    gap: 17px;
}

.my-toast.show {
  opacity: 1;
  transform: translateX(0);
}

.toast-icon {
  font-size: 23px;
  cursor: pointer;
  
}


.my-toast.success { background-color: #28a745; }
.my-toast.error { background-color: #dc3545; }
.my-toast.info { background-color: #17a2b8; }
.my-toast.warn { background-color: #ffc107; }