html,
     body {
         max-width: 100%;
         overflow-x: hidden;
         height: 100%;
     }

     body {
         background: linear-gradient(180deg, #fff, #C0C0C0);
         width: 100%;
         height: 100%;
         background-repeat: no-repeat;
     }

     .text-yellow {
         color: orange
     }

     .text-blue {
         color: #0C607A
     }

     @media screen and (max-width: 768px) {
         .top-nav {
             background: linear-gradient(180deg, #295C24, #64975C);
         }

         .navbar-default .navbar-nav li a i img {
             width: 3%
         }

         .navbar-brand>img {
             -o-object-fit: contain;
             /* Opera Support */
             object-fit: contain;
             /* Resize down to fit container */
             max-height: 100%;
             /* resize DOWN to height of container which is set to 50px */
             height: 100%;
             /* resize UP to fit*/
             width: 100%;
             width: auto;
             /* resize based on height */
             margin: 0 auto;
             margin-left: 5px;
         }

         .navbar-default .navbar-nav li a {
             color: #fff;
             margin-top: -10px
         }

         .navbar-default {
             margin-top: 40px
         }

         .nav-bottom {
             display: none;
         }

         .mob {
             background: #295C24;
             text-align: center;
             margin-top: 0px;
             margin-bottom: 10px;
             position: fixed;
             width: 100%;
             z-index: 99;
         }
     }

     @media screen and (min-width: 768px) and (max-width:1450px) {
         .top-nav {
             padding: 0px 15em 0px 15em;
             background: linear-gradient(180deg, #295C24, #64975C)
         }

         .navbar-nav {
             padding-bottom: 0px
         }

         .navbar-brand>img {
             -o-object-fit: contain;
             /* Opera Support */
             object-fit: contain;
             /* Resize down to fit container */
             height: 100%;
             /* resize DOWN to height of container which is set to 50px */
             width: 100%;
             width: auto;
             position: absolute;
             margin-top: -3px
         }

         .navbar-default .navbar-nav li a i img {
             position: absolute;
             margin-top: 1px;
             margin-left: -18px
         }

         .navbar-default .navbar-nav li a {
             color: #fff;
             margin-top: -1px;
             display: block;
             font-size: 12px
         }

         .nav-bottom {
             background: #295C24;
             text-align: center;
             border-top-right-radius: 10px;
             border-top-left-radius: 10px;
             margin-top: -5px
         }

         .main {
             padding: 70px 15em 0px 15em;
         }

         .mob {
             display: none;
         }

         .gif {
             position: absolute;
             right: 0px;
             width: 150px;
             margin-top: 200px
         }

         .card-warna {
             position: fixed;
             top: 180px;
             width: 250px;
             background: #222;
             padding: 5px;
             border-radius: 5px;
             margin-left: 15px;
         }
     }

     /* Default Navbar Brand Settings. Use this to resize or move your logo up and down */
     .navbar-brand {
         padding: 0;
         /*adjust the top/bottom padding if your logo looks too small */
         margin-top: 3px;
         /* you can adjust this if your logo needs to be moved up or down but simply adjusting the padding is easier */
         height: 40px;
         /* this should be equal to computed height of .navbar-nav>li>a */
     }

     @media screen and (min-width: 1450px) and (max-width: 1920px) {
         .top-nav {
             padding: 0px 19em 0px 19em;
             background: linear-gradient(180deg, #295C24, #64975C)
         }

         /* Default Navbar Brand Settings. Use this to resize or move your logo up and down */
         .navbar-brand {
             padding: 0;
             /*adjust the top/bottom padding if your logo looks too small */
             margin-top: 3px;
             /* you can adjust this if your logo needs to be moved up or down but simply adjusting the padding is easier */
             height: 50px;
             /* this should be equal to computed height of .navbar-nav>li>a */
         }

         .navbar-nav {
             padding-bottom: 0px
         }

         .navbar-brand>img {
             -o-object-fit: contain;
             /* Opera Support */
             object-fit: contain;
             /* Resize down to fit container */
             height: 100%;
             /* resize DOWN to height of container which is set to 50px */
             width: 100%;
             width: auto;
             position: absolute;
             margin-top: -3px
         }

         .navbar-default .navbar-nav li a {
             color: #fff;
             margin-top: -1px;
             display: block;
             font-size: 1em;
             margin-right: 5px
         }

         .navbar-default .navbar-nav li a i img {
             position: absolute;
             margin-top: 1px;
             margin-left: -30px;
         }

         .nav-bottom {
             background: #295C24;
             text-align: center;
             border-top-right-radius: 10px;
             border-top-left-radius: 10px;
             margin-top: -10px;
             font-size: 1em
         }

         .nav-bottom table {
             font-size: 1em;
         }

         .main {
             padding: 70px 5em 0px 5em;
         }

         .mob {
             display: none;
         }

         .gif {
             position: absolute;
             right: 10px;
             width: 15em;
             margin-top: 200px
         }

         .card-warna {
             position: fixed;
             top: 180px;
             width: 250px;
             background: #222;
             padding: 5px;
             border-radius: 5px;
             margin-left: -8em
         }
     }

     @media screen and (min-width: 1920px) {
         .top-nav {
             padding: 0px 30em 0px 30em;
             background: linear-gradient(180deg, #295C24, #64975C)
         }

         /* Default Navbar Brand Settings. Use this to resize or move your logo up and down */
         .navbar-brand {
             padding: 0;
             /*adjust the top/bottom padding if your logo looks too small */
             margin-top: 3px;
             /* you can adjust this if your logo needs to be moved up or down but simply adjusting the padding is easier */
             height: 70px;
             /* this should be equal to computed height of .navbar-nav>li>a */
         }

         .navbar-nav {
             padding-bottom: 0px
         }

         .navbar-brand>img {
             -o-object-fit: contain;
             /* Opera Support */
             object-fit: contain;
             /* Resize down to fit container */
             height: 100%;
             /* resize DOWN to height of container which is set to 50px */
             width: 100%;
             width: auto;
             position: absolute;
             margin-top: -3px;
             margin-left: 2em;
         }

         .navbar-default .navbar-nav li a {
             color: #fff;
             margin-top: -1px;
             display: block;
             font-size: 1.15em;
             margin-right: 5px
         }

         .navbar-default .navbar-nav li a i img {
             position: absolute;
             margin-top: 1px;
             margin-left: -30px;
             margin-top: 0px
         }

         .nav-bottom {
             background: #295C24;
             text-align: center;
             border-top-right-radius: 10px;
             border-top-left-radius: 10px;
             margin-top: 0px;
             font-size: 1em
         }

         .nav-bottom table {
             font-size: 1.4em;
         }

         .main {
             padding: 70px 5em 0px 5em;
         }

         .mob {
             display: none;
         }

         .gif {
             position: absolute;
             right: 10px;
             width: 20em;
             margin-top: 200px
         }

         .card-warna {
             position: fixed;
             top: 180px;
             width: 250px;
             background: #222;
             padding: 5px;
             border-radius: 5px;
             margin-left: -15em
         }
     }

     .navbar-default {
         width: 100%;
         z-index: 99;
         position: fixed;
         border: none;
         border-radius: 0px;
         background: linear-gradient(180deg, #295C24, #64975C);
         left: 0;
     }

     .navbar-default .navbar-nav li {
         padding: 0px 3px 0px 3px;
     }

     .navbar-default .navbar-nav li a:hover,
     .navbar-default .navbar-nav li.active a {
         color: orange
     }

     .navbar-default .navbar-nav>.active>a,
     .navbar-default .navbar-nav>.active>a:hover,
     .navbar-default .navbar-nav>.active>a:focus {
         background: transparent;
         color: orange
     }

     .navbar .nav>li.dropdown.open.active>a:hover,
     .navbar .nav>li.dropdown.open>a {
         color: orange;
         background-color: transparent;
     }

     .navbar-nav .dropdown-menu {
         background: linear-gradient(180deg, #295C24, #64975C);
         color: #fff
     }

     .dropdown-menu li a:hover {
         background: transparent;
     }

     .text-light,
     .text-white {
         color: #fff
     }

     .kontent {
         border-radius: 2px;
         border: solid gray;
         background: #FAFBE9;
         text-align: center;
         padding: 5px
     }

     @media screen and (min-width: 768px) {
         .ptbt4 {
             padding-top: 40px;
             padding-bottom: 40px
         }
     }

     .mb-3 {
         margin-bottom: 30px
     }

     @media screen and (max-width: 768px) {
         h2 {
             font-size: 18px
         }

         .main {
             padding: 25px 0.5em 0px 0.5em;
         }

         .bg-gray {
             margin: 0px 1px 0px 1px
         }

         .ptbt4 {
             padding-top: 10px;
             padding-bottom: 10px
         }

         .gif {
             display: none;
         }
     }

     .img-banner {
         padding-bottom: 3px
     }

     .text-center {
         text-align: center;
     }

     .btn-rounded {
         border-radius: 10px
     }

     .bg-gray {
         background: #E4E4E4
     }

     .btn-orange {
         background: orange
     }

     .footer {
         background: linear-gradient(180deg, #295C24, #64975C);
         padding: 5px;
         text-align: center;
         color: #fff;
         cursor: default;
         margin-top: 10px
     }

     .pt-3 {
         padding-top: 10px
     }

     .text-green {
         color: #008000
     }

     .text-kuning {
         color: yellow
     }

     .text-red {
         color: #FF0000
     }

     .text-gray {
         color: black;
     }

     .table-wla {
         border: solid #D76F70;
         background: transparent;
         margin-bottom: 20px
     }

     .table-wla thead {
         background: #F38C87;
         color: #fff;
         font-weight: bold;
     }

     .table-wla tbody tr:nth-child(even) {
         background-color: #F6CFC2;
     }

     .table-wla tbody tr td {
         padding: 6px
     }

     .table-wla tbody tr td.pl-2 {
         padding-left: 20px
     }

     .table-result {
         border: solid #8A15FF;
         background: transparent;
         margin-bottom: 20px
     }

     .table-result thead {
         background: #8204FF;
         color: #fff;
         font-weight: bold;
     }

     .table-result tbody tr:nth-child(even) {
         background-color: #C9C9ED;
     }

     .table-result tbody tr td {
         padding: 6px
     }

     .table-result tbody tr td.pl-2 {
         padding-left: 20px
     }

     .table-prediksi {
         border: solid gray;
         background: transparent;
         margin-bottom: 20px
     }

     .table-prediksi thead {
         background: #7D8EA0;
         color: #fff;
         font-weight: bold;
     }

     .table-prediksi tbody tr:nth-child(even) {
         background-color: #E2E7E3;
     }

     .table-prediksi tbody tr td {
         padding: 6px
     }

     .table-prediksi tbody tr td.pl-2 {
         padding-left: 20px
     }

     .fx {
         font-size: 11px
     }

     .paito {
         border: solid #28A745 2px;
         padding: 10px;
         margin-bottom: 30px;
         border-radius: 5px
     }

     .paito-bottom {
         border-bottom: solid #FF3C3C 1px;
     }

     .bg-white {
         background: #fff
     }

     .plr {
         padding-left: 2px;
         padding-right: 2px
     }

     .plr-3 {
         padding-left: 30px;
         padding-right: 30px;
         padding-top: 5px;
         padding-bottom: 5px
     }

     .no-margin {
         margin: 0px;
         padding: 2px
     }

     .warna-1 {
         background: #00FFFF;
         width: 100%;
         height: 20px
     }

     .wp-1 {
         background: #00FFFF
     }

     .warna-2 {
         background: #EED211;
         width: 100%;
         height: 20px
     }

     .wp-2 {
         background: #EED211
     }

     .warna-3 {
         background: #99FB9E;
         width: 100%;
         height: 20px
     }

     .wp-3 {
         background: #99FB9E
     }

     .warna-4 {
         background: #E74173;
         width: 100%;
         height: 20px
     }

     .wp-4 {
         background: #E74173
     }

     .warna-5 {
         background: #FF00FF;
         width: 100%;
         height: 20px
     }

     .wp-5 {
         background: #FF00FF
     }

     .warna-6 {
         background: #00D5D5;
         width: 100%;
         height: 20px
     }

     .wp-6 {
         background: #00D5D5;
     }

     .warna-7 {
         background: #FFB693;
         width: 100%;
         height: 20px
     }

     .wp-7 {
         background: #FFB693
     }

     .warna-putih {
         background: #FFf;
         width: 100%;
         height: 20px
     }

     .text-white {
         color: #fff
     }

     .table-paito-putih tr:nth-child(5n+5),
     .table-paito-putih tr .td-footer {
         background: #D3D1D6;
     }

     .table-paito-putih {
         font-size: 13px;
         width: 100%;
         cursor: pointer;
         background: #fff;
         border: solid 1.5px #B9B6BE;
     }

     .xc-putih {
         color: #B9B6BE;
         background: #fff
     }

     .table-paito-hitam tr:nth-child(5n+5),
     .table-paito-hitam tr .td-footer {
         background: gray;
     }

     .table-paito-hitam {
         font-size: 13px;
         width: 100%;
         background: #222;
         color: #fff;
         cursor: pointer;
     }

     .table-paito-hitam thead tr th {
         background: #000
     }

     .table-paito-hitam tr td {
         border: solid 1px #fff;
     }

     .xc-hitam {
         color: #fff;
         background: gray
     }

     @media screen and (max-width: 768px) {
         .card-warna {
             position: fixed;
             top: 128px;
             width: 250px;
             background: #222;
             padding: 5px;
             border-radius: 5px;
             margin-left: 10px;
             display: none;
         }

         .plh-warna {
             position: fixed;
             top: 98px;
             margin-left: 10px;
             background: #222;
             color: #fff;
             border-radius: 5px
         }
     }

     @media screen and (min-width: 768px) {

         .plh-warna {
             display: none;
         }

         .mt-1 {
             margin-top: 10px
         }
     }

     .search {
         background: #222;
         border-radius: 5px;
         padding: 10px;
         margin-bottom: 30px
     }

     .bg-swiper {
         background: #3E3E3E;
         border-radius: 10px;
         padding: 15px;
         margin-bottom: 20px
     }

     .border-swiper {
         border-radius: 10px;
         border: solid 2px #A9F40B;
     }

     .border-swiper img {
         border-radius: 5px;
         object-fit: cover;
     }

     @media screen and (min-width: 768px) {
         .alat {
             border-radius: 5px;
             padding: 35px;
             border: solid 2px gray;
         }

         .border-alat {
             border-radius: 5px;
             padding: 15px;
             border: solid 2px gray;
         }

         ul.nav-tabs li {
             width: 100%;
             text-align: center;
             font-size: 1.2em
         }
     }

     @media screen and (max-width: 768px) {
         .alat {
             border-radius: 5px;
             padding: 0px;
             border: solid 2px gray;
         }

         .border-alat {
             border-radius: 5px;
             padding: 5px;
             border: solid 2px gray;
             width: 100%
         }

         ul.nav-tabs li {
             width: 100%;
             text-align: center;
             font-size: 0.8em
         }
     }

     @media screen and (min-width: 768px) {
         .text-red {
             color: #FF0000;
             text-decoration-line: underline;
         }

         .bg-green {
             background: #008040;
             color: #fff
         }

         .bg-green td,
         .input td {
             padding: 5px
         }

         .isi {
             border-radius: 5px;
             border: solid #222;
             background: #eee;
             height: 40px;
         }

         input {
             font-size: 2em;
             width: 70%
         }
     }

     @media screen and (max-width: 768px) {
         .text-red {
             color: #FF0000;
             font-size: 0.8em;
             text-decoration-line: underline;
         }

         .bg-green {
             background: #008040;
             color: #fff;
             font-size: 0.9em
         }

         input {
             width: 60%
         }

         .bg-green td {
             padding: 5px
         }

         .input td {
             padding-top: 5px
         }

         .isi {
             border-radius: 5px;
             border: solid #222;
             background: #eee
         }
     }

     .panel,
     .panel-body {
         background: transparent;
         border: none;
     }

     ul.nav-tabs {
         display: flex;
     }

     .nav-tabs>li.active>a,
     .nav-tabs>li.active>a:focus,
     .nav-tabs>li.active>a:hover {
         background-color: #008000;
         color: #fff
     }

     .nav-tabs>li>a,
     .nav-tabs>li>a:focus,
     .nav-tabs>li>a:hover {
         color: #008000;
         background: #D3D3D3
     }

     .btn-dark {
         background: #222;
         color: #fff;
         margin-top: 10px;
     }

     @media screen and (min-width: 768px) {
         .bola {
             padding: 5px 10px 5px 10px;
             background: #333;
             color: #fff;
             font-weight: bold;
             font-size: 2em;
             border-radius: 100%;
             width: 1.8em;
             height: 1.8em
         }

         .tmbh {
             font-size: 1.8em
         }

         .bola-merah {
             padding: 5px 10px 5px 10px;
             background: #FF0000;
             color: #fff;
             font-weight: bold;
             font-size: 2em;
             border-radius: 100%;
             width: 1.8em;
             height: 1.8em
         }

         .td1 {
             background: linear-gradient(180deg, #fff, gray);
             font-size: 3em
         }

         .ln {
             background: yellow
         }
     }

     .hasilakhir {
         margin-top: 20px
     }

     @media screen and (max-width: 768px) {
         .bola {
             padding: 5px 5px 5px 5px;
             background: #333;
             color: #fff;
             font-weight: bold;
             font-size: 14px;
             border-radius: 100%;
             width: 30px;
             height: 30px
         }

         .bola-merah {
             padding: 5px 5px 5px 5px;
             background: #FF0000;
             color: #fff;
             font-weight: bold;
             font-size: 14px;
             border-radius: 100%;
             width: 30px;
             height: 30px
         }

         .td1 {
             background: linear-gradient(180deg, #fff, gray);
             font-size: 3em
         }

         .ln {
             background: yellow;
             font-size: 10px
         }

         .table-live-draw tr td h3 {
             font-size: 1em
         }

         .table-live-draw tr td h4 {
             font-size: 0.8em
         }
     }

     textarea {
         resize: vertical;
     }

     .ln tbody tr td {
         border: solid #222;
     }

     .satu {
         background: #3E3E3E;
         color: #fff
     }

     .table-live-draw tr {
         background: linear-gradient(180deg, gray, #222);
         color: #fff
     }

     .table-live-draw tr td h3 {
         margin-top: 5px;
     }

     .table-top {
         background: transparent;
         border: none;
     }

     .table-top td {
         border: none;
     }

     * {
         -webkit-user-select: none;
         -webkit-touch-callout: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
     }

     @media only screen and (max-width : 768px) {
         body>div.container {
             padding-right: 0 !important;
             padding-left: 0 !important;
         }

         .kontent {
            margin-top: 70px;
        }
         .pd-50 {
             padding: 25px;
         }

         .desktop-only {
             display: none;
         }

         .mobile-only {
             display: block;
         }

         .card-bandar-mobile {
             border: 1px solid gray;
             padding: 6px;
             margin-bottom: 8px;
             border-radius: 10px;
             background-color: #83c27d;
         }

         .card-bandar-mobile h3.position,
         .card-bandar-mobile h3.bandar-name,
         .card-bandar-mobile h3.min-dp,
         .card-bandar-mobile h3.min-wd {
             margin: 0;
         }

         div>h1>b {
            font-size: 18px;
        }

         h3.bandar-name {
             font-size: 26px !important;
             font-weight: bold !important;
         }

         h3.min-dp,
         h3.min-wd {
             font-size: 12px;
         }

         .star-checked {
             color: gold;
         }

        a:focus{
            background-color: #008000 !important;
            color: #fff !important;
        }  
        
        .form-control{
            font-size: 12px;
            padding: 0;
        }

        input#s1.isi, input#s2.isi, input#s3.isi, input#s4.isi, input#s5.isi, input#s6.isi{
            font-size: 12px;
            margin: 3px;
            width: 25px;
        }

        td i.text-danger {
            font-size: 12px;
        }

        h4#sd4, h4#sd5 {
            font-size: 14px;
        }

        h4#sddate, h4#date, h4#hkdate {
            font-size: 12px;
        }

        table.table-wla.table-striped.table-hover {
            font-size: 12px;
        }

        .table-top {
            background: transparent;
            border: none;
            height: 40px;
        }

        button.btn.btn-xs {
            background-color: #d9534f !important;
            border-radius: 5px;
            width: 80%;
            height: 28px;
        }

        #datatm h3 {
            font-size: 14px;
            font-weight: 700;
            vertical-align: middle;
        }

        #datatm .table>tbody>tr>td, 
        #datatm .table>tbody>tr>th, 
        #datatm .table>tfoot>tr>td, 
        #datatm .table>tfoot>tr>th, 
        #datatm .table>thead>tr>td, 
        #datatm .table>thead>tr>th {
            font-size: 13px;
            padding: 2px !important;
        }
     }

     @media(min-width: 769px) {
         .table-responsive {
             overflow-x: hidden;
         }

         .desktop-only {
             display: block;
         }

         .mobile-only {
             display: none;
         }

         .table-custom {
             border: solid gray;
             background: transparent;
             margin-bottom: 20px
         }

         .table-custom thead {
             background: #7D8EA0;
             color: #fff;
             font-weight: bold;
         }

         .table-custom tbody tr:nth-child(even) {
             background-color: #E2E7E3;
         }

         .star-checked {
            color: gold;
        }

        #datatm .table>tbody>tr>td, 
        #datatm .table>tbody>tr>th, 
        #datatm .table>tfoot>tr>td, 
        #datatm .table>tfoot>tr>th, 
        #datatm .table>thead>tr>td, 
        #datatm .table>thead>tr>th {
            font-size: 15px;
        }
     }

     div.col-sm-1.col-xs-1.no-margin>a{
        height: 32px;
     }

     .mt-35 {
         margin-top: 35px;
     }

     .paito-warna {
        position: fixed;
        top: 5px;
        align-items: center;
        background: gray;
        border-radius: 20px;
        margin-left: 5px;
        margin-right: 5px;
    }

    div#datatm,
    div#livemacau {
        margin: 5px;
    }