.marquee {
    display: inline-block;
    text-indent: 0;
}

.marquee:hover {
    animation-play-state: paused;
}

.cover {
    clear: both;
    display: block;
    height: 16em;
    margin: auto;
    max-width: 80%;
    object-fit: cover;
    overflow: hidden;
    width: 16em;
}

.level {
    display: block;
    height: 1em;
    margin: 5px auto 0;
    width: 2.5em;
}

.cover.android {
    margin: 8px auto; /* Not so good! */
}

#lyricOpen {
    float: right;
    fill: rgba(0, 0, 0, 0.26);
    position: relative;
    top: 10em;
    width: 24px;
}

#lyricBack {
    float: left;
    fill: rgba(0, 0, 0, 0.26);
    position: relative;
    top: 10em;
    width: 24px;
}

#lyricText {
    clear: both;
    display: inline-block;
    height: 17em;
    list-style-type: none;
    overflow: hidden;
    margin: auto;
    padding: 0;
    text-align: center;
    white-space: nowrap;
    width: 100%;
}

@-webkit-keyframes color-change {
    0% {}

    100% {
        color: #00bcd4;
        font-weight: bold;
        text-shadow: 1px 1px rgba(0, 0, 0, 0.26);
    }
}

@-moz-keyframes color-change {
    0% {}

    100% {
        color: #00bcd4;
        font-weight: bold;
        text-shadow: 1px 1px rgba(0, 0, 0, 0.26);
    }
}

@-ms-keyframes color-change {
    0% {}

    100% {
        color: #00bcd4;
        font-weight: bold;
        text-shadow: 1px 1px rgba(0, 0, 0, 0.26);
    }
}

@-o-keyframes color-change {
    0% {}

    100% {
        color: #00bcd4;
        font-weight: bold;
        text-shadow: 1px 1px rgba(0, 0, 0, 0.26);
    }
}

@keyframes color-change {
    0% {}

    100% {
        color: #00bcd4;
        font-weight: bold;
        text-shadow: 1px 1px rgba(0, 0, 0, 0.26);
    }
}

@-webkit-keyframes color-origin {
    0% {}

    100% {
        color: black;
        font-weight: normal;
        text-shadow: none;
    }
}

@-moz-keyframes color-origin {
    0% {}

    100% {
        color: black;
        font-weight: normal;
        text-shadow: none;
    }
}

@-ms-keyframes color-origin {
    0% {}

    100% {
        color: black;
        font-weight: normal;
        text-shadow: none;
    }
}

@-o-keyframes color-origin {
    0% {}

    100% {
        color: black;
        font-weight: normal;
        text-shadow: none;
    }
}

@keyframes color-origin {
    0% {}

    100% {
        color: black;
        font-weight: normal;
        text-shadow: none;
    }
}

.duration {
    margin-top: 0.5em;
}

.durationTime {
    color: #8f8e94;
    font-size: small;
    margin: 8px 8px 0;
}

.songInfo {
    margin-top: 12px;
    text-align: center;
}

.songTitle {
    font-size: large;
    font-weight: bolder;
    height: 24px;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}

.songArtist {
    color: #00bcd4;
    font-size: large;
    height: 24px;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}

.textOverflow {
    display: block;
    overflow: hidden;
    position: absolute;
}

.control {
    display: table;
    max-width: 100%;
    margin: 12px auto 0;
}

.repeat {
    fill: rgba(0, 0, 0, 0.26);
    height: 18px;
    margin: 0 9px 14px 0;
    vertical-align: super;
    width: 18px;
}

.repeatHover {
    fill: #00bcd4;
}

.prev {
    height: 32px;
    margin: 0 16px 8px;
    padding: 0 4px;
    vertical-align: super;
    width: 32px;
}

.play {
    height: 48px;
    margin: 0 8px;
    vertical-align: super;
    width: 48px;
}

.next {
    height: 32px;
    margin: 0 16px 8px;
    padding: 0 4px;
    vertical-align: super;
    width: 32px;
}

.random {
    fill: rgba(0, 0, 0, 0.26);
    height: 18px;
    margin: 0 0 15px 10px;
    vertical-align: super;
    width: 18px;
}

.randomHover {
    fill: #00bcd4;
}