#signal-container {
  display: flex;
  align-items: center; /* Semua elemen sejajar secara vertikal */
  justify-content: flex-start; /* Mulai dari kiri */
  gap: 10px; /* Jarak antara teks dan ikon */
  padding: 0; /* Tidak ada padding tambahan */
  background-color: transparent; /* Hilangkan latar belakang */
  border: none; /* Hilangkan border */
  box-shadow: none; /* Hilangkan bayangan */
}

#signal-details {
  display: flex;
  flex-direction: column; /* Teks ditampilkan dalam kolom */
  gap: 4px; /* Jarak antar teks */
}

#signal-text {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

#signal-speed {
  font-size: 12px;
  color: #666;
}

#signal-bars {
  display: flex;
  gap: 3px; /* Jarak antar bar */
  flex-direction: row; /* Bar tetap dari kiri ke kanan */
  align-items: flex-end; /* Pastikan semua bar dimulai dari bawah */
}

.bar {
  width: 5px;
  background-color: #dc3545; /* Merah default */
  transition: height 0.5s, background-color 0.5s; /* Animasi halus */
}

.bar-1 {
  height: 10px;
}
.bar-2 {
  height: 14px;
}
.bar-3 {
  height: 18px;
}
.bar-4 {
  height: 22px;
}

/* Warna sinyal sesuai status */
.signal-strong .bar {
  background-color: #28a745 !important;
} /* Hijau */
.signal-medium .bar {
  background-color: #ffc107 !important;
} /* Kuning */
.signal-weak .bar {
  background-color: #fd7e14 !important;
} /* Oranye */
.signal-none .bar {
  background-color: #dc3545 !important;
} /* Merah */

/* Hilangkan bar untuk sinyal rendah */
.signal-none .bar-2,
.signal-none .bar-3,
.signal-none .bar-4,
.signal-weak .bar-3,
.signal-weak .bar-4,
.signal-medium .bar-4 {
  background-color: transparent !important;
}
.spinner-custom {
    border: 4px solid rgba(255, 255, 255, 0.3); /* Warna putih transparan */
    border-top: 4px solid #ffffff; /* Warna putih solid */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading_text span {
  font-size: 20px;
  font-weight: bold;
  border-right: 3px solid #17a2b8; /* Warna biru laut */
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  width: 0;
  animation: typing 2s steps(10, end) infinite alternate;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100px;
  }
}
/* Ubah warna tombol pagination aktif */
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
  background-color: #009efb !important;
  color: white !important;
  border-color: #009efb !important;
}

/* Ubah warna tombol pagination lainnya */
.dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link {
  color: #009efb !important;
  border: 1px solid #009efb !important;
}

/* Hover effect */
.dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link:hover {
  background-color: #009efb !important;
  color: white !important;
}