.toast-container {
    font-family: "HelveticaNowMTTextMedium", "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", sans-serif;
    position: fixed;
    top: 80px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
  }
   .toast {
    width: 400px;
    height: 60px;
    border: 2px solid #ffebce;
    background-color: #fff6eb;
    border-radius: 5px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    padding: 5px 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    font-size: small;
  }
   .toast.show {
    opacity: 1;
    transform: translateY(0);
  }
   .toast.complete {
    border-color: #c6f6d5;
    background-color: #f0fff4;
  }
    .toast .toast-icon{
      width: 40px;
      height: 40px;
    }
    .toast .toast-icon svg{
      width: 40px;
      height: 40px;
    }
   .toast .icon-warning svg {
    fill: #FBD8A5;
    
  }
   .toast .icon-complete svg {
    fill: #4caf50;
    
  }
   .toast .content-warning {
    
    color: rgb(85, 85, 85);
  }
  @media (max-width: 576px) {
    .toast{
      width: 280px;
      height: 45px;
      font-size: x-small;
    }
    .toast .toast-icon{
      width: 30px;
      height: 30px;
    }
    .toast .toast-icon svg{
      width: 30px;
      height: 30px;
    }
    
  }