:root {
  --primary-color: #0571d3;
  --secondary-color: #ffffff;
  --warning-color: #fdd673;
  --danger-color: #ef3530;
  --danger-light-color: #ffe4e4;
  --text-color: #535354;
  --text-success: #00bf15;
  /* overflow: hidden; */
}

/* Untuk seluruh halaman */
body {
  /* Pastikan konten bisa digulir jika melebihi layar */
  overflow-y: auto;
  /* Untuk Firefox */
  scrollbar-color: transparent transparent;
}

/* Untuk browser berbasis WebKit (Chrome, Safari) */
body::-webkit-scrollbar {
  width: 1px; /* Lebar scrollbar */
}

body::-webkit-scrollbar-track {
  background: transparent;
}

body::-webkit-scrollbar-thumb {
  background: transparent;
}
.login-header {
  background-color: var(--primary-color);
  padding: 50px 20px;
  text-align: center;
  position: relative;
  z-index: 99999;
}

.login-header img {
  width: 125px;
  /* height: 100px; */
  border-radius: 50%;
  background: var(--secondary-color);
  padding: 10px;
  position: absolute;
  bottom: -170px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid var(--secondary-color);
}

.circle-icon {
  width: 70px;
  height: 70px;
  background: #0571d3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -20px auto 0;
}

#find-me-btn {
  position: absolute;
  z-index: 1000;
  top: 467px;
  right: 15px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

#find-me-btn:hover {
  transform: scale(1.1);
  /* Animasi zoom saat hover */
}

.video-responsive {
  width: 100%;
  height: 90vh;
  transform: scaleX(-1);
  object-fit: cover;
}

.canvas-responsive {
  width: 100%;
  height: 90vh;
  object-fit: cover;
}

#chart-container {
  position: relative;
  /* Agar elemen anak bisa diatur posisinya */
  width: 100%;
  height: 350px;
  /* Sesuaikan dengan tinggi chart Anda */
}

#chart {
  width: 100%;
  height: 100%;
}

.chart-text {
  position: absolute;
  /* Posisi absolut terhadap #chart-container */
  top: 46%;
  /* Posisi vertikal di tengah */
  left: 50%;
  /* Posisi horizontal di tengah */
  transform: translate(-50%, -50%);
  /* Menggeser elemen agar pusat benar-benar di tengah */
  text-align: center;
  /* Mengatur teks di tengah secara horizontal */
}

.button-navigation {
  z-index: 9999;
}

a.settings .icon-settings {
  display: block;
  font-size: 55px;
  text-align: center;
  color: #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}

a.settings:hover .icon-settings {
  color: #003756;
}

a.settings .content .title {
  display: block;
  margin: 0 0 2px 0;
  padding: 0;
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: -.6px;
}

a.settings .content {
  color: #AAAA;
}

.bg-hero-section {
  background: url('../img/bg-hero-min.png');
  background-size: cover;

}

body.preload {
  overflow: hidden !important;
  height: 100vh !important;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-container {
  position: relative;
  width: 100%;
  max-width: 600px;
}

.file-preview-container {
  border: 2px dashed #ddd;
  background: #f4f7ff;
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 150px;
}

.file-preview-container:hover {
  border-color: #007bff;
  background: rgba(0, 123, 255, 0.05);
}

.preview-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  transition: transform 0.2s;
  height: 180px;
}

.preview-card:hover {
  transform: translateY(-3px);
}

.preview-image {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.pdf-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #f8f9fa;
}

.pdf-icon {
  font-size: 3rem;
  color: #dc3545;
}

.file-name {
  font-size: 0.9rem;
  text-align: center;
  padding: 0 5px;
  word-break: break-all;
}

.file-size {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 3px;
  font-size: 0.8em;
  text-align: center;
}

.remove-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 25px;
  height: 25px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.form-control[type="file"] {
  opacity: 0;
  position: absolute;
  z-index: -1;
}


.spinner-container {
  z-index: 1000;
  transition: opacity 0.3s ease;
}

@media (max-width: 768px) {
  #map {
      height: 300px; /* Kurangi tinggi peta di layar kecil */
  }
  .section-two {
      margin-bottom: 50px; /* Kurangi margin untuk mobile */
  }
  .form-control, .form-select {
      font-size: 14px; /* Sesuaikan ukuran font */
  }
}