body {
    background: #f4f6f9;
    font-family: Arial, sans-serif;
    margin: 0;
}

.sidebar {
    width: 260px;
    background: #198754;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
}

.logo {
    padding: 20px;
    color: #fff;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    background: #146c43;
}

.sidebar ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.sidebar ul li a {
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
    transition: .3s;
}

.sidebar ul li a:hover {
    background: #14532d;
}

.main-content {
    margin-left: 260px;
    padding: 20px;
}

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

.card-title {
    font-size: 15px;
    color: #666;
}

.card-value {
    font-size: 28px;
    font-weight: bold;
}

@media(max-width:768px) {

    .sidebar {

        left: -260px;

        transition: .4s;

    }

    .sidebar.active {

        left: 0;

    }

    .main-content {

        margin-left: 0;

    }

}