body {
  display: flex;
  justify-content: center;
  height: 100vh;
  font-family: Arial, sans-serif;
  flex-wrap: wrap;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
  width: 150px;
  cursor: pointer;
}

button {
  margin: 0;
  margin-right: 1em;
  padding: 10px 20px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

input {
  margin: 0;
  margin-right: 1em;
}

button:hover {
  background-color: #0056b3;
}

.player-lists {
  display: flex;
  margin-right: 1em;
}

.player-lists > div {
  margin-right: 1em;
}

.input-group {
  display: flex;
  justify-content: stretch;
}

.add-remove {
  margin-bottom: 3em;
}

.online li {
  background: rgba(90, 150, 50, 0.2);
}

.offline li {
  background: rgba(150, 50, 50, 0.2);
}

.generate-container {
  display: flex;
}

.select-container {
  text-align: center;
}

.styled-select {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #007bff;
  appearance: none; /* Remove default arrow */
  background-color: #fff;
  color: #007bff;
  cursor: pointer;
}

.styled-select:focus {
  outline: none;
  border-radius: 0;
}

.styled-select:hover {
  border-color: #3498db;
  border-radius: 0;
}