body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f2f5;
}

.dashboard-title {
    font-size: 27px;
    text-align: center;
    color: #333;
    background-color: #ffffff;
    padding: 20px 0;
    width: 60%;
    /* Default width */
    margin: 80px auto;
    border-radius: 5px;
    border: 1px solid #ddd;
    border-top: 5px solid #007bff;
    transition: margin-left 0.3s ease, width 0.3s ease;
}

.dashboard-title.expanded {
    margin-left: 380px;
    /* Offset sesuai lebar sidebar */
    width: 60%;
    /* Sesuaikan lebar agar tetap proporsional */
}



/* Judul Dashboard */
#dashboard-title {
    font-size: 27px;
    text-align: center;
    color: #333;
    padding: 20px 0;
    transition: margin-left 0.3s ease;
}

#dashboard-title.expanded {
    margin-left: 600px;
    /* Offset saat sidebar diperluas */
}




#mapping-obat {
    display: none;
}

#verifikasi-mapping {
    display: block;
}

.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-top: 20px;
    font-family: Arial, sans-serif;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


/* Pagination section to stay inside the white container */
.pagination {
    margin-top: 30px;
    /* Adjust for additional space between table and pagination */
    text-align: center;
    padding-top: 15px;
    /* Padding within the pagination block */
}

.container {
    padding-bottom: 50px;
    /* Ensure enough space between table and pagination */
    padding-top: 20px;
}

.container-provinsi {
    padding-bottom: 50px;
    /* Ensure enough space between table and pagination */
    padding-right: 700px;
}

.container-kota {
    padding-bottom: 50px;
    /* Ensure enough space between table and pagination */
    padding-right: 700px;
}

.container-kecamatan {
    padding-bottom: 50px;
    /* Ensure enough space between table and pagination */
    padding-right: 700px;
}

.container-kelurahan {
    padding-bottom: 50px;
    /* Ensure enough space between table and pagination */
    padding-right: 700px;
}




/* Pagination controls */
.pagination-container button,
.pagination-container input[type="number"] {
    margin: 0 5px;
    padding: 5px 10px;
    font-size: 14px;
    border: 1px solid #ffffff;
    background-color: #6495cc;
    cursor: pointer;
}

/* Halaman aktif */
.pagination-container .active-page {
    background-color: #ff4d4d;
    color: white;
    border: none;
}

/* Previous/Next buttons disabled state */
.pagination-container .disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.page-button.active {
    background-color: #e74c3c;
    color: white;
}







.modal {
    display: none; /* Default: Tersembunyi */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4); /* Background transparan */
}

.modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    border-radius: 10px;
    width: 30%;
    text-align: center;
}

#loadingModal {
    font-weight: bold;
}

#loadingModalProvinsi {
    font-weight: bold;
}

#loadingModalKota {
    font-weight: bold;
}

#loadingModalKecamatan {
    font-weight: bold;    
}    

#loadingModalKelurahan {    
    font-weight: bold;
}





.page-button {
    border: none;
    background-color: transparent;
    color: #6495cc;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.3s, color 0.3s;
}

.page-button:hover {
    background-color: #f0f0f0;
}

.total-pages-info {
    color: #666;
    margin-left: 10px;
    font-size: 14px;
}

.go-to-page-text {
    font-size: 14px;
    margin-left: 10px;
    color: #333;
}

.page-input {
    width: 50px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
}

.go-button {
    background-color: #00aaff;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.go-button:hover {
    background-color: #0077cc;
}


/* Input untuk memilih halaman */
.pagination-container input[type="number"] {
    width: 40px;
    text-align: center;
}

/* Tombol Jump */
.pagination-container .jump-btn {
    background-color: #00aaff;
    color: white;
    border: none;
}

.pagination-info {
    margin-top: 10px;
    text-align: center;
    color: #333;
}


