/*
 * Variable rules take priority
 */
/*
 * Base CSS
 */
:root {
  --section-spacing: 1rem;
  --section-body-padding: 0.75rem;
  --icon-size: 24pt;
  --fonts: "Object Sans";
}

:not(:defined) {
  visibility: hidden;
}

#jukebox,
#addsearch,
#profile,
#history,
#gettoken,
#admin {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #ffffff;
  flex: 1;
}

sl-dialog::part(title) {
  padding: var(--header-spacing) var(--header-spacing) 0 var(--header-spacing);
}

sl-dialog::part(body) {
  font-size: 12pt;
}

sl-dialog > p:not(:last-of-type) {
  margin-bottom: 0.5rem;
}

/**
 * Specific dialog changes
 */
#dialog-delete-vote > sl-button[variant=default] {
  margin-right: 0.35rem;
}

sl-button[variant=primary]::part(base) {
  background-color: hsl(181.18, 98%, 39.4%);
  border-color: hsl(181.18, 98%, 39.4%);
}

.hidden {
  display: none;
}

/**
 * Top header
 */
#header {
  background-color: #fd6f60;
  width: 100%;
  height: 2.25rem;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  z-index: 50;
}
#header > h2 {
  flex: 1;
  text-align: center;
  font-family: var(--fonts), sans-serif;
  color: #ffffff;
  font-weight: 400;
}
#header > sl-dropdown {
  margin-right: 0.5rem;
  padding-top: 0.25rem;
}
#header sl-menu-item::part(base) {
  font-size: 14pt;
}
#header sl-menu-item[jb-action=show-admin]::part(base) {
  background-color: var(--sl-color-danger-300);
}
#header sl-menu {
  padding: 0;
}
#header sl-menu-item::part(checked-icon),
#header sl-menu-item::part(submenu-icon) {
  width: 0.5rem;
}

/*
 * Jukebox CSS
 */
