:root{
	--width-text : 100%;
	--autoplay-color : #aeaeae4d;
}

@font-face {
  font-family: 'custom-icons';
  src: url('fontello.woff2?87446016') format('woff2');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "custom-icons";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-to-start:before { content: '\e80e'; } /* '' */
.icon-to-end:before { content: '\e80f'; } /* '' */
.icon-play:before { content: '\e810'; } /* '' */
.icon-pause:before { content: '\e811'; } /* '' */
.icon-volume-up:before { content: '\e812'; } /* '' */
.icon-volume-off:before { content: '\e800'; } /* '' */
.icon-menu:before { content: '\e813'; } /* '' */
.icon-close:before { content: '✖'; } /* '' */
.icon-wheelchair:before { content: '\f193'; } /* '' */

.icon-wheelchair{
    color : var(--autoplay-color);
    transition: 0.3s !important;
}

.music_list #hide:before {
    content: "\e813";
    font-family: "custom-icons";
}

.music_list #hide {
    width: 34px;
    height: -webkit-fill-available;
    display: flex;
    justify-content: center;
    align-items: center;
}

.music_list #close_playlist {
    width: 34px;
}

.music_list #scroll{
    height: 0;
    overflow: overlay;
    transition: 1s;
}

.music_list #list{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.music_list li {
    border-bottom: 1px solid var(--faint-contrast);
}

.music_list button{
    background: transparent;
    width: -webkit-fill-available;
    color: var(--text);
}

.music_list button:hover{
    background: #8882;
}

.music_list span{
    padding: 10px;
}

.music_list {
    display: flex;
    position: fixed;
    top: 2%;
    right: 2%;
    background: #0000003d;
    width: 350px;
    max-height: 400px;
    overflow: auto;
    flex-direction: column;
    border-radius: 5px;
    z-index: 2;
}

.play-button {
    font-size: 0.7em !important;
    padding: 0.2em 0.4em !important;
    margin-left: 0.4em !important;
    vertical-align: bottom !important;
}
.play-button::before {
    content: '▶' !important;
}

.wrap-text{
    position: absolute !important;
    left: 3% !important;
    bottom: 14% !important;
    width: 150px !important;
    height: 18px !important;
    background-color: transparent !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    border-radius : 3px !important;
    box-shadow: inset 0px 5px 10px 2px rgba(0,0,0,0.3) !important;
}



#aud-info{
    width: fit-content !important;
    font-size: 13px !important;
    margin: 0;
    position: absolute;
    display: inline-block !important;
    color: #999 !important;
    animation: move 6s infinite linear !important;
}

@keyframes move{
  from{
    left: 100% }
  to{
    left: calc(var(--width-text)*(-1)) }
}

@keyframes fade{
    from{
        background: transparent }
    to{
        background: rgba(170, 167, 167, 0.26) }
  }

button:hover, .fa-backward:hover, .fa-forward:hover{
    color: #c5c9d6 !important;
}

.music-player {
    display: block !important;
    position: fixed !important;
    width: 300px !important;
    height: 100px !important;
    top: 87% ;
    left: 4% ;
    border-radius: 10px 10px 10px 10px !important;
    background: transparent linear-gradient(to bottom,rgb(49 50 59 / 50%) 50%,rgb(28 29 36 / 70%) 60%) repeat scroll 0 0 !important;
    box-shadow: 1px 10px 20px 5px #000000 !important;
    z-index: 1 !important;
}

.lecteur {
    display: block !important;
    right: 17% !important;
    bottom: 11px !important;
    position: relative !important; 
}

.mejs__button>button:focus {
    outline: 0px dotted #999 !important;
}

.mejs__container {
    position: relative !important;
    background-color: transparent !important;
    min-width: auto  !important;
}

