:root{
  --bg:#0b1214;
  --bg2:#0e1719;
  --panel:#101b1e;
  --panel2:#16282b;
  --panel3:#1b3033;
  --line:#2c4549;
  --line-soft:#21383b;
  --teal:#0f766e;
  --teal2:#149b8f;
  --green:#22c55e;
  --blue:#1685d8;
  --purple:#5b5bd6;
  --orange:#a66a19;
  --red:#ff4d4d;
  --text:#f2f7f7;
  --muted:#8fa6a8;
  --gold:#d99a2b;
  --cyan:#67e8f9;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  margin:0;
  padding:0;
  width:100%;
  min-height:100%;
  background:var(--bg);
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  overflow-x:hidden;
}

body{
  margin:0!important;
  padding:0!important;
  width:100%!important;
  max-width:100%!important;
  min-height:100%;
  background:var(--bg)!important;
  color:var(--text)!important;
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.45;
  overflow-x:hidden;
}

img{
  max-width:100%;
  height:auto;
}

iframe{
  max-width:100%;
}

/* =========================================================
   LINKS
   ========================================================= */

a,
a:link,
a:visited{
  color:var(--text);
  text-decoration:none;
}

a:hover{
  color:var(--cyan);
  text-decoration:none;
}

a:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px;
}

/* =========================================================
   OLD HEADER
   ========================================================= */

#top,
#top2{
  display:none!important;
}

/* =========================================================
   MAIN NAVIGATION
   ========================================================= */

#nav,
.nav2{
  display:flex!important;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  width:100%!important;
  height:auto!important;
  min-height:46px;
  margin:0 auto!important;
  padding:7px 8px!important;
  list-style:none!important;
  background:var(--bg2)!important;
  border-bottom:1px solid var(--line)!important;
}

#nav li,
.nav2 li{
  float:none!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  list-style:none!important;
}

#nav li span{
  display:block;
}

#nav li a,
.nav2 li a{
  float:none!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  min-height:32px;
  margin:0!important;
  padding:8px 13px!important;
  line-height:1.3!important;
  border:1px solid transparent;
  border-radius:5px;
  background:transparent!important;
  color:#eaf2f2!important;
  font-weight:600;
  text-align:center;
  white-space:nowrap;
}

#nav li a:hover,
.nav2 li a:hover,
#nav .select a,
.nav2 .select a,
#nav li a[aria-current="page"],
.nav2 li a[aria-current="page"]{
  background:var(--teal)!important;
  border-color:var(--teal2)!important;
  color:#fff!important;
}

/* =========================================================
   MAIN THREE-COLUMN LAYOUT - FIXED
   ========================================================= */

#main.mbg{
  display:grid!important;
  grid-template-columns:160px minmax(0,1fr) 160px!important;
  align-items:start!important;
  column-gap:10px!important;
  row-gap:0!important;

  width:100%!important;
  max-width:1200px!important;
  min-width:0!important;

  margin:0 auto!important;
  padding:10px!important;

  background:var(--bg2)!important;
  border:1px solid var(--line)!important;
  border-top:0!important;

  box-sizing:border-box!important;
}

/* LEFT COLUMN */
#main.mbg > .left{
  display:block!important;
  grid-column:1!important;
  grid-row:1!important;

  width:160px!important;
  min-width:160px!important;
  max-width:160px!important;

  float:none!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
}

/* CENTER COLUMN */
#main.mbg > #min{
  display:block!important;
  grid-column:2!important;
  grid-row:1!important;

  width:100%!important;
  min-width:0!important;
  max-width:none!important;

  float:none!important;
  margin:0!important;
  padding:6px!important;
  box-sizing:border-box!important;

  background:var(--bg)!important;
  border:1px solid var(--line)!important;
  border-radius:5px!important;
  overflow:hidden!important;
}

/* RIGHT COLUMN */
#main.mbg > .right{
  display:block!important;
  grid-column:3!important;
  grid-row:1!important;

  width:160px!important;
  min-width:160px!important;
  max-width:160px!important;

  float:none!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;

  background:transparent!important;
}

/* LEFT BANNER IFRAMES */
#main.mbg > .left iframe{
  display:block!important;
  width:160px!important;
  max-width:160px!important;
  height:60px!important;

  margin:0 auto 8px!important;
  padding:0!important;
  border:0!important;
  box-sizing:border-box!important;
}

