html {
  height: 100%;
}
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
}
#content {
  padding: 24px;
}
#app {
  display: grid;
  height: 100%;
  grid-template-rows: 50px
		1fr
		24px;
}
#menu {
  display: flex;
  background: #a4243b;
  background: linear-gradient(90deg, #a4243b 0%, #d8c99b 25%, #d8973c 50%, #bd632f 75%, #273e47 100%);
}
#menu .item {
  font-weight: bold;
  color: #fff;
  padding: 16px;
  border-right: 2px solid #fff;
  cursor: pointer;
}
#menu .item.selected {
  background: rgba(255, 255, 255, 0.6);
  color: #333;
}
#filter-box {
  margin-bottom: 16px;
}
#filter-box input {
  padding: 8px;
  font-size: 1em;
}
.movie-container {
  margin-bottom: 12px;
  max-width: 420px;
}
.movie-container.expanded {
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fbf8f3;
}
.movie-container.expanded .movie img {
  margin-left: 0px;
}
.movie-container .movie {
  display: grid;
  grid-template-columns: min-content 1fr;
  align-items: center;
  grid-gap: 0 8px;
  cursor: pointer;
  user-select: none;
}
.movie-container .movie img {
  margin-left: 16px;
}
.movie-container .movie div {
  font-weight: bold;
}
.movie-container .info {
  display: none;
  grid-template-columns: min-content 1fr;
  grid-gap: 4px 0px;
  margin-top: 16px;
  margin-left: 28px;
}
.movie-container .info .name {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  max-width: 400px;
}
.movie-container .info .updated {
  grid-column: 2 / -1;
  font-size: 0.8em;
  font-weight: bold;
  max-width: 400px;
}
.movie-container .info .percent-seen {
  grid-column: 2 / -1;
  background: #f0f0f0;
  border: 1px solid #aaa;
  border-radius: 8px;
  max-width: 400px;
}
.movie-container .info .percent-seen .bar {
  background: #555;
  height: 10px;
  border-radius: 5px;
}
.movie-container .info .spacer {
  grid-column: 1 / -1;
  height: 8px;
}
.movie-container.expanded > .info {
  display: grid;
}
.show-seasons {
  margin-bottom: 12px;
  max-width: 475px;
}
.show-seasons.expanded {
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fbf8f3;
}
.show-seasons.expanded .show img {
  margin-left: 0px;
}
.show-seasons.expanded > .seasons {
  display: block;
}
.show-seasons .show {
  display: grid;
  grid-template-columns: min-content 1fr;
  align-items: center;
  grid-gap: 0 8px;
  cursor: pointer;
  user-select: none;
}
.show-seasons .show img {
  margin-left: 16px;
}
.show-seasons .show div {
  font-weight: bold;
}
.show-seasons .seasons {
  display: none;
}
.show-seasons .seasons .season {
  margin-top: 16px;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.show-seasons .seasons .season.c1 {
  background-color: #a4243b;
  color: #fff;
}
.show-seasons .seasons .season.c2 {
  background-color: #d8c99b;
  color: #000;
}
.show-seasons .seasons .season.c3 {
  background-color: #d8973c;
  color: #fff;
}
.show-seasons .seasons .season.c4 {
  background-color: #bd632f;
  color: #fff;
}
.show-seasons .seasons .season.c5 {
  background-color: #273e47;
  color: #fff;
}
.show-seasons .seasons .episodes {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-gap: 4px 16px;
  margin-top: 16px;
}
.show-seasons .seasons .episodes .name {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  max-width: 400px;
}
.show-seasons .seasons .episodes .updated {
  grid-column: 2 / -1;
  font-size: 0.8em;
  font-weight: bold;
  max-width: 400px;
}
.show-seasons .seasons .episodes .percent-seen {
  grid-column: 2 / -1;
  background: #f0f0f0;
  border: 1px solid #aaa;
  border-radius: 8px;
  max-width: 400px;
}
.show-seasons .seasons .episodes .percent-seen .bar {
  background: #555;
  height: 10px;
  border-radius: 5px;
}
.show-seasons .seasons .episodes .spacer {
  grid-column: 1 / -1;
  height: 8px;
}
footer {
  display: grid;
  align-items: center;
  background: #333;
  color: #ccc;
  padding-left: 8px;
  font-size: 0.85em;
}