/* Keyframes for Slide In and Slide Out */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.slide-out {
  animation: slideOutLeft 0.5s forwards; /* Adjust duration as needed */
}

/* Apply Slide In Animation */
.hs-toast {
  margin: 0 auto;
  border-radius: .25rem;
  box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .2);
  background: #5b7e96;
  padding: .5rem .75rem;
  max-width: 40rem;
  position: relative;
  /* Add the slide in animation */
  animation: slideInRight 0.5s forwards;
}

/* Add this class to trigger Slide Out Animation */
.hs-toast.slide-out {
  animation: slideOutLeft 0.5s forwards;
}

/* Existing Styles */
.hs-toast-fixed-top {
  position: fixed;
  bottom: 40px;
  /* left: 0; */
  right: 0;
  z-index: 1000;
}

.hs-toast-absolute-top {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.hs-toast-wrapper {
  margin: 0 auto;
  max-width: 44rem;
  padding-left: .75rem;
  padding-right: .75rem;
}

.hs-toast-inner {
  display: flex;
}

.hs-toast-msg {
  color: white;
  line-height: 1.5rem;
  flex: 1 1 0%;
  min-width: 0;
  padding-top: .2rem;
  padding-left: .5rem;
  padding-right: .75rem;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.hs-toast-msg ul {
  margin: 0;
  padding-left: .75rem;
}

.hs-toast-icons,
.hs-toast-action {
  flex: none;
  color: white;
}

.hs-toast-action {
  cursor: pointer;
}

.hs-close {
  border: none;
  background: none;
  color: white;
  outline: none;
  padding: 0;
  font-family: 'Arial', Segoe UI Symbol;
}

.hs-toast+.hs-toast {
  margin-top: .5rem;
}

.hs-theme-error {
  background: #fe4a5d;
}

.hs-theme-success {
  background: #00c15a;
}

.hs-theme-warning {
  background: #F2711C;
}