html,
body {
  padding: 0;
  margin: 0;
  font-size: 1rem;
  font-family: "Montserrat", sans-serif;
  width: 100vw;
  overflow-x: hidden;
  background-color: #521d29;
  overscroll-behavior: contain;
  color: white;
}

a {
  color: white;
}

.hidden {
  display: none;
}

#container {
  width: 95vw;
  max-width: 60ch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 1vmin;
  margin: auto;
  margin-top: 1vh;
  padding-bottom: 10rem;
}

#main_title {
  font-family: "Courier New", Courier, monospace;
  color: white;
  min-width: 50%;
  /* padding-left: 13vmin; */
  margin-top: -1rem;
  padding-right: 2vmin;
  padding-bottom: 3vmin;
}

#top_container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 2vh;
  width: 100%;
  padding: 2vh;
  height: 6ch;
}

#top_container img {
  height: auto;
  max-width: 100%;
}

#logo_container {
  max-width: 50%;
  text-align: right;
  font-size: 1rem;
  padding-right: 2.5vmin;
}

#content_container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

#menu_container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 4vh;
  height: 6ch;
}

#pin_container {
  display: flex;
  flex-direction: column;
  gap: 2vmin;
  padding-top: 2vh;
  padding-bottom: 4vh;
}

#pin_container > input {
  font-size: 3vh;
  font-family: "Courier New", Courier, monospace;
  padding: 2vmin;
  text-align: center;
  background-color: #f4f4f4;
  letter-spacing: 1vmin;
  font-weight: bold;
  border-radius: 1vmin;
  margin-bottom: 4vmin;
  margin-top: 4vmin;
}

#pin_container > div,
#pin_container > input {
  align-self: center;
  height: 3vh;
  border-radius: 2rem;
  width: 10rem;
}

#pin_container > div#reconnect {
  background-color: transparent;
  border: 1px solid white;
  color: white;
  border-radius: 1vmin;
  width: fit-content;
  padding: 2vmin;
  font-size: 3vhrem;
  cursor: pointer;
}

#pin_container > div#reconnect {
  display: none;
}

#pin_container.uses_static > input#pin {
  display: none;
}
#pin_container.uses_static > div#reconnect {
  display: initial;
}

div#top_container div#disconnect_button {
  background-color: transparent;
  border: 1px solid white;
  color: white;
  /* border-radius: 1vmin; */
  width: fit-content;
  /* padding: 1.5vmin; */
  font-size: 0.8rem;
  cursor: pointer;
}

#disconnect_button {
  display: none;
}
.connected #pin_container {
  display: none;
}

.connected #disconnect_button {
  display: block;
}

div#container > div#top_container div#disconnect_button::before {
  content: "Not connected";
}

div#container.connected > div#top_container div#disconnect_button::before {
  content: "Disconnect";
}

div#connection_status {
  padding-top: 1vh;
  font-weight: bold;
}
div#container > div#pin_container > div#connection_status::before {
  content: "Enter PIN to connect";
}
div#container.connected > div#pin_container > div#connection_status::before {
  content: "Connected to display";
}
div#container.connected > div#pin_container > div#disconnect_button {
  background-color: #de2f59;
  color: white;
  border-radius: 1vmin;
  padding: 1vmin;
  cursor: pointer;
}

.controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  width: 100%;
  justify-content: flex-end;
  font-size: 7vmax;
  height: 7vmax;
  justify-self: end;
  align-items: center;
  grid-area: controls;
  grid-template-areas: "left center right";
}

.content_entry[data-playing="1"] .controls .btn {
  background-color: transparent;
  color: white;
  border: 2px solid white;
}

.content_entry[data-playing="1"] .controls .btn {
  background-color: transparent;
  color: white;
  border: 1px solid white;
}

.content_entry[data-playing="1"] .controls .btn-next {
  background-color: white;
  color: #521d29;
}

#content_container[data-playing="1"] #categories_container {
  display: none;
}

#content_container[data-playing="1"] .categories {
  display: none;
}

.content_entry[data-playing="0"] .controls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

div.controls > div {
  margin: 0.5rem 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn {
  cursor: pointer;
  font-size: 1rem;
  padding: 0.75rem 1rem;

  border-radius: 2rem;
  /* border: 1px solid #3cb378; */
  background-color: white;
  color: #521d29;
  justify-content: center;
  align-items: center;
}

.btn:hover,
.btn:active {
  /* bg gradient from #DF3158 to #F0693D */
  background: linear-gradient(90deg, #df3158 0%, #f0693d 100%);
  color: white;
}

.fa-reply {
  margin-right: 0.25rem;
}

#categories_link {
  text-decoration: none;
}

.btn-categories {
  width: 14ch;
  text-align: center;
}

.btn-categories .material-icons {
  font-size: 1rem;
  margin-right: 0.5rem;
}

.btn-categories span {
  margin-right: 1rem;
}

.modal {
  background-color: #521d29;
}

.modal a.close-modal {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAE9GlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4wLWMwMDAgNzkuMTcxYzI3ZmFiLCAyMDIyLzA4LzE2LTIyOjM1OjQxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjQuMCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjItMTEtMDhUMTA6MTM6MDErMDI6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIyLTExLTA4VDEwOjE0OjQ3KzAyOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIyLTExLTA4VDEwOjE0OjQ3KzAyOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozZjliZmVkNi1kYWE3LTQ4MzYtYWQyMS0yNjdmYTUyMDQ5M2QiIHhtcE1NOkRvY3VtZW50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");
}

#categories_container {
  padding-bottom: 1rem;
  border-bottom: 3px solid rgba(0, 0, 0, 0.12);
}

/* select data playing categories */

