body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 10px;
    margin: 0;
    box-sizing: border-box;
}
.container{
    width : 100%;
}
/* General marquee styling */
marquee {
    background: #fcde04;
    color: #000000;
    border-radius: 0px 0px 10px 10px;
    position: relative;
    padding: 0px 0;  /* Further reduced the padding to minimize height */
    line-height: 1;   /* Set line-height to 1 to reduce vertical spacing */
    font-size: 14px;  /* Reduce font size to make the text more compact */
}

/* Marquee styling for screens smaller than 767px */
@media screen and (max-width: 767px) {
    marquee {
        font-size: 12px; /* Even smaller font size on mobile */
        border-radius: 10px;
        padding: 1px 0;  /* Very small padding on mobile */
        line-height: 1;  /* Keep line height consistent */
    }
}


.disclaimer{
     font-weight: bold;
}

/* Style for the countdown box */
.countdown {
    display: inline-block;
    padding: 15px 30px; /* Space inside the box */
    background-color: #fcde04; /* Red background */
    color: #030303; /* White text */
    font-size: 50px; /* Font size for the countdown */
    font-weight: bold;
    border-radius: 8px; /* Rounded corners */
    border: 1px solid #4cae4c;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Optional shadow for better visibility */
    margin-top: 20px; /* Some spacing from the top */
    width: auto;
    text-align: center;
    min-width: 150px; /* Set a minimum width to avoid shrinking too much */
}

/* Responsive styling for countdown box */
@media (max-width: 768px) {
    .countdown {
        font-size: 30px; /* Smaller font size for smaller screens */
        padding: 12px 20px; /* Adjust padding for smaller screens */
    }
}

@media (max-width: 480px) {
    .countdown {
        font-size: 24px; /* Further smaller font size for very small screens */
        padding: 10px 15px; /* Adjust padding */
    }
}


/* Adjust refresh time size on smaller screens */
@media (max-width: 768px) {
    .refresh-time {
        font-size: 16px; /* Smaller font size on mobile */
    }
}

.refresh-time {
    font-size: 20px;
    margin-top: 20px;
    font-weight: bold; /* Makes the text bold */
    color: white !important; /* Changes the text color to white */
}

.timer-container {
    background-color: #131a3e;
    padding: 10px; /* Adds some space inside the container */
    border-radius: 10px 10px 0px 0px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional: adds a slight shadow for depth */
    color: #030303; /* Ensures the text color inside the container is white for contrast */
}


/* Style for table */
table {
    width: 100%;
    margin: 10px auto;
    border-collapse: collapse;
}

/* Style for table cells */
th, td {
    padding: 10px;
    text-align: center;
    border: 2px solid #000000;
    font-weight: bold;
    font-size : 28px;
}


/* Column header styles (Blue) */
th {
    background-color: #bef3ff; /* Blue background */
    font-weight: bold;
    font-size : 28px;
    text-align : center !important;
}

/* Row header styles (Yellow) */
tbody th {
    background-color: #d0bdff; /* Yellow background for row headers */
    color: black;  /* Black text for row headers */
    font-weight: bold;
    font-size : 20px;
}

/* Add alternating row colors */
tbody tr:nth-child(even) {
    background-color: white !important; /* Light grey for even rows (white-ish) */
}

tbody tr:nth-child(odd) {
    background-color: #fcde04 !important; /* Light red for odd rows */
}

/* Optional: Hover effect for rows */
tbody tr:hover {
    background-color: #e6e6e6; /* Slightly darker on hover */
}



/* For screens smaller than 768px */
@media (max-width: 768px) {
    th, td {
        font-size: 20px; /* Increase font size */
        padding: 12px; /* Increase padding for better spacing */
    }

    table {
        width: 100%; /* Ensure the table takes full width */
    }

    .countdown {
        font-size: 30px; /* Smaller font size for mobile */
    }

    .refresh-time {
        font-size: 16px; /* Reduce font size for smaller screens */
    }

    div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    button {
        width: 90%; /* Make buttons take up full width on mobile */
        margin-bottom: 10px;
        font-size: 18px; /* Larger text on mobile */
    }
}
/* Further adjustments for very small screens */
@media (max-width: 480px) {
    th, td {
        font-size: 24px; /* Make text even bigger */
        padding: 15px; /* More spacing */
    }
}

