#ppp {
width: 100%;
height: 100vh;
position: fixed;
background: rgba(243, 243, 243, 0.6);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
} #ppp > div {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
} @keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}  #toast-container {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
display: flex;
flex-direction: column;
gap: 8px;
} .toast {
color: white;
padding: 12px 24px;
border-radius: 8px;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
opacity: 0;
transition: opacity 300ms ease-in-out;
min-width: 250px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
} .toast.show {
opacity: 1;
} .toast.bg-green-500 {
background-color: #10b981;
}
.toast.bg-green-600 {
background-color: #059669;
}
.toast.bg-red-400 {
background-color: #f87171;
}
.toast.bg-red-500 {
background-color: #020101ff;
}
.toast.bg-gray-900 {
background-color: #111827;
}
.toast.bg-blue-500 {
background-color: #3b82f6;
} .toast-message {
flex: 1;
text-align: left;
font-size: 14px;
} .toast-close {
background: none;
border: none;
color: white;
font-size: 20px;
font-weight: bold;
cursor: pointer;
padding: 0;
transition: color 150ms ease;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.toast-close:hover {
color: #fca5a5;
}
img.wp-smiley, img.emoji {
margin: 0 !important;
}
.ad-close-btn {
color: white;
font-size: 14px;
}
.ad-close-btn img {
filter: brightness(3) invert(1) !important;
}
body{
position: relative;
}