.musicplayerContainer
{
        display:inline-flex;
        border:1px solid rgba(0, 255, 255, 0.2);
        border-radius:4px;
}
.musicplayerButton
{
      display:flex;  
      width:50px;
      height:50px;
      border-right:1px solid rgba(0, 255, 255, 0.2);
      background-color:rgba(0, 255, 255, 0.05);
      justify-content:center;
      align-items:center;
      cursor:pointer;
      background-position:center;
      background-repeat:no-repeat;
      background-size:70%;
}
.musicplayerButton:hover
{
        background-color:rgba(0, 255, 255, 0.15);
}
.sliderContainer {
        width:140px;
        max-width: 100%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        position:relative;
        overflow:hidden;
}
.volumeslope
{
        position:absolute;
        width:95%;
        height:90%;
        top:0;
        left:0;
        background-image:url(images/musicplayer/volume.png);
        z-index:-1;
        
}
.musicPlayerDiv
{
        width:100%;
        display:flex;
        text-align:center;
        align-items:center;
        justify-content: center;
}
.musicTracklistContainer
{
        border:1px solid rgba(0, 255, 255, 0.2);
        border-radius:4px;
        margin:0 auto;
        margin-top:12px;
        max-width:640px;
}
.musicAlbumTitle
{
        background-color:rgba(0, 255, 255, 0.075);
        border-bottom:1px solid rgba(0, 255, 255, 0.15);
        padding: 8px;
        cursor:pointer;
        position:relative;
}

.musicAlbumTitle::after{
        content:"";
        position:absolute;
        height:80%;
        width:8px;
        border-top-left-radius:4px;
        border-bottom-left-radius:4px;
        top:10%;
        right:0;
        background-color:rgba(0, 255, 255, 0.075);
}
.musicAlbumTitle::before{
        content:"";
        position:absolute;
        height:calc(80% - 2px);
        width:8px;
        border-top-right-radius:4px;
        border-bottom-right-radius:4px;
        top:10%;
        right:-9px;
        border:1px solid rgba(0, 255, 255, 0.075);
        border-left:none;
}
.musicAlbumTitle:hover
{
        background-color:rgba(0, 255, 255, 0.15);
}

.musicTrackTitle
{
        background-color:rgba(0, 255, 255, 0.025);
        border-top:1px solid rgba(0, 255, 255, 0.15);
        padding: 8px;
        cursor:pointer;
        position:relative;
}
.musicTrackTitle::after{
        content:"";
        position:absolute;
        height:80%;
        width:4px;
        top:10%;
        right:0;
        background-color:rgba(0, 255, 255, 0.075);
}
.musicTrackTitle::before{
        content:"";
        position:absolute;
        height:calc(80%  - 2px);
        width:4px;
        top:10%;
        right:-4px;
        border:1px solid rgba(0, 255, 255, 0.075);
        border-left:none;
}
.musicTrackTitle:hover
{
        background-color:rgba(0, 255, 255, 0.1);
}
.vText
{
        position:absolute;
        width:100%;
        height:100%;
        display:flex;
        justify-content: center;
        align-items: center;
        z-index:-1;
}
input[type="range"] {
        height: 48px;
        -webkit-appearance: none;
        border: 1px solid rgba(128, 255, 255, 0.1);
        background: none;
        border-radius: 5px;
        background: rgba(128, 255, 255, 0.05);

}
input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none; /* Removes default styling */
        appearance: none;
        width: 20px;
        height:48px;
        background-color:rgba(0, 255, 255, 0.15);
        border-radius: 4px;
        cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
        width: 20px;
        height:48px;
        background-color:rgba(0, 255, 255, 0.15);
        border-radius: 4px;
        cursor: pointer;
}
@media (max-width: 840px) {
        .musicTracklistContainer
        {
                max-width:calc(100% - 16px);
        }
}