/* LEFT BANNER IMAGES */
#main.mbg > .left img{
  display:block!important;
  width:160px!important;
  max-width:160px!important;
  height:auto!important;

  margin:0 auto 8px!important;
  box-sizing:border-box!important;
}

/* RIGHT BANNER IFRAMES */
#main.mbg > .right iframe{
  display:block!important;
  width:160px!important;
  max-width:160px!important;
  height:160px!important;

  margin:0 auto 8px!important;
  padding:0!important;
  border:1px solid var(--line)!important;
  box-sizing:border-box!important;

  background:var(--panel)!important;
}

/* CENTER LIVESCORE IFRAME */
#main.mbg > #min iframe{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;

  margin:0!important;
  padding:0!important;
  border:0!important;
  box-sizing:border-box!important;
}


.lldiv{
  width:100%;
  min-width:0;
}

.leftnav{
  width:100%!important;
  margin:0 0 8px!important;
  padding:0!important;
  overflow:hidden;
  list-style:none!important;
  border:1px solid var(--line-soft)!important;
  border-radius:4px;
  background:var(--panel)!important;
}

.leftnav ul{
  margin:0!important;
  padding:0!important;
  list-style:none!important;
}

.leftnav h2,
.lr_tit{
  display:block;
  margin:0!important;
  padding:7px 10px!important;
  background:var(--teal)!important;
  color:#fff!important;
  font-size:14px!important;
  line-height:1.3!important;
  font-weight:600!important;
  border:0!important;
}

.leftnav li{
  float:none!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:29px;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-bottom:1px solid var(--line-soft)!important;
  background:var(--panel)!important;
  list-style:none!important;
}

.leftnav li:last-child{
  border-bottom:0!important;
}

.leftnav li a{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:29px;
  margin:0!important;
  padding:5px 12px!important;
  line-height:19px!important;
  color:#dce8e9!important;
  font-weight:500!important;
  background:transparent!important;
}

.leftnav li a:hover,
.leftnav .select a,
.leftnav li a[aria-current="page"]{
  background:var(--teal2)!important;
  color:#fff!important;
}

#allList{
  background:var(--panel)!important;
  border-color:var(--teal)!important;
}

/* =========================================================
   CENTER / SCOREBOARD
   ========================================================= */

#min{
  width:100%!important;
  max-width:100%!important;
  background:var(--bg)!important;
  border:1px solid var(--line)!important;
  border-radius:5px;
  padding:6px;
  overflow:hidden!important;
}

#min iframe{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  border:0!important;
  margin:0!important;
  padding:0!important;
  background:var(--bg)!important;
}

.mintopnav{
  background:var(--panel2)!important;
  border-color:var(--line)!important;
}

.mintopnav li,
.mintopnav li a{
  background:transparent!important;
}

.mintopnav li a{
  color:var(--cyan)!important;
}

.scoretitle,
.scoretitle2{
  background:var(--teal)!important;
  color:#fff!important;
  border-color:var(--line)!important;
}

.Leaguestitle{
  background:var(--purple)!important;
  color:#fff!important;
}

.Leaguestitle2{
  background:var(--orange)!important;
  color:#fff!important;
}

.date_li{
  background:var(--panel2)!important;
  border-color:var(--line)!important;
  color:var(--text)!important;
}

.date_li b{
  background:var(--teal)!important;
  color:#fff!important;
}

.b1,
.b2,
.b3,
.b4,
.te1,
.te2{
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--line-soft)!important;
}

.red,
.red2{
  color:var(--red)!important;
}

.blue,
.status{
  color:var(--blue)!important;
}

.time{
  color:var(--muted)!important;
}

.up{
  background:#3b252b!important;
}

.down{
  background:#17372a!important;
}

.menu{
  background:var(--teal)!important;
  color:#fff!important;
}

/* =========================================================
   RIGHT SIDEBAR / BANNERS
   ========================================================= */

.right{
  background:transparent!important;
}

.right iframe{
  display:block!important;
  width:160px!important;
  max-width:160px!important;
  height:160px!important;
  margin:0 auto 8px!important;
  padding:0!important;
  border:1px solid var(--line)!important;
  box-sizing:border-box!important;
}



body > iframe{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  border:0!important;
  margin:0!important;
  padding:0!important;
}

/* =========================================================
   BOTTOM / FOOTER
   ========================================================= */

