body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    height: 400px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.body{
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
    background-color: rgb(31, 30, 30);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    color: white;
}
*::selection{
    background-color: transparent;
}


.contenir{
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
    background-color: black;
    color: white;
    padding: 20px 20px 0 20px;
    box-sizing: border-box;
}



.leftNavBar{
    width: 21%;
    height: 97%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /* background-color: rgb(70, 70, 70);
    border-radius: 20px; */
}
.leftNavBar_item{
    width: 100%;
    /* height: 50%; */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(37, 37, 37);
    border-radius: 20px;
    flex-wrap: wrap;
}
.leftNavBarMenu{
    height: 20%;
}
.leftNavBarMusicLibry{
    height: 75%;
    margin-top: 25px;
}
.leftNavBarMusicLibryTittleText{
    width: 100%;
    height: 13%;
    /* background-color: red; */
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 20px;
    font-family: monospace;
    font-weight: 1000;
    cursor: default;
    padding: 0 0 0 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.089);
}
.leftNavBarMusicLibryMenus{
    width: 100%;
    height: 87%;
    /* background-color: blue; */
    /* display: flex; */
    justify-content: center;
    align-items: start;  
    flex-wrap: wrap;
    padding: 20px 0 0 0;
}


.leftNavBarMusicLibryCard{
    width: 90%;
    height: 75px;
    border: 1px solid gray;
    margin: 0 auto 20px auto;
    border-radius: 10px;
    display: flex;
    justify-content: start;
    align-items: center;  
    padding: 0 0 0 5px;
    cursor: default;
    transition: 0.2s all;
}
.leftNavBarMusicLibryCard:hover{
    background-color: rgb(68, 67, 67); 
    border-color: rgb(68, 67, 67);
    transition: 0.2s all;
    box-shadow: 0px 0px 15px 1px #ffffff;
}

.leftNavBarMusicLibryCardImg{
    width: 25%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;  
    flex-wrap: wrap;
    /* background-color: red; */
}
.leftNavBarMusicLibryCardImgBG{
    width: 60px;
    height: 60px;
    background-color: gray;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    border: 1px solid gray;
    transition: 0.2s all;
    position: absolute;
    z-index: 50;
}
.leftNavBarMusicLibryCardImgBG_phonk{
    background-image: url("https://i.ytimg.com/vi/Y-HmDGdEHq8/maxresdefault.jpg");
}
.leftNavBarMusicLibryCardImgBG_MonMyGame{
    background-image: url("https://i.ytimg.com/vi/EaaS5nVhj9o/maxresdefault.jpg");
}
.leftNavBarMusicLibryCardImgBG_YUMMI{
    background-image: url("https://i.ytimg.com/vi/pXs4nssyPq4/maxresdefault.jpg?7857057827");
}



.leftNavBarMusicLibryCardImgBG_xTentacion{
    background-image: url("https://wallpapers.com/images/hd/red-spark-xxxtentacion-computer-y8k60ugi5sn3n3w7.jpg");
}


.leftNavBarMusicLibryCard:hover .leftNavBarMusicLibryCardImgBG{
    width: 30px;
    height: 30px;
    transition: 0.2s all;
    margin-top: -5%;
    margin-left: -4%;
    border-color: red;
    border-radius: 50px;
}

.leftNavBarMusicLibryCardImgElement{
    /* background-color: red; */
    width: 60px;
    height: 60px;
    position: relative;
    opacity: 0;
    transition: 0.8s all;
    display: flex;
    justify-content: center;
    align-items: center;  
}
.leftNavBarMusicLibryCardImgElementItme{
   display: flex;
   justify-content: center;
   align-items: center; 
   margin-left: 10px; 
} 
.leftNavBarMusicLibryCardImgElementItmeTop{
    width: 75%;
    height: 75%;
    position: absolute;
    background-color: rgb(0, 255, 0);
    border: 1px solid rgb(0, 255, 0);
    z-index: 40;
    border-radius: 20px; 
    color: black;
    transition: 0.3s all;
    cursor: pointer;   
}
.leftNavBarMusicLibryCardImgElementItmeTop:hover{
   background-color: green; 
   border-color: green;
   transition: 0.3s all;
}

