#mapid {
/*height: 650px; 
width: 100%;
*/

width: 100%;
height: 650px;


}
#mapid2 {
/*height: 100vh; */
/*height: 650px; 
width: 100%;
*/
width: 100%;
height: 650px;

}
.leaflet-control-locate {
  position: relative;
  background: white;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  font-size: 18px;
}

.leaflet-control-locate i {
  color: #007bff;
}
.leaflet-control-locate span {
  position: absolute;
  top: 50%;
  left: 42px;
  transform: translateY(-50%);
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.leaflet-control-locate:hover span {
  opacity: 1;
}
.leaflet-tooltip {
  background: #007bff;
  color: white;
  border-radius: 4px;
  font-size: 12px;
  padding: 4px 8px;
}
.tooltip-desa {
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-weight: bold;
  border-radius: 6px;
  padding: 4px 8px;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
  pointer-events: none;
  z-index: 9999;
}
/* Container breadcrumb */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin-bottom: 1rem;
  /*background-color: #f8f9fa;*/
  border-radius: 0.25rem;
  font-family: "Poppins", sans-serif;
  /*font-size: 14px;*/
  margin-top: -15px;

}

/* Item breadcrumb */
.breadcrumb-item {
  display: flex;
  align-items: center;
  color: #495057;
  transition: color 0.3s;
}

/* Separator ">" */
.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  display: inline-block;
  /*margin: 0 0.5rem;*/
  color: #6c757d;
}

/* Hover effect untuk link */
.breadcrumb-item a {
  text-decoration: none;
  color: #007bff;
  transition: color 0.3s;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
  color: #0056b3;
}