#main2,
#main3{
  width:100%!important;
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--line)!important;
}

#bottom{
  width:100%!important;
  max-width:1200px!important;
  margin:0 auto!important;
  padding:18px 14px 40px!important;
  background:var(--panel)!important;
  border-top:1px solid var(--line)!important;
  color:var(--muted)!important;
}

#bottom p{
  margin:8px 0;
  color:var(--text)!important;
  font-size:13px!important;
  line-height:1.7!important;
}

#bottom a{
  color:var(--green)!important;
}

#bottom a:hover{
  color:var(--cyan)!important;
}

/* =========================================================
   GENERAL PANELS
   ========================================================= */

.panel,
.box,
.content-box{
  background:var(--panel)!important;
  border:1px solid var(--line)!important;
  color:var(--text)!important;
}

hr{
  border:0;
  border-top:1px solid var(--line);
}

/* =========================================================
   INLINE COLOR NORMALIZATION
   ========================================================= */

[style*="#22c55e"]{
  color:var(--green)!important;
}

[style*="#ffffff"],
[style*="#FFFFFF"]{
  color:var(--text)!important;
}

[style*="#020605"]{
  background:var(--bg)!important;
}

[style*="#0B1214"],
[style*="#0b1214"]{
  background:var(--bg)!important;
}

/* =========================================================
   TABLET / MOBILE
   NOTE: the old fixed-width (1040px) 3-column mobile rules that
   used to live here were removed. They used the selector
   "#main.mbg > .left / .right" which is MORE SPECIFIC than the
   plain ".left / .right" rules in spbo-terbaru.css, so even
   though spbo-terbaru.css is loaded after this file and has the
   correct responsive (shrinking) mobile layout, these old rules
   were winning and forcing the page to stay 1040px wide on
   mobile - pushing the right banner column off-screen. The
   responsive mobile layout now comes entirely from
   spbo-terbaru.css's @media blocks.
   ========================================================= */

/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar{
  width:8px;
  height:8px;
}

::-webkit-scrollbar-track{
  background:var(--bg);
}

::-webkit-scrollbar-thumb{
  background:var(--teal);
  border-radius:5px;
}

::-webkit-scrollbar-thumb:hover{
  background:var(--teal2);
}

/* =========================================================
   FINAL THEME
   ========================================================= */

html,
body{
  background:var(--bg)!important;
  color:var(--text)!important;
}

#nav,
.nav2{
  background:var(--bg2)!important;
  border-color:var(--line)!important;
}

#nav li,
.nav2 li{
  background:transparent!important;
}

#nav li a,
.nav2 li a{
  color:#eaf2f2!important;
}

#nav li a:hover,
.nav2 li a:hover,
#nav .select a,
.nav2 .select a,
#nav li a[aria-current="page"],
.nav2 li a[aria-current="page"]{
  background:var(--teal)!important;
  color:#fff!important;
}

.leftnav,
.leftnav ul,
.leftnav li{
  background:var(--panel)!important;
  border-color:var(--line-soft)!important;
}

.leftnav h2,
.lr_tit{
  background:var(--teal)!important;
  color:#fff!important;
}

.leftnav li a{
  color:#dce8e9!important;
}

.leftnav li a:hover,
.leftnav .select a,
.leftnav li a[aria-current="page"]{
  background:var(--teal2)!important;
  color:#fff!important;
}

#min{
  background:var(--bg)!important;
  border-color:var(--line)!important;
}

.scoretitle,
.scoretitle2,
.menu,
.date_li b{
  background:var(--teal)!important;
  color:#fff!important;
}

.Leaguestitle{
  background:var(--purple)!important;
  color:#fff!important;
}

.Leaguestitle2{
  background:var(--orange)!important;
  color:#fff!important;
}

.b1,
.b2,
.b3,
.b4,
.te1,
.te2,
.date_li{
  background:var(--panel)!important;
  color:var(--text)!important;
  border-color:var(--line-soft)!important;
}

.red,
.red2{
  color:var(--red)!important;
}

.blue,
.status{
  color:var(--blue)!important;
}

.time{
  color:var(--muted)!important;
}

.up{
  background:#3b252b!important;
}

.down{
  background:#17372a!important;
}

#bottom,
#main2,
#main3{
  background:var(--panel)!important;
  color:#dce8e9!important;
  border-color:var(--line)!important;
}