.mejs__controls {
    padding: 0 15% !important;
    background: transparent  !important;
    display: inline-block !important;
    position: relative !important;
    bottom: 4px !important;
}
.mejs__controls div {
    display: block !important;
    float: left !important;
    position: relative !important;
}
.mejs__controls .mejs__playpause-button {
    position: absolute  !important;
    right: 45% !important;
    width: 40px !important;
}
.mejs__controls .mejs__playpause-button button {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: "custom-icons" !important;
    font-size: 23px !important;
    color: #c5c9d6 !important;
    background: transparent !important;
    margin: 0 !important;
}
.mejs__controls .mejs__play button:before{
    content:"\e810" !important;
}
.mejs__controls .mejs__pause button:before{
    content:"\e811" !important;
}
.mejs__controls .mejs__playpause-button button::before{
    content:"\e810";
}

.mejs__controls .mejs__volume-button button {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    font-family: "custom-icons" !important;
    font-size: 20px !important;
    color: #c5c9d6 !important;
    background: transparent !important;
    margin: 0 !important;
    
}
.mejs__controls .mejs__mute button:before {
    content: "\e812" !important;
}
.mejs__controls .mejs__unmute button:before {
    content: "\e800" !important;
}
.mejs__controls .mejs__time {
    width: 100% !important;
    margin-top: 7% !important;
    margin-bottom: 3% !important;
    color: #fff !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
    min-width: 100% !important;
}
.mejs__controls .mejs__time span {
    font-size: 15px !important;
}
.mejs__controls span.mejs__duration {
    float: right !important;
    text-align: right !important;
    color: #ccc !important;
}
.mejs__controls span.mejs__currenttime {
    font-weight: 700 !important;
    float: left !important;
}
.mejs__controls .mejs__time-rail {
    width: 100% !important;
    margin: 0 !important;
}
.mejs__controls .mejs__time-rail span {
    position: absolute !important;
    top: 0 !important;
    width: 100% !important;
    height: 4px !important;
    border-radius: 50px !important;
    
}
.mejs__controls .mejs__time-rail .mejs__time-loaded {
    background: rgba(255,255,255,0.2) !important;
}
.mejs__controls .mejs__time-rail .mejs__time-float {
    display: none !important;
    top: -40px !important;
    width: 40px !important;
    height: 25px !important;
    margin-left: 0px !important;
    text-align: center !important;
    font-size: 10px !important;
    background: #fff !important;
    border: 0 !important;
}
.mejs__controls .mejs__time-rail .mejs__time-float-current {
    display: block !important;
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    line-height: 26px !important;
    color: #100d28 !important;
}
.mejs__controls .mejs__time-rail .mejs__time-float-corner {
    top: auto !important;
    bottom: -9px !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 6px solid #fff !important;
    border-right: 6px solid transparent !important;
    border-left: 6px solid transparent !important;
}
.mejs__controls .mejs__time-rail .mejs__time-current {
    background: #d8dceb none repeat scroll 0 0 !important;
}
.mejs__controls .mejs__time-handle {
    display: none !important;
}
.mejs__controls .mejs__volume-button {

    position: absolute  !important;
    top: 50px !important;
    right: 30% !important;
    width: 40px !important;
    height: 40px !important;
}
.mejs__controls .mejs__horizontal-volume-slider {
    display: block !important;
    position: absolute  !important;
    top: 50px !important;
    right: 15% !important;
    width: 60px !important;
    height: 5px !important;
    margin-top: 18px !important;
    border-radius: 50px !important;
    line-height: 11px !important;
}
.mejs__controls .mejs__horizontal-volume-slider .mejs__horizontal-volume-total,
.mejs__controls .mejs__horizontal-volume-slider .mejs__horizontal-volume-current {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 100% !important;
    background: rgba(255,255,255,0.1) !important;
}
.mejs__controls .mejs__horizontal-volume-slider .mejs__horizontal-volume-current {
    background: #fff !important;
    
}


.cover img {
    display: block !important;
    position: absolute !important;
    bottom: 110% !important;
    left: 5% !important;
    width: 90% !important;
    margin: auto !important;
    text-align: center !important;
    box-shadow: 1px 10px 20px 5px #000000 !important;
    pointer-events: none !important;
}