.toastify {
  display: inline-block;
  position: fixed;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  cursor: pointer;
  max-width: calc(50% - 20px);
  z-index: 1000;
}

.toastify.on {
  opacity: 1;
}

.toast-close {
  background: transparent;
  cursor: pointer;
  opacity: 0.4;
  padding: 0 0 0 2em;
}

.toastify-right {
  right: 15px;
}

.toastify-left {
  left: 15px;
}

.toastify-top {
  top: -150px;
}

.toastify-bottom {
  bottom: -150px;
}

.toastify-center {
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  max-width: fit-content;
  max-width: -moz-fit-content;
}

@media only screen and (max-width: 360px) {

  .toastify-right,
  .toastify-left {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    max-width: fit-content;
  }
}