:root{
  --dg-bg0:#050816;
  --dg-bg1:#070f24;
  --dg-bg2:#081f3f;
  --dg-panel:rgba(10,16,40,.88);
  --dg-panel-strong:rgba(11,18,46,.96);
  --dg-border:rgba(102,126,234,.26);
  --dg-border-strong:rgba(102,126,234,.46);
  --dg-text:#ffffff;
  --dg-muted:#d0e0ff;
  --dg-accent:#a5b4fc;
  --dg-accent-2:#667eea;
  --dg-accent-3:#764ba2;
  --dg-shadow:0 18px 55px rgba(0,0,0,.45);
  --dg-radius:16px
  ;--dg-col-bg:rgba(102,126,234,.35)
  ;--bg-color:radial-gradient(1100px 650px at 18% 8%,rgba(102,126,234,.18),transparent 60%),radial-gradient(900px 500px at 88% 12%,rgba(118,75,162,.12),transparent 60%),linear-gradient(135deg,var(--dg-bg0),var(--dg-bg1) 35%,var(--dg-bg2))
  ;--card-bg:var(--dg-panel)
  ;--text-color:var(--dg-text)
  ;--text-muted:var(--dg-muted)
  ;--border-color:rgba(102,126,234,.18)
  ;--border-light:rgba(102,126,234,.12)
  ;--primary-color:var(--dg-accent-2)
  ;--primary-dark:rgba(102,126,234,.85)
  ;--success-color:#22c55e
  ;--warning-color:#f59e0b
  ;--danger-color:#ef4444
  ;--info-color:#6366f1
}
body{background:var(--bg-color);color:var(--dg-text)}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans",sans-serif;letter-spacing:.2px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(7,15,36,.85);border:1px solid rgba(0,0,0,.45)}
::-webkit-scrollbar-thumb{background:rgba(102,126,234,.22);border:1px solid rgba(102,126,234,.25)}
::-webkit-scrollbar-corner{background:rgba(7,15,36,.85)}
.navbar{
  background:rgba(7,15,36,.9);
  border-bottom:1px solid var(--dg-border);
  box-shadow:0 10px 25px rgba(0,0,0,.25);
  backdrop-filter:blur(10px);
  z-index:1030
}

#navbar{
  position:fixed!important;
  z-index:1030!important
}
.navbar{height:56px}
.navbar{display:flex;align-items:center;justify-content:space-between}
.navbar-left,.navbar-right{float:none;display:flex;align-items:center}
.navbar-left a,.navbar-right a{float:none}
.navbar-left{min-width:0}
.navbar-right{justify-content:flex-end}
.navbar-left a,.navbar-right a{padding:16px 14px;font-size:15px}
#brand{letter-spacing:1.5px;text-transform:uppercase;font-weight:800}
.navbar{position:fixed}
.navbar #brand{position:absolute;left:50%;transform:translateX(-50%);z-index:10}
.navbar-left a,.navbar-right a{color:var(--dg-text)}
.navbar a:hover{color:#fff}
.navbar-hover:hover{background:rgba(102,126,234,.12)}
.sidenav{
  background:rgba(7,15,36,.88);
  border-right:1px solid var(--dg-border);
  backdrop-filter:blur(10px);
  z-index:1040
}

#sidenav{
  position:fixed!important;
  z-index:1040!important
}

