:root{
    --musicPosterSize: 450px;
    --musicPlaylistFontSize: 14px;
    --musicPlaylistShiftSVG: 20px;
    --musicStandardGap: 20px;
    --musicPlaylistsGap: 10px;
    --musicStandardRadius: 10px;
    --musicMiniPlayerWidth: 400px;
    --musicMiniPlayerFontSize: 30px;
    --musicPlaylistPadding: 35px;
    --musicHeaderFontSize: 21px;
    --musicHeaderTextDecoration: underline #fbd9eb 3px;
    --musicHeaderUnderlineOffset: 2px;
    --musicPlaylistElementWidth: 18.66%;
    --musicMiniPlayerOffset: 40px;
}
/* width */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  display: block!important;
}
::-webkit-scrollbar-thumb {
    border-radius: 5px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #de107d; 

}
::-webkit-scrollbar-track {
    border-radius: 10px;
}

body::-webkit-scrollbar {
    width: 0px;
}
.blurred{
    filter: blur(2px) opacity(0.9);
}
.blurred > #loadedContent > #musicPlaylists_overview > #musicPlaylists_selection {
    pointer-events: none;
}
#musicPlaylists_overview{
    width: 100%;
    display: block;
    opacity: 1;
    visibility: visible;
    transition: all 0.2s linear;
    /* padding-bottom: calc(var(--SectionsMarginTop)*1.5); */
}
.musicMainPlayer{
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s linear;
    width: 100%;
    text-align: left;
    box-shadow: #fbd9eb 0px 0px 60px 10px;
    border-radius: 10px;
    margin-bottom: var(--musicStandardGap);
    background-color: #fff;
    position: relative;
    transform: scale(0.5);
    transform-origin: bottom right;
}
.musicMainPlayer_visible{
    display: block;
    animation-name: musicPlayerFadeIn;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}
