.notification-toggle.active {
  border-color: #9bd78b;
  background: #edf7e9;
  color: #367d29;
}

.notification-stack {
  position: fixed;
  z-index: 1500;
  top: 82px;
  right: 20px;
  width: min(380px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.incoming-popup {
  pointer-events: auto;
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 22px;
  gap: 11px;
  align-items: center;
  text-align: left;
  border: 1px solid #dfe6dc;
  border-left: 4px solid #4ea838;
  border-radius: 13px;
  padding: 12px;
  background: #fff;
  color: #111827;
  box-shadow: 0 16px 45px rgba(15, 23, 42, .18);
  cursor: pointer;
  animation: incoming-popup-in .2s ease-out;
}

.incoming-popup-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #f1f6ef;
}

.incoming-popup-icon img { width: 24px; height: 24px; }
.incoming-popup b { display: block; margin-bottom: 3px; }
.incoming-popup small { display: block; overflow: hidden; color: #667085; white-space: nowrap; text-overflow: ellipsis; }
.incoming-popup i { align-self: start; color: #98a2b3; font-size: 20px; font-style: normal; }

@keyframes incoming-popup-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 620px) {
  .notification-stack { top: 76px; right: 10px; width: calc(100vw - 20px); }
}