html, body {
  background-color: #09101d;
  color: #bbb;
  height: 99%;
}

div {
  border: 1px dashed white;
}

button {
  background-color: #28374a;
  color: #bbb;
}

input {
  background-color: #28374a;
  color: white;
}

table {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0pt;
}


/* This is probably a better way to generate alternate coloring on tables. However,
   background color for selected track is overwritten this way. Therefore the "old
   school" way of alternate coloring is used for now.

table tr:nth-child(odd) td {
  background:#1e1f1a;
}

table tr:nth-child(even) td {
  background:#171812;
}
*/

table tr.odd {
  background-color: #1e1f1a;
}

table tr.even {
  background-color: #171812;
}

#flexbox-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#controls-top {
  display: flex;
  flex-direction: row;
}

#top-left-controls {
  display: flex;
  flex-direction: column;
  width: 100px;
}

#top-left-controls button {
  text-align: left;
}

#playback-controls {
  display: flex;
  flex-direction: column;
  width: 160px;
}

#queue-volume-controls {
  width: 150px;
}

#queue-controls {
  display: flex;
  flex-direction: row;
}

#queue-xfade-control {
  display: flex;
  flex-direction: column;
  text-align: center;
}

#queue-xfade-buttons {
  display: flex;
  flex-direction: row;
}

#top-logo {
  display: flex;
  flex-direction: column;
  text-align: center;
  color: white;
  width: 50px;
}

#top-logo-container {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}

#sanic-logo {
  width: 50px;
}

#xfade {
  width: 20px;
}

#queue {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

#controls_bottom {
  display: flex;
  flex-direction: row;
  flex-grow: 2;
}

#playlist_controls {
  background-color: #171812;;
  /* flex-grow: 1; */

  width: 20%; /* frickel? */
}

#playlist_tracklist {
  display: flex;
  flex-direction: column;

  width: 80%; /* frickel? */
}

#footer {
  background-color: #041936;
  text-align: right;
}