:root {
  --ribbon-width: 160px;
}

html, body {
  background-color: #09101d;
  color: #bbb;

  margin: 0;
  padding: 0;
  height: 100%;
}

div {
  /* border: 1px dashed white; */

  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

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

  border-left-color: #545454;
  border-top-color: #545454;
  border-right-color: #3a3a3a;
  border-bottom-color: #3A3A3A;
}

input[type=text] {
  background-color: #28374a;
  color: white;

  border: 1px solid black;

  border-left-color: black;
  border-top-color: black;
  border-right-color:#545454;
  border-bottom-color: #545454;
}

input[type=checkbox] {
  appearance: none;
  background-color: #2e2e2e;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 5px;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;

  border-left-color: #b9b9b9;
  border-top-color: #b9b9b9;
  border-right-color:#5e5e5e;
  border-bottom-color: #5e5e5e;
}

input[type="checkbox"]:checked {
  background-color: #cc0000;
}

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

thead {
  background-repeat: repeat-x;
  background-image: url(../img/table-header-gradient.png);
}

th {
  font-weight: bold;
  padding: 2px 2px 2px 14px;
  border: solid #1c2c1a;
  border-width: 0 1px 0 0;
  cursor: pointer;
}

td {
  padding: 1px 1px 1px 0.5em;
  border: solid black;
  border-width: 0 1px 1px 0;
  text-align: left;
}

#queue-table tr td:first-of-type {
  padding-left: 16px;
}

#queue table tr.playing td:first-of-type::before {
  content: '\2BC8';
}

#queue table tr:not(.playing) td:first-of-type {
  padding-left: 2em; /* TODO: do proper spacing */
}

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

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

#queue table tr:nth-child(odd).playing td,
#queue table tr:nth-child(even).playing td {
  background-color: #490b00;
}

table tr:hover td {
  background-color: #354158 !important; /* TODO: remove !important */
}

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

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

  padding: 5px;
  background-repeat: repeat-x;
  background-image: url(../img/top-controls-bg.png);
}

#controls-top div {
  border-right: 1px solid black;
}

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

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

#playback-controls div:first-child {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#playback-controls div button {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  height: calc(var(--ribbon-width) / 4 - 8px);
  width: calc(var(--ribbon-width) / 4 - 8px);
}

#progress {
  margin-left: 10px;
  width: 90%;
}

#volume {
  margin-left: 10px;
  width: 90%;
}

#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: 36px;
  padding-left: 8px;
}

#xfade {
  width: 20px;
}

#queue {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  border-bottom: 4px ridge #3a506b;
}

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

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

  width: 20%; /* frickel? */
  border-right: 4px ridge #3a506b;
}

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

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

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