body {
    background-color: #000000;
    color: #ffd700;
    margin: 0;
}

a, a:visited {
    color: #a8ff00;
    text-decoration: none;
    transition: 0.2s;
}

a:hover {
    color: #669900;
    text-decoration: none;
}

.content {
    margin: auto;
    max-width: 60em;
}

.topbar {
    background: #000000;
    display: grid;
    grid-template-columns: max-content;
    height: 1.2cm;
}

#logo {
    grid-column: 1;
    grid-row: 1 / 3;
}

#logo > img {
    height: 1.2cm;
    width: 1.2cm;
}

.topbar-length {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
}

.reserved-filter {
    flex: 1;
    display: none;
}

#player-time {
    flex-shrink: 0;
    margin: 0 0.1cm;
}

#player-seek, progress {
    flex: 1;
    height: 0.4cm;
}

#player-duration {
    flex-shrink: 0;
    margin: 0 0.1cm;
}

.topbar-controls {
    display: inline-flex;
    grid-column: 2;
    grid-row: 2;
}

#player-play {
    background:url("/img/im-amp.png") no-repeat;
    background-size: cover;
    flex-shrink: 0;
}

#player-play:hover {
    background:url("/img/im-amp-hover.png") no-repeat;
    background-size: cover;
}

#player-play.playing, #player-play.playing:hover {
    background:url("/img/im-amp-pause.png") no-repeat;
    background-size: cover;
}

#player-next {
    background:url("/img/im-amp-next.png") no-repeat;
    background-size: cover;
    flex-shrink: 0;
}

#player-previous {
    background:url("/img/im-amp-previous.png") no-repeat;
    background-size: cover;
    flex-shrink: 0;
}

#player-queue {
    background:url("/img/im-amp-queue.png") no-repeat;
    background-size: cover;
    flex-shrink: 0;
}

#player-shuffle {
    background:url("/img/im-amp-order.png") no-repeat;
    background-size: cover;
    flex-shrink: 0;
}
#player-shuffle.shuffle {
    background:url("/img/im-amp-shuffle.png") no-repeat;
    background-size: cover;
}

#player-volume-div {
    display: inline-block;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

#player-settings {
    background:url("/img/im-amp-settings.png") no-repeat;
    background-size: cover;
    flex-shrink: 0;
}

.nodisplay {
    display: none;
}

.opaque {
    visibility: hidden;
}

.topbar input{
    cursor: pointer;
}

.topbar input[type=button]{
    height: 0.8cm;
    width: 0.8cm;
    border: none;
}

input[type=range] {
    background: transparent;
}

input[type=range]::-moz-range-thumb {
    background: #ffd700;
    border: none;
}
input[type=range]::-ms-thumb {
    background: #ffd700;
}
input[type=range]::-webkit-slider-thumb {
    background: #ffd700;
}

input[type=range]::-moz-range-progress {
    background: #a8ff00;
}
input[type=range]::-ms-fill-upper {
    background: #a8ff00;
}

input[type=range]::-moz-range-track {
    background: #363636;
}
input[type=range]::-ms-track {
    background: #363636;
}
input[type=range]::-webkit-slider-runnable-track {
    background: #363636;
}

#player-volume.volume-3 {
    background:url("/img/im-amp-vol-3.png") no-repeat;
    background-size: cover;
}
#player-volume.volume-2 {
    background:url("/img/im-amp-vol-2.png") no-repeat;
    background-size: cover;
}
#player-volume.volume-1 {
    background:url("/img/im-amp-vol-1.png") no-repeat;
    background-size: cover;
}
#player-volume.muted {
    background:url("/img/im-amp-vol-mute.png") no-repeat;
    background-size: cover;
}

#player-volume-seek {
    display: none;
    position: absolute;
    margin: 0;
    height: initial;
    padding: 0 0.3em;
}
#player-volume-div:hover #player-volume-seek {
    display: block;
}

#playlist {
    bottom: 0;
    margin: auto;
    max-width: inherit;
    overflow-y: scroll;
    position: absolute;
    top: 1.3cm;
    width: 100%;
}

#loader {
    width: 20%;
    text-align: center;
    padding: 1em;
}

pre {
    white-space: pre-wrap;
    margin: 0;
}

pre > code {
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

pre > code:nth-child(even) {
    background: #121212;
}

pre > code:hover, pre > code.marked {
    background: #363636;
}

.queued::after {
    color: #a8ff00;
    content: "(Q)";
    float: right;
    position: absolute;
    right: 0;
}

input.visible {
    visibility: visible !important;
  }

tbody {
    width: 100%;
    vertical-align: baseline;
}

.playing-item {
    color: #a8ff00;
    font-weight: bold;
}

.playing-item::before {
    color: #a8ff00;
    content: "► ";
    float: left;
}
.playing-item::after {
    color: #a8ff00;
    content: " ◄";
    float: right;
}

.filterbar {
    background: #000000;
    display: flex;
    flex: 1;
    margin: auto 0.2cm;
}

input[type=search] {
    background: #000000;
    border-radius: 1em;
    color: #a8ff00;
    flex-grow: 1;
    padding-left: 1em;
}

#filter-count {
    flex-shrink: 0;
    margin: auto 0.2cm;
}

@media screen and (max-width: 40em) {
    .filterbar {
        bottom: 0;
        left: 0;
        margin: 0;
        position: fixed;
        right: 0;
        width: 100%;
        z-index: 1;
    }

    .reserved-filter {
        display: initial;
    }
}