#jukebox {
  /**
   * Now Playing
   */
  /**
   * On Deck
   */
  /**
   * Voting Pool (Boblere)
   */
  /**
   * Search button
   */
  /**
   * Vote Status
   */
}
#jukebox h2, #jukebox h3, #jukebox h4 {
  text-align: center;
}
#jukebox h2, #jukebox h4 {
  text-align: center;
  font-family: var(--fonts), sans-serif;
  font-weight: 400;
  background-color: #e36456;
  color: #ffffff;
}
#jukebox h4 {
  font-size: 16pt;
}
#jukebox div[jb-name=artist] {
  font-weight: 800;
}
#jukebox .vote-action > sl-icon {
  color: var(--sl-color-gray-200);
}
#jukebox .queue-entry.vote > .vote-action > sl-icon,
#jukebox .pool-entry.vote > .vote-action > sl-icon {
  color: var(--sl-color-green-400);
}
#jukebox #nowplaying {
  margin-top: 2.25rem;
}
#jukebox #nowplaying .body {
  font-size: 14pt;
  padding: var(--section-body-padding);
}
#jukebox #nowplaying .body .track-image {
  display: flex;
  justify-content: center;
}
#jukebox #nowplaying .body .track-image > img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}
#jukebox #nowplaying .body > div[jb-name=artist] {
  margin-top: 0.25rem;
}
#jukebox #nowplaying .body > div[jb-name=title] {
  margin-bottom: 0.25rem;
}
#jukebox #nowplaying .body > .progress {
  display: flex;
  align-items: center;
}
#jukebox #nowplaying .body > .progress > sl-progress-bar {
  flex: 1;
  padding-right: var(--section-body-padding);
}
#jukebox #nowplaying .body > .progress > div {
  font-size: 10pt;
}
#jukebox #ondeck {
  margin-top: var(--section-spacing);
}
#jukebox #ondeck .body {
  font-size: 12pt;
  display: flex;
  flex-direction: row;
  padding: var(--section-body-padding);
}
#jukebox #ondeck .body .track-image > img {
  width: auto;
  max-height: 4rem;
  border-radius: 50%;
}
#jukebox #ondeck .body > .ondeck-track-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 0.25rem;
}
#jukebox #ondeck .ownqueue {
  padding: var(--section-body-padding);
  font-size: 14pt;
}
#jukebox #ondeck .ownqueue > .oqheader {
  display: flex;
  margin-bottom: var(--section-body-padding);
}
#jukebox #ondeck .ownqueue > .oqheader > sl-icon {
  color: var(--sl-color-primary-500);
  font-size: 24pt;
}
#jukebox #ondeck .ownqueue > .oqheader > div {
  flex: 1;
  text-align: center;
  font-size: 16pt;
  font-weight: 800;
}
#jukebox #queue {
  margin-top: var(--section-spacing);
}
#jukebox #queue .queue-container {
  font-size: 10pt;
  padding-bottom: var(--section-body-padding);
}
#jukebox #queue .queue-container .queue-entry {
  display: flex;
  padding: 0.25rem var(--section-body-padding);
}
#jukebox #queue .queue-container .queue-entry .queue-image {
  display: flex;
  align-items: center;
}
#jukebox #queue .queue-container .queue-entry .queue-image > img {
  height: 2.5rem;
  width: auto;
  margin: 0 0.3rem 0 0;
  border-radius: 50%;
}
#jukebox #queue .queue-container .queue-entry .queue-track {
  flex: 1;
  align-self: center;
}
#jukebox #queue .queue-container .queue-entry > .vote-action {
  display: flex;
  align-self: center;
}
#jukebox #queue .queue-container .queue-entry > .vote-action > sl-icon {
  font-size: var(--icon-size);
}
#jukebox #queue .queue-container .queue-entry:first-of-type {
  padding-top: 0.25rem;
}
#jukebox #queue .queue-container .queue-entry:last-of-type {
  padding-bottom: 0.25rem;
}
#jukebox #queue .queue-container .queue-entry:nth-child(even) {
  background-color: var(--sl-color-blue-50);
}
#jukebox #queue .queue-container .queue-entry:not(:last-of-type) {
  border-bottom: 1px dashed var(--sl-color-blue-200);
}
#jukebox #pool {
  margin-top: var(--section-spacing);
  margin-bottom: var(--section-spacing);
}
#jukebox #pool .pool-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: var(--section-body-padding) var(--section-body-padding) 0 var(--section-body-padding);
}
#jukebox #pool .pool-container .pool-entry {
  padding: 0.1rem;
  font-size: 10pt;
  display: flex;
  flex-direction: column;
  text-align: center;
}
#jukebox #pool .pool-container .pool-entry > .pool-image > img {
  border-radius: 50%;
  padding: 5px;
}
#jukebox #pool .pool-container .pool-entry > .pool-track {
  flex: 1;
}
#jukebox #pool .pool-container .pool-entry > .vote-action {
  text-align: center;
}
#jukebox #pool .pool-container .pool-entry > .vote-action > sl-icon {
  font-size: var(--icon-size);
  margin: 0.3rem 0 0 0;
}
#jukebox #showsearch {
  display: flex;
  margin-top: var(--section-spacing);
  padding: 0 var(--section-body-padding) var(--section-body-padding) var(--section-body-padding);
}
#jukebox #showsearch > sl-button {
  flex: 1;
}
#jukebox #vote-status {
  padding: var(--section-body-padding);
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  margin: var(--section-body-padding);
  border: solid #eee 2px;
}
#jukebox #vote-status > h3 {
  font-size: 12pt;
  margin-bottom: var(--section-body-padding);
}
#jukebox #vote-status > .vote-list {
  display: grid;
  grid-template-columns: var(--columns);
  grid-row-gap: 1.5rem;
}
#jukebox #vote-status > .vote-list sl-icon {
  font-size: var(--icon-size);
  color: var(--sl-color-gray-200);
}
#jukebox #vote-status > .vote-list > div {
  display: flex;
  justify-content: center;
  align-items: start;
}
#jukebox #vote-status > .vote-list > div > div {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 10pt;
}
#jukebox #vote-status > .vote-list > div .state-used {
  display: flex;
}
#jukebox #vote-status > .vote-list > div .state-used > div {
  margin-top: 0.2rem;
  display: flex;
  color: var(--sl-color-green-400);
  align-items: center;
}
#jukebox #vote-status > .vote-list > div .state-used > sl-icon {
  color: var(--sl-color-green-400);
}
#jukebox #vote-status > .vote-list > div .state-unused {
  display: flex;
}
#jukebox #vote-status > .vote-list > div .state-unused > div {
  margin-top: 0.2rem;
  display: flex;
  color: var(--sl-color-gray-200);
  align-items: center;
}
#jukebox #vote-status > .vote-list > div .state-quarantine > sl-icon {
  color: var(--sl-color-red-500);
}
#jukebox #vote-status > .vote-list > div .state-quarantine > sl-relative-time {
  margin-top: 0.2rem;
  display: flex;
  color: var(--sl-color-red-500);
  align-items: center;
}
#jukebox #vote-status > .vote-list > .used .state-unused {
  display: none;
}
#jukebox #vote-status > .vote-list > .used .state-quarantine {
  display: none;
}
#jukebox #vote-status > .vote-list > .unused .state-used {
  display: none;
}
#jukebox #vote-status > .vote-list > .unused .state-quarantine {
  display: none;
}
#jukebox #vote-status > .vote-list > .quarantine .state-used {
  display: none;
}
#jukebox #vote-status > .vote-list > .quarantine .state-unused {
  display: none;
}

