.toaster {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10000;
  max-width: 100%;
  opacity: 0;
  transform: translate(75%, 0);
  pointer-events: none;
  -webkit-transition: all 0.3s ease, transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  -moz-transition: all 0.3s ease, transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.3s ease, transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.3s ease, transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .toaster.displayed {
    opacity: 1;
    transform: translate(0, 0); }
  .toaster > .body {
    position: relative;
    font-size: initial;
    margin: 0 1em 1em 1em;
    padding: .5em;
    word-wrap: break-word;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.9);
    pointer-events: all;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-weight: 700;
     }
    .toaster > .body.info {
      background: rgba(255, 245, 195, 0.9); }
    .toaster > .body.warning {
      background: rgba(255, 183, 99, 0.9); }
      .toaster > .body.warning > .icon {
        color: white; }
    .toaster > .body.error {
      color: #78261f;
      background-color: #fadbd8;
      border-color: #f8ccc8;}
    .toaster > .body.done {
      color: #0f6848;
      background-color: #d2f4e8;
      border-color: #bff0de; }