/* _content/webenology.blazor.components.NotificationComponent/Notification.razor.rz.scp.css */
.notification-container[b-3zof5b2mo5] {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 500;
  display: flex;
  flex-direction: column;
}
.notification-container[b-3zof5b2mo5]  .notification-item {
  width: 300px;
  border-radius: 6px;
  display: flex;
  margin-bottom: 6px;
  flex-direction: column;
  overflow: hidden;
  min-height: 60px;
}
.notification-container[b-3zof5b2mo5]  .notification-item.animate-in {
  animation: animate-in-b-3zof5b2mo5 0.15s ease-out;
}
.notification-container[b-3zof5b2mo5]  .notification-item.animate-out {
  animation: animate-out-b-3zof5b2mo5 0.3s ease-out;
  animation-fill-mode: forwards;
}
.notification-container[b-3zof5b2mo5]  .notification-item .ni-header {
  flex: 1;
  padding: 6px 6px 3px 6px;
}
.notification-container[b-3zof5b2mo5]  .notification-item .ni-body {
  flex: 2;
  padding: 3px 3px 6px 6px;
}
.notification-container[b-3zof5b2mo5]  .notification-item .ni-bar {
  height: 4px;
}
.notification-container[b-3zof5b2mo5]  .notification-item .ni-bar .bar-color {
  height: 100%;
  width: 100%;
  border-radius: 6px;
  animation-name: bar-to-none-b-3zof5b2mo5;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  background-color: #1565c0;
}
.notification-container[b-3zof5b2mo5]  .notification-item.success {
  background-color: #4caf50;
  color: black;
}
.notification-container[b-3zof5b2mo5]  .notification-item.success:hover {
  background-color: #3d8b40;
}
.notification-container[b-3zof5b2mo5]  .notification-item.warning {
  background-color: #fbc02d;
  color: black;
}
.notification-container[b-3zof5b2mo5]  .notification-item.warning:hover {
  background-color: #f0ad05;
}
.notification-container[b-3zof5b2mo5]  .notification-item.danger {
  background-color: #e53935;
  color: white;
}
.notification-container[b-3zof5b2mo5]  .notification-item.danger:hover {
  background-color: #cd1e1a;
}
@keyframes animate-in-b-3zof5b2mo5 {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes animate-out-b-3zof5b2mo5 {
  to {
    opacity: 0;
  }
}
@keyframes bar-to-none-b-3zof5b2mo5 {
  to {
    width: 0%;
  }
}