body {
    color: #333; /* Dunkleres Grau für besseren Kontrast */
    background-color: #f7f7f7; /* Sanftes, helles Grau als Hintergrund */
}
.popup {
    background-color: white;
}
.popup h2 {
    color: #4a90e2;
}
.popup input,
.popup select,
.ts-control,
.ts-dropdown {
    border: 1px solid #ccc !important;
    background-color: #f9f9f9 !important; 
    color: #333 !important;
}
.popup button {
    background-color: #4e46e5;
    color: white;
}
.popup button:hover {
    background-color: #0056b3;
}
#closePopup,
#closePopup2 {
    background-color: #ccc;
    color: black;
}
#closePopup:hover {
    background-color: #999;
}

.slider {
    background-color: #4f46e5;
}
.slider:before {
    background-color: white;
}
input:checked + .slider {
    background-color: red;
}
.toggle-label {
    color: white;
}

.fixed-button {
    color: white;
}
.add-game-button {
    background-color: #4e46e5;
}
.add-game-button:hover {
    background-color: #4a54e4;
}
.add-player-button {
    background-color: #4a90e2;
}
.add-player-button:hover {
    background-color: #357ab8;
}
.openDelete {
    background-color: red;
}

.gradient-bg {
    background: linear-gradient(90deg, #4f46e5, #06b6d4);
    color: white;
}
.table-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.game-container {
    background-color: #ffffff;
    border: 1px solid #ddd;
}
.game-container h3 {
    color: #333;
}
.player {
    background-color: #f2f2f2;
}
.player-name {
    color: #333;
}
.player-score {
    color: #4a90e2;
}

.rule-button {
    background-color: #f0f0f0;
    color: #000;
}
.rule-button:hover {
    background-color: #e0e0e0;
}
.rules {
    background-color: #fff;
}
.accordion {
    background-color: #f1f1f1;
    color: #444;
}
.active, .accordion:hover {
    background-color: #ccc;
}