/* For screens smaller than 600px */
@media (max-width: 600px) {
    .countdown {
        font-size: 24px; /* Further reduce countdown font on very small screens */
    }

    .refresh-time {
        font-size: 14px; /* Smaller refresh time text */
    }

    table {
        width: 100%; /* Full-width table on small screens */
    }

    th, td {
        font-size: 12px; /* Smaller text in table on mobile */
    }
}

/* button */
/* Container for buttons inside the timer-container */
.timer-container > div {
    display: flex; /* Use flexbox layout */
    justify-content: center; /* Center buttons horizontally */
    gap: 10px; /* Adds space between the buttons */
}

div {
    text-align: center;
}

 button, .btn-info {
            background-color: #fcde04 !important; /* Pinkish color for consistency */
            color: #000000;
            border: 1px solid #4cae4c !important;
            padding: 5px 10px;
            font-size: 16px ;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease-in-out;
            display: flex;
            align-items: center;
            justify-content: center;
        }

/* Media query for mobile devices (less than 768px wide) */
@media (max-width: 768px) {
    .timer-container > div {
        flex-direction: row; /* Ensure the buttons stay in a row */
        justify-content: space-between; /* Distribute buttons evenly */
    }

    button {
        flex: 1 1 48%; /* Each button takes up 48% of the width, with space in between */
        margin: 5px 0; /* Adds some space between buttons vertically */
    }
}

/* Stack buttons on smaller screens */
@media (max-width: 600px) {
  

    button {
        width: 90%; /* Make buttons take up most of the screen width */
        margin-bottom: 10px; /* Space between buttons */
        font-size: 18px; /* Larger text on mobile */
    }
}

button:hover {
    background-color: #0056b3; /* Darker pink on hover */
    transform: scale(1.1); /* Slight zoom effect */
}

button:active {
    transform: scale(0.95); /* Pressed effect */
}

/* Icon style inside button */
        button i {
            font-size: 20px; /* Standard icon size */
        }

.lasttablecreationtime {
    background-color: #131a3e;
    color: #fff;
    font-size: 20px;
}

  /* Loader styles */
        #loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5) url('https://i.gifer.com/ZZ5H.gif') center center no-repeat;
            z-index: 9999;
            display: none;  /* Hidden by default */
        }
        
         /* Media query for smaller screens (mobile view) */
        @media (max-width: 767px) {
            /* For the refresh button, size it according to the icon */
            button {
                width: auto; /* Auto width based on content */
                height: auto; /* Auto height based on content */
                padding: 10px; /* Adjust padding */
                font-size: 14px; /* Slightly smaller font size */
            }

            /* For the icon, ensure it's small */
            button i {
                font-size: 24px; /* Adjust icon size for mobile */
            }
            
            .row{
                flex-wrap: wrap;
            }
        }
    .row {
        display: flex;
        align-items: center; /* Aligns items vertically centered */
        justify-content: center; /* Centers the items horizontally (optional) */
    }
    
    #countdown {
        margin-right: 10px; /* Adds some space between the countdown and the button */
    }
    
    #refreshBtn {
        display: inline-flex; /* Ensures the button stays inline with the span */
        align-items: center; /* Vertically center the icon inside the button */
    }
    
    .button-container {
    display: flex;
    flex-wrap: nowrap; /* Ensures buttons stay in one row */
    justify-content: center;
    gap: 5px; /* Space between buttons */
    margin-top: 10px;
    padding: 10px;
    width: 100%; /* Ensures full width */
    overflow: hidden; /* Prevents horizontal scrolling */
}

.chart-btn {
    flex: 1 1 auto; /* Allows flexible width */
    padding: 10px 15px;
    border: none;
    background-color: #007bff;
    color: #030303;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
    text-align: center;
    min-width: 70px; /* Ensures uniform button size */
}

/* Mobile Fix */
@media screen and (max-width: 600px) {
    .button-container {
        flex-wrap: wrap; /* Allows buttons to adjust */
        justify-content: center; /* Keeps them centered */
    }

    .chart-btn {
        flex: 1 1 20%; /* Ensures 5 buttons per row */
        font-size: 14px; /* Slightly smaller text */
        min-width: auto; /* Removes unnecessary width constraints */
    }
}

