/**
 * Plugin Name: RDM MP3 Widget
 * Plugin URI: https://github.com/digitalmedia/
 * Description: This plugin creates a widget that can be used to display an mp3 player which includes details.
 * Version: 1.5
 * Author: Ekim Unal <ekim.unal@rci.rogers.com>
 * Text Domain: rdm-mp3-widget
 * @lastUpdate 04.27.2020
 */
.rdm-mp3-widget {
    padding: 15px;
    margin-left: 15px;
    position: relative;
}
.rdm-mp3-widget .mejs-container {
    display: none;
}
/* mp3 details */
.rdm-mp3-widget .details {
    overflow: hidden;
}
.rdm-mp3-center {
    align-items:center;
    width: 100%;
    text-align: center;
}
.rdm-mp3-space {
    margin-top: 15px;
    margin-bottom: 20px;
}
.rdm-mp3-widget .topText {
    font-family:inherit;
    font-size: 1.43em;
    text-align: center !important;
    font-weight:900;
    letter-spacing:-1px;
    line-height:24px;
    margin-top: 10px;
    margin-bottom: 20px !important;
    text-decoration-color:rgb(255, 255, 255);
    text-decoration-line:none;
    text-decoration-style:solid;
    text-rendering:optimizelegibility;
    -webkit-font-smoothing:antialiased;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
.rdm-mp3-widget .bottomText {
    text-align: center !important;
    align-items:center !important;
    width: 100%;
    font-family:inherit;
    font-size: 1.25em;
    height: 50px;
    line-height: 40px;
    letter-spacing:-1px;
    text-decoration-color:rgb(255, 255, 255);
    text-decoration-line:none;
    text-decoration-style:solid;
    text-rendering:optimizelegibility;
    -webkit-font-smoothing:antialiased;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
    top: -4px;
    font-weight: normal;
    position: relative;
}
.rdm-mp3-widget .bottomText a{
    color: inherit !important;
    display: flex;
    align-items:center;
}
/* to remove the margin for audio embed */
.rdm-mp3-widget .mejs-container {
    margin-bottom: 0;
}
.mp3123{
    color: inherit !important;
}
#rdm-mp3 {
    display: none !important;
    visibility: hidden !important;
}
#playPauseMP3{
    font-size: 25px !important;
    text-align: center !important;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 10px;
    align-items:center !important;
    height: 35px;
    line-height: 30px;
    cursor: pointer;
    text-decoration:none !important;
}
.aspectRatio{
    object-fit: cover;
    object-position: center;
    height: auto !important;
    max-height: 185px;

}
@media only screen and (max-width: 600px) {
    .aspectRatio{
        max-height: 61px;
    }
}