:root{
  --ppx-black:#000000;
  --ppx-lime:#32FF00;
  --ppx-emerald:#008A45;
  --ppx-white:#FFFFFF;
  --ppx-zinc:#A1A1AA;

  --px-bg:var(--ppx-black);
  --px-panel:#000000;
  --px-panel-2:#041a0d;
  --px-card:#020202;
  --px-card-2:#06160d;
  --px-border:rgba(50,255,0,.18);
  --px-text:var(--ppx-white);
  --px-muted:var(--ppx-zinc);
  --px-cyan:var(--ppx-lime);
  --px-cyan-2:var(--ppx-emerald);
  --px-green:var(--ppx-lime);
  --px-yellow:var(--ppx-lime);
  --px-shadow:0 18px 48px rgba(0,0,0,.55);
}

html,body{background:#000!important;color:#fff!important}
body.px-body,
body{
  background:
    radial-gradient(1200px 700px at 0% 0%, rgba(0,138,69,.18), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(50,255,0,.10), transparent 50%),
    linear-gradient(180deg,#000 0%,#000 55%,#031208 100%)!important;
  color:#fff!important;
}

a{color:inherit}

.px-sidebar,.side,#jpSidebar{
  background:linear-gradient(180deg,#000 0%, #020202 65%, #041a0d 100%)!important;
  border-right:1px solid rgba(50,255,0,.15)!important;
}
.px-sidebar .px-logo,.brand,.badge{
  background:rgba(50,255,0,.06)!important;
  border-color:rgba(50,255,0,.18)!important;
}
.px-nav a,.nav a,.jp-nav a,#jpSidebar a{color:#fff!important}
.px-nav a span,.nav a,.muted,label,small,.sub,.desc,.px-kpi .sub,.px-panel-title p,.crumb,.brand p{color:#A1A1AA!important}
.px-nav a.active,.nav a.active,.jp-nav a.active,#jpSidebar a.active,
.px-nav a:hover,.nav a:hover,.jp-nav a:hover,#jpSidebar a:hover{
  background:rgba(50,255,0,.09)!important;
  border-color:rgba(50,255,0,.22)!important;
  color:#fff!important;
  box-shadow:0 0 0 1px rgba(50,255,0,.08), 0 0 18px rgba(50,255,0,.12)!important;
}
.px-nav a.active .ico,.px-ico,.brand .badge{color:#32FF00!important}

.px-card,.card,.px-table-wrap,.px-balance,.px-btn,.btn,.form-control,.px-search,.px-chip,.px-pagebtn,.custom-card{
  background:linear-gradient(180deg,#020202 0%, #07140b 100%)!important;
  border-color:rgba(50,255,0,.16)!important;
  color:#fff!important;
}

.px-kpi,
.px-action,
.px-modal .px-modal-card,
.modal-content,
.authentication .card,
.center-wrap .card{
  background:linear-gradient(180deg,#020202 0%,#07140b 100%)!important;
  border:1px solid rgba(50,255,0,.16)!important;
  box-shadow:0 0 0 1px rgba(50,255,0,.06),0 18px 60px rgba(0,0,0,.45)!important;
}

.px-title h1,.px-panel-title h3,.top .title,h1,h2,h3,h4,h5,h6,.title,.value,th,td,.authentication p.h5,.logo-top,.logo-top .up{color:#fff!important}
.logo-top .pix,.text-primary,.text-cyan-pagpix{color:#32FF00!important}

.px-btn.primary,.btn-primary,.btn-success,.btn-cta,.btn-lime,
button[type=submit],
input[type=submit]{
  background:linear-gradient(135deg,#008A45 0%,#32FF00 100%)!important;
  border-color:rgba(50,255,0,.28)!important;
  color:#000!important;
  font-weight:800!important;
  box-shadow:0 0 20px rgba(50,255,0,.18)!important;
}
.px-btn:hover,.btn:hover{filter:brightness(1.04)}

input,select,textarea,.form-control,.mz-input,.px-search{
  background:#000!important;
  color:#fff!important;
  border:1px solid rgba(50,255,0,.16)!important;
}
input::placeholder,textarea::placeholder{color:#A1A1AA!important}

.px-table th{color:#fff!important;background:rgba(50,255,0,.04)!important}
.px-table td,table td,table th{border-bottom-color:rgba(50,255,0,.08)!important}
.px-pill.green{background:rgba(50,255,0,.12)!important;border-color:rgba(50,255,0,.24)!important;color:#fff!important}
.px-pill.yellow{background:rgba(0,138,69,.16)!important;border-color:rgba(0,138,69,.28)!important;color:#fff!important}
.px-pill.blue{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.12)!important;color:#fff!important}

/* Auth pages */
body .authentication,
body .center-wrap{background:transparent!important}
.authentication .card-body,.center-wrap .card,.card-body{color:#fff!important}
.authentication-brand{filter:drop-shadow(0 0 12px rgba(50,255,0,.16))}

/* Docs / standalone pages */
.wrap .hero,.wrap .card{background:linear-gradient(180deg,#020202 0%,#07140b 100%)!important;border-color:rgba(50,255,0,.16)!important}
.wrap .hero:before{background:linear-gradient(90deg,#008A45,#32FF00)!important}
.hero-icon{background:linear-gradient(135deg,#008A45,#32FF00)!important}
.banner{background:rgba(50,255,0,.08)!important;border-color:rgba(50,255,0,.18)!important}
.badge.ok{background:rgba(50,255,0,.10)!important;border-color:rgba(50,255,0,.22)!important;color:#fff!important}
.badge.no{background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.12)!important;color:#fff!important}

/* Mobile */
@media (max-width: 980px){
  .px-topbar,.top{background:transparent!important}
}