#toast-modal {
    animation-name: alert;
    animation-duration: 6s;
    animation-timing-function: ease-in-out;
    position: fixed;
    bottom: 0;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    z-index: 100;

  }

  @keyframes alert {
    0% {

      transform: translateY(150%) translateX(-50%);
      opacity: 0;
    }

    10% {
      transform: translateY(0%) translateX(-50%);

    }

    15% {
      opacity: 1;
    }

    90% {
      opacity: 1;
    }

    95% {
      transform: translateY(0%) translateX(-50%);
    }

    100% {
      transform: translateY(150%) translateX(-50%);
      opacity: 0;
    }
  }