#chartMap {
  width: 100%;
  height: 500px;
}

.infomap {
  margin-top: 20px;
  background: #e8edf6;
  padding: 20px;
  max-width: 1026px;
  border: 1px solid #6997c7 !important;
}
.infomap p {
  font-size: 14px;
  max-width: 100%;
}

.title-demografi-perserta {
  font-size: 40px;
  font-weight: 700px !important;
  color: #36649a;
}

.cointainer-demografi {
  background: radial-gradient(
    49.47% 49.47% at 50% 52.18%,
    #ffffff 57.18%,
    #cbdaec 94.5%
  );
}

.detail-costume-demografi{
  width: 874px;
  background-color: transparent;
}

.continer-data-demografi-peseta {
  height: 140px !important;
}

.info-perserta-container {
  
}
.custome-font p {
  font-size: 14px;
}

.tanggal-terkini {
  font-size: 12px !important;
  font-weight: 500px;
}
.container-costume-demografi-peserta {
  padding-bottom: 51px;
  padding-top: 56px;
  width: 100%;
}

.info-container {
  width: 100%;
}

.info-card-demografi {
  position: absolute;
  border-radius: 50px;
  color: white;
  padding: 15px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  min-width: 260px !important;
  max-width: 320px;
}
.total-peserta {
  background-color: #1e3a5f;
  left: 8%;
  z-index: 4;
}
.penerima-mp {
  background-color: #2979ff;
  left: 28%;
  z-index: 3;
}
.peserta-aktif {
  background-color: #2e7d32;
  left: 48%;
  z-index: 2;
}
.peserta-ditunda {
  background-color: #f9a825;
  left: 68%;
  z-index: 1;
}
.info-container h5 {
  padding-left: 25px;
}
.icon {
  font-size: 20px;
  margin-right: 10px;
}
.info-text {
  max-width: 85px;
  flex-grow: 1;
  text-align: left;
  font-size: 14px;
}
.info-value {
  font-size: 1.2em;
}

.info-wrapper {
  position: relative; 
  width: 100%;
  max-width: 1026px;
  /* padding: 40px; */
}






.table-custom-demografi {
  background-color: transparent !important;
}

.table-custom-demografi th,
.table-custom-demografi td {
  background-color: transparent !important;
  color: #000; 
}

.table-custom-demografi,
.table-custom-demografi th,
.table-custom-demografi td {
  border: 1px solid rgba(0, 0, 0, 0.1); 
}

.highlight-row {
  background-color: rgba(155, 89, 182, 0.1) !important;
}

.info-perserta-container {
  background-color: rgba(255, 255, 255, 0.3); 
  padding: 1rem;
  border-radius: 10px;
}

.highlight-text {
  background-color: rgba(200, 200, 255, 0.2);
  color: #333;
  border-radius: 6px;
}

@media (max-width: 1024px) {
  #chartMap {
    height: 400px;
  }

  .title-demografi-perserta {
    font-size: 30px;
  }
}

@media (max-width: 768px) {
  #chartMap {
    height: 250px;
  }
  .title-demografi-perserta {
    font-size: 20px;
  }
  .subtile-demografi-peserta {
    font-size: 18px !important;
  }

  .infomap {
    margin-top: 30px;
    padding: 10px;
    width: 100%;
    border: 1px solid #6997c7 !important;
  }

  .truncate-multiline {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .continer-data-demografi-peseta {
    height: 20% !important;
  }
  .info-container h5 {
    text-align: center;
  }

  .info-perserta-container {
    width: 6% !important;
  }
  /* .continer-data-demografi-peseta {
    justify-content: left !important;
  }
  .info-card-demografi {
    text-align: center;
    justify-content: space-between;
    position: static;
  }
  .info-text,
  .info-value {
    font-size: 12px;
  } */
}

@media (max-width: 480px) {
  #chartMap {
    height: 230px;
  }

  .container-costume-demografi-peserta {
    padding-bottom: 20px;
    padding-top: 56px;
  }

  .continer-data-demografi-peseta {
    height: 30% !important;
    border: 1px solid #6997c7 !important;
  }

  .icon-demografi {
    display: none;
  }
  .info-wrapper{
    width: 100%;
  }

  /* .info-card-demografi{
    padding: 5px !important;
    margin-bottom: 5px;
    display: flex !important;
    justify-content: space-between !important;
  }
  
  .info-text,
  .info-value {
    font-size: 12px;
    text-align: center;
  } */
}
/* Untuk tampilan responsif table */
.table-responsive-custom {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
  border-radius: 5px;
}

/* Buat tampilan tabel tetap rapi di perangkat kecil */
@media (max-width: 768px) {
  .table-custom-demografi {
    font-size: 12px;
    min-width: 600px; /* Biar tidak terlalu padat, memungkinkan scroll horizontal */
  }

  .info-perserta-container h3 {
    font-size: 16px;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .info-card-demografi {
    position: static !important; /* Hapus absolute */
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
    padding: 10px 15px;
    font-size: 14px;
    text-align: left;
  }

  .info-text,
  .info-value {
    font-size: 14px !important;
  }

  .info-perserta-container {
    width: 100% !important;
  }

  .icon-demografi {
    font-size: 18px;
    margin-right: 10px;
  }
}

@media (max-width: 480px) {
  .info-wrapper {
    gap: 8px;
  }

  .info-card-demografi {
    padding: 8px 28px;
    font-size: 12px;
  }

  .info-text,
  .info-value {
    font-size: 12px;
  }

  .icon-demografi {
    display: none;
  }
}