.toast-container { position: fixed; top: 20px; right: 20px; z-index: 99999 !important; max-width: 400px; } /* Custom Toast Styles */ .custom-toast { margin-bottom: 10px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-left: 4px solid; animation: slideInRight 0.3s ease-out; } .custom-toast.success { border-left-color: #28a745; background-color: #f8fff9; } .custom-toast.error { border-left-color: #dc3545; background-color: #fff5f5; } .custom-toast.warning { border-left-color: #ffc107; background-color: #fffbf0; } .custom-toast.info { border-left-color: #17a2b8; background-color: #f0f9ff; } .toast-header { border-bottom: 1px solid rgba(0, 0, 0, 0.05); padding: 0.75rem; } .toast-body { padding: 0.75rem; font-size: 0.9rem; } .toast-icon { margin-right: 8px; font-size: 1.1rem; } .toast-icon.success { color: #28a745; } .toast-icon.error { color: #dc3545; } .toast-icon.warning { color: #ffc107; } .toast-icon.info { color: #17a2b8; } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } .toast-slide-out { animation: slideOutRight 0.3s ease-in forwards; } /* Progress bar for auto-dismiss */ .toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; background-color: currentColor; opacity: 0.3; transition: width linear; } .custom-toast.success .toast-progress { background-color: #28a745; } .custom-toast.error .toast-progress { background-color: #dc3545; } .custom-toast.warning .toast-progress { background-color: #ffc107; } .custom-toast.info .toast-progress { background-color: #17a2b8; }