/* Notification bag styling for bonus */
		.bonus-notification {
			position: fixed;
			top: 18%;
			right: 50px;
			margin-right: 10px;
			width: 250px;
			padding: 15px;
			background-color: #fff;
			border-radius: 20px;
			border: 3px solid green;
			box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
			z-index: 9999;
			text-align: center;
			animation: slideIn 1s ease-out forwards, shake 0.5s infinite;
		}
		/* Close button styling */
		.close-btn {
			position: absolute;
			top: -10px;
			right: -10px;
			font-size: 24px;
			font-weight: bold;
			color: white;
			background-color: #ff8c00;
			border-radius: 50%;
			padding: 5px 10px;
			cursor: pointer;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
			transition: background-color 0.3s, transform 0.2s;
			z-index: 10000; /* Ensure it's above other elements */
		}

		.close-btn:hover {
			background-color: #ff4500;
			transform: scale(1.2); /* Makes it easier to click by enlarging slightly */
		}

		/* Gift/Bonus styling */
		.bonus-text {
			font-weight: bold;
			letter-spacing: 2px;
			font-size: 30px;
			color: green;
			background: linear-gradient(to right, #ffcc33, #ff8c00);
			-webkit-background-clip: text;
			/* color: transparent; */
			border: 3px solid #ffb400;
			padding: 10px;
			border-radius: 10px;
			box-shadow: 0 0 10px #ffb400, 0 0 15px #ff8c00, 0 0 20px #ff8c00;
			position: relative;
		}

		/* Confetti animation */
		.confetti {
			position: absolute;
			top: -50px;
			left: 0;
			right: 0;
			height: 100px;
			pointer-events: none;
			overflow: hidden;
		}

		.confetti::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 100%;
			/*background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/confetti.png');*/
			background-size: cover;
			animation: confetti 3s ease-out infinite;
		}

		/* Slide-in and shake animations */
		@keyframes slideIn {
			0% {
				transform: translateX(100%);
				opacity: 0;
			}
			100% {
				transform: translateX(0);
				opacity: 1;
			}
		}

		@keyframes shake {
			0%, 100% {
				transform: translateX(0);
			}
			25% {
				transform: translateX(-5px);
			}
			50% {
				transform: translateX(5px);
			}
			75% {
				transform: translateX(-5px);
			}
		}
		.blink {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}









/* modallllllllllll */
/* Styling for the bingo number buttons */
.bingo-button {
    display: inline-block;
    width: 85px; /* Fixed width for each button */
    margin: 5px; /* Spacing between buttons */
    font-size: 35px; /* Adjust font size */
    background-color: #007bff; /* Button background */
    color: white; /* Button text color */
    border: none;
    padding: 15px;
    border-radius: 5px; /* Rounded corners */
    opacity: 1;
    visibility: visible;
    text-align: center; /* Center-align text */
    vertical-align: middle;
    box-sizing: border-box; /* Include padding in width */
	font-weight: 700;
}
/* Media query for screens smaller than 768px (tablets and below) */
@media screen and (max-width: 768px) {
    .bingo-button {
        width: 50px; /* Reduce button width */
        font-size: 24px; /* Smaller font size */
        padding: 8px; /* Smaller padding */
    }
}

/* Animation for wave effect */
@keyframes wave {
    0% { transform: translateY(-10px); }
    50% { transform: translateY(10px); }
    100% { transform: translateY(-10px); }
}

.bingo-button.wave-animation {
    animation: wave 1s ;
}

/* Container layout for the buttons */
#selected-numbers {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping to new lines */
    justify-content: flex-start; /* Align to the left */
    gap: 10px; /* Add space between buttons */
    padding: 10px; /* Optional padding */
}