.header {
    background-color: #d9534f;
    color: white;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.header .title {
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.header .menu-icon {
    font-size: 20px;
    cursor: pointer;
    margin-left: 20px;
    /* Added margin to the left */
}

.header .user-info {
    display: flex;
    align-items: center;
    margin-right: 30px;
    /* Adjusted margin to the right */
}

.header .user-info img {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    margin-right: 5px;
    /* Adjusted margin to the right */
}

.header .user-info .logout {
    color: white;
    text-decoration: none;
    margin-left: 5px;
    /* Adjusted margin to the left */
}

.header-container {
    background-color: white;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    /* Menyusun secara vertikal */
    align-items: center;
    /* Pusatkan isi */
    gap: 20px;
    /* Jarak antara judul dan tombol */
}


/* Tombol Search, Refresh, Matching */
.btn-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px;
    color: #20272bd0;
    margin-right: 10px;
}

.btn-search {
    background-color: #2196f3;
    /* Hijau untuk Search */
}

.btn-refresh {
    background-color: #cfc5c57a;
    /* Biru untuk Refresh */
}

.btn-matching {
    background-color: #32bd4e;
    /* Oranye untuk Matching */
}

.btn-matching-provinsi {
    background-color: #32bd4e;
    /* Oranye untuk Matching */
}

.btn-matching-kota {
    background-color: #32bd4e;
    /* Oranye untuk Matching */
}

.btn-matching-kecamatan {
    background-color: #32bd4e;
    /* Oranye untuk Matching */
}

.btn-matching-kelurahan {
    background-color: #32bd4e;
    /* Oranye untuk Matching */
}


.btn-confirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px;
    margin-right: 10px;
    background-color: green;
    color: white;
}

.btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px;
    margin-right: 10px;
    background-color: red;
    color: white;
}

.btn-custom:hover,
.btn-custom:focus {
    outline: 2px solid #0077cc;
}


.sidebar {
    width: 60px;
    background-color: #f8f9fa;
    position: fixed;
    top: 50px;
    /* Adjusted to be below the header */
    bottom: 0;
    padding-top: 20px;
    border-right: 1px solid #ddd;
    text-align: center;
    transition: width 0.3s;
    /* Smooth transition for expanding */
}

.sidebar.expanded {
    width: 300px;
    /* Expanded width */
}

.sidebar img {
    display: block;
    margin: 20px auto;
    width: 40px;
}

.sidebar .logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.sidebar.expanded .logo-container {
    flex-direction: row;
}

.sidebar .logo-text {
    display: none;
    font-size: 14px;
    margin-left: 10px;
    white-space: nowrap;
    /* Prevent text from wrapping to the next line */
}

.sidebar.expanded .logo-text {
    display: block;
    margin-left: 5px;
    /* Adjusted margin to the left */
}

.sidebar .menu-text {
    display: none;
    color: rgb(0, 0, 255);
    font-size: 14px;
    margin-bottom: 10px;
}

.sidebar.expanded .menu-text {
    display: block;
}

.sidebar .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
}

.sidebar.expanded .icon-container {
    flex-direction: row;
}

.sidebar .icon-text {
    display: none;
    font-size: 14px;
    margin-left: 10px;
}

.sidebar.expanded .icon-text {
    display: block;
}

.sidebar .icon {
    display: block;
    text-align: center;
    margin: 20px 0;
    font-size: 18px;
}

.sidebar,
.main-content {
    transition: all 0.3s ease;
}

.sidebar,
.main-content-provinsi {
    transition: all 0.3s ease;
}

.sidebar,
.main-content-kota {
    transition: all 0.3s ease;
}

.sidebar,
.main-content-kecamatan {
    transition: all 0.3s ease;
}

.sidebar,
.main-content-kelurahan {
    transition: all 0.3s ease;
}

.sidebar .extra-content {
    display: none;
    margin-top: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    /* Prevent text from wrapping to the next line */
}



.sidebar .provinsi-content {
    display: none;
    margin-top: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    /* Prevent text from wrapping to the next line */
}

.sidebar .kota-content {
    display: none;
    margin-top: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    /* Prevent text from wrapping to the next line */
}

.sidebar .kecamatan-content {
    display: none;
    margin-top: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    /* Prevent text from wrapping to the next line */
}

.sidebar .kelurahan-content {
    display: none;
    margin-top: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    /* Prevent text from wrapping to the next line */
}


.extra-content i {
    margin-right: 10px;
    /* Adjusted margin to the right */
}

.provinsi-content i {
    margin-right: 20px;
    /* Adjusted margin to the right */
}

.kota-content i {
    margin-right: 20px;
    /* Adjusted margin to the right */
}

.kecamatan-content i {
    margin-right: 20px;
    /* Adjusted margin to the right */
}

.kelurahan-content i {
    margin-right: 20px;
    /* Adjusted margin to the right */
}

