/* Custom style untuk modal fullscreen */

.modal-fullscreen {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  position: fixed;
  top: 0;
  left: 0;
        }
.bg-card-biru {
  background-color: blue;
}
.slim-sm {
  height: fit-content;
  font-size: small;
}
.slim-md {
  font-size: medium;
  height: fit-content;
}

/* --------- info box ------ */
.box-samar-ijo {
  background-color: rgba(39, 245, 63, 0.34);
  border-color: rgba(39, 245, 63, 0.34);
}

.box-prose {
  color: #fff;
  background-color: rgba(3, 0, 32, 0.93);
  border-color: rgba(3, 0, 32, 0.93);
  
}

/* .garis-tebal-hitam {
  border: 1px solid black;
} */

.garis-tebal-hitam th,
.garis-tebal-hitam td {
  border: 1px solid black;
}

.garis-tebal-hitam thead th,
.garis-tebal-hitam thead td {
  border-bottom-width: 2px;
}

.btn-prose {
  color: #fff;
  background-color: rgba(3, 0, 32, 0.93);
  border-color: rgba(3, 0, 32, 0.93);
}
.btn-ff {
  color: #fff;
  background-color: rgba(35, 106, 157, 0.8);
  border-color: rgba(35, 106, 157, 0.8);
}

.btn-prose:hover {
  color: #fff;
  background-color: rgba(3, 0, 32, 0.93);
  border-color: rgba(3, 0, 32, 0.93);
}
.btn-ff:hover {
  color: #fff;
  background-color: rgba(3, 0, 32, 0.93);
  border-color: rgba(3, 0, 32, 0.93);
}

.btn-bb{
  color: #fff;
  background-color: rgba(16, 46, 120, 0.93);
  border-color: rgba(16, 46, 120, 0.93);
}
.btn-bb:hover {

  color: #fff;
  background-color: rgba(51, 76, 140, 0.93);
  border-color: rgba(51, 76, 140, 0.93);
}
/* ----- TEXT ------- */

.text-prose {
  color: rgba(3, 0, 32, 0.93);
}
.text-bold {
  font-weight: bolder;
}
.text-times {
  font-family: "Times New Roman", Times, serif;
}


/* img */


.thumnail-surat {
  max-width: 30px;
  max-height: 40px;
}

.img {
    max-width: 100%; /* Mengatur gambar agar tidak lebih lebar dari wadahnya */
    height: auto;    /* Menjaga rasio aspek gambar */
    border-radius: 8px; /* Menambahkan sudut yang melengkung */
    border: 2px solid #ddd; /* Menambahkan border abu-abu tipis */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Menambahkan bayangan */
}

.table-bordered.table-black-border {
  border: 1px solid #000000; /* Warna border tabel */
}

.table-bordered.table-black-border th,
.table-bordered.table-black-border td {
  border: 1px solid #000000; /* Warna border sel */
}


.chart {
  color:#fff;
}

.table-10{
  width: 10%;
}
.table-20{
  width: 20%;
}
.table-30{
  width: 30%;
}
.table-40{
  width: 40%;
}
.table-50{
  width: 50%;
}
.table-60{
  width: 60%;
}
.table-70{
  width: 70%;
}
.table-80{
  width: 80%;
}
.table-90{
  width: 90%;
}
.table-100{
  width: 100%;
}

.wrap-text {
       display: inline-block; /* Atau gunakan block */
       width: 150px; /* Lebar yang diinginkan */
       border: 1px solid #ccc; /* Opsional: border untuk melihat batas */
       padding: 5px; /* Opsional: padding */
       word-wrap: break-word; /* Memastikan kata panjang terputus */
   }

   .bg-navy {
  color: #001f3f;
}

.bg-navy-gradient {
  background: linear-gradient(145deg, #001f3f, #004080);
  /* Warna awal #001f3f (navy), warna akhir #004080 (biru lebih gelap) */
  color: #ffffff; /* Warna teks putih agar kontras */
}

/* Card khusus untuk background navy gradient */
.card-custom {
  background-color: #001f3f; /* Biru navy gelap */
  border: none;
  color: #ffffff; /* Teks putih */
  border-radius: 8px; /* Sudut membulat */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Bayangan lebih jelas */
  margin-bottom: 20px;
}

.card-custom .card-header {
  background: linear-gradient(135deg, #001f3f, #004080);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Border tipis dan transparan */
}

.card-custom .card-title {
  font-weight: bold;
}

.card-custom .card-body {
  background-color: #002b5c; /* Warna sedikit lebih terang untuk kontras */
  border-radius: 0 0 8px 8px;
  padding: 20px;
}