/* Untuk menempatkan ikon di dalam input box */
.form-group {
    position: relative;
}

#togglePassword, #toggleRepeatPassword, #showPassword, #showPasswordReset, #showPasswordResetConfirm {
    position: absolute;
    top: 25px;
    right: 20px;
    transform: translateY(-50%);
    z-index: 2;
}

#pagination-container nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px; /* Opsional: Menambahkan jarak antara elemen pagination */
}

#pagination-container .pagination {
    flex-wrap: wrap; /* Memungkinkan pagination membungkus ke baris baru */
    justify-content: center; /* Menjaga pagination tetap berada di tengah */
}

#pagination-container .page-item {
    flex: 1 1 auto; /* Mengatur ukuran elemen berdasarkan konten */
}


.admin-only,
.dashboard-admin {
    display: none;
}

.user-only,
.dashboard-user {
    display: none;
}

.info-harga .label-diskon{
    background-color: #4F49DD;
    color: #fff;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 12px;
}

.label-harga{
font-size: 20px;
}

.info-harga strike{
color: red;
font-size: 12px;
}

.card-img-top {
    width: 100%;
    height: 200px; /* Atur tinggi yang diinginkan */
}

.card-footer{
    color: #fff;
    background: #4F49DD;
    font-family: var(--heading-font);
    font-weight: 700;
    cursor: pointer;
    font-size: 15px;
    text-align: center;
}

.card-footer:hover {
color: #FFF;
background: color-mix(in srgb, #4F49DD, transparent 15%);
}


.image-preview-container {
    position: relative;
    max-width: 300px;
    height: 200px; /* Tinggi awal kontainer gambar */
    border: 2px solid #ddd; /* Border gambar */
    padding: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #f8f8f8; /* Warna latar belakang kontainer saat tidak ada gambar */
    display: flex; /* Menggunakan flexbox untuk posisi overlay */
    align-items: center; /* Vertikal center */
    justify-content: center; /* Horizontal center */
}

#previewImage {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    display: block; /* Pastikan gambar hanya ditampilkan saat ada */
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background-color: rgba(0, 0, 0, 0.5); /* Background semi-transparan */
    padding: 5px;
    border-radius: 5px;
    font-weight: bold;
    display: block; /* Pastikan teks overlay selalu ditampilkan ketika tidak ada gambar */
}

.btn-call-admin{
    background-color: #2A3242;
    color: #fff;
    border-radius: 50px;
    padding: 10px;
}

.page-item.answered .page-link {
    background-color: #72BE21; /* Warna latar belakang hijau muda */
    color: #fff; /* Warna teks hijau gelap */
}

.highest-score {
    background-color: green;
    color: white;
    font-weight: bold;
    border-radius: 10px;
    padding: 10px;
}




.soal-item {
    margin-bottom: 20px;
}

.soal-options {
    display: flex;
    flex-direction: column;
}

.option {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.option input[type="checkbox"] {
    opacity: 0; /* Sembunyikan radio button asli */
    position: absolute;
    left: 0;
}

.option label {
    position: relative;
    padding-left: 30px; /* Berikan ruang untuk custom button */
    cursor: pointer;
}

.option label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px; /* Ukuran custom button */
    height: 20px; /* Ukuran custom button */
    border: 2px solid #000;
    border-radius: 50%;
    background: #fff;
}

.option input[type="checkbox"]:checked + label::before {
    background: #000; /* Warna jika dipilih */
    border: 2px solid #000;
}


.preview-image {
    position: relative;
    display: inline-block;
    margin: 5px;
}

.preview-image img {
    width: 150px;
    height: 150px;
    object-fit: cover;
}

.remove-image {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}



.remove-image {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.nav-item a.active {
    background-color: #ececec; /* Ganti dengan warna yang diinginkan */
}

.collapse-item.active {
    background-color: #ececec; /* Ganti dengan warna yang diinginkan */
}