/* Mengatur background dasar pada body */
body {
    background-color: #FFFFFF;
}

/* Mengatur ukuran container agar responsive sesuai dengan ukuran layar */
.container {
    width: 100%;
    max-width: 100%;
    padding: 0 15px;
}

/* Mengatur lebar container yang lebih sempit untuk layar kecil */
.container-narrow {
    width: 100%;
    max-width: 480px;
}

/* Mengatur styling untuk tombol dengan kelas btn-mk */
.btn-mk {
    color: #fff;
    background-color: #05529b; /* Mengganti dengan warna lebih konsisten */
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
}

/* Hover effect untuk tombol */
.btn-mk:hover {
    background-color: #054183; /* Warna hover lebih gelap untuk interaksi */
}

/* Mengatur background untuk tabel secara umum */
.table {
    background-color: #fff;
    border: 1px solid #e0e0e0; /* Menambahkan border untuk tabel */
}

/* Warna khusus untuk tabel dengan status */
.table-status td {
    background-color: #fff8e8;
    border: 1px solid #e0e0e0;
}

/* Teks yang digunakan dalam format kecil */
.text_asat {
    font-size: 0.875rem; /* Ukuran teks sesuai standar rem */
    font-weight: normal;
    color: #838383;
}

/* Link styling dengan warna spesifik */
.link-mk {
    color: #403B39;
    text-decoration: none;
}

/* Hover styling untuk link */
.link-mk:hover {
    text-decoration: underline;
}

/* Mengatur margin bawah pada elemen kartu */
.card {
    margin-bottom: 0.5em;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Tambahkan bayangan untuk tampilan lebih jelas */
}

/* Mengatur judul dari card */
.card-title {
    border-bottom: 1px dotted #E8E6E6;
    padding-bottom: 0.5em;
    font-size: 1rem;
}

/* Styling untuk footer */
footer {
    background-color: #629acc;
    padding: 20px 0;
    color: white;
}

/* Mengatur tampilan list group item di dalam footer */
footer .list-group-item, footer .list-group-item:hover {
    background: none;
    border: none;
    color: inherit; /* Agar warna teks sama seperti footer */
}

/* Mengatur link di dalam footer */
footer a.nav-link {
    color: #f7f8f8;
    padding-top: 0;
}

/* Hover effect untuk link di footer */
footer a.nav-link:hover {
    text-decoration: underline;
    color: #d0e7f7; /* Warna hover lebih terang */
}

/* Animasi teks berjalan (Marquee) */
.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

.marquee span {
    display: inline-block;
    /* Tidak perlu padding kiri di sini */
    animation: marquee 15s linear infinite; /* Atur durasi animasi agar smooth */
}

@keyframes marquee {
    0% {
        transform: translateX(100%); /* Memulai dari luar layar sebelah kanan */
    }
    100% {
        transform: translateX(-100%); /* Bergerak keluar layar sebelah kiri */
    }
}