/*
 * Add / Search CSS
 */
#addsearch {
  font-size: 14pt;
  z-index: 10;
  height: calc(100% - 2.5rem);
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
}
#addsearch sl-tab[active]::part(base) {
  color: hsl(181.18, 98%, 39.4%);
}
#addsearch h2, #addsearch h4 {
  text-align: center;
}
#addsearch h4 {
  margin-top: var(--section-body-padding);
  background-color: var(--sl-color-gray-100);
}
#addsearch div.search {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#addsearch div.search sl-tab-panel {
  padding: 0 var(--section-body-padding);
}
#addsearch div.search sl-tab-panel[name=title] sl-input {
  margin-top: var(--section-body-padding);
}
#addsearch div.search sl-tab-panel[name=title] sl-icon {
  color: var(--sl-color-gray-200);
}
#addsearch div.search sl-tab-panel[name=title] div.search-track-title {
  text-align: right;
}
#addsearch div.search sl-tab-panel[name=title] div.search-track-title sl-button {
  margin-top: var(--section-body-padding);
}
#addsearch div.search sl-tab-panel[name=title] #search_results_track_container {
  margin-bottom: 2.6rem;
}
#addsearch div.search sl-tab-panel[name=title] #search_results_track_container .search-result-track:nth-child(even) {
  background-color: var(--sl-color-blue-50);
}
#addsearch div.search sl-tab-panel[name=title] #search_results_track_container .search-result-track:not(:last-of-type) {
  border-bottom: 1px dashed var(--sl-color-blue-200);
}
#addsearch div.search sl-tab-panel[name=title] #search_results_track_container .search-result-track {
  display: flex;
  padding: 0.25rem var(--section-body-padding);
}
#addsearch div.search sl-tab-panel[name=title] #search_results_track_container .search-result-track .track-image {
  display: flex;
  align-items: center;
}
#addsearch div.search sl-tab-panel[name=title] #search_results_track_container .search-result-track .track-image > img {
  height: 2.5rem;
  width: auto;
  margin: 0 0.3rem 0 0;
  border-radius: 50%;
}
#addsearch div.search sl-tab-panel[name=title] #search_results_track_container .search-result-track .result-track {
  flex: 1;
  align-self: center;
}
#addsearch div.search sl-tab-panel[name=title] #search_results_track_container .search-result-track .result-track > div[jb-name=artist] {
  font-weight: 800;
}
#addsearch div.search sl-tab-panel[name=title] #search_results_track_container .search-result-track .result-track > div[jb-name=title] {
  display: flex;
}
#addsearch div.search sl-tab-panel[name=title] #search_results_track_container .search-result-track .result-track > div[jb-name=title] > div {
  color: var(--sl-color-gray-400);
  margin-left: 0.25rem;
}
#addsearch div.search sl-tab-panel[name=title] #search_results_track_container .search-result-track > .vote-action {
  display: flex;
  align-self: center;
}
#addsearch div.search sl-tab-panel[name=title] #search_results_track_container .search-result-track > .vote-action > sl-icon {
  font-size: var(--icon-size);
}
#addsearch div.search sl-tab-panel[name=artist] sl-input {
  margin-top: var(--section-body-padding);
}
#addsearch div.search sl-tab-panel[name=artist] sl-icon {
  color: var(--sl-color-gray-200);
}
#addsearch div.search sl-tab-panel[name=artist] div.search-artist-name {
  text-align: right;
}
#addsearch div.search sl-tab-panel[name=artist] div.search-artist-name sl-button {
  margin-top: var(--section-body-padding);
}
#addsearch div.search sl-tab-panel[name=artist] #search_results_artist_container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: var(--section-body-padding) var(--section-body-padding) 0 var(--section-body-padding);
}
#addsearch div.search sl-tab-panel[name=artist] #search_results_artist_container > .search-result-artist {
  display: flex;
  flex-direction: column;
  padding: 0.1rem;
  font-size: 12pt;
}
#addsearch div.search sl-tab-panel[name=artist] #search_results_artist_container > .search-result-artist > .artist-image {
  flex: 1;
  align-content: center;
}
#addsearch div.search sl-tab-panel[name=artist] #search_results_artist_container > .search-result-artist > .artist-image > img {
  border-radius: 50%;
}
#addsearch div.search sl-tab-panel[name=artist] #search_results_artist_container > .search-result-artist > .result-artist {
  text-align: center;
}
#addsearch div.search sl-tab-panel[name=artist] #search_results_artist_tracks_container {
  margin-bottom: 2.7rem;
}
#addsearch div.search sl-tab-panel[name=artist] #search_results_artist_tracks_container .search-result-track:nth-child(even) {
  background-color: var(--sl-color-blue-50);
}
#addsearch div.search sl-tab-panel[name=artist] #search_results_artist_tracks_container .search-result-track:not(:last-of-type) {
  border-bottom: 1px dashed var(--sl-color-blue-200);
}
#addsearch div.search sl-tab-panel[name=artist] #search_results_artist_tracks_container .search-result-track {
  display: flex;
  padding: 0.25rem var(--section-body-padding);
}
#addsearch div.search sl-tab-panel[name=artist] #search_results_artist_tracks_container .search-result-track .track-image {
  display: flex;
  align-items: center;
}
#addsearch div.search sl-tab-panel[name=artist] #search_results_artist_tracks_container .search-result-track .track-image > img {
  height: 2.5rem;
  width: auto;
  margin: 0 0.3rem 0 0;
  border-radius: 50%;
}
#addsearch div.search sl-tab-panel[name=artist] #search_results_artist_tracks_container .search-result-track .result-track {
  flex: 1;
  align-self: center;
}
#addsearch div.search sl-tab-panel[name=artist] #search_results_artist_tracks_container .search-result-track .result-track > div[jb-name=artist] {
  font-weight: 800;
}
#addsearch div.search sl-tab-panel[name=artist] #search_results_artist_tracks_container .search-result-track .result-track > div[jb-name=title] {
  display: flex;
}
#addsearch div.search sl-tab-panel[name=artist] #search_results_artist_tracks_container .search-result-track .result-track > div[jb-name=title] > div {
  color: var(--sl-color-gray-400);
  margin-left: 0.25rem;
}
#addsearch div.search sl-tab-panel[name=artist] #search_results_artist_tracks_container .search-result-track > .vote-action {
  display: flex;
  align-self: center;
}
#addsearch div.search sl-tab-panel[name=artist] #search_results_artist_tracks_container .search-result-track > .vote-action > sl-icon {
  font-size: var(--icon-size);
}
#addsearch div.search sl-tab-panel[name=sid] sl-textarea {
  margin-top: var(--section-body-padding);
}
#addsearch div.search sl-tab-panel[name=sid] sl-textarea::part(textarea) {
  font-size: 14pt;
}
#addsearch div.search sl-tab-panel[name=sid] sl-textarea::part(textarea)::placeholder {
  color: var(--sl-color-gray-300);
}
#addsearch div.search sl-tab-panel[name=sid] div[jb-action=add-track-sid] {
  text-align: right;
}
#addsearch div.search sl-tab-panel[name=sid] div[jb-action=add-track-sid] sl-button {
  margin-top: var(--section-body-padding);
}
#addsearch div.search sl-tab-panel[name=sid] div.spotify-link {
  display: flex;
  margin-top: 1rem;
  text-align: center;
}
#addsearch div.search sl-tab-panel[name=sid] div.spotify-link sl-button {
  flex: 1;
}
#addsearch div.return {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
#addsearch div.return sl-button {
  flex: 1;
  margin: var(--section-body-padding);
}

