body {
    background-color: #f8f9fa;
    font-family: Arial, sans-serif;
}

.sidebar {
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    padding-top: 20px;
}

.sidebar h4 {
    font-weight: bold;
    text-transform: uppercase;
}

.nav-link {
    padding: 10px 20px;
    transition: background-color 0.2s ease-in-out;
}

.nav-link:hover {
    background-color: #495057;
    text-decoration: none;
}

.header {
    background-color: #007bff;
    color: #ffff00;
    padding: 15px;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 8px;
}

.mb-3 position-relative {
    width: 30px;

}



    /* Kotak autocomplete */
    .autocomplete-suggestions {
        position: absolute;
        background-color: white;
        border: 1px solid #ddd;
        z-index: 1000;
        max-height: 200px;
        overflow-y: auto;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    /* Saran individual */
    .autocomplete-suggestion {
        padding: 8px;
        cursor: pointer;
        border-bottom: 1px solid #f1f1f1;
    }
    
    /* Hover efek */
    .autocomplete-suggestion:hover {
        background-color: #f1f1f1;
    }
    
    /* Posisi saran di atas input */
    .input-container {
        position: relative;
    }
    
    .autocomplete-suggestions.above {
        bottom: 100%;
        margin-bottom: 5px; /* Jarak antara input dan kotak saran */
    }
    
    .autocomplete-suggestions.below {
        top: 100%;
        margin-top: 5px;
    }