.toast {
  position: fixed;
  right: 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); }
  .toast.displayed {
    opacity: 1;
    transform: translate(0, 0); }
  .toast > .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); }
    .toast > .body.info {
      background: rgba(255, 245, 195, 0.9); }
    .toast > .body.warning {
      background: rgba(255, 183, 99, 0.9); }
      .toast > .body.warning > .icon {
        color: white; }
    .toast > .body.error {
      color: white;
      text-shadow: 0 0 1px black;
      background: rgba(255, 86, 86, 0.9); }
    .toast > .body.done {
      background: rgba(147, 255, 157, 0.9); }