games.component.css

.header{
    width: fit-content;
    height: fit-content;
    align-items: center;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

td{
    align-items: center;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.games tr{
    white-space: nowrap;
    display: block;
    padding-bottom: 10px;
}

.games li {
  cursor: pointer;
  position: relative;
  left: 0;
  background-color: #EEE;
  margin: .5em;
  padding: .3em 0;
  height: 1.6em;
  border-radius: 4px;
}

.games li:hover {
  color: #2c3a41;
  background-color: #e6e6e6;
  left: .1em;
}

.games li.selected {
  background-color: black;
  color: white;
}

.games li.selected:hover {
  background-color: #505050;
  color: white;
}

.games li.selected:active {
  background-color: black;
  color: white;
}

.badge {
  display: inline-block;
  font-size: small;
  color: white;
  padding: 0.8em 0.7em 0 0.7em;
  background-color: #405061;
  line-height: 1em;
  position: relative;
  left: -1px;
  top: -4px;
  height: 1.8em;
  margin-right: .8em;
  border-radius: 4px 0 0 4px;
}

input {
  padding: .5rem;
}