/* Kippschalter-Design */
/* Grundlegendes Schalter-Design */

/* Verstecken der Radio-Buttons */
input[type="radio"] {
  display: none;
}

/* Gestaltung des äußeren Teils des Kippschalters */
.switch {
  position: relative;
  display: inline-block;
  width: 60px; /* Breite des Schalters */
  height: 34px; /* Höhe des Schalters */
}

/* Gestaltung des inneren Teils des Kippschalters */
.switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
  border: 1px solid black; /* Fügt eine feine schwarze Linie um den Slider hinzu */
}

/* Gestaltung des inneren Teils des Kippschalters, wenn er ausgewählt ist */
input:checked + .slider {
   background-color: #2196F3;
}

/* Farbanpassungen für die Slider von Person 2 */
.switch-player2 .slider {
  background-color: #e0e0e0; /* Hellgrau für Person 2 */
}

table#table_other_players .switch-player2 input:checked + .slider {
  background-color: #808000; /* Olivgrün für Person 2 */
}

/* Farbanpassungen für die Slider von Person 3 */
.switch-player3 .slider {
  background-color: #d0d0d0; /* Dunkleres Grau für Person 3 */
}

table#table_other_players .switch-player3 input:checked + .slider {
  background-color: #0b6623; /* Waldgrün für Person 3 */
}

/* Farbanpassungen für die Slider von Person 4 */
.switch-player4 .slider {
  background-color: #c0c0c0; /* Noch dunkleres Grau für Person 4 */
}

table#table_other_players .switch-player4 input:checked + .slider {
  background-color: #800020; /* Burgunderrot für Person 4 */
}


/* Farbanpassungen für die Slider von Person 5 */
.switch-player5 .slider {
  background-color: #b0b0b0; /* Dunkelgrau für Person 5 */
}

table#table_other_players .switch-player5 input:checked + .slider {
  background-color: #008080; /* Teal für Person 5 */
}


/* Gestaltung des "Knopfes" des Kippschalters */
.slider:before {
  content: "7"; /* Nummer, die auf dem Schalter angezeigt wird */
  font-weight: bold;
  position: absolute;
  height: 26px;
  width: 26px;
  left: 4px;   /* Horizontale Position des Textes innerhalb des Kreises */
  bottom: 4px; /* Vertikale Position des Textes innerhalb des Kreises */
  background-color: white;
  transition: .4s;
  border-radius: 50%;
  display: flex;
  align-items: center; /* Zentriert den Inhalt vertikal */
  justify-content: center; /* Zentriert den Inhalt horizontal */
  line-height: 1; /* Stellt sicher, dass die Höhe der Schriftzeile der Höhe des Elements entspricht */
}





/* Spezifische Schalterstile basierend auf der Effort-Nummer */
/* Schalter für Effort 7 */
[id^='id_effort_player'][id$='_7'] + .slider:before,
#id_effort-0 + .slider:before {
  content: "7";
}

/* Schalter für Effort 6 */
[id^='id_effort_player'][id$='_6'] + .slider:before,
#id_effort-1 + .slider:before {
  content: "6";
}

/* Schalter für Effort 5 */
[id^='id_effort_player'][id$='_5'] + .slider:before,
#id_effort-2 + .slider:before {
  content: "5";
}

/* Schalter für Effort 4 */
[id^='id_effort_player'][id$='_4'] + .slider:before,
#id_effort-3 + .slider:before {
  content: "4";
}

/* Schalter für Effort 3 */
[id^='id_effort_player'][id$='_3'] + .slider:before,
#id_effort-4 + .slider:before {
  content: "3";
}

/* Schalter für Effort 2 */
[id^='id_effort_player'][id$='_2'] + .slider:before,
#id_effort-5 + .slider:before {
  content: "2";
}

/* Schalter für Effort 1 */
[id^='id_effort_player'][id$='_1'] + .slider:before,
#id_effort-6 + .slider:before {
  content: "1";
}

/* Stiländerung bei "ein" */
input:checked + .slider:before {
  transform: translateX(26px);
}