:root{

--sidebar:#123C83;

--sidebar-hover:#1b4fa7;

--sidebar-active:#2d66c3;

--topbar:#ffffff;

--body:#f4f7fc;

--card:#ffffff;

--primary:#0d6efd;

--success:#198754;

--danger:#dc3545;

--warning:#ffc107;

--dark:#212529;

--text:#212529;

--muted:#6c757d;

--border:#e5e7eb;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:'Poppins',sans-serif;

}

body{

background:var(--body);

color:var(--text);

overflow-x:hidden;

}

/* ===========================
   SIDEBAR
=========================== */

.sidebar{

position:fixed;

top:0;

left:0;

width:270px;

height:100vh;

background:var(--sidebar);

overflow-y:auto;

overflow-x:hidden;

transition:.3s;

z-index:999;

}

.sidebar::-webkit-scrollbar{

width:6px;

}

.sidebar::-webkit-scrollbar-thumb{

background:#2f5ea9;

border-radius:20px;

}

/* ===========================
   BRAND
=========================== */

.brand{

padding:22px;

display:flex;

align-items:center;

gap:12px;

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

}

.brand img{

width:48px;

height:48px;

border-radius:50%;

background:#fff;

padding:4px;

}

.brand h5{

margin:0;

color:#fff;

font-weight:600;

font-size:18px;

}

.brand small{

color:#d5d5d5;

}

/* ===========================
   MENU
=========================== */

.sidebar-menu{

padding:15px 0;

}

.sidebar-title{

padding:14px 25px 8px;

font-size:12px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

color:#c7d5ff;

}

.sidebar-menu ul{

list-style:none;

padding:0;

margin:0;

}

.sidebar-menu li{

margin:2px 10px;

}

.sidebar-menu a{

display:flex;

align-items:center;

gap:14px;

padding:12px 15px;

border-radius:10px;

text-decoration:none;

color:#ffffff;

font-size:15px;

transition:.25s;

}

.sidebar-menu a i{

width:22px;

text-align:center;

font-size:16px;

}

.sidebar-menu a:hover{

background:var(--sidebar-hover);

padding-left:20px;

}

.sidebar-menu a.active{

background:var(--sidebar-active);

font-weight:600;

}

/* ===========================
   SUB MENU
=========================== */

.sub-menu{

display:none;

padding-left:18px;

margin-top:4px;

}

.sub-menu a{

font-size:14px;

padding:10px 15px;

}

.menu-open .sub-menu{

display:block;

}

.has-sub>a:after{

content:"\f107";

font-family:"Font Awesome 6 Free";

font-weight:900;

margin-left:auto;

transition:.3s;

}

.menu-open>a:after{

transform:rotate(180deg);

}

/* ===========================
   MAIN CONTENT
=========================== */

.main-content{

margin-left:270px;

min-height:100vh;

transition:.3s;

}

/* ===========================
   TOPBAR
=========================== */

.topbar{

height:72px;

background:#fff;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 25px;

border-bottom:1px solid var(--border);

box-shadow:0 2px 10px rgba(0,0,0,.05);

position:sticky;

top:0;

z-index:100;

}

/* ===========================
   CONTENT
=========================== */

.content{

padding:25px;

}
/* ===========================
   CARDS
=========================== */

.card{

border:none;

border-radius:14px;

background:#fff;

box-shadow:0 2px 10px rgba(0,0,0,.08);

margin-bottom:25px;

}

.card-header{

border-radius:14px 14px 0 0 !important;

font-weight:600;

padding:15px 20px;

}

.card-body{

padding:20px;

}

/* ===========================
   DASHBOARD CARDS
=========================== */

.small-box{

border-radius:14px;

padding:20px;

color:#fff;

position:relative;

overflow:hidden;

transition:.3s;

}

.small-box:hover{

transform:translateY(-3px);

box-shadow:0 12px 20px rgba(0,0,0,.15);

}

.small-box h3{

font-size:32px;

font-weight:700;

margin-bottom:10px;

}

.small-box p{

font-size:15px;

margin:0;

}

.small-box .icon{

position:absolute;

right:18px;

top:18px;

font-size:40px;

opacity:.25;

}

/* ===========================
   TABLES
=========================== */

.table{

margin-bottom:0;

}

.table thead th{

background:#0d6efd;

color:#fff;

font-weight:600;

vertical-align:middle;

border:none;

}

.table td{

vertical-align:middle;

}

.table-hover tbody tr:hover{

background:#f5f8ff;

}

/* ===========================
   FORMS
=========================== */

.form-control,

.form-select{

height:44px;

border-radius:10px;

border:1px solid #dcdfe5;

box-shadow:none;

}

.form-control:focus,

.form-select:focus{

border-color:#0d6efd;

box-shadow:0 0 0 .15rem rgba(13,110,253,.15);

}

textarea.form-control{

height:auto;

}

/* ===========================
   BUTTONS
=========================== */

.btn{

border-radius:10px;

font-weight:500;

padding:9px 18px;

}

.btn-primary{

background:#0d6efd;

border:none;

}

.btn-primary:hover{

background:#0b5ed7;

}

.btn-success{

border:none;

}

.btn-danger{

border:none;

}

/* ===========================
   BADGES
=========================== */

.badge{

padding:8px 10px;

font-size:12px;

border-radius:8px;

}

/* ===========================
   DROPDOWN
=========================== */

.dropdown-menu{

border:none;

border-radius:12px;

box-shadow:0 5px 25px rgba(0,0,0,.15);

}

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

::-webkit-scrollbar{

width:8px;

height:8px;

}

::-webkit-scrollbar-thumb{

background:#c7c7c7;

border-radius:20px;

}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:991px){

.sidebar{

left:-270px;

}

.sidebar.show{

left:0;

}

.main-content{

margin-left:0;

}

.topbar{

padding:0 15px;

}

.content{

padding:15px;

}

}