html, body, div { margin:0px; padding:0px; }
html { height: 100%; }
body {
    background: #000;
    font: 14px sans-serif;
    overflow: hidden;
    height: 100%;
    color: #fff;
}
#wrapper {
    display:grid;
    grid-template-rows: auto 34px;
    width:100%;
    height:100vh;
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
    background-color: #194263;
}
#wrapper.mobile {
    display: block;
}

#controls {
    display: grid;
    color: #fff;
    grid-template-columns: 40px 40px auto 40px 40px 40px;
    justify-items: center;
    background:linear-gradient(to bottom, #2c628c, #194263, #2c628c);
}

.icon {
    display: inline-block;
    width: 24px; height: 24px;
    padding: 5px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: center;
}
    .icon > svg { width:24px; height:24px; }

#volume { position:relative; }
#volume #volume_bar {
    display: none;
    position: absolute;
    overflow: hidden;
    height: 72px;
    bottom: 34px;
    margin-left: -6px;
    padding: 10px 15px 0px 15px;
    background: linear-gradient(180deg, #194263, #2c628c);
    border-radius: 6px 6px 0 0;
}
#volume:hover #volume_bar { display: block; }

#volume #volume_bar #volume_full, #volume #volume_bar #volume_slider {
    position: absolute;
    width:4px; height: 100%;
    left:13px;
    background-color: #999;
}
#volume #volume_bar #volume_slider {
    top: 20px;
    background-color: #fff;
}
#volume #volume_bar #volume_slider #volume_handle {
    position: absolute;
    left: -5px; top: -7px;
    width: 14px; height: 14px;
    background-color: #fff;
    border-radius: 20px;
}
#volume #volume_bar:hover #volume_slider #volume_handle { display: block; }

#scrubber {
    position: relative;
    width:95%;
}
#scrubber #time_full, #scrubber #time_elapsed {
    position: absolute;
    top: 7px;
    width: 100%;
    height: 5px;
    background-color: #999;
    cursor: pointer;
}
#scrubber #time_elapsed {
    width: 50%;
    background-color:#fff;
}
#scrubber #time_elapsed #time_handle {
    display: none;
    position: absolute;
    right: -2px; top:  -4px;
    width: 14px; height: 14px;
    background-color:#fff;
    border-radius: 20px;
}
#scrubber:hover #time_elapsed #time_handle { display: block; }

#scrubber #time_display, #scrubber #time_display_full {
    position: absolute;
    top: 15px;
}
#scrubber #time_display_full { right:5px; }

#settings .panel {
    display: none;
    position: absolute;
    right: 0px;
    bottom: 34px;
    padding: 4px 10px;
    background: linear-gradient(180deg, #194263, #2c628c);
    border-radius: 6px 6px 0 0;
}
#settings .panel choice {
    display: block;
    cursor: pointer;
    padding: 6px 6px 6px 20px;
    border-top: 1px solid #999;
    min-width:100px;
}
#settings .panel choice:first-child { border-top: none; }
#settings .panel choice.active {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>');
    background-repeat: no-repeat;
    background-size: 15px;
    background-position: 0px 7px;
}

#media { cursor:pointer; }
#media video { display:block; margin:0px auto; }
#media audio {
    display: block;
    position: absolute;
    width: 100%;
    bottom: 1em;
}
#media #audio_download { display: none; }

/* Audio Player adjustments */
#wrapper.audio { display: block; }
#wrapper.audio #media {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon></svg>');
    background-size: 230px;
    background-position: 62% top;
    background-repeat: no-repeat;
    height: 100%;
}
#wrapper.audio #controls { display: none; }
#wrapper.audio #media #audio_download {
    display: block;
    position: absolute;
    padding: 0.25em 0.75em 0.3em 0.75em;
    right:1em; bottom:80px;
    background: linear-gradient(to bottom, #2c628c, #194263);
    border:2px solid #fff;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
}

#wrapper.loading #media {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-loader"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg>');
    background-size: 230px;
    background-position: center;
    background-repeat: no-repeat;
    animation: spin 5s linear infinite;
    min-height: 230px;
}
@keyframes spin {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}
#wrapper.loading #controls { display:none; }
#wrapper.loading #media video, #wrapper.loading #media audio { display:none; }

#wrapper.video #media { background-color:#000; }

#play.icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>');
}
#play.icon.pause {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>');
}
#volume.icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon></svg>');
}
#volume.icon.mute {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-x"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><line x1="23" y1="9" x2="17" y2="15"></line><line x1="17" y1="9" x2="23" y2="15"></line></svg>');
}
#download.icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>');

}
#settings.icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>');
}
#fullscreen.icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 240 240" fill="white" focusable="false" stroke="white" stroke-width="2"><path d="M96.3,186.1c1.9,1.9,1.3,4-1.4,4.4l-50.6,8.4c-1.8,0.5-3.7-0.6-4.2-2.4c-0.2-0.6-0.2-1.2,0-1.7l8.4-50.6c0.4-2.7,2.4-3.4,4.4-1.4l14.5,14.5l28.2-28.2l14.3,14.3l-28.2,28.2L96.3,186.1z M195.8,39.1l-50.6,8.4c-2.7,0.4-3.4,2.4-1.4,4.4l14.5,14.5l-28.2,28.2l14.3,14.3l28.2-28.2l14.5,14.5c1.9,1.9,4,1.3,4.4-1.4l8.4-50.6c0.5-1.8-0.6-3.6-2.4-4.2C197,39,196.4,39,195.8,39.1L195.8,39.1z"></path></svg>');
}
#fullscreen.icon.restore {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 240 240" fill="white" focusable="false" stroke="white" stroke-width="2"><path d="M109.2,134.9l-8.4,50.1c-0.4,2.7-2.4,3.3-4.4,1.4L82,172l-27.9,27.9l-14.2-14.2l27.9-27.9l-14.4-14.4c-1.9-1.9-1.3-3.9,1.4-4.4l50.1-8.4c1.8-0.5,3.6,0.6,4.1,2.4C109.4,133.7,109.4,134.3,109.2,134.9L109.2,134.9z M172.1,82.1L200,54.2L185.8,40l-27.9,27.9l-14.4-14.4c-1.9-1.9-3.9-1.3-4.4,1.4l-8.4,50.1c-0.5,1.8,0.6,3.6,2.4,4.1c0.5,0.2,1.2,0.2,1.7,0l50.1-8.4c2.7-0.4,3.3-2.4,1.4-4.4L172.1,82.1z"></path></svg>');
}