<!DOCTYPE html>
<html lang="id">

<head>

<meta charset="UTF-8">

<meta name="viewport"
      content="width=device-width, initial-scale=1">

<title>Sistem Perpustakaan</title>

<!-- BOOTSTRAP -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

<!-- ADMIN LTE -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/admin-lte@3.2/dist/css/adminlte.min.css">

<!-- FONT AWESOME -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css">

<!-- GOOGLE FONT -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700">

<!-- DATATABLE -->
<link rel="stylesheet"
href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css">

<link rel="stylesheet"
href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap4.min.css">

<style>

<style>
.content-wrapper{
    background:#f5f6ff;
}

.analytics-card{
    border:none;
    border-radius:20px;
    background:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.analytics-card .card-body{
    padding:25px;
}

.analytics-number{
    font-size:32px;
    font-weight:700;
    color:#4f46e5;
}

.analytics-title{
    color:#666;
    font-size:14px;
}

.chart-card{
    border:none;
    border-radius:20px;
    background:white;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.main-sidebar{
    background:linear-gradient(
        180deg,
        #5b5cf0,
        #3b3ef5
    ) !important;
}

.brand-link{
    color:white !important;
}

.nav-sidebar .nav-link.active{
    background:white !important;
    color:#4f46e5 !important;
    border-radius:12px;
}

</style>

<style>
body{
    font-family: 'Source Sans Pro', sans-serif;
    background: #f4f6f9;
}

/* SIDEBAR */
.main-sidebar{
    background: #343a40 !important;
}

.brand-link{
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    color: #fff !important;
}

/* NAVBAR */
.navbar{
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* CARD */
.card{
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: none;
}

.card-header{
    font-weight: bold;
}

/* SMALL BOX */
.small-box{
    border-radius: 12px;
    overflow: hidden;
    transition: 0.3s;
}

.small-box:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.small-box .icon i{
    transition: 0.3s;
}

.small-box:hover .icon i{
    transform: scale(1.1);
}

/* BUTTON */
.btn{
    border-radius: 8px;
}

/* TABLE */
.table th{
    background: #007bff;
    color: white;
    text-align: center;
}

.table td{
    vertical-align: middle;
}

/* FORM */
.form-control{
    border-radius: 8px;
}

/* LOGIN */
.login-page{
    background: linear-gradient(
        135deg,
        #007bff,
        #00b4db
    );
}

/* BADGE */
.badge{
    padding: 8px 10px;
    font-size: 12px;
}

/* CONTENT */
.content-wrapper{
    background: #f4f6f9;
}

/* FOOTER */
.main-footer{
    background: white;
    border-top: 1px solid #ddd;
}

/* DATATABLE */
.dataTables_wrapper .dt-buttons{
    margin-bottom: 10px;
}

/* INFO BOX */
.info-box{
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* MODAL */
.modal-content{
    border-radius: 10px;
}

/* SCROLL */
::-webkit-scrollbar{
    width: 8px;
}

::-webkit-scrollbar-thumb{
    background: #007bff;
    border-radius: 10px;
}

</style>

</head>