#extra-content,
#provinsi-content,
#kota-content,
#kecamatan-content,
#kelurahan-content {
    display: none;
}


#extra-content,
#provinsi-content {
    display: none; /* Sembunyikan secara default */
    opacity: 0;
    transition: opacity 0.3s ease;
}

#extra-content,
#kota-content {
    display: none; /* Sembunyikan secara default */
    opacity: 0;
    transition: opacity 0.3s ease;
}

#extra-content,
#kecamatan-content {
    display: none; /* Sembunyikan secara default */
    opacity: 0;
    transition: opacity 0.3s ease;
}

#extra-content,
#kelurahan-content {
    display: none; /* Sembunyikan secara default */
    opacity: 0;
    transition: opacity 0.3s ease;
}


.sidebar.expanded #extra-content,
.sidebar.expanded #provinsi-content {
    display: flex; /* Tampilkan ketika sidebar diperluas */
    opacity: 1;
}

.sidebar.expanded #extra-content,
.sidebar.expanded #kota-content {
    display: flex; /* Tampilkan ketika sidebar diperluas */
    opacity: 1;
}

.sidebar.expanded #extra-content,
.sidebar.expanded #kecamatan-content {
    display: flex; /* Tampilkan ketika sidebar diperluas */
    opacity: 1;
}

.sidebar.expanded #extra-content,
.sidebar.expanded #kelurahan-content {
    display: flex; /* Tampilkan ketika sidebar diperluas */
    opacity: 1;
}

.main-content {
    margin-left: 60px;
    padding: 70px 20px 20px 20px;
    /* Adjusted padding to account for fixed header */
    transition: margin-left 0.3s;
    /* Smooth transition for content shift */
}

.main-content-provinsi {
    margin-left: 60px;
    padding: 90px 40px 40px 40px;
    transition: margin-left 0.3s;
}

.main-content-kota {
    margin-left: 60px;
    padding: 90px 40px 40px 40px;
    transition: margin-left 0.3s;
}

.main-content-kecamatan {
    margin-left: 60px;
    padding: 90px 40px 40px 40px;
    transition: margin-left 0.3s;
}

.main-content-kelurahan {
    margin-left: 60px;
    padding: 90px 40px 40px 40px;
    transition: margin-left 0.3s;
}

.main-content.expanded {
    margin-left: 300px;
    /* Adjusted margin for expanded sidebar */
}

.main-content-provinsi.expanded {
    margin-left: 300px;
}

.main-content-kota.expanded {
    margin-left: 300px;
}

.main-content-kecamatan.expanded {
    margin-left: 300px;
}

.main-content-kelurahan.expanded {
    margin-left: 300px;
}



/* Centering Mapping Obat Vmedis */
.main-title {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
}

.content-header {
    display: flex;
    justify-content: flex-start;
    /* Menyusun tombol di sisi kiri */
    gap: 10px;
    margin-bottom: 20px;
}

/* General table styling */
#data-obat {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 50px;
}

#data-obat-provinsi {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 50px;
}

#data-obat-kota {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 50px;
}

#data-obat-kecamatan {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 50px;
}

#data-obat-kelurahan {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 50px;
}

#data-obat th,
#data-obat td {
    padding: 10px;
    border: 1px solid #ddd;
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#data-obat-provinsi th,
#data-obat-provinsi td {
    padding: 10px;
    border: 1px solid #ddd;
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#data-obat-kota th,
#data-obat-kota td {
    padding: 10px;
    border: 1px solid #ddd;
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#data-obat-kecamatan th,
#data-obat-kecamatan td {
    padding: 10px;
    border: 1px solid #ddd;
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#data-obat-kelurahan th,
#data-obat-kelurahan td {
    padding: 10px;
    border: 1px solid #ddd;
    font-size: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* Specific styling for Nama KFA column to enable text wrapping */
#data-obat th:nth-child(4),
#data-obat td:nth-child(4) {
    white-space: normal;
    /* Allows text wrapping */
    word-wrap: break-word;
    max-width: 200px;
    /* Adjust width as needed */
}

/* Input styling */
#data-obat input {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}




.left,
.right {
    width: 48%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Ensure the container wraps the table properly */
.container {
    max-width: 100%;
    overflow-x: auto;
    /* Allow horizontal scroll if content exceeds the container */
    white-space: nowrap;
    /* Prevents the table from wrapping */
}

.container-provinsi {
    max-width: 100%;
    overflow-x: auto;
    /* Allow horizontal scroll if content exceeds the container */
    white-space: nowrap;
    /* Prevents the table from wrapping */
}

.container-kota {
    max-width: 100%;
    overflow-x: auto;
    /* Allow horizontal scroll if content exceeds the container */
    white-space: nowrap;
    /* Prevents the table from wrapping */
}

.container-kecamatan {
    max-width: 100%;
    overflow-x: auto;
    /* Allow horizontal scroll if content exceeds the container */
    white-space: nowrap;
    /* Prevents the table from wrapping */
}

.container-kelurahan {
    max-width: 100%;
    overflow-x: auto;
    /* Allow horizontal scroll if content exceeds the container */
    white-space: nowrap;
    /* Prevents the table from wrapping */
}



/* Ensure the table is responsive and fits within the container */
table {
    width: 100%;
    table-layout: auto;
    /* Automatically adjusts the column width */
    border-collapse: collapse;
    /* Ensures the borders between table cells are shared */
}

/* Style for the table cells and content */
table th,
table td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
    white-space: nowrap;
    /* Prevent text wrapping in table cells */
    overflow: hidden;
    /* Hide overflow if text is too long */
    text-overflow: ellipsis;
    /* Adds "..." if text is too long for the cell */
}

.main-content .content-header {
    background-color: white;
    padding: 20px;
    border: 0px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: center;
    /* Center the text */
}

.main-content-provinsi .content-header {
    background-color: white;
    padding: 20px;
    border: 0px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: center;
    /* Center the text */
}

.main-content-kota .content-header {
    background-color: white;
    padding: 20px;
    border: 0px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: center;
    /* Center the text */
}

.main-content-kecamatan .content-header {
    background-color: white;
    padding: 20px;
    border: 0px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: center;
    /* Center the text */
}

.main-content-kelurahan .content-header {
    background-color: white;
    padding: 20px;
    border: 0px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px;
    text-align: center;
    /* Center the text */
}

.main-content .content-header h2 {
    margin: 0;
    font-size: 20px;
    color: #333;
}

.main-content-provinsi .content-header h2 {
    margin: 0;
    font-size: 20px;
    color: #333;
}

.main-content-kota .content-header h2 {
    margin: 0;
    font-size: 20px;
    color: #333;
}

.main-content-kecamatan .content-header h2 {
    margin: 0;
    font-size: 20px;
    color: #333;
}

.main-content-kelurahan .content-header h2 {
    margin: 0;
    font-size: 20px;
    color: #333;
}


.footer {
    text-align: left;
    /* Align text to the left */
    padding: 5px;
    background-color: #f8f9fa;
    border-top: 1px solid #ddd;
    position: fixed;
    bottom: 0;
    width: calc(100% - 60px);
    /* Adjusted width to exclude sidebar */
    left: 60px;
    /* Adjusted left to exclude sidebar */
    transition: left 0.3s, width 0.3s;
    /* Smooth transition for content shift */
}

.footer.expanded {
    width: calc(100% - 300px);
    /* Adjusted width for expanded sidebar */
    left: 300px;
    /* Adjusted left for expanded sidebar */
}

.footer a {
    color: #007bff;
    text-decoration: none;
}

.footer .version {
    float: right;
    margin-right: 10px;
    /* Adjusted margin to the right */
}

.content-header {
    display: flex;
    justify-content: left;
    gap: 10px;
    /* Jarak antar tombol */
    margin-bottom: 20px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 5px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    border-radius: 3px;
    margin-right: 4px;
    color: #fff;
}

.btn-select {
    background-color: #1a73e8;
}

.btn-delete {
    background-color: #d93226;
}

.checkbox-column {
    display: flex;
    align-items: center;
    gap: 5px;
    /* Adjust space between checkbox and icon */
}

.delete-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    /* Adjust size as needed */
}

.delete-icon:hover {
    color: red;
    /* Optional hover effect */
}

.checkbox-column-provinsi {
    display: flex;
    align-items: center;
    gap: 5px;
    /* Adjust space between checkbox and icon */
}

.checkbox-column-kota {
    display: flex;
    align-items: center;
    gap: 5px;
    /* Adjust space between checkbox and icon */
}