#category_list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 2vmin;
  padding: 1vmin;
  padding-right: 2vmin;
  padding-bottom: 2vmin;
  font-size: 1rem;
}

#category_list > li {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid white;
  padding: 0.5rem;
  /* text non-selectable */
  -webkit-touch-callout: none;
  user-select: none;
  border-radius: 5px;
}

li.active {
  background-color: #3cb378;
  color: white;
}

#selected_categories_list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding: 1vmin;
  padding-right: 2vmin;
  padding-bottom: 2vmin;
  font-size: 1rem;
}

#selected_categories_list li {
  /* text non-selectable */
  list-style-type: none;
  -webkit-touch-callout: none;
  user-select: none;
  border-radius: 5px;
  border: 1px solid white;
  padding: 0.25rem;
}

div.content_entry {
  padding-top: 1rem;
  width: 100%;
  display: grid;
  border-bottom: 3px solid rgba(0, 0, 0, 0.12);
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "thumbnail controls"
    "thumbnail controls"
    "title status"
    "categories categories";
  padding-bottom: 1rem;
}

.categories {
  grid-area: categories;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  padding-top: 1rem;
}

.categories {
  display: none;
}

.content_entry[data-playing="1"] .categories {
  padding: 1rem;
}

.categories .cat {
  border: 1px solid white;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
}

div.content_entry > div > div.btn {
  justify-content: center;
  align-items: center;
}
div.content_entry > div.title {
  padding-top: 2vmin;
  grid-area: title;
  text-align: left;
}
div.content_entry > div.status {
  grid-area: status;
}
div.content_entry > div.title,
div.content_entry > div.status {
  font-size: 1vh;
  overflow: hidden;
  padding: 1vmin;
  padding-right: 0.75rem;
  padding-left: 0;
}
div.content_entry > div > div.btn[data-icon] {
  justify-content: center;
  align-items: center;
}

.btn-next {
  /* background-color: #3cb378; */
  /* color: white; */
  grid-area: center;
  /* background-color: transparent;
  border: 2px solid white; */
}

.btn-prev {
  grid-area: left;
}

/*

Control logic for showing/hiding relevant buttons

*/

.no_queue .btn-add-to-queue,
.no_queue .btn-remove-from-queue {
  display: none !important;
}

div#content_container[data-playing="0"] .btn-add-to-queue {
  display: block;
}
div.content_entry[data-queued="1"] .btn-add-to-queue {
  display: none;
}
div.content_entry[data-playing="1"] .btn-add-to-queue {
  display: none;
}
div.content_entry[data-queued="0"] .btn-remove-from-queue {
  display: none;
}
div.content_entry[data-queued="1"] .btn-remove-from-queue {
  display: flex;
}
div.content_entry[data-queued="0"] > div > div.btn[data-icon="more_time"] {
  display: none;
}
div.content_entry[data-queued="1"] > div > div.btn[data-icon="more_time"] {
  display: flex;
}
div.content_entry[data-queued="1"][data-pages="1"]
  > div
  > div.btn[data-icon="more_time"] {
  display: none;
}
div.content_entry[data-playing="1"][data-pages="1"]
  > div
  > div.btn[data-icon="more_time"] {
  display: flex;
}
div.content_entry[data-queued="1"][data-playing="1"] .btn-remove-from-queue {
  display: none;
}
div.content_entry .btn-restart {
  display: none;
}
div.content_entry[data-playing="1"] > div > div.btn[data-icon="skip_next"],
div.content_entry[data-playing="1"][data-type="video"] .btn-restart {
  display: flex;
}
div.content_entry[data-playing="1"][data-type="video"]
  > div
  > div.btn[data-icon="pause"] {
  display: none;
}

.btn-skip-next {
  grid-area: right;
}

div.content_entry[data-playing="0"] .btn-skip-next {
  display: none;
}
div.content_entry[data-playing="1"] .btn-play {
  display: none;
}

/* Don't show controls when not playing  */
div.content_entry .btn-prev,
div.content_entry .btn-next {
  display: none;
}
div.content_entry[data-pages="1"] .btn-restart {
  display: none;
}

.content_entry[data-playing="1"] {
  display: flex;
  flex-direction: column;
  padding-bottom: 3rem;
}

.content_entry[data-playing="1"] .title {
  display: none;
}

.content_entry[data-playing="1"] .thumbnail {
  height: 20rem;
}

div.content_entry[data-pages="1"][data-playing="1"] .btn-prev,
div.content_entry[data-pages="1"][data-playing="1"] .btn-next {
  display: flex;
}
div.content_entry[data-playing="1"][data-first-page="1"] .btn-prev {
  display: none;
}
div.content_entry[data-playing="1"][data-last-page="1"] .btn-next {
  display: none;
}
div.content_entry[data-queued="1"][data-playing="0"] > div.status::before {
  content: "Queued - ";
}
div.content_entry[data-playing="1"][data-paused="0"] > div.status::before {
  content: "Playing - ";
}
div.content_entry[data-playing="1"][data-paused="1"] > div.status::before {
  content: "Paused - ";
}

div.content_entry[data-paused="1"] > div > div.btn[data-icon="pause"] {
  display: none;
}
div.content_entry > div > div.btn[data-icon="pause"] {
  display: none;
}
div.content_entry[data-paused="1"] > div > div.btn[data-icon="play_arrow"] {
  display: flex;
}

.thumbnail {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  grid-area: thumbnail;
  height: 8rem;
}
.thumbnail > img,
.thumbnail > video {
  height: 8rem;
}

div.content_entry > div.title,
div.content_entry > div.status {
  font-size: 1rem;
}

.status {
  text-align: right;
}

input:focus {
  outline: 1px solid rgb(226, 89, 44, 1);
  appearance: none;
}