.dmx-notifications {
  display: block;
  position: fixed;
  z-index: 999999;
  pointer-events: none;
}

.dmx-notify {
  pointer-events: auto;
  animation-fill-mode: forwards;
}

.dmx-notify > div {
  box-shadow: 0 1px 5px rgba(0, 0, 0, .25);
  border-radius: .25em;
  min-width: 250px;
  padding: .5em;
}

.dmx-notify .dmx-title {
  font-weight: bold;
  font-size: 1.1em;
}

.dmx-notify .dmx-message {
  font-size: 1em;
}

.dmx-notify .dmx-icon {
  float: left;
  margin: 0 .5em 0 0;
}

.dmx-notify .dmx-close {
  padding: 0;
  margin: 0 0 0 .5em;
  opacity: .5;
  background-color: transparent;
  color: inherit;
  border: none;
  -webkit-appearance: none;
  cursor: pointer;
  float: right;
}

.dmx-notify .dmx-close:hover {
  opacity: 1;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1 }
}

@keyframes fadeOut {
  from { opacity: 1 }
  to { opacity: 0 }
}