/* =========================================================
   SSTP UNIFIED SIDEBAR
   SAME ON HOME / DAERAH / USTP
========================================================= */

.side,
.side-rail{
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;

  width:258px !important;
  height:100vh !important;

  display:flex !important;
  flex-direction:column !important;

  background:
    radial-gradient(circle at 70% 5%,rgba(104,224,207,.12),transparent 30%),
    #071522 !important;

  color:#fff !important;

  border-right:1px solid rgba(104,224,207,.17) !important;
  box-shadow:10px 0 32px rgba(0,0,0,.18) !important;

  overflow:hidden !important;
  z-index:80 !important;
}


/* BRAND */

.side-head,
.side-rail-head{
  height:184px !important;
  padding:25px 20px 22px !important;

  display:flex !important;
  align-items:flex-start !important;

  border-bottom:1px solid rgba(255,255,255,.08) !important;

  background:transparent !important;
}

.side-brand,
.side-rail-brand{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;

  width:100% !important;
}

.side-logo,
.side-rail-brand img{
  width:58px !important;
  height:58px !important;

  flex:0 0 58px !important;

  object-fit:contain !important;

  padding:4px !important;

  border-radius:14px !important;

  background:rgba(255,255,255,.055) !important;

  border:1px solid rgba(104,224,207,.20) !important;

  box-shadow:none !important;
  filter:none !important;
}

.side-head strong,
.side-rail-head strong{
  display:block !important;

  margin:0 !important;

  color:#f5fbff !important;

  font-family:Inter,Arial,sans-serif !important;
  font-size:24px !important;
  font-weight:800 !important;

  line-height:1.05 !important;
  letter-spacing:-.02em !important;
}

.side-head span,
.side-rail-head span{
  display:block !important;

  margin-top:8px !important;

  color:#9eb1bf !important;

  font-size:12px !important;
  font-weight:700 !important;

  line-height:1.35 !important;
}


/* MENU */

.side-menu,
.side-rail-menu{
  display:grid !important;

  gap:5px !important;

  padding:18px 12px !important;
}

.side-label,
.side-rail-label{
  padding:0 10px 8px !important;

  color:#8297a6 !important;

  font-size:10px !important;
  font-weight:900 !important;

  line-height:1 !important;

  letter-spacing:.16em !important;
  text-transform:uppercase !important;
}


/* LINKS */

.side-link,
.side-rail-link{
  appearance:none !important;

  display:flex !important;
  align-items:center !important;

  gap:13px !important;

  width:100% !important;
  min-height:46px !important;

  padding:12px 14px !important;

  border:1px solid transparent !important;
  border-radius:11px !important;

  background:transparent !important;

  color:#d5e3ec !important;

  font-family:Inter,Arial,sans-serif !important;
  font-size:14px !important;
  font-weight:800 !important;

  line-height:1.2 !important;

  text-decoration:none !important;

  box-shadow:none !important;

  transform:none !important;
}

.side-link:hover,
.side-rail-link:hover,
.side-link:focus-visible,
.side-rail-link:focus-visible{
  background:rgba(255,255,255,.055) !important;

  border-color:rgba(104,224,207,.10) !important;

  color:#fff !important;

  transform:none !important;
}

.side-link.active,
.side-rail-link.active{
  background:rgba(104,224,207,.12) !important;

  border-color:rgba(104,224,207,.20) !important;

  color:#68e0cf !important;

  box-shadow:inset 3px 0 0 #68e0cf !important;
}

.side-rail-icon{
  width:25px !important;

  flex:0 0 25px !important;

  text-align:center !important;

  font-size:16px !important;
}


/* FOOTER */

.side-foot,
.side-rail-foot{
  margin-top:auto !important;

  display:grid !important;

  gap:10px !important;

  padding:16px !important;

  background:#071522 !important;

  border-top:1px solid rgba(255,255,255,.08) !important;
}

.side-foot .btn,
.side-rail-foot .btn{
  width:100% !important;
  min-height:48px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;

  padding:12px 16px !important;

  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:9px !important;

  background:rgba(255,255,255,.07) !important;

  color:#f5fbff !important;

  font-family:Inter,Arial,sans-serif !important;
  font-size:13px !important;
  font-weight:800 !important;

  box-shadow:none !important;
}

.side-foot .btn:hover,
.side-rail-foot .btn:hover{
  background:rgba(104,224,207,.12) !important;

  border-color:rgba(104,224,207,.22) !important;

  color:#fff !important;

  transform:none !important;
}


/* DESKTOP CONTENT OFFSET */

@media(min-width:861px){

  body{
    padding-left:258px !important;
  }

  .shell{
    display:block !important;
  }

  .content{
    margin-left:0 !important;
  }

}


/* HOMEPAGE SPECIAL RESET */

@media(min-width:1180px){

  body{
    padding-left:258px !important;
  }

  .side-rail{
    left:0 !important;
    width:258px !important;
  }

}


/* LIGHT MODE */

html[data-theme="light"] .side,
html[data-theme="light"] .side-rail,
html[data-ustp-theme="light"] .side,
html[data-daerah-theme="light"] .side{
  background:#ffffff !important;

  border-right:1px solid rgba(8,125,121,.14) !important;
}

html[data-theme="light"] .side-head,
html[data-theme="light"] .side-rail-head,
html[data-ustp-theme="light"] .side-head,
html[data-daerah-theme="light"] .side-head{
  border-bottom-color:rgba(16,32,51,.08) !important;
}

html[data-theme="light"] .side-head strong,
html[data-theme="light"] .side-rail-head strong,
html[data-ustp-theme="light"] .side-head strong,
html[data-daerah-theme="light"] .side-head strong{
  color:#102033 !important;
}

html[data-theme="light"] .side-head span,
html[data-theme="light"] .side-rail-head span,
html[data-ustp-theme="light"] .side-head span,
html[data-daerah-theme="light"] .side-head span{
  color:#607286 !important;
}

html[data-theme="light"] .side-link,
html[data-theme="light"] .side-rail-link,
html[data-ustp-theme="light"] .side-link,
html[data-daerah-theme="light"] .side-link{
  color:#32465a !important;
}

html[data-theme="light"] .side-link.active,
html[data-theme="light"] .side-rail-link.active,
html[data-ustp-theme="light"] .side-link.active,
html[data-daerah-theme="light"] .side-link.active{
  background:rgba(8,125,121,.08) !important;

  color:#087d79 !important;

  border-color:rgba(8,125,121,.15) !important;

  box-shadow:inset 3px 0 0 #087d79 !important;
}

html[data-theme="light"] .side-foot,
html[data-theme="light"] .side-rail-foot,
html[data-ustp-theme="light"] .side-foot,
html[data-daerah-theme="light"] .side-foot{
  background:#fff !important;
  border-top-color:rgba(16,32,51,.08) !important;
}

html[data-theme="light"] .side-foot .btn,
html[data-theme="light"] .side-rail-foot .btn,
html[data-ustp-theme="light"] .side-foot .btn,
html[data-daerah-theme="light"] .side-foot .btn{
  background:#f1f6f8 !important;
  color:#102033 !important;
  border-color:rgba(16,32,51,.08) !important;
}


/* MOBILE */

@media(max-width:860px){

  body{
    padding-left:0 !important;
  }

  .side,
  .side-rail{
    display:none !important;
  }

}