div.menu {
    padding-bottom: 7.25vh;
}

@media screen and (max-height: 634.5px) {
    div.menu {
        padding-bottom: 55px;
    }
}

@media screen and (max-height: 592.5px) and (max-width: 560px) {
    div.menu {
        padding-bottom: 97px;
    }
}

div#bottom_bar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    height: 7.25vmin;
    min-height: 46px;
    width: 100%;
    z-index: 1004;
    background: white;
    bottom: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    /*safe area*/
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

img.previous {
    height: 2vh;
    min-height: 12.69px;
    cursor: pointer;
    vertical-align: middle;
}

img.play_and_pause {
    height: 3.55vmin;
    min-height: 22.524px;
    width: 3.25vmin;
    min-width: 22.524px;
    margin-left: 2vmax;
    cursor: pointer;
    vertical-align: middle;
}

img.next {
    height: 2vh;
    min-height: 12.69px;
    margin-left: 2vw;
    cursor: pointer;
    vertical-align: middle;
}

img.play_mode {
    height: 4.8vh;
    min-height: 30.455px;
    margin-left: 2vw;
    cursor: pointer;
    vertical-align: middle;
}

img.bottom_bar_CD {
    height: 4.89vh;
    min-height: 31.0262px;
    margin-left: 2vw;
    margin-right: 0.47vw;
    vertical-align: middle;
    cursor: pointer;
}

img.bottom_bar_CD_no_pointer {
    height: 4.89vmin;
    min-height: 31.0262px;
    margin-left: 2vmax;
    margin-right: 0.47vmax;
    vertical-align: middle;
}

div.audio_information {
    display: inline-block;
    position: relative;
    margin-top: 2vmin;
    margin-left: 2px;
    width: 28vmax;
    height: 100%;
    vertical-align: top;
    overflow: hidden;
}

div.audio_filename {
    display: table;
    cursor: pointer;
    font-family: ShangYa;
    font-size: 1.6vh;
    height: 2.4vmin;
    font-weight: 300;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.post_title_in_bottom_bar {
    display: table;
    cursor: default;
    color: #bebebe;
    font-size: 1.6vh;
    zoom: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.audio_information div.audio_progress_bar_click_range {
    position: absolute;
    width: 100%;
    height: 1.8vmin;
    bottom: 1vh;
    cursor: pointer;
}

div.audio_information div.audio_progress_bar_click_range_space {
    height: 0.2vh;
}

div.audio_information div#audio_progress_bar_background {
    width: 100%;
    height: 0.6vh;
    min-height: 3.8px;
    background-color: #bcbcbc;
}

div.audio_information div#audio_progress_bar {
    height: 100%;
    width: 0;
    background-color: #707070;
}

div.playlist_icon_and_audio_time {
    display: inline-block;
    vertical-align: middle;
    margin-left: 1vw;
}

img#playlist_icon {
    height: 2.35vmin;
    min-height: 14.91px;
    margin-top: 0.5vh;
    margin-left: 1.2vh;
    cursor: pointer;
}

div.playlist_icon_and_audio_time div.audio_time {
    margin-left: 1.2vh;
    margin-top: 0.7vh;
    font-size: 1.8vh;
    width: 7vw;
    min-width: 75px;
}

div.playlist_and_bottom_space {
    z-index: -1;
    position: absolute;
    width: 50vmax;
    bottom: 0;
}

div.bottom_space {
    height: 7.25vmin;
    min-height: 46px;
}

div.playlist {
    position: relative;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: rgba(66, 66, 66, 0.9);
}

div.playlist_bottom_bar {
    position: absolute;
    width: 100%;
    height: 5.4vh;
    min-height: 34.262px;
    background-color: rgba(66, 66, 66, 0.9);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #cccccc;
    white-space: nowrap;
}

div.playlist_bottom_bar_space {
    height: 1.792vh;
    min-height: 11.42px;
}

div#playlist_title {
    display: inline-block;
    vertical-align: top;
    margin-left: 4%;
    font-family: ShangYa;
    font-weight: 300;
    font-size: 1.8vh;
}

div#clear_list {
    float: right;
    font-family: ShangYa;
    font-weight: 300;
    font-size: 1.6vh;
    margin-right: 4%;
    cursor: pointer;
}

div#clear_list:hover {
    color: white;
}

div.playlist_content {
    height: 42.75vh;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow-y: scroll;
}

div.playlist_content_space {
    height: 5.4vh;
    min-height: 34.262px;
}

div.playlist_content_item {
    padding: 0.9vh 4%;
    cursor: pointer;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.playlist_content_item:hover {
    background-color: rgba(103, 103, 103, 0.9);
}

img.playlist_content_CD {
    height: 4.89vh;
    min-height: 31.0262px;
    vertical-align: middle;
}

div.playlist_audio_information {
    display: inline-block;
    margin-left: 1.6%;
    vertical-align: middle;
}

div.playlist_audio_filename {
    font-family: ShangYa;
    font-size: 1.6vh;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.playlist_audio_composers {
    margin-top: 0.3vh;
    font-size: 1.5vh;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* middle screen*/
@media screen and (max-width: 820px) {
    div.audio_information {
        width: 26vw;
    }
    div.playlist_and_bottom_space {
        width: 60vw;
        left: 20vw;
    }
}

@media screen and (max-width: 760px) {
    img.play_mode {
        display: none;
    }
    div.playlist_and_bottom_space {
        width: 70vw;
        left: 15vw;
    }
    /* 设置字体，不能无限小*/
    div.audio_filename {
        font-size: 12px;
    }
    div.post_title_in_bottom_bar {
        margin-top: 1px;
        font-size: 11px;
        zoom: 1;
    }
    div#playlist_title,
    div#clear_list,
    div.playlist_audio_filename,
    div.playlist_audio_composers {
        font-size: 10px;
    }
    div.playlist_icon_and_audio_time div.audio_time {
        font-size: 12px;
        zoom: 0.8;
    }
}

/* mobile css*/
@media screen and (max-width: 540px) {
    img.play_and_pause {
        margin-left: 0;
    }
    img.previous {
        display: none;
    }
    img.next {
        display: none;
    }
    img.play_mode {
        display: none;
    }
    div.audio_information {
        width: 50vw;
    }
    img#playlist_icon {
        margin-left: 43px;
        height: 15px;
        margin-top: 0;
    }
    div.playlist_icon_and_audio_time div.audio_time {
        font-size: 13px;
        margin-top: 6px;
    }
    div.playlist_and_bottom_space {
        width: 100vw;
        left: 0;
    }
}

@media screen and (max-height: 611px) {
    div.audio_information div.audio_progress_bar_click_range {
        bottom: 8.45px;
    }

    /* 设置字体，不能无限小*/
    div.audio_filename {
        font-size: 12px;
    }
    div.post_title_in_bottom_bar {
        margin-top: 1px;
        font-size: 11px;
        zoom: 1;
    }
    div#playlist_title,
    div#clear_list,
    div.playlist_audio_filename,
    div.playlist_audio_composers {
        font-size: 10px;
    }
    div.playlist_icon_and_audio_time div.audio_time {
        font-size: 12px;
        zoom: 0.8;
    }
}