.checkbox-column-kecamatan {
    display: flex;
    align-items: center;
    gap: 5px;
    /* Adjust space between checkbox and icon */
}

.checkbox-column-kelurahan {
    display: flex;
    align-items: center;
    gap: 5px;
    /* Adjust space between checkbox and icon */
}

.delete-icon-provinsi {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    /* Adjust size as needed */
}

.delete-icon-kota {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    /* Adjust size as needed */
}

.delete-icon-kecamatan {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    /* Adjust size as needed */
}

.delete-icon-kelurahan {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    /* Adjust size as needed */
}

.delete-icon-provinsi:hover {
    color: red;
    /* Optional hover effect */
}

.delete-icon-kota:hover {
    color: red;
    /* Optional hover effect */
}

.delete-icon-kecamatan:hover {
    color: red;
    /* Optional hover effect */
}

.delete-icon-kelurahan:hover {
    color: red;
    /* Optional hover effect */
}




.verifikasi-mapping-container {
    background-color: #ffffff;
    /* Warna putih untuk background */
    padding: 20px;
    /* Jarak isi dari tepi container */
    border-radius: 10px;
    /* Sudut melengkung */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Efek bayangan */
    max-width: 800px;
    /* Lebar maksimal container */
    margin: 0 auto;
    /* Pusatkan container secara horizontal */
    margin-top: 50px;
    /* Jarak dari atas */
}

.verifikasi-mapping-header {
    font-size: 22px;
    /* Ukuran font untuk judul */
    font-weight: bold;
    /* Tebalkan font */
    margin-bottom: 20px;
    /* Jarak bawah judul */
    text-align: center;
    /* Pusatkan judul */
    color: #333;
    /* Warna teks */
}

.form-row {
    margin-bottom: 15px;
    /* Jarak antar baris input */
}

.form-row label {
    display: block;
    /* Agar label tampil di atas input */
    font-size: 14px;
    /* Ukuran font label */
    color: #555;
    /* Warna teks label */
    margin-bottom: 5px;
    /* Jarak label dari input */
}

.form-row input,
.form-row select {
    width: 100%;
    /* Lebar penuh input dan select */
    padding: 10px;
    /* Jarak dalam input */
    border: 1px solid #ccc;
    /* Border abu-abu */
    border-radius: 5px;
    /* Sudut input melengkung */
    box-sizing: border-box;
    /* Box model agar padding tidak mempengaruhi lebar */
}

.button-group {
    display: flex;
    justify-content: flex-end;
    /* Posisikan tombol di kanan */
    gap: 10px;
    /* Jarak antar tombol */
    margin-top: 20px;
    /* Jarak atas tombol */
}

.button-group .btn {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: white;
}



.button-group .btn-cancel {
    background-color: red;
}



/* Modal dialog box styles */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 1000;
    /* Stay on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    /* Black background with opacity */
}

.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 400px;
    border-radius: 10px;
    text-align: center;
}

.modal-content button {
    margin: 10px;
}

.modal-header {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 10px;
}


/* Rata kiri semua elemen dalam #provinsi-mapping-content */
/* Tambahkan ini ke file CSS Anda */
#provinsi-mapping-content.shifted {
    margin-left: 250px; /* Sesuaikan dengan lebar sidebar */
    transition: margin 0.3s ease; /* Animasi transisi */
}

#kota-mapping-content.shifted {
    margin-left: 250px; /* Sesuaikan dengan lebar sidebar */
    transition: margin 0.3s ease; /* Animasi transisi */
}

#kecamatan-mapping-content.shifted {
    margin-left: 250px; /* Sesuaikan dengan lebar sidebar */
    transition: margin 0.3s ease; /* Animasi transisi */
}

#kelurahan-mapping-content.shifted {
    margin-left: 250px; /* Sesuaikan dengan lebar sidebar */
    transition: margin 0.3s ease; /* Animasi transisi */
}


#provinsi-mapping-content.collapsed {
    margin-left: 10px; /* Posisi jika sidebar mengecil */
}

#kota-mapping-content.collapsed {
    margin-left: 10px; /* Posisi jika sidebar mengecil */
}

#kecamatan-mapping-content.collapsed {
    margin-left: 10px; /* Posisi jika sidebar mengecil */
}

#kelurahan-mapping-content.collapsed {  
    margin-left: 10px; /* Posisi jika sidebar mengecil */
}