/*
 * Profile CSS
 */
#profile {
  font-size: 14pt;
  z-index: 5;
  height: calc(100% - 2.5rem);
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
}
#profile h2 {
  text-align: center;
  font-family: var(--fonts), sans-serif;
  background-color: var(--sl-color-gray-100);
}
#profile div.profile-container {
  padding: 0.5rem 0.5rem 0 0.5rem;
  margin-bottom: 2.6rem;
}
#profile div.profile-container sl-button {
  margin-top: 0.25rem;
  float: right;
}
#profile > div.profilesettings {
  display: flex;
  flex-direction: column;
  margin: 0 0.5rem;
}
#profile > div.profilesettings > sl-input {
  flex: 1;
  margin: 0.25rem 0;
}
#profile > div.profilesettings > sl-input::part(form-control-label) {
  font-size: 12pt;
}
#profile div.return {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
#profile div.return sl-button {
  flex: 1;
  margin: var(--section-body-padding);
}

/*
 * History CSS
 */
#history {
  font-size: 14pt;
  z-index: 5;
  height: calc(100% - 2.5rem);
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
}
#history h2 {
  text-align: center;
  font-family: var(--fonts), sans-serif;
  background-color: var(--sl-color-gray-100);
}
#history div.history-container {
  margin-bottom: 2.6rem;
}
#history div.history-container .queue-history-entry:nth-child(even) {
  background-color: var(--sl-color-blue-50);
}
#history div.history-container .queue-history-entry:not(:last-of-type) {
  border-bottom: 1px dashed var(--sl-color-blue-200);
}
#history div.history-container .queue-history-entry {
  display: flex;
  padding: 0.25rem var(--section-body-padding);
}
#history div.history-container .queue-history-entry .track-image {
  display: flex;
  align-items: center;
}
#history div.history-container .queue-history-entry .track-image > img {
  height: 2.5rem;
  width: auto;
  margin: 0 0.3rem 0 0;
}
#history div.history-container .queue-history-entry .result-history {
  flex: 1;
  align-self: center;
}
#history div.history-container .queue-history-entry .result-history > div[jb-name=artist] {
  font-weight: 800;
}
#history div.history-container .queue-history-entry .result-history > div[jb-name=title] {
  display: flex;
}
#history div.history-container .queue-history-entry .result-history > div[jb-name=voters] {
  display: flex;
  font-size: 12pt;
}
#history div.history-container .queue-history-entry .result-history > div[jb-name=voters] > div[jb-name=voter-header] {
  margin-right: 0.2rem;
}
#history div.history-container .queue-history-entry .result-history > div[jb-name=start] {
  padding-top: 2px;
  text-align: right;
  font-size: 9pt;
  color: var(--sl-color-gray-400);
}
#history div.return {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
#history div.return sl-button {
  flex: 1;
  margin: var(--section-body-padding);
}

