body {
  padding: 0;
  margin: 0;
  height:100%;
  font-family: verdana,arial,sans-serif,helvetica;
}
myspace-search {
  display: flex;
  padding: .5em;
  width: calc(100% - 1em);
  height: calc(100% - 1em);
  flex-direction: column;
}
.myspace-search-input {
  width: 100%;
  margin: .5em 0;
  font-size: 1.2em;
}
myspace-search h1 {
  font-size: 1em;
  margin: 0;
}
myspace-search h1.resultsummary {
  font-weight: normal;
  background: #666;
  color: white;
  padding: .4em;
}
myspace-search-list {
  display: block;
  overflow: auto;
  flex: 1;
}
myspace-search[loading] myspace-search-list {
  display: none;
}
myspace-search-entry {
  display: block;
  border-bottom: 1px dashed #999;
  padding: 1px;
}
myspace-search-entry .play,
myspace-search-entry .play:visited {
  color: #0645ad;
  display: block;
  margin: .2em;
}
myspace-search-entry .download {
  color: #666;
  display: inline-block;
  text-decoration: none;
  margin: .5em .2em;
  font-size: .8em;
}
myspace-search-entry:hover {
  background: #d5e8fb;
}
myspace-search-entry[selected] {
  background: #6699cc;
}
myspace-player {
  border: 1px solid black;
  background: #ccc;
  padding: .5em;
}
myspace-player {
  display: grid;
  grid-template-columns: 50% 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(175,175,175,1) 83%,rgba(255,255,255,1) 100%);
  align-items: center;
}
myspace-player button {
  width: 40px;
  height: 40px;
  display: inline-block;
  vertical-align: top;
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(175,175,175,1) 83%,rgba(255,255,255,1) 100%);
  border-radius: 8px;
  border: 2px solid #999;
  font-size: .5em;
  text-align: center;
  margin: 0 .2em;
  color: #666;
  text-shadow: 1px -1px 1px black;
}
myspace-player myspace-player-info {
  display: inline-block;
  border: 1px inset #ccc;
  border-radius: 4px;
  background: #222;
  height: 100%;
  min-height: 50px;
  width: 100%;
  vertical-align: top;
  color: white;
  font-family: sans-serif;
  position: relative;
}
myspace-player-info h1 {
  font-size: .75em;
  font-weight: normal;
  margin: .5em .5em 0 .5em;
}
myspace-player-info h2 {
  font-size: .75em;
  font-weight: normal;
  margin: .2em .5em 0 .5em;
}
myspace-player-volume {
  padding-right: 20px;
}
myspace-player-volume .fa-volume-up {
  padding: .2em;
  font-size: 1.2em;
  color: #666;
}
myspace-player-volume,
myspace-player-seekbar {
  display: flex;
}
myspace-player-seekbar input {
  width: 2.6em;
  background: transparent;
  border: none;
  color: #666;
  font-weight: bold;
}
myspace-player-seekbar input[type="range"],
myspace-player-volume input[type="range"] {
  flex-grow: 1;
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */

}
myspace-player-volume input[type=range]::-webkit-slider-runnable-track,
myspace-player-seekbar input[type=range]::-webkit-slider-runnable-track {
  background: black;
  height: 5px;
  border: 1px inset #ccc;
}
myspace-player-volume input[type=range]::-moz-range-track,
myspace-player-seekbar input[type=range]::-moz-range-track {
  background: black;
  height: 5px;
  border: 1px inset #ccc;
}
myspace-player-volume input[type=range]::-webkit-slider-thumb,
myspace-player-seekbar input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 12px;
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(175,175,175,1) 83%,rgba(255,255,255,1) 100%);
  border: 1px solid black;
  border-radius: 3px;
  margin-top: -4px;
}
myspace-player-volume input[type=range]::-moz-range-thumb,
myspace-player-seekbar input[type=range]::-moz-range-thumb {
  width: 24px;
  height: 12px;
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(175,175,175,1) 83%,rgba(255,255,255,1) 100%);
  border: 1px solid black;
  border-radius: 3px;
  margin-top: -4px;
}
myspace-player-volume input[type=range]:focus,
myspace-player-seekbar input[type=range]:focus {
  outline: none;
}
myspace-player-controls {
  text-align: center;
}

.player_spectrum {
  width:90px;
  height: 50px;
  max-width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  display: none;
}
myspace-search .status {
  display: block;
  text-align: center;
  color: #6699cc;
  font-family: sans-serif;
  margin-top: 2em;
  margin-bottom: 0;
}
myspace-player[status="playing"] .player_spectrum {
  display: block;
}
myspace-player button:hover {
  cursor: pointer;
  color: #888;
}
myspace-player button:focus {
  outline: none;
}
myspace-player[status="stopped"] button[name="stop"],
myspace-player[status="paused"] button[name="pause"],
myspace-player[status="playing"] button[name="play"] {
  color: green;
}
myspace-search-spinner,
myspace-search-spinner:after {
  display: block;
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
myspace-search-spinner {
  margin: 20px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(102, 153, 204, 0.2);
  border-right: 1.1em solid rgba(102, 153, 204, 0.2);
  border-bottom: 1.1em solid rgba(102, 153, 204, 0.2);
  border-left: 1.1em solid #6699cc;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}