.ma-container {

width: 350px;
height: 80px;
margin: 20px auto;
border-radius: 10px;
font-size: 0.8em;
background-image: linear-gradient(#eaf6fa, skyblue);

}

.ma-player {

margin: auto;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 15% 15% 40% 15% 15%;
grid-template-rows: 50% 50%;
justify-content: center;
align-content: center;

}

.ma-player div {

display: flex;
flex-direction: row;
justify-content: center;
align-items: center;

}

.ma-player button {

border: none;
width: 40px;
height: 40px;
border-radius: 50%;

}

.ma-player img {

cursor: pointer;
width: 60%;
height: 60%;

}

.progress-bar {

grid-column: 2/ 5;

}

.progress-bar .bar {

position: relative;
height: 3px;
width: 90%;
cursor: pointer;
background-color: grey;

}

.progress-bar .brick {

position: absolute;
left: 0px;
width: 10px;
height: 10px;
border-radius: 50%;
border: 5px solid skyblue;
background-color: blue;
cursor: pointer;

}

.progress-panel {

cursor: pointer;

}

.info-panel{

flex-direction: column !important;

}