.notification {
  font-family: "TitilliumWeb-Regular", sans-serif !important;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 8px;
  position: fixed;
  top: 5%;
  left: 37%;
  right: 37%;
  /* transform: translateX(-50%); */
  box-sizing: border-box;
  border-radius: 8px;
  z-index: 999999;
  /* min-width: 250px; */
  /* max-width: 80%; */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  line-height: 1;
  text-align: left;
}

.notification-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #155724;
  /* border: 1px solid #28a745; */
}
.notification-danger {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #721c24;
  /* border: 1px solid #8a2a2f; */
}
.notification-warning {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #856404;
}
.notification-info {
  background: #cce5ff;
  color: #004085;
  border: 1px solid #004085;
}

/* ═════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* Media query (for smaller screens) */
@media (max-width: 768px) {
  .notification {
    right: 5%;
    left: 5%;
    min-width: 90%;
    max-width: 90%;
  }
}

/* Animation */
.animateOpen {
  z-index: 999999;
  animation: moveOpen 4s forwards;
}

/* Keyframes */
@keyframes moveOpen {
  0% {
    transform: translate(0, -100px);
  }
  10% {
    transform: translate(0, 20px);
  }
  12% {
    transform: translate(0, 22px);
  }
  16% {
    transform: translate(0, 20px);
  }
  80% {
    transform: translate(0, 20px);
  }
  85% {
    transform: translate(0, 25px);
  }
  100% {
    transform: translate(0, -100px);
  }
}