.toast-container {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 100%;
    min-width: 370px !important;
    max-width: fit-content;
    height: 100%;
    max-height: 75px;
    z-index: 999999999 !important;
    
    .toast {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: var(--notification-background-color);
      padding: 10px 10px 10px 15px;
      height: 100%;
      border-radius: 10px;
      position: relative;
      opacity: 0;
      transform: translateX(100%);

      &.slideIn{
        animation: slideIn 0.2s ease-in forwards;
      }
      
      &.slideOut{
        animation: slideOut 0.2s ease-in forwards;
      }
    
      .toastContent {
        display: flex;
        flex-direction: column;
        gap: 5px;
        span {
          font-family: var(--font-family) !important;
          color: var(--notification-text-color);
          font-weight: 600;
        }
        p {
          font-family: var(--font-family) !important;
          color: var(--notification-text-color);
          margin: 0;
        }
      }
    
      .closeIcon {
        position: absolute;
        top: 5px;
        right: 0;
        background: none;
        border: none;
        cursor: pointer;
        &:focus{
          outline: none;
          border: none;
        }
        svg{
          width: 25px;
          height: 18px;
        }
      }
    }

    /* Slide-in from the right */
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide-out to the right */
@keyframes slideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}
  }
.noToast{
  display: none !important;
}