body {
    font-family: 'Poppins', sans-serif; /* Set font to Poppins */
    font-size: 14px;
    font-weight: 400; /* 400 adalah berat untuk regular */
}

.search-container {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 800px;
    margin: 50px auto; /* 3.125rem */
    margin-top: 0px;
    margin-bottom: 20px; /* 1.25rem */
    border: 1px solid #ddd;
    border-radius: 5px; /* 0.3125rem */
    overflow: hidden;
    font-family: 'Poppins';
}
.search-container input {
    border: none;
    outline: none;
    padding: 10px 15px; /* 0.625rem 0.9375rem */
    flex-grow: 1;
    border-top-left-radius: 10px; /* 0.625rem */
    border-bottom-left-radius: 10px; /* 0.625rem */
    font-family: 'Poppins';
}
.search-container button {
    background-color: #6257CB;
    color: white;
    border: none;
    padding: 10px 20px; /* 0.625rem 1.25rem */
    cursor: pointer;
    border-top-left-radius: 0; /* 0 */
    border-bottom-left-radius: 0; /* 0 */
    font-family: 'Poppins';
}
.search-container button:hover {
    background-color: #5146a6;
}
.search-container i {
    margin-left: 10px; /* 0.625rem */
    color: #aaa;
}
.search-container input:focus {
    outline: none;
    box-shadow: none;
}

.header {
    margin-top: 20px; /* 1.25rem */
    margin-bottom: 10px; /* 0.625rem */
    margin-left: 5px; /* 0.3125rem */
    text-align: start;
    font-weight: 400; /* Tidak ada unit */
    font-family: 'Poppins';
}

.header a {
    color: #6c757d;
    text-decoration: none;
    margin-left: 0px;
}

.header a:hover {
    text-decoration: underline;
}

.filter-section {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 20px;
    padding-top: 0px;
    width: 250px;
}

.filter-section h6 {
    font-weight: bold;
    margin-top: 20px;
}

.filter-section .form-check-label {
    margin-left: 10px; /* 0.625rem */
}

.filter-section label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.filter-section label input {
    margin-right: 10px;
}

.filter-section .tag {
    display: inline-block;
    padding: 5px 10px;
    margin: 5px 5px 0 0;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
}

.filter-section .others-label {
    justify-content: space-between;
    cursor: pointer;
}

.filter-section .others-label i {
    transition: transform 0.3s;
}

.filter-section .others-label i.rotate {
    transform: rotate(180deg);
}

.filter-section .extra-locations {
    display: none;
}

.filter-section .btn-link:hover {
    text-decoration: underline;
}

.filter-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px; /* 0.625rem */
    margin-top: 10px !important; /* 0.625rem */
    margin-left: 10px; /* 0.625rem */
}

th, td {
    text-align: center;
    vertical-align: middle;
}

/* Add a max-width to the table */
.table-responsive {
    max-width: 100%;
    overflow-x: auto; /* Pastikan scrollbar horizontal muncul saat diperlukan */
}

.table-responsive table {
    width: 100%;
    margin-bottom: 0px;
}

/* Add background color to the table header */
.table-responsive thead th {
    background-color: #6f42c1 !important; /* Forcing the background color */
    color: white !important; /* Forcing the text color */
}

.table-responsive th {
    border: none;
}

/* Gaya untuk scrollbar */
.table-responsive::-webkit-scrollbar {
    height: 8px; /* Tinggi scrollbar horizontal */
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: #888; /* Warna scrollbar */
    border-radius: 10px; /* Membuat sudut scrollbar lebih halus */
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Warna scrollbar saat hover */
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1; /* Warna latar belakang scrollbar */
}

td {
    vertical-align: middle; /* Ensures cell content is vertically centered */
}

td div {
    display: flex;
    align-items: center; /* Vertically center for image and text */
}

td img {
    margin-right: 10px; /* 0.625rem */
}

td span {
    white-space: nowrap; /* Prevents company name from wrapping */
    overflow: hidden; /* Ensures no overflow */
    text-overflow: ellipsis; /* Adds '...' for truncated text */
}

/* Custom width for columns */
th:nth-child(1),
td:nth-child(1) {
    width: 5%; /* Checkbox column */
}

th:nth-child(2),
td:nth-child(2) {
    width: 10%; /* Organization Name */
}

th:nth-child(3),
td:nth-child(3) {
    width: 15%; /* Founded Date */
}

th:nth-child(4),
td:nth-child(4) {
    width: 15%; /* Last Funding Date */
}

th:nth-child(5),
td:nth-child(5) {
    width: 20%; /* Last Funding Type */
}

th:nth-child(6),
td:nth-child(6) {
    width: 15%; /* Employee */
}

th:nth-child(7),
td:nth-child(7) {
    width: 10%; /* Industries */
}

th:nth-child(8),
td:nth-child(8) {
    width: 15%; /* Description */
}

th:nth-child(9),
td:nth-child(9) {
    text-align: start;
    width: 10%; /* Job Departments */
}

/* Align text to the start (left-aligned) for specific columns */
td:nth-child(7), /* Industries */
td:nth-child(8), /* Description */
td:nth-child(9)  /* Job Departments */ {
    text-align: start;
    vertical-align: middle;
}

.pagination {
    display: flex;
    justify-content: center;
    padding: 10px 0; /* 0.625rem */
}

.pagination .page-item {
    position: relative;
}