.musicMainPlayer_hidden{
    display: block;
    animation-name: musicPlayerFadeOut;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
@keyframes musicPlayerFadeIn {
    0%   {}
    100% {opacity: 1;visibility: visible; transform: scale(1);}
}
@keyframes musicPlayerFadeOut {
    0%   {opacity: 1;visibility: visible; transform: scale(1);}
    90%  {opacity: 0.01;visibility: hidden; transform: scale(0.5);}
    99%  {opacity: 0;visibility: hidden;}
    100% {position: fixed;}
}
.musicPlaylist_wrapper{
    margin-top: 55px;
    background-color: #fff;
    transition: all 0.2s linear;
    position: absolute;
}
.musicPlaylist{
    display: flex;
    flex-direction: row;
    height: var(--musicPosterSize);
}
.musicPlaylist--list {
	list-style: none;
	margin: 0;
	padding: var(--musicPlaylistPadding);
	font-size: var(--musicPlaylistFontSize);
	text-align: left;
	line-height: .95;
	color: #383838;
    height: 100%;
    width: var(--musicPosterSize);
    flex: 1;
    display: flex;
    flex-direction: column;
}
.musicPlaylist--list > div {
    overflow: scroll;
    scroll-behavior: smooth;
    height: 100%;
    gap: 0% 4%;
}
.musicPlaylist--list > div > li {
    cursor: pointer;
    padding: var(--musicStandardGap) 0px;
    background: #ffffff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
    transition: all 0.2s linear;
}
.musicActive {
    /* padding-left: 25px!important; */
    color: #de137f;
    text-shadow: #ee87be 0px 0px 20px;
}
.musicPlaylist--list > div > li > svg {
    height: var(--musicPlaylistFontSize);
    width: var(--musicPlaylistFontSize);
    opacity: 0;
    transition: all 0.2s linear;
    display: inline-block!important;
    position: absolute;
    top: var(--musicPlaylistShiftSVG);
    left: 0px;
}
.musicPlaylist--list > div > li > svg > use {
    fill: #de137f;
}
.musicActive > svg {
    opacity: 1!important;
}
.musicPlaylist--list > h1 {
    font-size: var(--musicHeaderFontSize);
    text-decoration: var(--musicHeaderTextDecoration);
    text-underline-offset: var(--musicHeaderUnderlineOffset);
}
.musicTrack_number{
    transition: all 0.2s linear;
    display: inline-block;
    font-family: 'Fredoka One';
    font-weight: var(--bs-body-font-weight);
}
.musicActive > .musicTrack_number{
    opacity: 0;
}
.plyr{
    width: var(--musicPosterSize);
    height: var(--musicPosterSize);
    overflow: hidden;
}
.plyr__controls{
    color: #ffffff!important;
    border: none!important;
    background: #00000000!important;
    padding: 30px!important;
    padding-top: 0!important;
    
    position: absolute;
    width: 100%;
    border-radius: 0!important;
    bottom: 0;
}
.plyr__progress--played, .plyr__volume--display{
    color: #ff008a;
}
.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover, .plyr__play-large{
    background: #ff008a;
}
.plyr input[type=range]::-ms-fill-lower{height:8px;border:0;border-radius:4px;-ms-user-select:none;user-select:none;background:#ff008a}
.plyr input[type=range]::-ms-thumb{position:relative;height:16px;width:16px;background:#fff;border:2px solid transparent;border-radius:100%;transition:background .2s ease,border .2s ease,-webkit-transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease;transition:background .2s ease,border .2s ease,transform .2s ease,-webkit-transform .2s ease;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.15);box-sizing:border-box;margin-top:0}
.plyr input[type=range]::-ms-tooltip{display:none}.plyr input[type=range]:focus{outline:0}
.plyr input[type=range]::-moz-focus-outer{border:0}.plyr input[type=range].tab-focus:focus{outline-offset:3px}
.plyr input[type=range]:active::-webkit-slider-thumb{background:#ff008a;border-color:#fff;-webkit-transform:scale(1.25);transform:scale(1.25)}
.plyr input[type=range]:active::-moz-range-thumb{background:#ff008a;border-color:#fff;transform:scale(1.25)}

.plyr__volume{
    display: none!important;
}
button[data-plyr="mute"]{
    display: none;
}
.musicPoster {
    background-image: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 20%, rgba(0,0,0,0) 30%), url("https://p1.music.126.net/N4bDhxgaZlRRXqp8DCcyGw==/109951164161153348.jpg");
    background-size: cover;
    width: var(--musicPosterSize);
    height: var(--musicPosterSize);
    position: absolute;
    cursor: pointer;
    border-radius: 10px 0px 0px 10px;
}
.musicPlaylist_close{
    display: none;
    padding-top: 100%;
    font-size: 25px;
    border: #fff0 18px solid;
    padding: 0;
    background: #de107d;
    border-radius: 50%;
    right: 0;
    margin: -var(--musicStandardGap);
    position: absolute;
    z-index: 1;
    cursor: pointer;
}
.musicPlaylist_close > i{
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    justify-content: center;
    color: white;
}
.musicPlaylist_loop{
    display: block;
    right: auto;
    left: 0;
    margin: 30px;
    background-color: #de107d;
    box-shadow: #0000005e 0 0 25px;
    background: #fff;
}
.musicPlaylist_loop > i{
    font-weight: 100;
    color: #383838;
}

.musicPlaylist_loop_active > i{
    color: #00b1ff;
}

.musicPlaylists_selection{
    width: 100%;
    margin-bottom: var(--musicStandardGap);
    display: flex;
    flex-wrap: wrap;
}
.musicPlaylists_subcategory{
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    margin: var(--musicPlaylistsGap);
}
.musicPlaylists_subcategory_title{
    display: inline-block;
    margin-right: var(--musicStandardGap);
    text-transform: uppercase;
    background: #ff008a;
    color: #fff;
    padding: var(--musicPlaylistsGap) var(--musicStandardGap);
    border-radius: 500px;
}
.musicPlaylists_subcategory_button{
    display: inline-block;
    flex-shrink: 0;
    padding-right: var(--musicStandardGap);
    color: #383838;
    cursor: pointer;
    text-transform: capitalize;
}
.musicPlaylist_element{
    width: var(--musicPlaylistElementWidth);
    cursor: pointer;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    margin: var(--musicPlaylistsGap);
}
.musicPlaylist_cover{
    width: 100%;
    overflow: hidden;
}
.musicPlaylist_cover_img{
    background-size: cover;
    padding-top: 100%;
    width: 100%;
    transition: 0.5s;
    will-change: transform;
}
.musicPlaylist_cover_gradient{
    background: url("/assets/img/play_button.png"), rgba(0,0,0,0.4);
    background-size: 80%;
    background-position: center;
    position: absolute;
    transition: all 0.2s linear;
    padding-top: 100%;
    width: 100%;
    opacity: 0;
    top: 0;
}
.musicPlaylist_cover_flag{
    position: absolute;
    display: none;
    height: 15%;
    width: 22%;
    margin: 5%;
    border-radius: 10%;
    background-size: cover;
    background-position: center;
    bottom: 0;
    border: white 2px solid;
    box-shadow: #00000085 0px 0px 15px;
}
.musicPlaylist_element:hover .musicPlaylist_cover_img {
    transform: scale(1.025) rotate(1deg);
}
.musicPlaylist_element:hover .musicPlaylist_cover_gradient {
    opacity: 1;
}
.musicPlaylist_title{
    transition: all 0.2s linear;
    bottom: 0;
    text-align: left;
    color: white;
    font-size: 16px;
    line-height: 1;
    border: #ffffff00 16px solid;
    z-index: 2;
    background: #ff008a;
    display: none;
}
.musicPlaylist_metadata{
    display:none;
}
.musicSearchField{
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    margin: var(--musicPlaylistsGap);
}
#musicFilterQuery{
    width: 100%;
    font-size: 25px;
    color: rgba(222,16,125,0.5);
    text-transform: uppercase;
    border: none;
}
#musicFilterQuery:focus-visible{
    border: none;
    outline: none;
    color: #ff008a;
}
#musicFilterQuery::placeholder{
    color: rgba(222,16,125,0.5);
}
#musicFilterQuery:not(:placeholder-shown) + .musicPlaylists_selection > .musicPlaylists_subcategory {
  display: none;
}
.searchIcon{
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 25px;
    color: #ff008a;
    margin-right: var(--musicPlaylistsGap);
}
.musicPlaylists_playOptions{
    margin-bottom: var(--musicStandardGap);
    transform: scale(1.4);
    transform-origin: left;
    width: 0%;
}
.musicPlaylists_playOptions > div {
    color: #ff008a;
}
#musicPlayer{
    position: fixed;
    bottom: var(--musicMiniPlayerOffset);
    right: var(--musicMiniPlayerOffset);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