#overL{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.55);
  z-index:1035!important;
  display:none
}
.sidenav{
  margin-top:64px;
  margin-left:12px;
  height:calc(100% - 78px);
  border-radius:18px;
  box-shadow:0 18px 45px rgba(0,0,0,.38);
}
.sidenav .menu,.sidenav a,.dropdown-btn{border-radius:14px}
.dropdown-btn,.sidenav a{padding:10px 10px 10px 12px}
.sidenav i{padding:6px 0 6px 6px}
.dropdown-btn:hover,.sidenav a:hover{
  color:#fff;
  background:linear-gradient(135deg,rgba(102,126,234,.22),rgba(118,75,162,.18));
  border-radius:12px
}
.active{
  background:rgba(11,18,46,.75);
  border:1px solid rgba(102,126,234,.22);
  border-radius:12px
}
.box,.card{
  background:var(--dg-panel);
  border:1px solid var(--dg-border);
  border-radius:var(--dg-radius);
  box-shadow:var(--dg-shadow)
}
#main{margin-top:64px}
.box-bordered,.card{border-color:var(--dg-border-strong)}
.card-header{
  background:linear-gradient(135deg,rgba(102,126,234,.20),rgba(118,75,162,.10));
  border-bottom:1px solid var(--dg-border);
  border-radius:calc(var(--dg-radius) - 2px) calc(var(--dg-radius) - 2px) 0 0
}
.box-group-icon{
  background:linear-gradient(135deg,rgba(102,126,234,.18),rgba(118,75,162,.12));
  border:1px solid rgba(102,126,234,.22)
}
.form-control,.group-item{
  background:rgba(5,8,22,.55);
  border:1px solid rgba(102,126,234,.18);
  color:var(--dg-text);
  border-radius:12px
}
.form-control::placeholder,.group-item::placeholder{color:rgba(234,242,255,.65)}
.form-control:focus,.group-item:focus{
  border-color:rgba(102,126,234,.6);
  box-shadow:0 0 0 .2rem rgba(102,126,234,.18);
  outline:0
}
.btn,.btn-login{
  background:linear-gradient(135deg,var(--dg-accent-2),var(--dg-accent-3));
  border:1px solid rgba(102,126,234,.45);
  color:#f8fbff;
  border-radius:12px
}
.btn:hover,.btn-login:hover{
  background:linear-gradient(135deg,#5568d3,#6d4297);
  box-shadow:0 0 0 .2rem rgba(102,126,234,.2)
}
.bg-primary{
  background:linear-gradient(135deg,var(--dg-accent-2),var(--dg-accent-3))
}
.text-primary{color:var(--dg-accent)}
.table td,.table th{color:var(--dg-text)}
.table thead th{
  background:linear-gradient(135deg,var(--dg-col-bg),rgba(118,75,162,.22));
  color:#f8fbff;
  font-weight:700;
  border-bottom:1px solid rgba(102,126,234,.45)!important
}
.table tbody td{
  color:rgba(248,251,255,.92);
  font-weight:500
}
.table-striped tbody tr:nth-of-type(odd){background-color:rgba(102,126,234,.07)}
.table-hover:hover tbody tr:hover{background:rgba(102,126,234,.08)}
.table-bordered td,.table-bordered th{border:1px solid rgba(102,126,234,.16)!important}
.modal-window>div{
  background:var(--dg-panel-strong);
  border:1px solid var(--dg-border-strong);
  border-radius:var(--dg-radius);
  box-shadow:var(--dg-shadow)
}
.modal-content{
  background:var(--dg-panel-strong);
  border:1px solid var(--dg-border-strong);
  border-radius:var(--dg-radius);
  color:var(--dg-text)
}
.modal-header,.modal-body,.modal-footer{
  background:transparent;
  color:inherit
}
.modal-header{
  border-bottom:1px solid var(--dg-border)
}
.modal-footer{
  border-top:1px solid var(--dg-border)
}
a{color:var(--dg-accent)}
a:hover{color:#c4b5fd}
.text-muted,.small,.form-text,.help-block{color:var(--dg-muted)!important}
.dropdown-container a{color:rgba(248,251,255,.92)}
.dropdown-container a:hover{color:#fff}
.card-header h1,.card-header h2,.card-header h3,.card-header h4,.card-title{color:#f8fbff;font-weight:800}
label,.form-group label{color:rgba(248,251,255,.92);font-weight:700}
.form-control,.group-item,textarea.form-control,select.form-control{
  background:linear-gradient(135deg,rgba(102,126,234,.20),rgba(118,75,162,.10));
  border:1px solid rgba(102,126,234,.55);
  color:#f8fbff
}
.form-control::placeholder,.group-item::placeholder{color:rgba(234,242,255,.8)}
.form-control:focus,.group-item:focus{
  border-color:rgba(102,126,234,.85);
  box-shadow:0 0 0 .2rem rgba(102,126,234,.28)
}
.stheme{display:none!important}

.bg-warning,.bg-orange,.bg-yellow{color:#06150d!important}
.bg-warning a,.bg-orange a,.bg-yellow a{color:#06150d!important}
.bg-warning a:hover,.bg-orange a:hover,.bg-yellow a:hover{color:#020b06!important}

.bg-light,.bg-white{color:#0f172a}
.bg-light a,.bg-white a{color:#667eea}
.bg-light a:hover,.bg-white a:hover{color:#1e40af}

[style*="background:white"],[style*="background: white"],[style*="background:#fff"],[style*="background: #fff"],[style*="background-color:white"],[style*="background-color: white"],[style*="background-color:#fff"],[style*="background-color: #fff"]{color:#0f172a}
[style*="background:#f9f9f9"],[style*="background: #f9f9f9"],[style*="background-color:#f9f9f9"],[style*="background-color: #f9f9f9"],[style*="background:#f8f9fa"],[style*="background: #f8f9fa"],[style*="background-color:#f8f9fa"],[style*="background-color: #f8f9fa"]{color:#0f172a}

.badge{background:rgba(102,126,234,.12);border:1px solid rgba(102,126,234,.35);color:#f8fbff}
.badge-success{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.35);color:#eafff3}
.badge-danger{background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.35);color:#ffecec}
.badge-warning{background:rgba(245,158,11,.22);border-color:rgba(245,158,11,.4);color:#071a12}

@media screen and (min-width:750px){
  .sidenav{width:210px}
  #main{margin-left:210px}
  #openNav{display:none}
  #closeNav{display:block}
  #shareWA{display:inline-block}
}

@media screen and (max-width:750px){
  html,body{overflow-x:hidden;max-width:100%}
  .sidenav{margin-left:0;border-radius:0}
  #main{margin-left:0}
  .main-container{padding:10px 10px 12px}
  #main .box,#main .card{margin:8px 0}
  #main .box-group>div{display:block;width:100%}
  #main .box-group-icon{width:100%;margin:0 0 8px}
  #main .box-group-area{padding:0}
  #main .card-body,#main .box{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #main .table{min-width:640px}
  .form-control,.group-item,input,select,textarea,button{max-width:100%}
}