.pagination .page-link {
    color: #000000; /* Warna teks pagination */
    padding: 10px 15px; /* 0.625rem 0.9375rem */
    border-top: 1px solid black; /* Border atas hitam */
    border-bottom: 1px solid black; /* Border bawah hitam */
    border-left: none; /* Hilangkan border kiri */
    border-right: none; /* Hilangkan border kanan */
    height: auto; /* Mengatur tinggi secara otomatis */
    line-height: 1; /* Menjaga elemen tidak terlalu tinggi */
    border-radius: 0; /* Border tanpa radius (kotak) */
    background-color: transparent; /* Latar belakang default */
}

.pagination .page-item:not(:last-child)::after {
    content: '|'; /* Tambahkan simbol garis pemisah */
    position: absolute; /* Posisi absolut */
    right: 2px; /* 0.125rem */
    top: 52%; /* Jarak dari atas (posisi vertikal disesuaikan) */
    transform: translateY(-50%); /* Pusatkan secara vertikal */
    color: #000000; /* Warna garis pemisah */
    height: 60%; /* Sesuaikan tinggi agar tidak menyentuh border atas dan bawah */
    width: 0px; /* Lebar garis vertikal */
    background-color: #000000; /* Warna garis pemisah */
    z-index: 2; /* Pastikan garis berada di atas border elemen */
}

.pagination .page-item.active .page-link {
    color: #ffffff; /* Warna teks untuk elemen aktif */
    background-color: transparent; /* Hilangkan background biru */
    border-top: 1px solid black; /* Border atas hitam */
    border-bottom: 1px solid black; /* Border bawah hitam */
}

.pagination .page-item.active .page-link::before {
    content: ''; /* Pseudo-element kosong untuk background */
    position: absolute; /* Posisi absolut */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Pusatkan di tengah */
    width: 70%; /* Ukuran penuh */
    height: 70%;
    background-color: #6256CA; /* Warna background aktif */
    border-radius: 100%; /* Membuat background berbentuk lingkaran */
    z-index: -1; /* Pseudo-element di belakang teks */
}

.pagination .page-item.disabled .page-link {
    color: #aaa; /* Warna untuk item disabled */
    pointer-events: none; /* Nonaktifkan klik pada item disabled */
}

.pagination .page-item:first-child .page-link {
    padding: 10px 20px; /* 0.625rem 1.25rem */
    border-top-left-radius: 5px; /* 0.3125rem */
    border-bottom-left-radius: 5px; /* 0.3125rem */
    border-right: none; /* Hilangkan border kanan */
    border-left: solid 1px #2b2b2c; /* Tambahkan border kiri */
    background-color: transparent; /* Hilangkan background putih */
    border-top: 1px solid black; /* Border atas hitam */
    border-bottom: 1px solid black; /* Border bawah hitam */
}

.pagination .page-item:last-child .page-link {
    padding: 10px 20px; /* 0.625rem 1.25rem */
    border-top-right-radius: 5px; /* 0.3125rem */
    border-bottom-right-radius: 5px; /* 0.3125rem */
    border-left: none; /* Hilangkan border kiri */
    border-right: solid 1px #2b2b2c; /* Tambahkan border kanan */
    background-color: transparent; /* Hilangkan background putih */
    border-top: 1px solid black; /* Border atas hitam */
    border-bottom: 1px solid black; /* Border bawah hitam */
}

.btn-primary {
    background-color: #6257CB;
    border-color: #6257CB;
}

.table-strip tbody tr:nth-of-type(odd) {
    background-color: #ffffff !important;
}

.table-strip tbody tr:nth-of-type(even) {
    background-color: #f6f6f6 !important;
}

.wishlist-button {
    border: 2px solid #9edba9;
    border-radius: 5px; /* 0.3125rem */
    padding: 10px 20px; /* 0.625rem 1.25rem */
    display: inline-flex;
    align-items: center;
    color: #4A4A4A;
    font-size: 18px; /* 1.125rem */
    font-family: Arial, sans-serif;
    background-color: white;
    margin-top: 10px; /* 0.625rem */
    margin-bottom: 10px; /* 0.625rem */
    cursor: pointer;
    transition: all 0.3s;
}
.wishlist-button img {
    margin-right: 10px; /* 0.625rem */
}

@media (max-width: 48.62em) {
    /* Adjust the width of the columns for smaller screens */
    th:nth-child(1),
    td:nth-child(1) {
        width: 5%; /* Checkbox column */
    }

    th:nth-child(2),
    td:nth-child(2) {
        width: 30%; /* Organization Name */
    }

    th:nth-child(3),
    td:nth-child(3) {
        width: 20%; /* Founded Date */
    }

    th:nth-child(4),
    td:nth-child(4) {
        width: 20%; /* Last Funding Date */
    }

    th:nth-child(5),
    td:nth-child(5) {
        width: 15%; /* Last Funding Type */
    }

    th:nth-child(6),
    td:nth-child(6) {
        width: 10%; /* Employee */
    }

    th:nth-child(7),
    td:nth-child(7) {
        width: 15%; /* Industries */
    }

    th:nth-child(8),
    td:nth-child(8) {
        width: 30%; /* Description */
    }

    th:nth-child(9),
    td:nth-child(9) {
        text-align: start;
        width: 10%; /* Job Departments */
    }

    /* Adjust font sizes for smaller screens */
    body {
        font-size: 14px; /* 0.875em */
    }

    h1 {
        font-size: 32px; /* 2rem */
    }

    .header {
        font-size: 16px; /* 1em */
    }

    .filter-section h5 {
        font-size: 18px; /* 1.125em */
    }

    .wishlist-button {
        font-size: 16px; /* 1em */
    }
}