body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh
}

.prize {
    text-align: center;
    background: #0098e0;
    background: -moz-linear-gradient(top, #0098e0 0, #002975 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0, #0098e0), color-stop(100%, #002975));
    background: -webkit-linear-gradient(top, #0098e0 0, #002975 100%);
    background: -o-linear-gradient(top, #0098e0 0, #002975 100%);
    background: -ms-linear-gradient(top, #0098e0 0, #002975 100%);
    background: linear-gradient(to bottom, #0098e0 0, #002975 100%);
    color: #fff;
    text-shadow: 1px 1px 4px black;
    font-size: 30px;
    vertical-align: top !important;
    padding: .10rem !important;
    border: 1px solid #0098e0 !important
}

.live {
    text-align: center;
    background: #0098e0;
    background: -moz-linear-gradient(top, #0098e0 0, #002975 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0, #0098e0), color-stop(100%, #002975));
    background: -webkit-linear-gradient(top, #0098e0 0, #002975 100%);
    background: -o-linear-gradient(top, #0098e0 0, #002975 100%);
    background: -ms-linear-gradient(top, #0098e0 0, #002975 100%);
    background: linear-gradient(to bottom, #0098e0 0, #002975 100%);
    color: #fff;
    text-shadow: 1px 1px 4px black;
    font-size: 25px;
    vertical-align: top !important;
    padding: .20rem !important;
    border: 1px solid #0098e0 !important
}

.prizeone {
    text-align: center !important;
    background: #000;
    color: #fff000;
    text-shadow: 1px 1px 2px black;
    font-size: 30px;
    vertical-align: top !important;
    padding: .10rem !important;
    border: 1px solid #0098e0 !important
}

.prizenum {
    text-align: center !important;
    background: #000;
    color: #fff;
    text-shadow: 0 0 2px #0dd100;
    font-size: 30px;
    vertical-align: top !important;
    padding: .10rem !important;
    border: 1px solid #0098e0 !important;
    width: 20% !important
}

.draw {
    text-align: center !important;
    background: #000;
    color: #fff;
    text-shadow: 0 0 2px #0dd100;
    font-size: 25px;
    vertical-align: top !important;
    padding: .10rem !important;
    border: 1px solid #0098e0 !important
}

.fancy-border {
    background: #000;
    border: 25px solid #0098e0;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='75'%3E%3Cg fill='none' stroke='%230098e0' stroke-width='2'%3E%3Cpath d='M1 1h73v73H1z'/%3E%3Cpath d='M8 8h59v59H8z'/%3E%3Cpath d='M8 8h16v16H8zM51 8h16v16H51zM51 51h16v16H51zM8 51h16v16H8z'/%3E%3C/g%3E%3Cg fill='%230098e0'%3E%3Ccircle cx='16' cy='16' r='2'/%3E%3Ccircle cx='59' cy='16' r='2'/%3E%3Ccircle cx='59' cy='59' r='2'/%3E%3Ccircle cx='16' cy='59' r='2'/%3E%3C/g%3E%3C/svg%3E") 25
}

.videoContainer__video {
    border: 2px solid #0098e0 !important;
     background: #000;
}

.bouncing {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    position: absolute
}

.bouncingball {
    background: radial-gradient(circle at 65% 15%, #fff .5px, tomato 3%, #d40000 60%, #fba393 100%);
    animation: bounce .9s;
    transform: translateY(0px);
    animation-iteration-count: infinite;
    margin: 60px 0
}

.bouncingballl {
    background: radial-gradient(circle at 65% 15%, white .5px, #00FF00 3%, darkgreen 60%, #00FF00 100%);
    animation: bounce .7s;
    transform: translateY(0px);
    animation-iteration-count: infinite;
    margin: 60px 22px
}

.bouncingballz {
    background: radial-gradient(circle at 65% 15%, white .5px, #ce01cc 3%, #800070 60%, #f923d5 100%);
    animation: bounce .5s;
    transform: translateY(0px);
    animation-iteration-count: infinite;
    margin: 60px 44px
}

.bouncingballk {
    background: radial-gradient(circle at 65% 15%, white .5px, #ffbc00 3%, #a95d00 60%, #ffdb59 100%);
    animation: bounce .8s;
    transform: translateY(0px);
    animation-iteration-count: infinite;
    margin: 60px 66px
}

.insi {
    line-height: 19px;
    color: #fff;
    font-size: 11px;
    vertical-align: top;
    font-weight: bold
}

@keyframes bounce {
    0% {
        top: 0;
        -webkit-animation-timing-function: ease-in
    }

    50% {
        top: 20px;
        height: 20px;
        -webkit-animation-timing-function: ease-out
    }

    100% {
        top: 0;
        -webkit-animation-timing-function: ease-in
    }
}

/* DataTable background and row styling */
#result.dataTable,
#result_wrapper {
    background-color: rgba(238,238,238,.8) !important; /* Solid rgba(238,238,238,.8) */
}

/* Table body rows */
#result.dataTable tbody tr {
    background-color: rgba(238,238,238,.8) !important; /* Solid rgba(238,238,238,.8) */
    color: #000 !important; /* Black text for results */
}
/* Header <th> background matches .prize gradient */
#result thead th {
    background: #0098e0;
    background: -moz-linear-gradient(top, #0098e0 0, #002975 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0, #0098e0), color-stop(100%, #002975));
    background: -webkit-linear-gradient(top, #0098e0 0, #002975 100%);
    background: -o-linear-gradient(top, #0098e0 0, #002975 100%);
    background: -ms-linear-gradient(top, #0098e0 0, #002975 100%);
    background: linear-gradient(to bottom, #0098e0 0, #002975 100%);
    color: #fff !important;
    text-transform: uppercase;
    text-align: center;
    border: 1px solid #fff;
    font-weight: bold;
}

/* Optional: make header bold */
#result thead th {
    font-weight: bold;
}

/* Center align and black color for "ALL RESULT" */
h2.text-center.text-uppercase.text-black {
    color: #eee !important;
}

    /* Blinking title */
    .blink { animation: blinker 1s linear infinite; }
    @keyframes blinker { 50% { opacity: 0; } }

    /* Menu links */
    /* Replace your existing .menu/.menu a rules with: */
.menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;               /* no gap between flex items */
}

.menu h2 {
  flex: 0 0 100%;       /* force the H2 to span the full width */
  margin: 0 0 0.5rem;   /* optional space below the heading */
}

.menu a {
  margin: 0;            /* zero out any margins */
  padding: 10px 20px;   /* keep your padding */
  text-decoration: none;
  color: #fff;
  background: linear-gradient(to bottom, #0098e0, #002975);
  border: 1px solid #0098e0;
  text-shadow: 1px 1px 4px black;
  font-size: 14px;
  font-weight: 600;
}

    /* Table cell backgrounds */
    .yres td { text-align: center; background: #fff; }

    /* Responsive tweaks */
    @media (max-width:600px) {
      .imgm { width: 100px; }
      .titl, .titlee { font-size: 20px; }
      .livedraww td { font-size: 14px; }
      .yres td, .yres th { font-size: 12px; padding: 0.1rem; }
      .menu a { display: block; margin: 5px 0; }
    }

    /* Page background */
    body {
      background: #000 url('../../img/night.jpg') no-repeat center center fixed;
      background-size: cover;
      color: rgba(255, 255, 255, 0.9) !important;
    }

/* ===== Make DataTables UI text black for #result only ===== */
#result_wrapper .dataTables_length,
#result_wrapper .dataTables_filter label,
#result_wrapper .dataTables_info,
#result_wrapper .dataTables_paginate {
  color: #000 !important;            /* "Show 10 entries", "Search:", info text, Prev/Next */
}

/* Search input text + placeholder in black */
#result_wrapper .dataTables_filter input {
  color: #000 !important;
}
#result_wrapper .dataTables_filter input::placeholder {
  color: #000 !important;
  opacity: 1; /* Safari */
}

/* Prev/Next buttons in black (normal, hover, disabled) */
#result_wrapper .dataTables_paginate .paginate_button {
  color: #000 !important;
}
#result_wrapper .dataTables_paginate .paginate_button:hover,
#result_wrapper .dataTables_paginate .paginate_button:focus {
  color: #000 !important;
}
#result_wrapper .dataTables_paginate .paginate_button.disabled {
  color: #000 !important;            /* keep disabled text black too */
}

/* Optional: header labels (DAY/DATE/RESULT) already black? keep it consistent */
#result thead th { color: #000 !important; }

    /* --- Headline --- */
    h2.text-center.text-uppercase {
      color: black ; /* force black as requested */
      margin: 16px 0;
    }
/* Make day, date, and result text color #eee in DataTable */
#result tbody td {
    color: #000 !important;
}

/* Also apply for header cells if needed */
#result thead th {
    color: #eee !important;
}