.leftNavBarMusicLibryCardImgElementItmeBottom{
    transform:matrix(0.00,1.00,-1.00,0.00,0,0);
    border: 2px solid transparent;
    border-top-color: white;
    border-bottom-color: white;
    width: 100%;
    height: 85%;
    border-radius: 50px; 
    opacity: 0;
    transition: 0.3s all;
}



.leftNavBarMusicLibryCard:hover .leftNavBarMusicLibryCardImgElement{
    opacity: 1;
    transition: 0.8s all;   
}



.leftNavBarMusicLibryCardTitle{
    width: 70%;
    height: 80%;
    /* background-color: red; */
    margin-left: 8px;
    display: flex;
    justify-content: center;
    align-items: center;  
    flex-wrap: wrap;
}
.leftNavBarMusicLibryCardTitleItme{
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: start;
    align-items: center;  
    padding: 0 0 0 10px;
}
.leftNavBarMusicLibryCardByText{
    /* background-color: blue; */
    font-family: monospace;
    font-size: 22px;
    font-weight: 1000;
}
.leftNavBarMusicLibryCardByNem{
    /* background-color: blueviolet; */
    font-family: sans-serif;
    color: rgb(177, 175, 175);
    font-size: 14px;

}
.leftNavBarMusicLibryCardTitleItmeTxt{
    cursor: pointer;
    transition: 0.2s all;
}
.leftNavBarMusicLibryCardTitleItmeTxt:hover{
    color: aqua;
    text-decoration: underline;
    transition: 0.2s all;
}





