/**** begin custom colors ****/
:root {
    --color-1: #0b0b0b;
    --color-2: #1a1a1a;
    --color-3: #2b2b2b;
    --color-4: #634c01;
    --color-5: #a88206;
    --color-6: #dca900;
    --color-7: #ffc400;
    --color-8: #ffff00;
    --color-9: #e9e682;

    --gradient-1: radial-gradient(circle at center, var(--color-6), var(--color-4));
    --gradient-2: linear-gradient(to bottom, var(--color-8), var(--color-6));
}
/**** endof custom colors ****/



/**** begin custom background colors ****/
.bg-color-1 { background-color: var(--color-1) !important; }
.bg-color-2 { background-color: var(--color-2) !important; }
.bg-color-3 { background-color: var(--color-3) !important; }
.bg-color-4 { background-color: var(--color-4) !important; }
.bg-color-5 { background-color: var(--color-5) !important; }
.bg-color-6 { background-color: var(--color-6) !important; }
.bg-color-7 { background-color: var(--color-7) !important; }
.bg-color-8 { background-color: var(--color-8) !important; }
.bg-color-9 { background-color: var(--color-9) !important; }

.bg-black { background-color: #000000 !important; }

.bg-gradient-1 { background-image: var(--gradient-1) !important; }
.bg-gradient-2 { background-image: var(--gradient-2) !important; }
/**** endof custom background colors ****/



/**** begin custom button colors ****/
/**** endof custom button colors ****/



/**** begin custom text colors ****/
/**** endof custom text colors ****/



/**** begin custom rtp-slot colors ****/
.yellow{
    background-color: #ffc107;
}
.green{
    background-color: #28a745;
}
.red{
    background-color: #dc3545;
}
/**** endof custom rtp-slot colors ****/

@font-face {
    font-family: 'font-digits';
    src: url("../fonts/digits.otf");
}




        #customers {
            font-family: Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
            height: 100px;
        }

        #customers td,
        #customers th {
            border: 1px solid #ddd;
            padding: 15px;

        }

        #customers tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        #customers tr:hover {
            background-color: #ddd;
        }

        #customers th {
            padding-top: 12px;
            padding-bottom: 12px;
            background-color: #ffff00;
            color: white;
            text-align: center;
            font-size: 150%;
        }

        #customers td {
            text-align: center;
            font-size: 100%;

        }

        #live_data td a:hover {
             background-color: rgb(255, 238, 0);
        }

        #live_data td a {
            text-decoration: none;
            background-color: #ffff00;
            color: rgb(7, 7, 7);
            padding: 5px 10px;
            font-size: 20px;
        }

        #customers .judul {
            background: rgb(230, 207, 5);
            background: linear-gradient(90deg, rgb(192, 173, 4) 50%, rgb(221, 200, 13) 100%);
            padding: 0px 10px;
            color: rgb(12, 12, 12);
        }

        .tombol1 {
            background: #e7eb07;
    padding: 10px 10px;
    font-weight: bold;
    font-size: 13px;
    border-radius: 10px;
        }

        .tombol2 {
            background: black;
            animation: rainbow 1s infinite;
            color: black;
            padding: 10px 20px;
            font-size: 13px;
            border-radius: 20px;
            font-weight: bold;
            text-transform: uppercase;
            content: "";

        }

        .tombol2::after {
            content: " LIVE";
        }

        @keyframes rainbow {
            0% {
                background-color: rgb(243, 208, 7);
                color: orange
            }

            16.7% {
                background-color: orange;
            }

            33.3% {
                background-color: yellow;
            }

            50% {
                background-color: green;
            }

            66.7% {
                background-color: blue;
            }

            83.3% {
                background-color: indigo;
            }

            100% {
                background-color: violet;
            }
        }

        .clock {

            top: 6%;
            right: 0%;
            color: #ffd800;
            font-size: 21px;
            font-family: Orbitron;
            letter-spacing: 7px;
        }

        @media only screen and (max-width: 600px) {
            .clock {
                top: 6%;
                right: 0%;
                color: #ffd800;
                font-size: 35px;
                font-family: Orbitron;
                letter-spacing: 7px;
            }
        }
        #customers th {
    border: 1px solid rgb(240, 197, 8);
    background: #ffff00;
    color: rgb(12, 12, 12);
}

#customers td {
        border: 1px solid rgb(255, 0, 255)
    padding: 15px;
    background: linear-gradient(357deg, #00000047, transparent);
}


@media screen and (max-width: 768px) {
  #customers th, #customers td {
    padding: 4px; /* Kurangi padding untuk menghemat ruang */
  }

  #customers {
    table-layout: fixed; /* Atur layout tabel agar setiap kolom punya lebar tetap */
  }

  #customers th, #customers td {
    word-wrap: break-word; /* Membungkus teks panjang agar sesuai dengan lebar kolom */
    font-size: 10px;
  }
    
            #live_data td a {
            text-decoration: none;
            background-color: #ffff00;
            color: rgb(7, 7, 7);
            padding: 5px 10px;
            font-size: 8px;
        }

}

       
       

        #clock {
            position: relative;
            left: 50%;
            margin-left: -5em;
        }

        .baner {
            width: 100%;
            --angle: 0deg;
            border-radius: 5px;
            border: 3px solid;
            border-image: conic-gradient(from var(--angle), red, #ffff00, red, #ffff00, red, #ffff00, red) 1;
            animation: 10s rotate linear infinite;
        }

        .tulisanberjalan {
            background: red;
        }

        tbody,
        td,
        tfoot,
        th,
        thead,
        tr {
             font-size: 19px;
    font-weight: bold;
        }