.playerContainer {
    position: fixed;
    width: var(--column1);
    left: var(--dm);
    top: calc(var(--m) * 3 + var(--size88) + var(--size19) + var(--size19) + 1px);
    z-index: 5;
}

.appPlayer {
    background-color: var(--color2);
    border: 1px solid var(--color1);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: var(--size12);
    pointer-events: all;
    padding-left: calc(var(--m) * 1);
    padding-right: calc(var(--m) * 1);
    padding-top: calc(var(--m) * 1);
    padding-bottom: calc(var(--m) * 1);
    height: 6rem;
}

.appPlayer>div {
    width: 25%;
    align-self: center;
    text-align: center;
}

.appPlayer>div:nth-child(3n-1) {
    width: 50%;
}

.appPlayer>.trackName {
    width: 75%;
}

.appPlayer .control {
    font-size: 2em;
    cursor: pointer;
}

.appPlayer .playPause {
    text-align: center;
}

.appPlayer .playPause .play {
    display: block;
}

.appPlayer .playPause .pause {
    display: none;
}

.appPlayer .playPause.isPlaying .play {
    display: none;
}

.appPlayer .playPause.isPlaying .pause {
    display: block;
}

.appPlayer .volume .on {
    display: block;
}

.appPlayer .volume .off {
    display: none;
}

.appPlayer .volume.isOff .on {
    display: none;
}

.appPlayer .volume.isOff .off {
    display: block;
}

.appPlayer .time {
    text-align: center;
}

.appPlayer .seek {
    position: relative;
    text-align: center;
    flex-grow: 1;
    height: var(--m);
    cursor: grab;
}

.appPlayer .seek::after {
    content: "";
    border-bottom: 1px solid var(--color1);
    width: 100%;
    display: block;
    position: absolute;
    top: 50%;
}

.appPlayer .head {
    position: absolute;
    background-color: var(--color1);
    width: calc(var(--m) + 1px);
    height: calc(var(--m) + 1px);
    border-radius: var(--m);
    z-index: 1;
}


.appPlayer .playPause:hover,
.appPlayer .previous:hover,
.appPlayer .next:hover,
.appPlayer .volume:hover {
    color: var(--color4) !important;
}

/* .appPlayer .seek:hover::after, .appPlayer .seek:hover .head  {
    background-color: var(--color4) !important;
    border-bottom-color: var(--color4) !important;
} */



@media screen and (orientation: portrait) {
    .playerContainer {
        left: calc(-1 * var(--column8));
        transition: left var(--anime);
        width: var(--column8);
        top: 50vh;
        transform: translateY(-50%);
    }

    /* .playerContainer:hover {
    } */
}