body{
    background: #f4f6f9;
    font-size: 14px;
}

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

.topbar{
    background: #111827;
    height: 60px;
}

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

.sidebar{
    min-height: calc(100vh - 60px);
    background: white;
    border-right: 1px solid #e5e7eb;
}

.sidebar-wrapper{
    padding-top: 20px;
}

.sidebar .nav-link{
    color: #374151;
    padding: 12px 20px;
    border-radius: 10px;
    margin: 5px 10px;
    transition: 0.2s;
}

.sidebar .nav-link:hover{
    background: #f3f4f6;
}

.sidebar .nav-link i{
    margin-right: 10px;
}

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

.main-content{
    min-height: calc(100vh - 60px);
}

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

.card{
    border: none;
    border-radius: 15px;
}

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

.table{
    background: white;
}

/* ===================================== */
/* MOBILE */
/* ===================================== */

@media(max-width:768px){

    .sidebar{
        min-height: auto;
    }

}

/* ===================================== */
/* KPI ICONS */
/* ===================================== */

.icon-kpi{

    width: 55px;
    height: 55px;

    border-radius: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;

    font-size: 24px;
}