.contentBar{
    width: 77%;
    height: 97%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    float: right;
    background-color: rgb(26, 25, 25);
    border-radius: 20px;
    flex-wrap: wrap;
    overflow: hidden;
}
.contentBarNav{
    width: 100%;
    height: 12%;
    background-color: rgba(14, 13, 13, 0.863);
    position: relative;
    z-index: 600;
    margin-top: -2px;
    backdrop-filter: blur(5px);
}
.contentBarContents{
    width: 100%;
    height: 100%;
    /* background-color: blue; */
    margin-top: -7.4%;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.contentBarContents::-webkit-scrollbar {
    width: 5px;
    display: none;
} 
.contentBarContents::-webkit-scrollbar-track {
    border: 1px solid transparent;
    border-radius: 10px;
    background-color: transparent;
}  
.contentBarContents::-webkit-scrollbar-thumb {
    background: rgb(85, 84, 84);  
    transition: 1s all;
    height: 10px;
}
.contentBarContents::-webkit-scrollbar-thumb:hover {
    cursor: pointer;    
    background: gray; 
}


.contentBarContentsBanner{
    width: 100%;
    height: 60%;
    /* background-color: rgba(0, 0, 0, 0.301); */
}
.contentBarContentsBannerTitleText{
    cursor: default;
    width: 100%;
    height: 75%;
    display: inline-flex;
    justify-content: start;
    align-items: center;
    font-size: 100px;
    text-shadow:0px 0px 10px white;
    font-family: monospace;
    position: relative;
    z-index: 8;
    font-weight: 1000;
    padding: 40px 0 0 70px;
    box-sizing: border-box;
    /* background-color: rgba(29, 29, 29, 0.733); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

}
.contentBarContentsBannerSheder_Phonk{
    background-position-y: -140px;
    box-shadow:0px 0px 300px 200px rgb(32, 3, 43);
    background-image: url("https://pixelbox.ru/wp-content/uploads/2023/10/anime-banner-discord-pixelbox.ru-16.jpg");
}



.contentBarContentCard{
    width: 100%;
    height: 13%;
    /* border: 1px solid rgba(128, 128, 128, 0.178); */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    padding: 25px 0 25px 0;
    transition: 0.2s all;
    /* margin-bottom: 20px; */
}
.contentBarContentCard:hover{
    background-color: rgba(128, 128, 128, 0.178);
    transition: 0.2s all;
}

.contentBarContentCardNumPlay{
    width: 7%;
    height: 100%;
    /* background-color: red; */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    font-family: sans-serif;
    font-weight: 7000;
}
.contentBarContentCardPlayBtn{
    display: none;
    cursor: pointer;
    transition: 0.3s all;
}
.contentBarContentCardPlayBtn:hover{
    color: rgb(0, 255, 76);
    transition: 0.3s all;
}
.contentBarContentCard:hover .contentBarContentCardNumTxt{
   display: none; 
}
.contentBarContentCard:hover .contentBarContentCardPlayBtn{
    display: block; 
 }




.contentBarContentCardImg{
    width: 8%;
    height: 100%;
    /* background-color: blueviolet; */
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* border: 1px solid gray; */
    border-radius: 5px;
}
.contentBarContentCardTexts{
    width: 35%;
    height: 100%;
    /* background-color: blue; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contentBarContentCardTextsFool{
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 50px 0 20px;
    cursor: default;
    box-sizing: border-box;
    overflow: hidden;
}
.contentBarContentCardTextsFool1{
    font-size: 30px;
    font-family: monospace;
    font-weight: 1000;
}
.SearchTagBy{
    cursor: pointer;
    color: gray;
}
.SearchTagBy:hover{
    color: aqua;
    text-decoration: underline;
}
.contentBarContentCardTextsFool2{
    font-size: 20px;
    font-family: sans-serif;
}



.contentBarContentCardAlbumName{
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-family: sans-serif;
    padding: 0 0 0 20px;
    box-sizing: border-box;
}
.contentBarContentCardMusicTime{
    width: 14%;
    height: 100%;
    font-family: sans-serif;
    font-size: 17px;
    color: gray;
    cursor: default;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contentBarContentCardMusicMenu{
    width: 6%;
    height: 100%;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.contentBarContentCardMusicMenuBtn{
    display: none;
    cursor: pointer;
}
.contentBarContentCardMusicMenuBtn:hover{
    color: rgb(0, 255, 76);
    transition: 0.3s all;
}
.contentBarContentCard:hover .contentBarContentCardMusicMenuBtn{
    display: block; 
 }







.contentBarContentsBannerTitleMenu{
    width: 100%;
    height: 40%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 60px;
    font-family: monospace;
    font-weight: 1000;
    /* padding: 0 0 0 50px; */
    background-color: rgba(29, 29, 29, 0.733);
    flex-wrap: wrap;
}
.contentBarContentsBannerTitleMenuTop{
    width: 100%;
    height: 70%;
    position: relative;
    z-index: 12;
    display: flex;
    justify-content: start;
    align-items: end;
}
.contentBarContentsBannerTitleMenuBottom{
    width: 100%;
    height: 30%;
    position: relative;
    z-index: 12;
    display: flex;
    justify-content: start;
    align-items: end;
    font-size: 21px;
    color: rgba(204, 201, 201, 0.699);
    cursor: default;
    padding: 0 0 5px 65px;
    box-sizing: border-box;
}
.contentBarContentsBannerTitleMenuTxtTitle{
    margin-left: 16%;
}
.contentBarContentsBannerTitleMenuTxtAlbum{
    margin-left: 35%;
}
.contentBarContentsBannerTitleMenuTxtTime{
    margin-left: 18%; 
}

.contentBarContentsCards{
    margin-top: 5%;
    border-top: 1px solid gray;
    width: 97%;
    height: 100%;
    position: relative;
    z-index: 10;
    /* background-color: rgba(0, 0, 0, 0.925);
    backdrop-filter: blur(6px); */
    padding: 30px 20px 40px 20px;
    box-sizing: border-box
}





.contentBarNavAlert{
    float: right;
    height: 100%;
    width: 5%;
    /* background-color: red; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    cursor: pointer;
    font-size: 25px;
    color: rgb(150, 148, 148);
    transition: 0.1s all;
}
.contentBarNavAlert:hover{
    color: white;
    transition: 0.1s all;
    font-size: 30px;
}
.FAbellSet2{
    display: none;
}
.contentBarNavAlert:hover .FAbellSet2{
    display: block;
}
.contentBarNavAlert:hover .FAbellSet1{
    display: none;
}
.contentBarNavProfile{
    float: right;
    height: 100%;
    width: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 25px;
    transition: 0.3s all;
    /* background-color: green; */
    margin-right: 50px;
}
.contentBarNavProfileIcon{
    width: 35px;
    height: 35px;
    background-color: black;
    border-radius: 50px;
    border: 1px solid white;
    transition: 0.3s all;
    background-image: url("https://picsum.photos/35/35");
    background-size: cover;
    background-position: center;
}
.contentBarNavProfileIcon:hover{
    border-color: red;
    transition: 0.3s all;
}
.contentBarNavSearch{
    margin-top: 30px;
    float: left;
    height: 0%;
    width: 0%;
    display: flex;
    opacity: 0;
    justify-content: center;
    align-items: center;
    font-size: 0px;
    transition: 0.8s all;
    background-color: rgb(58, 58, 58);
    margin-left: 50px;
    overflow: hidden;
    border-radius: 50px;
    border: 1px solid green;
}
.contentBarNavSearchInp{
    width: 89%;
    height: 100%;
    background-color: transparent;
    outline: 0;
    border: 0;
    font-size: 20px;
    padding: 0 20px 0 10px;
    color: white;
}
.contentBarNavSearchIcon{
    width: 11%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: white;
    /* transition: 0.3s all; */
}
/* .contentBarNavSearchIcon:hover{
    background-color: rgb(124, 124, 124);
    transition: 0.3s all;
} */


.SaundGetList{
    width: 100%;
    height: 11%;
    position: absolute;
    z-index: 800;
    bottom: -77px;
    background-color: black;
    border-top: 1px solid gray;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 0 0 10px 0;
    transition: 0.5s all;
}


.SaundGetListSaund{
    width: 50%;
    height: 100%;
}

.leftNavBarMenu_item{
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 0 0 0 30px;
    width: 100%;
    height: 40%;
    font-size: 20px;
    font-family: monospace;
    cursor: pointer;
    color: white;
}
.leftNavBarMenu_itemOwn{
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 0 0 0 30px;
    width: 100%;
    height: 40%;
    font-size: 20px;
    font-family: monospace;
    cursor: default;
    color: yellow;
    transition: 0.3s all;
}
.leftNavBarMenu_itemOwn p{
    margin-left: 11px;
    border-bottom: 2px solid yellow;
}

.leftNavBarMenu_item .fa-magnifying-glass{
    transition: 0.3s all;
}
.leftNavBarMenu_item:hover .fa-magnifying-glass{
    color: rgb(168, 168, 168);
    transition: 0.3s all;
}
.leftNavBarMenu_item .fa-house{
    transition: 0.3s all;
}
.leftNavBarMenu_item:hover .fa-house{
    color: rgb(168, 168, 168);
    transition: 0.3s all;
}


.leftNavBarMenu_item p{
    margin-left: 11px;
    border-bottom: 2px solid transparent;
    transition: 0.3s all;
}
.leftNavBarMenu_item:hover p{
    border-bottom-color:rgb(168, 168, 168);
    color: rgb(168, 168, 168);
    transition: 0.3s all;
}

.SaundGetListUpBg{
    width: 80px;
    height: 60%;
    background-color: black;
    position: absolute;
    right: 0;
    margin-top: -8.2%;
    margin-right: 15px;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid gray;
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    font-size: 30px;
}
.SaundGetListUp{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.SaundGetListUpShowBtn{
    display: none;
}




.contentBarNavHomeTxt{
    width: 27%;
    height: 75%;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    background-color: rgba(39, 39, 39, 0.664);
    border: 1px solid rgba(128, 128, 128, 0.432);
    cursor: default;
    font-size: 25px;
    font-family: monospace;
    font-weight: 1000;
    margin-top: 8px;
    border-radius: 10px;
    overflow-y: hidden;
    margin-left: 10px;
    transition: 0.8s all;
}


.musicTitle{
    width: 30%;
    height: 100%;
    /* background-color: red; */
    margin: 10px 20px 0 20px;
    display: flex;
    justify-content: start;
    align-items: center;
    cursor: default;
}

.musicTitleImg{
    width: 20%;
    height: 90%;
    /* background-color: blue; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.musicTitleImgLogo{
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: grey;
    border-radius: 10px;
    border: 1px solid gray;
}

.musicTitleText{
    width: 80%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: rgb(51, 51, 28); */
    flex-wrap: wrap;
}
.musicTitleTextBy{
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 0 0 0 20px;
}

.musicTitleTextByMusicName{
    font-size: 35px;
    font-family: monospace;
    font-weight: 1000;
}

.musicTitleTextByEditName{
    font-family: sans-serif;
    font-family: 20px;
    color: gray;
}