.bi {
  display: inline-block;
  width: 1rem;
  height: 1rem;
}



/*
 * Sidebar
 */


.sidebar .nav-link {
  font-size: .875rem;
  font-weight: 500;
}

.sidebar .nav-link.active {
  color: #2470dc;
}

.sidebar-heading {
  font-size: .75rem;
}

/*
 * Navbar
 */

.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .form-control {
  padding: .75rem 1rem;
}

.loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #007bff;
    display: none;
}

.col-1 { width: 70%;}
.col-2 { width: 30%;}
.tr-1 { height: 75vh;}
.tr-2 { height: 17vh;}


/* Contoh CSS untuk mengatur tampilan thumbnail dan dropdown */
.dropdown-menu-end {
    right: 0;
    left: auto;
}

.dropdown-item {
    padding: 0.25rem 1.5rem;
}  


@media screen and (max-width: 600px) {
    
    table {
        width: 100%;
        padding: 2px;
        padding-top: 0px;
        margin-top: 0px;
        background-color: #fff;
        border-collapse: separate;
        border-spacing: 0 5px;
    }
    
    table,
    tbody,
    td,
    tr {
        display: block;
        width: 100%; /* Menambahkan lebar 100% untuk setiap elemen tabel */
    }

    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        margin-bottom: 20px;
        border: 1px solid #ddd;
        width: 100%; /* Memastikan baris tabel memiliki lebar 100% */
    }

    td {
        border: none;
        position: relative;
        text-align: center;
        width: 100%; /* Memastikan sel tabel memiliki lebar 100% */
        box-sizing: border-box; /* Menambahkan ini untuk memastikan padding dan border tidak menambah lebar */
    }
    
    .col-1 { width: 100%;}
    .col-2 { width: 100%;}
    .tr-1 { height: 75vh;}
    .tr-2 { height: 100%;}
    
    
    .sidebar .offcanvas-lg {
      position: -webkit-sticky;
      position: sticky;
      top: 48px;
    }
    .navbar-search {
      display: block;
    }
             
}

/* Aturan khusus untuk tabel dengan kelas 'lattable' */
@media screen and (max-width: 600px) {
    table.lattable {
        width: 100%; /* atau atur sesuai kebutuhan */
        padding: 0;
        margin: 0;
        background-color: inherit; /* Mengabaikan warna latar belakang */
        border-collapse: collapse;
        border-spacing: 0;
    }

    table.lattable,
    table.lattable tbody,
    table.lattable tr {
        display: table; /* Mengembalikan tampilan default tabel */
         width: 100%; /* Mengatur lebar sesuai kebutuhan */
    }

    table.lattable thead tr {
        position: static; /* Mengembalikan posisi default header tabel */
        width: 100%; /* Mengatur lebar sesuai kebutuhan */
    }

    table.lattable tr {
        margin: 0;
        border: none;
        width: 100%; /* Mengatur lebar sesuai kebutuhan */
    }

    table.lattable td {
        display: table-cell; /* Mengatur elemen td agar tampil horizontal */
        border: 1px solid #ddd; /* Contoh border untuk sel tabel */
        position: static; /* Mengembalikan posisi default sel tabel */
        text-align: left; /* Mengembalikan perataan teks default */
        width: 33.33%; /* Mengatur lebar sesuai kebutuhan */
        box-sizing: content-box; /* Mengembalikan box-sizing default */
    }
}

@media screen and (max-width: 600px) {
    .latency-container {
        display: block !important; /* Mengubah display ke block untuk tampilan vertikal */
        height: 100%;
    }

    .latency-container > div {
        width: 100%; /* Memastikan setiap elemen dalam .latency-container memiliki lebar penuh */
        margin-bottom: 10px; /* Menambahkan sedikit margin bawah untuk spasi antar elemen */
    }
    
    
    table.greyGridTable {
        width: 100%; /* atau atur sesuai kebutuhan */
        padding: 0;
        margin: 0;
        background-color: inherit; /* Mengabaikan warna latar belakang */
        border-collapse: collapse;
        border-spacing: 0;
    }

    table.greyGridTable,
    table.greyGridTable tbody,
    table.greyGridTable tr {
        display: table; /* Mengembalikan tampilan default tabel */
         width: 100%; /* Mengatur lebar sesuai kebutuhan */
    }

    table.greyGridTable thead tr {
        position: static; /* Mengembalikan posisi default header tabel */
        width: 100%; /* Mengatur lebar sesuai kebutuhan */
    }
    
        table.greyGridTable  th {
width: 20%;
    }

    table.greyGridTable tr {
        margin: 0;
        border: none;
        width: 100%; /* Mengatur lebar sesuai kebutuhan */
    }

    table.greyGridTable td {
        display: table-cell; /* Mengatur elemen td agar tampil horizontal */
        border: 1px solid #ddd; /* Contoh border untuk sel tabel */
        position: static; /* Mengembalikan posisi default sel tabel */
        text-align: left; /* Mengembalikan perataan teks default */
        width: 20%; /* Mengatur lebar sesuai kebutuhan */
        box-sizing: content-box; /* Mengembalikan box-sizing default */
        text-align: center;
        word-wrap: break-word;
    }
    
    
    
}