.sidebar-brand-logo {
    width: 150px;
    height: auto;
  }

  .mini-logo {
    width: 50px;
  }

  .sidebar-brand-logomini {
    width: 50px;
  }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress/nprogress.css">
<style>
  /* Kustomisasi ketebalan dan warna bar loading NProgress */
  #nprogress .bar {
    background: #ff0854;
    /* Contoh warna merah */
    height: 5px;
    /* Ketebalan bar loading */
  }

  #nprogress .peg {
    box-shadow: 0 0 10px #ff5733, 0 0 5px #ff5733;
    /* Efek bayangan untuk peg */
  }

  #nprogress .spinner {
    display: none;
    /* Menyembunyikan spinner jika tidak digunakan */
  }
</style>
<style>
  body {
    font-family: 'Poppins', sans-serif;
  }

  .benar {
    background-color: #d4edda;
    color: #155724;
  }

  .salah {
    background-color: #f8d7da;
    color: #ff0854;
  }

  .not-answered {
    background-color: #fff3cd;
    color: #856404;
  }

  #navigation-container {
    max-height: 160px;
    /* Batas tinggi 4 baris (misalnya, 40px per baris) */
    overflow-x: hidden;
    /* Izinkan scroll horizontal jika tombol lebih dari 4 baris */
    overflow-y: auto;
    /* Menyembunyikan scroll vertikal */
    white-space: nowrap;
    /* Tidak membungkus teks agar tombol tetap sejajar */
    display: flex;
    flex-wrap: wrap;
    /* Membungkus tombol ke baris berikutnya */
    gap: 5px;
    /* Jarak antar tombol */
    justify-content: flex-start;
    /* Menyusun tombol ke kiri */
  }

  .nap-number {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    margin: 2px;
    text-align: center;
    border-radius: 10%;
    font-weight: bold;
    cursor: pointer;
  }

  .answered {
    background-color: #00d284;
    color: white;
  }

  .not-answered {
    background-color: #ff0854;
    color: white;
  }

  /* Kelas untuk soal yang aktif */
  .aktif {
    background-color: #0033c4;
    /* Biru */
    color: white;
    /* Teks putih */
    font-weight: bold;
  }

  .clickable {
    cursor: pointer;
  }

  /* Kelas untuk navigasi soal */
  .nap-button {
    padding: 8px 16px;
    margin: 2px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    border-radius: 5px;
  }

  .nap-button:hover {
    background-color: #e0e0e0;
  }

  /* CSS untuk cuplikan soal dengan responsif */
  .question-snippet {
    display: inline-block;
    width: 100%;
    /* Menggunakan lebar penuh dari kontainer */
    white-space: nowrap;
    /* Jangan biarkan teks ter-wrap */
    overflow: hidden;
    /* Sembunyikan teks yang meluap */
    text-overflow: ellipsis;
    /* Tambahkan "..." jika teks terlalu panjang */
    cursor: pointer;
  }

  .list-group-item:hover {
    background-color: #dfdfdf;
    /* Warna abu muda */
  }

  /* Media query untuk layar kecil (misal: handphone, tablet) */
  @media (max-width: 576px) {
    .question-snippet {
      max-width: 150px;
      /* Lebar maksimum untuk layar kecil */
    }
  }

  /* Media query untuk layar sedang (misal: tablet, laptop kecil) */
  @media (max-width: 768px) {
    .question-snippet {
      max-width: 250px;
      /* Lebar maksimum untuk layar lebih besar */
    }
  }

  /* Media query untuk layar besar (misal: laptop, desktop) */
  @media (min-width: 769px) {
    .question-snippet {
      max-width: 500px;
      /* Lebar maksimum untuk layar besar */
    }
  }