.critics-container {
            max-width: 80%;
            margin: 30px auto;
            padding: 20px;
            background: #333;
            border-radius: 8px;
	    color: white;
        }
       
 .alert { padding: 10px; margin-bottom: 15px; border-radius: 3px; }
        .alert-danger { background-color: #f8d7da; color: #842029; }
        .alert-success { background-color: #d1e7dd; color: #0f5132; }

        select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        /* Tabelle */
.custom-critic-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    margin-top: 10px;
}

.custom-critic-table th,
.custom-critic-table td {
    border: 1px solid #ccc;
    padding: 8px;
}

.custom-critic-table th {
    background-color: #993300;
}


.btn-remove {
    background-color: #dc3545;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 3px;
    cursor: pointer;
    width: 100%;
}

.btn-remove:hover {
    background-color: #c82333;
}

.btn-add {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 3px;
    cursor: pointer;
}

.btn-add:hover {
    background-color: #0056b3;
}

.btn-submit {
    background-color: #28a745;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 3px;
    cursor: pointer;
}

.btn-submit:hover {
    background-color: #218838;
}


.critic-block label {
    display: block;
    margin-bottom: 5px;
}

.critic-block input[type="text"],
.critic-block input[type="number"],
.critic-block textarea {
    /* Hier kannst Du weitere Styles für die Kritiker-Felder definieren */
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

#game_search {
    width: 50%;
    padding: 8px;
    border: none;
    border-radius: 4px;
    margin-top: 10px;
}

.critic-search-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.critic-search-input:focus {
    border-color: #007bff;
    outline: none;
}

.rating-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.rating-input:focus {
    border-color: #007bff;
    outline: none;
}


.link-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

.link-input:focus {
    border-color: #007bff;
    outline: none;
}



.platform-suggestions,
.critic-suggestions {
    position: absolute;
    top: 100%;        /* direkt unter dem Input */
    left: 0;
    z-index: 1000;    /* überlagert andere Elemente */
    background: #fff;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    width: 100%;      /* gleiche Breite wie Input */
    display: none;    /* per JS ein/aus */
    color: black;
}

.platform-suggestions div,
.critic-suggestions div {
    padding: 6px 10px;
    cursor: pointer;
}

.platform-suggestions div:hover,
.critic-suggestions div:hover {
    background: #f0f0f0;
}