/* Fieldset Styling */
.custom-fieldset {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    background-color: #f9f9f9;
}
.custom-legend {
    padding: 0 10px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

/* Card link styling */
.card-link {
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
}
.card-link i {
    transition: transform 0.3s ease;
    margin-right: 8px;
}

/* Collapse closed (collapsed) */
.card-link.collapsed i.fa-plus {
    transform: rotate(0deg);
    color: #fff;
}

/* Collapse open (expanded) */
.card-link:not(.collapsed) i.fa-plus {
    transform: rotate(45deg); /* plus berubah menjadi x/rotasi */
    color: #fff;
}

/* Hover effect */
.card-link:hover {
    color: #d4edda;
}

/* Card header bg */
.card-header.bg-success {
    background-color: #28a745 !important;
    color: #fff;
}


/* Item aktif */
.breadcrumb-item.active {
  color: #6c757d;
  font-weight: bold;
  pointer-events: none; /* Tidak bisa diklik */
}

/* Responsive: ukuran font lebih kecil di layar kecil */
@media (max-width: 576px) {
    .breadcrumb {
        font-size: 12px;
        padding: 0.25rem 0.5rem;
    }
}
.stylerowgrid{
  font-family: sans-serif;
  font-size: 12px;
}
.styleLabelKecamatan{
  background: rgba(255, 255, 255, 0);
  border: 0;
  border-radius: 0px;
  box-shadow: 0 0px 0px;
  font-size: 11pt;
  color: white;
  text-shadow: 2px 2px 5px black;
  font-weight: bold;
  pointer-events: none;
  font-size: 0.8rem;
  text-align: center;
*/


}
.styleLabeldesa{
  background: rgba(255, 255, 255, 0);
  border: 0;
  border-radius: 0px;
  box-shadow: 0 0px 0px;
  font-size: 8pt;
  color: black;
  text-shadow: 2px 2px 5px white;
  font-weight: bold;
}

.tablepopup {
  width: 100%;
  border-collapse: collapse;
  font-family: tahoma, sans-serif;
  font-size: 13px;
  color: #333;
}

/* Border untuk tiap sel */
.tablepopup td, .tablepopup th {
  padding: 5px 8px;
  vertical-align: top;
}

/* Judul kolom */
.tablepopup th {
  background-color: #f2f2f2;
  font-weight: bold;
  text-align: left;
}

/* Baris bergantian (zebra) */
.tablepopup tr:nth-child(even) {
  background-color: #fafafa;
}

/* Hover effect (opsional) */
.tablepopup tr:hover {
  background-color: #e6f7ff;
}

/* Tombol di dalam popup */
.tablepopup a.btn {
  font-size: 12px;
  padding: 3px 6px;
  margin-top: 2px;
  text-decoration: none;
}

/* Tabel profile Kecamatan */
.table-kecamatan {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table-kecamatan th,
.table-kecamatan td {
  padding: 2px 4px;           /* jarak vertikal kecil */
  vertical-align: middle;
  border: 1px solid #ffffff; 
  /*border: 1px solid rgba(0, 0, 0, 0.08);*/
  font-size: 13px;
}

.table-kecamatan thead th {
  background-color: #f8f9fa;
  font-weight: 600;
}

.table-kecamatan tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

/* Tabel profile desa */
.tableprofiledesa {
  width: 100%;
  border-spacing: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;

}

/* Header tabel */
.tableprofiledesa th {
  padding-left: 6px;
  letter-spacing: 0px;
  font-weight: bold;
  padding: 16px 14px;
  text-align: center;
  background-color: #f8f9fa !important;
  border: 1px solid #dee2e6;
  border-bottom: 2px solid #146c43;
  font-size: 14px;

}

/* Sel tabel */
.tableprofiledesa td {
  word-wrap: break-word;
  font-size: 14px;
  padding-left: 8px;
  line-height: 1.4;
  
  padding: 10px 8px;
  border: 1px solid #dee2e6;
}

/* Hover baris */
.tableprofiledesa tr:hover {
    background-color: #e2f0d9;
    transition: background-color 0.3s ease;
}

/* Sel pertama (label) */
.tableprofiledesa td:first-child {
    width: 180px;
    font-weight: bold;
    color: #333;
}

/* Tabel responsif untuk layar kecil */
.tableprofiledesa-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Versi kecil */
.tableprofiledesa-sm td, 
.tableprofiledesa-sm th { 
    padding: 0.4rem 0.8rem; 
    font-size: 13px; 
}

/* Efek hover untuk pointer (opsional jika ingin klikable) */
.tableprofiledesa tbody tr:hover {
    cursor: pointer;
}


/* ===== FLAT BUTTON PROFILE ===== */
.btnprofile {
  background-color: #1620b5;
  color: #ffffff;
  display: inline-flex;              /* fleksibel & rapi */
  align-items: center;
  justify-content: center;
  gap: 6px;                           /* jarak icon & teks */
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 20px;               /* lebih modern */
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;               /* teks tidak pecah */
  transition: all 0.3s ease;         /* smooth */
  box-shadow: 0 2px 4px rgba(22,32,181,0.25);
}

/* Hover */
.btnprofile:hover {
  background-color: #0f178a;
  color: #ffffff;
  transform: translateY(-1px);       /* efek naik dikit */
  box-shadow: 0 4px 8px rgba(22,32,181,0.35);
  text-decoration: none;
}

/* Active (saat diklik) */
.btnprofile:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(22,32,181,0.25);
}

/* Focus (aksesibilitas) */
.btnprofile:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22,32,181,0.3);
}

.btnprofile i {
  margin-right: 0;   /* pastikan tidak ada jarak */
}


.warnaheaderatas{
  background-color:#4CAF50;
  color: white;
}
.headergrid{
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: bold;
}
.btnnavigasi, .btn-detail-desa {
  display: inline-block;
  margin-top: 5px;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  line-height: 1.5;   /* supaya tinggi konsisten */
}

/* Tombol navigasi */
.btnnavigasi {
  background: #e74c3c;
  color: #fff;
  width: 100%;
}

.btnnavigasi:hover {
  background-color: #c0392b;
  color: #fff;
}

/* Tombol profile */
.btn-detail-desa {
  background: #e74c3c;
  color: #fff;
  width: 100%; 
}

.btn-detail-desa:hover {
  background-color: #c0392b;
  color: #fff;
}

/* paksa override style Leaflet */
.leaflet-popup-content a.btnnavigasi,
.leaflet-popup-content a.btnnavigasi:hover {
  text-decoration: none !important;
  color: #fff !important;
}
canvas { width:100%!important; height:auto!important; }
.info.legend { background:white; padding:6px 8px; font-size:14px; line-height:18px; }
.info.legend i { width:18px; height:18px; float:left; margin-right:8px; opacity:0.7; }

