.webnotify-area {
  font-family: Georgia, "Times New Roman", Times, serif;
  position: fixed;
  background-position:center;
  display:flex;
  flex-direction: column;
  gap:10px;
  z-index: 9999;
}




.webnotify {
  width: 280px;
  position: relative;
  overflow: hidden;
  background-image: var(--wn-bg-img,none);
  background: var(--wn-bg, none);
  background-repeat:no-repeat;
  background-position: var(--bg-position,none);
  color: var(--wn-color, #111);
  border: var(--wn-border, 2px solid black);
  border-radius: var(--wn-radius, 19px);
  padding: var(--wn-padding, 12px 14px);
  animation: wn-pop 0.25s ease-out;
  
}

.webnotify-title {
  font-size:15px;
  font-weight: bold;
  margin-bottom:4px;
}

.webnotify-message {
  font-size: 13px;
  
}




/* positions */

.webnotify-area.top-right {
  top: 16px;
  right: 16px
}


.webnotify-area.top-left {
  top:16px;
  left: 16px;
}

.webnotify-area.bottom-right {
  bottom: 16px;
  right: 16px;
}


.webnotify-area.bottom-left{
  bottom:16px;
  left:16px;
}




/* themes */
.webnotify.trans {
  background: transparent;
}

.webnotify.light {
  --wn-bg: white;
  --wn-color: black;
  --wn-border:2px solid black;
  --wn-radius:20px;
}


.webnotify.dark {
  --wn-bg: black;
  --wn-color:white;
  --wn-border:2px solid white;
  --wn-radius:20px;
}

.webnotify.leaf {
  --wn-bg: url("https://res.cloudinary.com/dunwz8exc/image/upload/v1779282800/ezgif-564bca03859d335f_k8etj9.gif");
  background-position:right 86%;
  --wn-btn-bg: transparent;
  --wn-color: white;
}

.webnotify.skullbot {
  --wn-bg : url("https://res.cloudinary.com/dunwz8exc/image/upload/v1779620861/ezgif-3c2e42addd97fd89_mcxmdq.gif");
  background-position:20% center;
  --wn-btn-bg: black;
  --wn-color: white;
}


.webnotify.meadow {
  --wn-bg: url("https://res.cloudinary.com/dunwz8exc/image/upload/v1779687172/glang_zupt11.gif");
  background-position: right bottom ;
  --wn-btn-bg: transparent;
  --wn-color:white;
}


.webnotify.stardust {
  --wn-bg: url("https://res.cloudinary.com/dunwz8exc/image/upload/v1779684054/n12_iegdhp.gif");
  background-position: center ;
  --wn-btn-bg: transparent;
  --wn-color:white;
}


.webnotify.nglow {
  --wn-bg: url("https://res.cloudinary.com/dunwz8exc/image/upload/v1779778436/n1_byezaa.gif");
  background-position: right bottom;
  --wn-btn-bg: transparent ;
  --wn-color:white;
}

.webnotify. {
  --wn-bg: url("");
  background-position:  ;
  --wn-btn-bg: ;
}

.webnotify. {
  --wn-bg: url("");
  background-position:  ;
  --wn-btn-bg: ;
}





/* animations */



@keyframes wn-pop {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}









.webnotify-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.webnotify-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.webnotify-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block;
}

.webnotify-text {
  flex: 1;
}


.webnotify-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.webnotify-btn {
  padding: 5px 10px;
  border: 1px solid currentColor;
  border-radius: var(--wn-btn-br, 10px);
  background: var(--wn-btn-bg, transparent);
  color: var(--wn-btn-color, currentColor);
  color: currentColor;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
}


.webnotify-timer {
  position: absolute;
  left: 0;
  bottom: 1px;
  height: 3px;
  width: 100%;
  background: currentColor;
  opacity: 0.7;
  animation: wn-timer var(--wn-duration, 3000ms) linear forwards;
}

@keyframes wn-timer {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}