@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?il94cl');
    src:  url('fonts/icomoon.eot?il94cl#iefix') format('embedded-opentype'),
          url('fonts/icomoon.ttf?il94cl') format('truetype'),
          url('fonts/icomoon.woff?il94cl') format('woff'),
          url('fonts/icomoon.svg?il94cl#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-forward:before {
    content: "\e984";
}
.icon-rewind:before {
    content: "\e985";
}


.icon-stop2:before {
    content: "\ea1e";
}
.icon-volume-high:before {
    content: "\ea26";
}
.icon-volume-medium:before {
    content: "\ea27";
}
.icon-volume-low:before {
    content: "\ea28";
}
.icon-volume-mute:before {
    content: "\ea2a";
}

.xs2player {
    display: block;
    width: 100%;
}

.xs2player-player, .xs2player-player * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.xs2player-player {
    background: #eee;
    padding: 15px;
    position: relative;
    z-index: 10;
    width: 100%;
}
.xs2player-player h3 {
    margin-top: 0;
    margin-bottom: 15px;
}

.xs2player-player button {
    background: none !important;
    border: 0;
    color: #CA2C23;
    font-size: 18px;
    padding: 0;
}
.xs2player-player button:hover {
    opacity: 0.7;
}

.xs2player-play-mute {
    text-align: center;
}
button.xs2player-play {
    display: inline-block;
    font-size: 30px;
}
.icon-play:before {
    content: "\ea1c";
    margin-left: 3px;
}
.icon-pause:before {
    content: "\ea1d";
}

.xs2player-rewind-forward {
    line-height: 34px;
    padding-top: 3px;
}
.xs2player-rewind-forward span {
    font-size: 9px;
    position: relative;
}
.xs2player-rewind-forward span:before {
    font-size: 18px;
    left: -3px;
    line-height: 22px;
    position: absolute;
    top: -7px;
}
.xs2player-timeline {
    background: #FFF;
    border-top: 1px solid #000;
    grid-column: 1 / -1;
    height: 20px;
}


.xs2player-template-block {
    border: 1px solid #000;
    display: grid;
    column-gap: 15px;
    grid-template-columns: 1fr 2fr;
    padding: 0;
}
.xs2player-template-block .xs2player-info {
    margin: 10px 10px 10px 0;
}
.xs2player-template-block .xs2player-columns {
    background: rgba(0, 0, 0, 0.3);
    min-height: 70px;
    position: relative;
    grid-row: 1;
}

.xs2player-template-block .xs2player-play-mute {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.xs2player-template-block button.xs2player-play {
    font-size: 70px;
    line-height: 1;
    padding-top: 4px;
    -webkit-text-fill-color: rgba(0,0,0,.3);
    -webkit-text-stroke-width: 4px;
    -webkit-text-stroke-color: #FFF;
}
.xs2player-template-block .no-image button.xs2player-play {
    font-size: 50px;
}
.xs2player-template-block .xs2player-image img {
    border: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xs2player-template-wavesurfer {
    border-radius: 10px;
}
.xs2player-template-wavesurfer h3 {
    font-size: 18px;
}
.xs2player-template-wavesurfer .xs2player-columns {
    column-gap: 15px;
    display: grid;
    grid-template-columns: 64px 20px auto 90px;
}
.xs2player-template-wavesurfer .xs2player-columns.no-image {
    grid-template-columns: 64px 20px auto;
}
.xs2player-template-wavesurfer .xs2player-image img {
    max-height: 90px;
    max-width: 90px;
}
.xs2player-template-wavesurfer button.xs2player-play {
    border: #CA2C23 solid 2px;
    border-radius: 50%;
    height: 60px;
    line-height: 60px;
    margin-bottom: 10px;
    width: 60px;
}

.xs2player-template-simple {
    padding: 3px 15px;
}

.xs2player-template-simple h3 {
    margin: 0;
}



.xs2player-visual {
    position: relative;
}
.xs2player-waveform > * {
    background: #fff;
    border-radius: 10px;
}
.xs2player-error {
    align-items: center;
    color: #CA2C23;
    display: flex;
    font-size: 16px;
    height: 90px;
    justify-content: center;
    text-align: center;
}
.xs2player-currenttime, .xs2player-totaltime {
    top: 68px;
    font-size: 12px;
    line-height: 14px;
    padding: 2px;
    position: absolute;
}
.xs2player-currenttime {
    background: #CA2C23;
    border-radius: 4px;
    color: #FFF;
    left: 5px;
}
.xs2player-totaltime {
    right: 5px;
}
.xs2player-image {
    height: 100%;
}
.xs2player-image img {
    display: block;
    max-width: 100%;
}


.xs2player-playlist ul {
    background: #f5f5f5;
    border-radius: 0 0 10px 10px;
    font-size: 16px;
    line-height: 30px;

    list-style: none;
    margin: -10px 0 0;
    padding: 10px 0 0;
}
.wp-block .xs2player-playlist ul {
    padding-left: 0;
}
.xs2player-playlist audio + ul {
    margin-top: -20px;
}
.xs2player-playlist li {
    border-bottom: 1px solid #aaa;
    padding: 5px 10px;
}
.xs2player-playlist li:last-child {
    border: 0;
}
.xs2player-playlist li:hover {
    color: #666;
    cursor: pointer;
}


.xs2player-style-blue.xs2player-player, .xs2player-style-blue .xs2player-player {
    background: #242B4A;
    color: #FFF;
}
.xs2player-style-blue img {
    border: 2px solid #FFF; 
}
.xs2player-style-blue .xs2player-waveform > * {
    background: #202640;
}

.xs2player-style-yellow.xs2player-player, .xs2player-style-yellow .xs2player-player {
    background: #F4D55B;
}
.xs2player-style-yellow img {
    border: 2px solid #CA2C23; 
}

.xs2player-style-red .xs2player-player, .xs2player-style-red.xs2player-player {
    background: #CA2C23;
    color: #FFF;
}
.xs2player-style-red button {
    color: #FFF;
}
.xs2player-style-red button.xs2player-play {
    border-color: #FFF;
}
.xs2player-style-red img {
    border: 2px solid #FFF; 
}