#musicMiniPlayer{
    background: #fff;
    width: var(--musicMiniPlayerWidth);
    height: calc(var(--musicMiniPlayerWidth) * 0.2);
    border-radius: var(--musicStandardRadius);
    font-size: var(--musicMiniPlayerFontSize);
    box-shadow: #00000038 0px 0px 35px;
    overflow: hidden;
    cursor: pointer;
}
.musicMiniPlayer{
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.5);
    transform-origin: bottom right;
}
.musicMiniPlayer_visible{
    display: flex;
    animation-name: musicPlayerFadeIn;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}
.musicMiniPlayer_poster{
    width: 20%;
    
    background-size: cover;
}
.musicMiniPlayer_posterStatus{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-shadow: 0 0 30px #000000b3;
}
.musicMiniPlayer_controls{
    width: 60%;
    
    display: flex;
}
.musicMiniPlayer_controls > div{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.musicMiniPlayer_enlarge{
    width: 20%;
    
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1703px){
    :root{
        --musicPlaylistElementWidth: 18.32%;
    }
}
@media (max-width:1402px) {
    :root {
        --musicHeaderTextDecoration: underline #fbd9eb 4px;
        --musicHeaderUnderlineOffset: 3px;
        --musicPlaylistElementWidth: 22.7%;
        --musicStandardRadius: 5px;
        --musicStandardGap: 15px;
        --musicMiniPlayerWidth: 300px;
        --musicPosterSize: 300px;
        --musicMiniPlayerFontSize: 25px;
        --musicPlaylistPadding: 25px;
        --musicPlaylistFontSize: 12px;
        --musicPlaylistShiftSVG: 12px;
        --musicHeaderFontSize: 15px;
        --musicMiniPlayerOffset: 20px;
    }
    .musicPlaylist--list > div {
        display: block;
    }
	.musicActive {
	    /* padding-left: 20px!important; */
        color: #de137f;
        text-shadow: #ee87be 0px 0px 20px;
	}
    .musicPlaylist_close {
        font-size: 20px;
        padding: 13px;
    }
    .musicPlaylists_subcategory{
        font-size: 14px;
    }
    .musicSearchField{
        margin: 5px var(--musicPlaylistsGap);
    }
    .searchIcon{
        font-size: 20px;
    }
    #musicFilterQuery {
        font-size: 20px;
    }
}