#randomNumbersTable thead tr th,
#randomNumbersTable tbody tr:first-child td {
    border: 2px solid black;
}

    /* Timer Container Styling */
    .timer-container {
        position: relative; /* Make sure the timer container is positioned relatively */
        padding-top: 10px; /* Some space from the top */
    }

    /* Logo Styling inside Timer Container */
    .logo-container {
        position: absolute; /* Position logo absolutely within the timer-container */
        top: -34px; /* Adjust the distance from the top of the timer-container */
        left: 10px; /* Adjust the distance from the left of the timer-container */
        z-index: 1000; /* Make sure the logo stays on top */
    }

    .logo {
        width: 15vw; /* Logo size relative to the viewport width */
        max-width: 200px; /* Maximum width to ensure the logo doesn't get too big */
        height: auto; /* Maintain the aspect ratio */
    }

    /* Media Query for smaller screens */
    @media (max-width: 600px) {
        .logo-container {
            top: 5px; /* Reduce the top margin on smaller screens */
            left: 5px; /* Reduce the left margin on smaller screens */
        }

        .logo {
            width: 30vw; /* Increase the logo size on small screens */
            max-width: 120px; /* Prevent the logo from becoming too large */
        }
    }
/* Style for the countdown container */
.countdown-container {
    display: flex; /* Use flexbox to display items in a row */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    gap: 1px; /* Adds space between each countdown box */
    margin-top: 20px; /* Some spacing from the top */
}

/* Style for each countdown box (minutes and seconds boxes) */
.countdown-box {
    padding: 10px 20px;
    background-color: #fcde04; /* Background color for countdown boxes */
    color: #030303;
    font-size: 40px; /* Font size for the countdown */
    font-weight: bold;
    border-radius: 8px; /* Rounded corners */
    min-width: 80px; /* Minimum width for the countdown boxes */
    text-align: center;
    margin: 0; /* Remove any margin */
}

/* Style for the separator colons (:) between the countdown boxes */
.countdown-container span {
    font-size: 15px; /* Make the separator size similar to countdown boxes */
    font-weight: bold;
}

/* Responsive design for mobile screens */
@media (max-width: 768px) {
    .countdown-container {
        flex-wrap: wrap; /* Allow items to wrap if there is not enough space */
        justify-content: space-evenly; /* Evenly space out the items */
    }

    .countdown-box {
        font-size: 30px; /* Smaller font size for countdown boxes on mobile */
        padding: 8px 15px; /* Adjust padding for smaller screens */
    }

    .countdown-container span {
        font-size: 30px; /* Smaller separator size */
    }
}

/* Further adjustments for very small screens (max-width: 480px) */
@media (max-width: 480px) {
    .countdown-container {
        flex-direction: row; /* Ensure it's in one row even on smaller screens */
        justify-content: center; /* Center the items */
    }

    .countdown-box {
        font-size: 24px; /* Even smaller font size for very small screens */
        padding: 5px 10px; /* Adjust padding further */
    }

    .countdown-container span {
        font-size: 15px; /* Smaller separator size */
    }
}
/* Ensure the button container stays in a single line */
.button-container {
    display: flex;
    flex-wrap: nowrap;   /* Prevent buttons from wrapping */
    justify-content: flex-start; /* Align buttons to the left */
    align-items: center; /* Vertically center buttons */
    overflow-x: auto; /* Allows horizontal scrolling if necessary */
}

/* Optional: Adjust button spacing */
.chart-btn {
    margin-right: 10px; /* Add space between buttons */
    white-space: nowrap; /* Prevent text from wrapping inside buttons */
}

/* Optional: Make sure the container has enough width */
.row {
    width: 100%; /* Ensures the container takes full width */
    overflow: hidden; /* Prevents content from overflowing */
}

  @media screen and (max-width: 768px) {
        #randomNumbersTable {
            width: 100%;
            table-layout: fixed; /* Ensures even column width distribution */
            font-size: 12px; /* Reduce text size for better fit */
        }
        
        #randomNumbersTable th, 
        #randomNumbersTable td {
            padding : 2px;
            text-align: center;
        }
    }