/* Gaya umum untuk body */
body {
    font-family: Arial, sans-serif;
    margin: 20px;
    line-height: 1.6;
    background-color: #f9f9f9; /* Warna latar belakang lembut */
    color: #333; /* Warna teks */
}

/* Heading */
h1, h2, h3 {
    text-align: center;
    color: #0056b3; /* Biru gelap */
}

/* Tabel */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff; /* Latar belakang putih */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Bayangan */
}

table, th, td {
    border: 1px solid #ddd; /* Warna border abu-abu */
}

th {
    background-color: #007bff; /* Latar belakang header biru */
    color: #fff; /* Warna teks putih */
    padding: 12px;
    text-align: center;
}

td {
    padding: 10px;
    text-align: left;
}

/* Gaya untuk baris tabel */
tr:nth-child(even) {
    background-color: #f2f2f2; /* Latar belakang baris genap */
}

tr:hover {
    background-color: #e9f5ff; /* Efek hover */
}

/* Kelas untuk total */
.total {
    font-weight: bold;
    color: #0056b3; /* Warna biru */
}

/* Tombol umum */
.btn {
    display: inline-block;
    background-color: #007bff; /* Warna biru */
    color: #fff; /* Warna teks putih */
    font-size: 16px; /* Ukuran font */
    padding: 10px 20px; /* Spasi dalam */
    border: none; /* Hilangkan border */
    border-radius: 5px; /* Tepi membulat */
    text-decoration: none; /* Hilangkan garis bawah pada link */
    cursor: pointer; /* Pointer pada hover */
    transition: all 0.3s ease; /* Efek transisi */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Bayangan */
    margin: 10px 5px; /* Spasi antara tombol */
}

/* Hover untuk tombol */
.btn:hover {
    background-color: #0056b3; /* Biru lebih gelap */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Bayangan lebih besar */
    transform: translateY(-2px); /* Sedikit naik */
}

/* Saat tombol ditekan */
.btn:active {
    background-color: #003f7f; /* Biru lebih gelap lagi */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); /* Bayangan lebih kecil */
    transform: translateY(0); /* Kembali ke posisi awal */
}

/* Tombol tambahan */
.btn-primary {
    background-color: #007bff;
}

.btn-secondary {
    background-color: #6c757d;
}

.btn-success {
    background-color: #28a745;
}

.btn-danger {
    background-color: #dc3545;
}

.btn-warning {
    background-color: #ffc107;
    color: #000; /* Warna teks hitam */
}

.btn-info {
    background-color: #17a2b8;
}

.btn-light {
    background-color: #f8f9fa;
    color: #000; /* Warna teks hitam */
}

.btn-dark {
    background-color: #343a40;
}

/* Responsif untuk perangkat kecil */
@media (max-width: 768px) {
    body {
        margin: 10px;
    }

    table {
        font-size: 14px; /* Ukuran font lebih kecil */
    }

    .btn {
        font-size: 14px; /* Ukuran tombol lebih kecil */
        padding: 8px 16px;
    }
}

/* Gaya umum untuk body */
body {
    font-family: Arial, sans-serif;
    margin: 20px;
    line-height: 1.6;
    background-color: #f9f9f9; /* Warna latar belakang lembut */
    color: #333; /* Warna teks */
}

/* Heading */
h1, h2, h3 {
    text-align: center;
    color: #0056b3; /* Biru gelap */
}

/* Tabel */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff; /* Latar belakang putih */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Bayangan */
}

table, th, td {
    border: 1px solid #ddd; /* Warna border abu-abu */
}

th {
    background-color: #007bff; /* Latar belakang header biru */
    color: #fff; /* Warna teks putih */
    padding: 12px;
    text-align: center;
}

td {
    padding: 10px;
    text-align: left;
}

/* Gaya untuk baris tabel */
tr:nth-child(even) {
    background-color: #f2f2f2; /* Latar belakang baris genap */
}

tr:hover {
    background-color: #e9f5ff; /* Efek hover */
}

/* Kelas untuk total */
.total {
    font-weight: bold;
    color: #0056b3; /* Warna biru */
}

/* Tombol umum */
.btn {
    display: inline-block;
    background-color: #007bff; /* Warna biru */
    color: #fff; /* Warna teks putih */
    font-size: 16px; /* Ukuran font */
    padding: 10px 20px; /* Spasi dalam */
    border: none; /* Hilangkan border */
    border-radius: 5px; /* Tepi membulat */
    text-decoration: none; /* Hilangkan garis bawah pada link */
    cursor: pointer; /* Pointer pada hover */
    transition: all 0.3s ease; /* Efek transisi */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Bayangan */
    margin: 10px 5px; /* Spasi antara tombol */
}

/* Hover untuk tombol */
.btn:hover {
    background-color: #0056b3; /* Biru lebih gelap */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); /* Bayangan lebih besar */
    transform: translateY(-2px); /* Sedikit naik */
}

/* Saat tombol ditekan */
.btn:active {
    background-color: #003f7f; /* Biru lebih gelap lagi */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); /* Bayangan lebih kecil */
    transform: translateY(0); /* Kembali ke posisi awal */
}

/* Tombol tambahan */
.btn-primary {
    background-color: #007bff;
}

.btn-secondary {
    background-color: #6c757d;
}

.btn-success {
    background-color: #28a745;
}

.btn-danger {
    background-color: #dc3545;
}

.btn-warning {
    background-color: #ffc107;
    color: #000; /* Warna teks hitam */
}

.btn-info {
    background-color: #17a2b8;
}

.btn-light {
    background-color: #f8f9fa;
    color: #000; /* Warna teks hitam */
}

.btn-dark {
    background-color: #343a40;
}

/* Responsif untuk perangkat kecil */
@media (max-width: 768px) {
    body {
        margin: 10px;
    }

    table {
        font-size: 14px; /* Ukuran font lebih kecil */
    }

    .btn {
        font-size: 14px; /* Ukuran tombol lebih kecil */
        padding: 8px 16px;
    }
}