/* =====================================================
   GLOBAL
===================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
    background:#f4f6f9;
    color:#333;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
    padding-left:0;
}

h1,h2,h3,h4,h5,h6{
    margin-bottom:0;
}

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

#sidebar{

    width:260px;
    min-height:100vh;

    background:#2D3691;

    color:white;

    position:fixed;

    left:0;
    top:0;

    display:flex;
    flex-direction:column;

    padding:25px 20px;

    z-index:1000;

}

.sidebar-header{

    text-align:center;

    margin-bottom:25px;

}

.sidebar-logo{

    font-size:55px;

    color:white;

}

.sidebar-header h4{

    font-weight:700;

}

.sidebar-header small{

    color:#d8ddff;

}

#sidebar hr{

    border-color:rgba(255,255,255,.15);

}

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

#sidebar .nav-link{

    color:#dbe2ff;

    border-radius:10px;

    padding:12px 15px;

    margin-bottom:8px;

    transition:.25s;

    display:flex;

    align-items:center;

    gap:12px;

}

#sidebar .nav-link i{

    font-size:18px;

}

#sidebar .nav-link:hover{

    background:rgba(255,255,255,.15);

    color:white;

}

#sidebar .nav-link.active{

    background:white;

    color:#2D3691;

    font-weight:600;

}

/* =====================================================
   LOGOUT
===================================================== */

#btnLogout{

    margin-top:auto;

    border-radius:10px;

    padding:12px;

    font-weight:600;

}

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

.content-area{

    margin-left:260px;

    width:calc(100% - 260px);

    min-height:100vh;

    padding:30px;

}

/* =====================================================
   NAVBAR
===================================================== */

.navbar{

    padding:18px 25px;

    border-radius:15px;

}

.navbar h3{

    color:#2D3691;

    font-weight:700;

}

.navbar small{

    color:#777;

}

/* =====================================================
   CARD
===================================================== */

.card{

    border:none;

    border-radius:15px;

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

}

.card-header{

    background:white;

    border-bottom:1px solid #ececec;

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

    padding:18px;

}

.card-body{

    padding:22px;

}

/* =====================================================
   TABLE
===================================================== */

.table thead{

    background:#f7f8fb;

}

.table th{

    font-weight:600;

    color:#444;

    vertical-align:middle;

}

.table td{

    vertical-align:middle;

}

.table-hover tbody tr:hover{

    background:#f5f8ff;

}

/* =====================================================
   BUTTON
===================================================== */

.btn{

    border-radius:10px;

    font-weight:500;

}

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

@media(max-width:991px){

#sidebar{

    position:relative;

    width:100%;

    min-height:auto;

}

.content-area{

    margin-left:0;

    width:100%;

}

}