progress{
    width: 100%;
    height: 24px;
    border: none;
    box-shadow:none;
    display:none;
    margin-top: 10px;
    /* Reset the default appearance */
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
progress::-webkit-progress-bar{
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-shadow:none;
    appearance:none;
}
progress::-webkit-progress-value{
    background: rgb(119, 25, 47);
    background: linear-gradient(90deg, rgb(119, 25, 47) 0%, rgb(225, 45, 87) 100%);
}
progress::-moz-progress-bar{
    background: rgb(220,233,0);
    background: linear-gradient(90deg, rgba(220,233,0,0.7) 0%, rgba(69,237,156,0.7) 100%);
}
progress::after{
    display:block;
    content:attr(value) '%';
    margin-bottom: 2rem;
}
.playlist_video{
    display:flex;
    gap: 2rem;
    justify-content:space-between;
    align-items:center;
    padding: 8px 8px 8px 40px;
    margin: 0;
    position:relative;
    cursor:grab;
    background:#fff;
}
.playlist_video:active{
    cursor:grabbing;
    box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
}
.playlist_video::before{
    display: inline;
    position:absolute;
    left:8px;
    content: attr(data-playlist-order) '. ';
}
.playlist_video span{
    font-weight:bold;
}
.playlist_video div{
    display:flex;
    align-items:center;
    gap: 1rem;
    flex-wrap:wrap;
}

.playlist_video img{
    width: 100px;
    height: 57px;
    background: #ddd;
    border:1px solid #ddd;
}
.playlist_video:not(:last-child){
    border-bottom: 1px solid #ddd;
}
#mcubedplayer_video_upload label{
    display:block;
}
#mcubedplayer_video_upload{
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
}
#mcubedplayer_slide_controls{
    display:none;
}
.m3p-buttons{
    display:flex;
    flex-wrap:wrap;
    gap: 1.5rem;
}
.m3p-buttons button{
    padding: 2rem!important;
}
#m3p-prev, #m3p-next, #m3p-pause, #m3p-restart{
    width: calc(50% - (1.5rem/2));
    background:#A81735;
    border:none;
    color:#fff;
    text-transform:uppercase;
    font-weight:bold;
    letter-spacing:1px;
}
#m3p-prev::before, #m3p-next::before,
#m3p-pause::before, #m3p-restart::before{
    content:'';
    display:block;
    width: 2rem;
    height: 2rem;
    background-size:contain;
    background-position:center center;
    background-repeat: no-repeat;
    margin: 0 auto 1rem;
    filter: brightness(100);
}
#m3p-prev[disabled], #m3p-next[disabled]{
    opacity:0.4;
}
#m3p-prev[disabled]::before, #m3p-next[disabled]::before{
    opacity: 0.7;
}
#m3p-prev::before{
    background-image:url("../../assets/prev.svg");
}
#m3p-next::before{
    background-image:url("../../assets/next.svg");
}
#m3p-pause, #m3p-restart{
    width: 100%;
}
#m3p-pause::before{
    background-image:url("../../assets/pause.svg");
}
#m3p-pause.paused::before{
    background-image:url("../../assets/play.svg");
}
#m3p-restart::before{
    background-image:url("../../assets/refresh-cw.svg");
}
.m3p-wrap h1{
    color:#eee;
}
#mcubedplayer_video_upload input[type="file"]::file-selector-button, #mcubedplayer_video_upload button{
    display:inline-block;
    height: 30px;
    padding: 0 8px;
    box-sizing:border-box;
    border: 1px solid #8c8f94;
    border-radius: 4px;
}
.m3p-loggedin{
    display:none;
}
.m3p-remote-wrap{
    font-family: 'Exo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding:1rem;
}
.m3p-login-row{
    width:100%;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-bottom:1rem;
}
.m3p-login-row label{
    min-width:6rem;
}
.m3p-login-row input{
    min-width:12rem;
}
#mcubedplayer_login input{
    padding: 0.5rem;
    border: 1px solid #8c8f94;
    border-radius:4px;
    box-sizing:border-box;
}
#mcubedplayer_login button, #m3p-logout{
    background:#A81735;
    color:#fff;
    border:none;
    padding: 1rem;
    display:inline-block;
    font-weight:600;
    text-transform:uppercase;
    border-radius:4px;
    box-sizing:border-box;
    cursor:pointer;
}
#mcubedplayer_login button:hover, #m3p-logout:hover{
    background:color-mix(in srgb, #A81735 90%, #000 10%);
}
#resetPasswordBtn{
    display:block;
    margin-top: 1rem;
}
.m3p-message{
    margin-top:2rem;
}
#mcubedplayer_login, .m3p-loggedin{
    animation: fadeIn 0.3s ease 1 forwards;
    opacity:0;
}
#m3p_qr{
    max-width: 200px;
    min-width: 100px;
    width: 100%;
    height: auto;
}
.video_controls .loop_video{
    margin-left:0.5em;
}
@keyframes fadeIn{
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }