/** Used to define container behavior: width, position: fixed etc... **/
.Toastify__toast-container {
  /* background:
    linear-gradient(135deg, transparent 12px, #6f4ff8 0) top left,
    linear-gradient(-45deg, transparent 12px, #6f4ff8 0) bottom right ; */
  /* background:
    linear-gradient(135deg, transparent 12px, #6f4ff8 0) top left ,
    linear-gradient(-45deg, transparent 12px, #6f4ff8 0) bottom right;
    background-size: 100% 50%;
    background-repeat: no-repeat; */
  width: 400px !important;
}

/** Used to define the position of the ToastContainer **/
.Toastify__toast-container--top-left {
}
.Toastify__toast-container--top-center {
}
.Toastify__toast-container--top-right {
}
.Toastify__toast-container--bottom-left {
}
.Toastify__toast-container--bottom-center {
}
.Toastify__toast-container--bottom-right {
}

/** Classes for the displayed toast **/
.Toastify__toast {
  /* background: #101223; */
  --border: 0.05px;
  --slant: 16px;
  --color: #6f4ff8;

  border: 1px solid #6f4ff8;
  color: var(--color);
  background:
    linear-gradient(to bottom right, var(--color) 50%, #0000 50.1%) top left,
    linear-gradient(to top left, var(--color) 50%, #0000 50.1%) bottom right,
    #101223;
  background-size: calc(var(--slant) + 1.3 * var(--border))
    calc(var(--slant) + 1.3 * var(--border));
  background-repeat: no-repeat;
  box-shadow:
    0 0 0 200px inset var(--s, #0000),
    0 0 0 var(--border) inset var(--color);
  clip-path: polygon(
    var(--slant) 0,
    100% 0,
    100% calc(100% - var(--slant)),
    calc(100% - var(--slant)) 100%,
    0 100%,
    0 var(--slant)
  );
  /* background:
    linear-gradient(135deg, transparent 12px, #6f4ff8 0) top left ,
    linear-gradient(-45deg, transparent 12px, #6f4ff8 0) bottom right;
    background-size: 100% 50%;
    background-repeat: no-repeat; */
  padding: 1px !important;
  margin-bottom: 5px !important;
  border-radius: 0px !important;
  font-family: "Poppins", sans-serif !important;
}
.Toastify__toast--rtl {
}
.Toastify__toast-body {
  background-image: url(../img/skull-vector.png);
  background-repeat: no-repeat;
  background-position: right 30px center;
  margin: 0px !important;

  background-size: contain;
  padding: 15px 6px 15px 15px !important;
}

/** Used to position the icon **/
.Toastify__toast-icon {
}

/** handle the notification color and the text color based on the theme **/
.Toastify__toast-theme--dark {
}
.Toastify__toast-theme--light {
}
.Toastify__toast-theme--colored.Toastify__toast--default {
}
.Toastify__toast-theme--colored.Toastify__toast--info {
}
.Toastify__toast-theme--colored.Toastify__toast--success {
}
.Toastify__toast-theme--colored.Toastify__toast--warning {
}
.Toastify__toast-theme--colored.Toastify__toast--error {
}

.Toastify__progress-bar {
  border-radius: 0px !important;
  background: #6f4ff8 !important;
}
.Toastify__progress-bar--rtl {
}
.Toastify__progress-bar-theme--light {
}
.Toastify__progress-bar-theme--dark {
}
.Toastify__progress-bar--info {
}
.Toastify__progress-bar--success {
  background: #6f4ff8 !important;
}
.Toastify__progress-bar--warning {
}
.Toastify__progress-bar--error {
}
/** colored notifications share the same progress bar color **/
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
}

/** Classes for the close button. Better use your own closeButton **/
.Toastify__close-button {
  margin: 8px;
}
.Toastify__close-button--default {
}
.Toastify__close-button > svg {
}
.Toastify__close-button:hover,
.Toastify__close-button:focus {
}