body {
        font-family: Arial, sans-serif;
		background-color: #2077E8;
        padding: 20px;
    }

    #autocompleteTextbox {
        padding: 10px;
        width: 350px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    #suggestions {
        margin-top: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        position: absolute;
        width: 370px;
        background: white;
        z-index: 1000;
    }

    #suggestions div {
        padding: 10px;
        cursor: pointer;
        border-bottom: 1px solid #eee;
    }

    #suggestions div:last-child {
        border-bottom: none;
    }

    #suggestions div:hover {
        background-color: #f0f0f0;
    }

    #selectedMedicationId {
        margin-top: 20px;
        font-size: 18px;
        color: #333;
    }

    #articleNumber {
        font-weight: bold;
    }
	
	#clearButton {
    padding: 9px 15px;
    font-size: 16px;
    margin-left: 5px; /* Fügt einen kleinen Abstand zwischen Textfeld und Button hinzu */
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
}

#clearButton:hover {
    background-color: #e8e8e8;
}
	
	
	@media (max-width: 600px) {
    #autocompleteTextbox {
        width: 100%; /* Nutze die volle Breite auf kleinen Bildschirmen */
        font-size: 18px; /* Größere Schrift für bessere Lesbarkeit */
    }

    body {
        padding: 10px; /* Reduziere den Seitenabstand auf kleinen Bildschirmen */
    }

    #selectedMedicationId {
        font-size: 20px; /* Größere Schriftgröße für die Artikelnummeranzeige */
    }

    /* Anpassen weiterer Elemente nach Bedarf */
}