@media (max-width:1080px) {
    :root{
        --musicPlaylistsGap: 8px;
        --musicPlaylistElementWidth: 30.4%;
    }
    .musicPlaylist_close {
        font-size: 25px;
        padding: 18px;
        background: #de107d;
        margin: 30px;
        outline: #ffffff78 7px solid;
    }
    .musicPlaylist_close > i {
        color: #fff;
        text-shadow: white 0 0 15px;
    }
    
    .musicPlaylist_loop{
        background-color: #de107d;
        box-shadow: none;
        outline: #00000029 7px solid;
        background: #fff;
    }
    .musicPlaylist_loop > i{
        font-weight: 100;
        color: #383838;
    }
    
    .musicPlaylist_loop_active > i{
        color: #00b1ff;
    }
    #musicFilterQuery{
        font-size: 20px;
    }
    .searchIcon{
        font-size: 20px;
    }
    .musicPlaylists_subcategory{
        font-size: 14px;
    }
    .musicPlaylists_subcategory_title{
        padding: 8px 18px;
    }
}
@media (max-width:764px) {
    :root{
        --musicPlaylistsGap: 1.4%;
        --musicStandardRadius: 0px;
        --musicPosterSize: 100vw;
        --musicPlaylistFontSize: 3.5vw;
        --musicStandardGap: 3vw;
        --musicPlaylistShiftSVG: 3vw;
    }
    #musicPlayer{
        bottom: auto;
        right: auto;
        width: 100%;
        align-items: center;
    }
    .musicMainPlayer{
        overflow-y: hidden;
        overflow-x: hidden;
        position: fixed;
        margin-top: 0;
        padding-bottom: 0;
        border-radius: 0;
        top: 0;
        transform-origin: bottom;
    }
    .musicMainPlayer::-webkit-scrollbar{
        width: 0px;
    }
    .plyr{
        position: sticky;
    }
    #musicMiniPlayer{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 9vh;
        transform-origin: bottom;
        
        position: fixed;
        bottom: 18vw;
        width: 88vw;
        height: 17vw;
        transform-origin: bottom;
        border-radius: 2vw;
    }
    .musicPoster{
        border-radius: 0;
    }
    .musicPlaylist_wrapper{
        margin-top: 0vw;
    }
    .musicPlaylist {
        height: 100vh;
        width: 100%;
        margin-left: 0;
        padding: 0 0;
        overflow: visible;
        flex-direction: column;
    }
    .musicPlaylist--list{
        overflow: scroll;
        padding-bottom: 23vw;
    }
    .musicPlaylist--list > h1 {
        font-size: 4.8vw;
        margin-top: 0;
        margin-bottom: 4vw;
        text-decoration: underline #fbd9eb 0.6vw;
        text-underline-offset: 0.6vw;
    }
    #musicFilterQuery{
        font-size: 3.3vw;
    }
    .searchIcon{
        font-size: 3.3vw;
    }
    .musicPlaylists_subcategory{
        font-size: 2.5vw;
    }
    .musicPlaylists_subcategory_title{
        padding: 1.5vw 3vw;
    }
}
@media (min-width:500px) and (max-width: 764px) {
    :root{
        --musicPosterSize: 70vw;
        --musicPlaylistFontSize: 2.5vw;
        --musicStandardGap: 2.5vw;
        --musicPlaylistShiftSVG: 2.5vw;
    }
    .musicPlaylist{
        width: 70%;
        margin-left: 15%;
    }
    .musicPlaylist--list > h1 {
        font-size: 3.8vw;
    }
}
@media (max-width:350px) {
    :root{
        --musicPlaylistsGap: 2%;
        --musicPlaylistElementWidth: 46%;
    }
    .musicPlaylists_selection {
        justify-content: space-between;
    }
}