/* Mengatur jarak kiri konten utama agar tidak terlalu menempel */
#main-content-provinsi {
    padding-left: 15px;
}

/* Mengatur jarak kiri konten utama agar tidak terlalu menempel */
#main-content-kota {
    padding-left: 15px;
}

#main-content-kecamatan {
    padding-left: 15px;
}

#main-content-kelurahan {
    padding-left: 15px;
}




/* Heading rata kiri */
/* #main-title-provinsi {
    text-align: left;
} */

/* Pengaturan rata kiri pada tombol */
.btn-custom {
    text-align: left;
}

/* Tabel dan kontennya rata kiri */
#data-obat-provinsi {
    width: 100%;
    margin-top: 15px;
    text-align: left;
}

/* Tabel dan kontennya rata kiri */
#data-obat-kota {
    width: 100%;
    margin-top: 15px;
    text-align: left;
}

/* Tabel dan kontennya rata kiri */
#data-obat-kecamatan {
    width: 100%;
    margin-top: 15px;
    text-align: left;
}

/* Tabel dan kontennya rata kiri */
#data-obat-kelurahan {
    width: 100%;
    margin-top: 15px;
    text-align: left;
}



/* Modal dialog konten rata kiri */
.modal .modal-content {
    text-align: left;
    padding-left: 10px;
    /* Tambahan padding agar isi modal tidak terlalu menempel ke tepi */
}

/* Pengaturan teks di dalam tombol modal agar rata kiri */
.modal-content p,
.modal-content button {
    text-align: left;
}

/* Sinkronisasi hasil dan kontrol pagination juga rata kiri */
#pagination-info-provinsi,
#pagination-controls-provinsi,
#sync-results-provinsi {
    text-align: left;
}

#pagination-info-kota,
#pagination-controls-kota,
#sync-results-kota {
    text-align: left;
}

#pagination-info-kecamatan,
#pagination-controls-kecamatan,
#sync-results-kecamatan {
    text-align: left;
}

#pagination-info-kelurahan,
#pagination-controls-kelurahan,
#sync-results-kelurahan {
    text-align: left;
}


/* Ketika halaman Mapping aktif, sembunyikan "Dashboard Admin Vmedis" */
.mapping-content-active #dashboard-title {
    display: none !important;
}

.provinsi-mapping-content-active #dashboard-title {
    display: none !important;
}

.kota-mapping-content-active #dashboard-title {
    display: none !important;
}

.kecamatan-mapping-content-active #dashboard-title {
    display: none !important;
}

.kelurahan-mapping-content-active #dashboard-title {    
    display: none !important;    
}

/* Tambahkan ini di dalam tag <style> atau file CSS */
#sinkronMappingKfa {
    background-color: #ff4d4d;
    /* Warna merah muda */
    border: 1px solid #ffffff;
    /* Garis tepi yang ringan */
    color: #000000;
    /* Warna teks */
    padding: 6px;
    border-radius: 5px;
}

#sinkronMappingProvinsi {
    background-color: #ff4d4d;
    /* Warna merah muda */
    border: 1px solid #ffffff;
    /* Garis tepi yang ringan */
    color: #000000;
    /* Warna teks */
    padding: 6px;
    border-radius: 5px;
}

/* Tambahkan ini di dalam tag <style> atau file CSS */
#sinkronMappingkota {
    background-color: #ff4d4d;
    /* Warna merah muda */
    border: 1px solid #ffffff;
    /* Garis tepi yang ringan */
    color: #000000;
    /* Warna teks */
    padding: 6px;
    border-radius: 5px;
}

/* Tambahkan ini di dalam tag <style> atau file CSS */
#sinkronMappingkecamatan {
    background-color: #ff4d4d;
    /* Warna merah muda */
    border: 1px solid #ffffff;
    /* Garis tepi yang ringan */
    color: #000000;
    /* Warna teks */
    padding: 6px;
    border-radius: 5px;
}

/* Tambahkan ini di dalam tag <style> atau file CSS */    
#sinkronMappingkelurahan {
    background-color: #ff4d4d;
    /* Warna merah muda */
    border: 1px solid #ffffff;
    /* Garis tepi yang ringan */
    color: #000000;
    /* Warna teks */
    padding: 6px;
    border-radius: 5px;
}