/* StreamList */
.stream-list > div {
  padding : 5px;
  border-bottom: 1px solid lightgray;
}
.stream-list > div:last-child {
  border: 0;
}
.stream-list > div div {
}
.stream-list .stream-name {
  font-size: xx-large;
  margin: 5px;
}
.stream-list .details {
  font-size: x-large;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
.stream-list .details div:nth-child(3) {
  display: flex;
  flex-flow: row wrap;
}
.stream-list .details .track-name-row {
  font-size: xx-large;
}

.stream-list .info div {
  margin-left: 5px;
}
.stream-list .stream-current div {
  margin: 3px;
}
.stream-list .stream-current.item div {
  display: flex;
  flex-flow: row wrap;
  justify-content: left;
}
.stream-list .stream-current .details {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-content: center;
}
.stream-list .info {
  font-size: medium;
  margin: 5px;
}

/* Stream */

.stream {
  display: flex;
  flex-flow: column wrap;
}
.stream .details {
  margin: 5px;
  display: flex;
  flex-flow: row wrap;
}
.stream .details > * {
}
.stream .details .stream-name {
  font-size: xx-large;
  flex: 3;
}
.stream .details > div {
  margin: 3px;
}
.stream .stream-listening div {
  margin: 3px;
}
.stream .stream-listening > div {
}
.stream .client-state {
  flex: 4;
  border-left: 1px solid darkgray;
  display: flex;
  align-items: center;
  padding-left: 15px;
}
.stream .client-controls {
}
.stream button {
  min-width: 100px;
  min-height: 100px;
  font-size: large;
}
.stream .playlist-controls {
  margin: 5px;
}
.stream-playlist div {
  margin: 3px;
  font-size: medium;
}
.stream-playlist .item {
  border-bottom: 1px solid darkgray;
}
.stream-playlist .item.recent > div {
  display: flex;
  flex-flow: row wrap;
  justify-content: left;
}
.stream-playlist .item.playlist > div {
  display: flex;
  flex-flow: row wrap;
  justify-content: left;
}
.stream-playlist .item > div.playback {
  justify-self: center;
}
.stream-playlist .item:last-child {
  border-bottom: 0;
}
.stream-playlist .details {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}
.stream-playlist .details div:nth-child(3) {
  display: flex;
  flex-flow: row wrap;
}
.stream-playlist .details .track-name {
}
.stream-playlist .header {
  display: flex;
  justify-content: center;
}
.stream-playlist .footer {
  display: flex;
  justify-content: center;
}

.stream-playlist .stream-current .details {
  font-size: large;
  flex-flow: column nowrap;
}
.stream-playlist .stream-current .details .track-name-row > div {
  font-size: xx-large;
  margin: 10px;
}

.stream .stream-current {
/*  background-color: steelblue; */
}
.stream .stream-current.item {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
}
.stream .stream-current.item div.main {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.stream .stream-current.item > div {
}

/* used in Stream and StreamList */

.stream-track-list .details > * {
  padding-left: 10px;
  padding-right: 10px;
}
.stream-track-list .details .track-num {
  padding-right: 1px;
/*
  font-family: monospace;
  font-size: x-large;
*/
}
.stream-track-list .details .track-name {
  padding-left: 1px;
}

.stream-track-list .track-name-row {
  display: flex;
  flex-flow: row wrap;
}

/*
.stream .client-controls {
  margin: 5px;
}
*/