body {
  margin: 0;
  background-image: url("../afbeeldingen/background-pattern.png");
  background-repeat: repeat;
  font-family: Arial;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: linear-gradient(#FFA500 75%, rgba(255, 0, 0, 0));
  padding: 30px 20px;
  height: 40px;
}
.logo-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.logo-container > div {
  width: 20%;
  margin: 20px;
  overflow: hidden;
}
.teamLogo, .clubLogo {
   width: 60%;
}
h1 {
  color: rgb(255, 255, 255);
  font-size: 24px;
}
h2, h3 {
  text-align: center;
}
h3 {
  margin: 0;
}
label {
  margin: 5px 0;
  padding: 5px;
  cursor: pointer;
  font-size: 20px;
}
#output {
  font-size: 20px;
  text-align: center;
  color: green;
  font-weight: bold;
  margin-top: 10px;
}
#onFieldPlayerTable tbody tr {
  background-color: rgb(121, 245, 121);
}
.teveel {
  background-color: rgb(253, 69, 69) !important;
}
.red {
  color: red;
}
.headerTekst {
  position: absolute; 
  left: 50%;
  transform: translateX(-50%); 
  text-align: center;
}
.headerTekst h1 {
  margin: 0;
  font-size: 24px;
  margin-top: -10px;
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 65px;
  right: 20px;
  background-color: #eb8424;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 5px;
}
.dropdown-content a {
  color: rgb(255, 255, 255);
  padding: 12px 16px;
  text-decoration: none;
  text-align: right;
  display: block;
}
.menuDropdown-content {
  display: none;
  position: absolute;
  top: 65px;
  left: 20px;
  background-color: #eb8424;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 5px;
}
.menuDropdown-content a {
  color: rgb(255, 255, 255);
  padding: 12px 16px;
  text-decoration: none;
  text-align: left;
  display: block;
}
.dropdown-content a:hover, .addDropdown a:hover, .editDropdown a:hover, .menuDropdown-content a:hover {
  background-color: #ff7b00;
  border-radius: 5px;
}
.userNameButton, .loginButton, .menuButton {
  background-color: #ff7b00; 
  color: white;
  border: none;
  padding: 8px 15px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
  margin-top: -10px;
}
.userNameButton:hover, .loginButton:hover, .menuButton:hover, .add-button:hover, .edit-button:hover, .applyButton:hover {
  background-color: #eb8424; 
}
.headerRight {
  margin-left: auto; 
  background-color: #FFA500;
}
.overview {
  width: 90%;
  margin: 25px auto;
}
.overview h2 {
  margin: 10px auto;
}
.tableButtons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.club-button {
  margin: 0px 5px 5px 0px;
  padding: 10px 15px;
  background-color: #f8a14f; 
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.club-button.active {
  background-color: #ff7b00;
  color: white;
}
#buttons {
  position: relative;
  display: flex;
}
.add-button {
  margin:  0px 0px 5px 5px;
  padding: 10px 15px;
  background-color: #ff7b00; 
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
}
.addDropdown {
  display: none;
  position: absolute;
  top: 40px;
  right: 0px;
  background-color: #eb8424;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 5px;
  width: 130px;
}
.addDropdown a {
  color: rgb(255, 255, 255);
  padding: 12px 16px;
  text-decoration: none;
  text-align: right;
  display: block;
}
.edit-button {
  margin:  0px 0px 5px 5px;
  padding: 10px 15px;
  background-color: #ff7b00; 
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
}
.editDropdown {
  display: none;
  position: absolute;
  top: 40px;
  right: 40px;
  background-color: #eb8424;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 5px;
  width: 200px;
}
.editDropdown a {
  color: rgb(255, 255, 255);
  padding: 12px 16px;
  text-decoration: none;
  text-align: right;
  display: block;
}
.editButton {
  height: 15px;
}
.changeTable {
  display: none;
}
.button-container {
  display: flex;
  gap: 10px; /* Adds space between the buttons */
  justify-content: center;
  align-items: center;
}
.applyButton {
  background-color: #ff7b00;
  color: white;
  border: none;
  padding: 8px 15px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
  margin: -5px 0 10px 0;
}
.resetButton {
  background-color: #ff7b00;
  color: white;
  border: none;
  padding: 8px 15px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 5px;
  margin: -5px 0 10px 0;
}
.align {
  width: calc(100% - 50px);
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 8px;
  text-align: left;
  border: 1px solid #ddd;
}
th {
  background-color: #f7a000;
  color: white;
}
tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}
tbody tr:nth-child(even) {
  background-color: #f3e6d2;
}
.tableImages {
  width: 25px;
  text-align: center;
}
.editImage {
  height: 20px;
}
#rugnummerKlein {
  display: none;
}
#rugnummerGroot {
  display: block;
}
/* Stijl voor niet-geselecteerde rijen */
#player-table tbody tr.not-selected {
  opacity: 0.5; 
  cursor: not-allowed;
}

@media only screen and (max-width: 768px) {
  .clubLogo, .teamLogo {
    width: 100%;
  }
  .logo-container > div {
    width: 30%;
  }
  label, #output{
    font-size: 16px;
  }
  .headerTekst h1 {
    font-size: 20px;
  }
  .dropdown-content, .userNameButton, .loginButton, .menuButton {
    font-size: 12px;
  }
  header {
    padding: 30px 2%;
    height: 30px;
    margin-bottom: 10px;
  }
  .dropdown-content {
    top: 60px;
    right: 2%;
  }
  .menuDropdown-content {
    top: 60px;
    left: 2%;
  }
  #player-table {
    font-size: 12px;
  }
  #rugnummerKlein {
    display: block;
  }
  #rugnummerGroot {
    display: none;
  }
  .editImage {
    height: 15px;
  }
  .overview {
    width: 98%;
  }
}