/*
 * Gettoken CSS
 */
#gettoken {
  z-index: 15;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 2.5rem);
  padding: 0.5rem;
}
#gettoken p.header {
  margin-bottom: 0.5rem;
}
#gettoken > div {
  display: flex;
  flex-direction: column;
  width: max(500px, 30vw);
}
#gettoken > div sl-input:not(:first-of-type) {
  margin-top: 0.25rem;
}
#gettoken > div sl-input > sl-icon {
  margin-inline-start: var(--sl-input-spacing-small);
}
#gettoken > div sl-button {
  margin-top: 0.25rem;
  float: right;
}

/*
 * Admin
 */
#admin {
  font-size: 14pt;
  z-index: 5;
  height: calc(100% - 2.5rem);
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
}
#admin h2 {
  text-align: center;
}
#admin h2 {
  background-color: var(--sl-color-gray-100);
}
#admin > div.admbuttons {
  display: flex;
  flex-direction: column;
  margin: 0 0.5rem;
}
#admin > div.admbuttons > sl-button {
  flex: 1;
  margin: 0.25rem 0;
}
#admin > div.admsettings {
  display: flex;
  flex-direction: column;
  margin: 0 0.5rem;
}
#admin > div.admsettings > sl-input {
  flex: 1;
  margin: 0.25rem 0;
}
#admin > div.admsettings > sl-input::part(form-control-label) {
  font-size: 12pt;
}
#admin > div.admsettings sl-select {
  margin: 0.25rem 0;
}
#admin > div.admsettings sl-select::part(form-control-label) {
  font-size: 12pt;
}
#admin > div.admban {
  display: flex;
  flex-direction: column;
  margin: 0 0.5rem;
  padding-bottom: 4rem;
}
#admin > div.admban > sl-button {
  flex: 1;
  margin: 0.25rem 0;
}
#admin div.return {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
#admin div.return sl-button {
  flex: 1;
  margin: var(--section-body-padding);
}

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--fonts), sans-serif;
  font-weight: 400;
  font-size: 16pt;
}

.hidden {
  display: none !important;
}