.legend-jalan {
  padding: 12px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  color: #333;
  font-size: 13px;
  font-family: Arial, sans-serif;
}
.legend-jalan h6 {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
.legend-item {
  display: flex;           /* Flex horizontal */
  align-items: center;     /* Center vertical kotak + label */
  margin-bottom: 2px;      /* Jarak antar item */
}
.legend-color {
  width: 18px;             /* Kotak warna */
  height: 18px;
  border-radius: 0px;
  margin-right: 4px;       /* Jarak kotak ke label */
}

.headergridjudul{
  background-color: #f8f9fa !important;
  font-weight: bold;
  font-size: 14px;
}
.headerfooter{
  font-weight:bold;
  background-color:#f1f1f1;
  font-size: 14px;
}
table {
  border-collapse: collapse;
  width: 100%;
}

/* HEADER */
table thead th {
  padding: 16px 14px;
  text-align: center;
  background-color: #f8f9fa !important;
  font-weight: 600;
  border: 1px solid #dee2e6;
  border-bottom: 2px solid #146c43;
  font-size: 13px;
}

/* BODY */
table tbody td {
  padding: 10px 8px;
  border: 1px solid #dee2e6;
}

/* GLOBAL */
table th,
table td {
  padding: 4px 6px;
  line-height: 1;
  font-size: 13px;
  background-color: #fff;
}

/* FOOTER TOTAL */
table tfoot td,
table tfoot th {
  border: 1px solid #dee2e6;
  font-weight: 700;
  background-color: #f8f9fa;
}

/* OPSIONAL: hover baris */
table tbody tr:hover {
  background-color: #f1f8f4;
}

/* HEADER DATA TABLE */
table.dataTable thead th {
    padding: 12px 6px;
    text-align: center;
    vertical-align: middle;
    background-color: #f8f9fa !important;
    color: #000;
    font-weight: 600;
    white-space: nowrap;
    font-size: 13px;
}

/* HOVER HEADER */
table.dataTable thead th:hover {
    background-color: #e2e6ea;
    cursor: pointer;
}

/* BODY DATA TABLE */
table.dataTable tbody td {
    padding: 10px 8px;
    border: 1px solid #dee2e6;
    font-size: 13px;
    line-height: 1.2;
}

/* FOOTER DATA TABLE */
table.dataTable tfoot td,
table.dataTable tfoot th {
    border: 1px solid #dee2e6;
    font-weight: 700;
    background-color: #f8f9fa;
}

/* ROW HOVER */
table.dataTable tbody tr:hover {
    background-color: #f1f8f4;
}


.leaflet-markercluster-spider-leg {
  stroke: #999;
  stroke-width: 1;
  opacity: 0.4;
}
.leaflet-interactive {
  transition: fill-opacity 0.2s ease, stroke-width 0.2s ease;
}
/* Tombol Detail APBDesa */
.btn-detailDesa {
    width: 100px;              /* lebar tetap */
    padding: 3px 8px;         /* jarak dalam tombol */
    font-size: 13px;           /* ukuran font */
    line-height: 1;
    height: 28px;
    display: flex;
    font-weight: 600;          /* agak tebal */
    color: #fff;               /* teks putih */
    background-color: #17a2b8; /* warna info (biru muda) */
    border: 1px solid #138496; /* border agak gelap */
    border-radius: 4px;        /* sudut membulat */
    transition: background-color 0.3s, transform 0.2s;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    gap: 4px;                  /* jarak icon dan teks */
    /*display: inline-flex;      /* agar icon dan teks sejajar */*/
}

/* Hover efek */
.btn-detailDesa:hover {
    background-color: #138496;  /* lebih gelap saat hover */
    transform: translateY(-1px); /* efek naik sedikit */
    color: #fff;
}

/* Fokus / aktif */
.btn-detailDesa:focus,
.btn-detailDesa:active {
    outline: none;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

/* Icon di dalam tombol */
.btn-detailDesa i {
    font-size: 14px;
}