.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;
}