#driu-toast-container{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000000;
  pointer-events: none;
}


body.driu-toast-blur:before{
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.08);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 999998;
  opacity: 1;
  transition: opacity 220ms ease;
  pointer-events: none;
}

body.driu-toast-blur--fade:before{
  opacity: 0;
}

.driu-toast{
  pointer-events: none;
  min-width: 320px;
  max-width: 640px;
  padding: 40px;
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.20);
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 220ms ease, transform 220ms ease;
  font-weight: 200;
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
}

.driu-toast--visible{
  opacity: 1;
  transform: translateY(0);
}

.driu-toast--hide{
  opacity: 0;
  transform: translateY(14px);
}

/* Variants */
.driu-toast--neutral{
  background: #ffffff;
  color: #000000;
}

.driu-toast--alert{
  background: #b61858;
  color: #ffffff;
}

.driu-toast--ok{
  background: #00b3b3;
  color: #ffffff;
}