:root {
    --playlist-width: 25vw;
    --main-icons-width: 5vw;
    --padding: 1vw;
    --padding-quarter: 0.25vw;
    --padding-half: 0.5vw;
    --padding-2x: 2vw;
    --radius: 9px;
    --line-width: 0.25vw;
    --drop-shadow: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
    --animation-duration-short: 0.2s;
    --animation-duration-normal: 0.36s;
    --animation-duration-long: 0.5s;
    --animation-duration-timing: ease-in-out;
    --explorer-fx-nav-intensity-step: 0.06;
    --explorer-fx-nav-intensity: var(--explorer-fx-nav-intensity-step);
    --explorer-fx-nav-default-inflate: calc(1 + var(--explorer-fx-nav-intensity-step));
    --explorer-fx-nav-default-deflate: calc(1 - var(--explorer-fx-nav-intensity-step));
    --explorer-fx-nav-inflate: calc(1 + var(--explorer-fx-nav-intensity));
    --explorer-fx-nav-deflate: calc(1 - var(--explorer-fx-nav-intensity));
    --explorer-fx-nav-semi-inflate: calc(1 + (var(--explorer-fx-nav-intensity)) / 10);
    --explorer-fx-nav-semi-deflate: calc(1 - (var(--explorer-fx-nav-intensity)) / 10);
    --explorer-fx-nav-duration: 0.1s;
    --explorer-width: calc(100vw - 4vmin - var(--explorer-padding-right) - var(--explorer-padding-left));
    --explorer-height: calc(100vh - 2vmin - var(--explorer-padding-top) - var(--explorer-padding-bottom));
    --entries-per-row: 2;
    --entries-per-col: 2;
    --explorer-padding: calc(var(--explorer-height) * 0.01);
    --explorer-entry-width: calc((var(--explorer-width) - var(--explorer-scrollbar-width)) / var(--entries-per-row));
    --explorer-entry-details-font-size: calc(var(--explorer-entry-name-font-size) * 0.8);
    --explorer-scrollbar-width: 12px;
    --explorer-scrollbar-color: rgba(255, 255, 255, 0.25);
    --explorer-header-height: 6vmax;
    --explorer-content-border-size: calc(var(--explorer-height) * 0.005);
    --explorer-content-vertical-padding: calc((var(--explorer-height) * 0.025) - (2 * var(--explorer-content-border-size)));
    --explorer-content-height: calc(var(--explorer-height) - var(--explorer-header-height));
    --explorer-entry-height: calc((var(--explorer-content-height) - 1px) / var(--entries-per-col));
    --explorer-entry-icon-width: calc(0.92 * (var(--explorer-entry-width) - (2 * var(--explorer-padding))));
    --explorer-entry-icon-height: calc(var(--explorer-entry-height) * 0.625);
    --font-color: #ffffff;
    --explorer-padding-top: 0px;
    --explorer-padding-bottom: 0px;
    --explorer-padding-right: 0px;
    --explorer-padding-left: 0px;
    --modal-height: calc(100vh - var(--explorer-padding-top) - var(--explorer-padding-bottom) - (2 * var(--padding)));
    --opacity-level-1: 0.075;
    --opacity-level-2: 0.25;
    --opacity-level-3: 0.5;
    --opacity-level-4: 0.75;
    --controls-height: calc(var(--explorer-entry-name-font-size) * 3.575);
    --controls-button-height: calc(var(--controls-height) - 2vmin);
    --controls-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 20%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.9) 50.5%, rgba(0, 0, 0, 0.3) 100%);
    --seekbar-height: calc(var(--padding) * 3);
}
::-webkit-scrollbar {
    height: 12px;
    width: var(--explorer-scrollbar-width);
}
::-webkit-scrollbar-thumb {
    border-radius: 1ex;
}
::-webkit-scrollbar-thumb {
    background: var(--explorer-scrollbar-color);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
#modal ::-webkit-scrollbar-thumb {
    background: var(--modal-background-color);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-thumb {
    border-radius: 1ex;
}
* {
    outline: 0;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
}
body:not(input):not(textarea) {
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer */
    -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
    -webkit-user-select: none; /* Chrome, Safari, and Opera */
    -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}
html {
    max-width: 100vw;
    max-height: 100vh;
    touch-action: manipulation;
    background-color: transparent;
}
body {
    margin: 0;
    overflow: hidden;
    height: 100vh;
    background-color: transparent;
}
body.video {
    --modal-background-color: rgba(0, 0, 0, 0.75);
}
#explorer, #explorer header, #osd-root, controls, wrap {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}
body.video:not(.modal) #explorer header {
    transition: transform var(--explorer-fx-nav-duration) ease-in-out 0s;
    transform: scale(var(--explorer-fx-nav-default-inflate));
}
body.video #explorer, body.modal #explorer {
    transform: scale(var(--explorer-fx-nav-default-deflate));
}
body.video:not(.modal) #osd-root {
    transform: scaleY(var(--explorer-fx-nav-default-deflate));
}
body.video:not(.menu-playing) #explorer header .explorer-location, 
body.video-playing.idle:not(.menu-playing) #explorer header .explorer-time, 
body.video:not(.menu-playing) #explorer .content-out,
body.video:not(.menu-playing) #explorer #home-arrows {
    visibility: hidden;
}
body.video.menu-playing #explorer header .explorer-location,
body.video.menu-playing #explorer .content-out {
    visibility: visible;
}
body.miniplayer-cordova {
    pointer-events: none;
}
body.video.idle {
    cursor: none !important;
}
#main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    background-color: transparent;
}
body:not(.video) #main {
    background: linear-gradient(to bottom, transparent 0%, var(--modal-background-color) calc(var(--explorer-header-height) + var(--explorer-padding-top) + (var(--explorer-padding) * 4)));
}
input {
    font-family: inherit;
}
#explorer {
    width: var(--explorer-width);
    height: var(--explorer-height);
    margin-top: var(--explorer-padding-top);
    margin-bottom: var(--explorer-padding-bottom);
    margin-right: var(--explorer-padding-right);
    margin-left: var(--explorer-padding-left);
    display: flex;
    flex-wrap: wrap;
    border-radius: var(--radius);
    transition: transform var(--explorer-fx-nav-duration) ease-in-out 0s;
    transform: none;    
}
#explorer header, #explorer content {
    width: 100%;
    display: flex;
    flex-basis: 100%;
    clear: both;
}
#explorer header {
    height: var(--explorer-header-height);
    box-sizing: border-box;
    justify-content: space-between;
    padding: 0 var(--padding);
    transition: opacity var(--explorer-fx-nav-duration) ease-out 0s;
}
#explorer header div {
    justify-content: space-between;
    display: flex;
    flex: 1;
}
#explorer header time, #explorer header .explorer-location {
    font-size: var(--explorer-entry-name-font-size);
    color: var(--font-color);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
#explorer header i {
    font-size: calc(1.125 * var(--explorer-entry-name-font-size));
}
#explorer header .explorer-location {
    width: 100%; /* Android <9 compat */
}
#explorer header .explorer-omni {
    display: table;
    align-self: center;
    flex-grow: inherit;    
    text-align: right;
}
body.video.menu-playing #explorer header .explorer-omni {
    visibility: visible !important;
}
#explorer header .explorer-omni > span {
    background: linear-gradient(to bottom, rgba(0,0,0, 0.3), rgba(255, 255, 255, 0.05));
    border-radius: var(--padding-2x);
    display: none;
    min-width: calc(var(--explorer-entry-name-font-size) * 14);
    text-align: left;
    align-items: center;
    margin-right: calc(var( --padding) * 2);
    padding: var(--explorer-padding) calc(2 * var(--explorer-padding));
}
#explorer header .explorer-omni input {
    border-width: 0;
    width: calc(100% - var(--explorer-entry-name-font-size));    
    min-width: calc(13 * var(--explorer-entry-name-font-size));
    background: transparent;
    font-size: var(--explorer-entry-name-font-size);    
}
body.home #explorer content a.entry-2x, body.explorer-wide #explorer content a.entry-2x {
    width: calc(200% / var(--entries-per-row));
    max-width: 100%;
}
body.explorer-vertical #explorer content a.entry-2x {
    height: calc(200% / var(--entries-per-col));
}
body.explorer-vertical controls button label span {
    display: none;
}
body.explorer-vertical span.entry-icon-image {
    height: 100% !important;
    left: 0 !important;
    justify-content: left !important;
    bottom: 0 !important;
    max-width: calc(1.25 * var(--explorer-entry-height));
    justify-content: center !important;
}
body.explorer-vertical span.entry-icon-image img {
    max-width: calc(var(--explorer-entry-height) * 0.94);
}
body.explorer-vertical #explorer content a span.entry-data-in {
    --explorer-entry-details-font-size: calc(var(--explorer-entry-name-font-size) * 0.8);
    height: -webkit-fill-available;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    padding-left: calc(1.25 * var(--explorer-entry-height));
    box-sizing: border-box;
    padding-bottom: 0;
    top: 0;
}
body.explorer-vertical #explorer content a .entry-name, body.explorer-vertical #explorer content a .entry-details {
    text-align: left !important;
}
@media (orientation: portrait) {
    #explorer header .explorer-omni > span:not(.selected) input {
        display: none;
    }
    #explorer header .explorer-omni > span {
        min-width: 0;
    }
}
body:not(.explorer-vertical) {
    #explorer content a.entry-2x {
        width: calc(200% / var(--entries-per-row));
    }
}
#explorer header .explorer-omni > span.selected {
    background: linear-gradient(to bottom, var(--font-color) 0%, var(--secondary-font-color) 100%);
}
#explorer header .explorer-omni input, #explorer header .explorer-omni i, #explorer header .explorer-omni input::-webkit-input-placeholder {
    color: var(--secondary-font-color);
    text-shadow: none;
}
#explorer header .explorer-omni > span.selected input, #explorer header .explorer-omni > span.selected i, #explorer header .explorer-omni > span.selected input::-webkit-input-placeholder {
    color: var(--background-color);
}
#explorer header .explorer-omni i {
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
    font-size: var(--explorer-entry-name-font-size);
}
.explorer-omni-submit {
    justify-content: center;
    align-items: center;
    height: calc(var(--explorer-entry-name-font-size) + (2 * var(--explorer-padding)));
    padding: 0 var(--padding);
}
#explorer header .explorer-location-text {
    margin-top: calc(var(--padding) * -0.075);
}
#explorer header .explorer-location-icon {
    display: flex;
    align-items: center;    
    margin-right: var(--padding);
}
#explorer header .explorer-location-icon img {
    height: var(--explorer-entry-name-font-size);
    vertical-align: bottom;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#explorer header .explorer-location-pagination {
    display: none;
    margin-left: var(--padding-2x);
}
#explorer header .logo {
    margin-left: var(--padding);
    width: auto;
    font-size: var(--explorer-entry-name-font-size);
    height: var(--explorer-entry-name-font-size);
}
.header-entry {
    margin-left: var(--padding);
    border-radius: 5vmax;
    padding: var(--padding-quarter) var(--padding-half);
    color: white;
    font-size: calc(1.125 * var(--explorer-entry-name-font-size));
}
.header-entry.selected {
    background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.4) 10%, rgba(255,255,255,0.2) 100%);
}
body.video #explorer .header-entry {
    display: none;
}
body:not(.video) #explorer header .logo {
    display: none;
}
#explorer .explorer-time {
    display: flex;
    align-items: center;
    filter: drop-shadow(var(--drop-shadow));
}
div#home-arrows {
    position: relative;
    width: 100vw;
    align-items: center;
    z-index: 1;
}
span#home-arrows-top {
    transform: translateY(calc(-2 * var(--padding)));
}
span#home-arrows-bottom {
    transform: translateY(var(--padding));
    bottom: 0;
}
div#home-arrows > div {
    position: relative; 
    width: 100vw;
    height: var(--explorer-content-height);  
    z-index: 0;
    padding: 0;
    top: calc((var(--explorer-height) - var(--explorer-header-height)) * -1);
    left: calc(((100vw - var(--explorer-width)) / 2) * -1);
    display: flex;
    box-sizing: border-box;
    pointer-events: none;
    justify-content: center;
}
div#home-arrows > div > * {
    color: white;
    pointer-events: all;
    font-size: 4vmin;
    height: 4vmin;
    cursor: pointer;
    opacity: 0;
    position: absolute;
    display: flex;
    align-items: baseline;
}
#explorer .content-out {    
    height: var(--explorer-content-height);
    display: flex;
    align-items: flex-end;
    width: 100%;
    background: rgba(0,0,0, 0.1);
    border-radius: var(--radius);
}
#explorer content {
    height: inherit;
    display: flex;
    position: relative;
    justify-content: center;
    transition: -webkit-mask-image 0.2s linear;
}
#explorer content wrap {
    overflow-x: hidden;
    overflow-y: auto;
    display: inline-block;
    list-style-type: none;
    box-sizing: border-box;
    text-align: left;
    font-size: 0;
    width: var(--explorer-width);
    height: inherit;
    transition: transform var(--explorer-fx-nav-duration) ease-in-out 0s;
}
#explorer content wrap a {
    width: calc(100% / var(--entries-per-row));
    height: var(--explorer-entry-height);
    box-sizing: border-box;
    padding: var(--explorer-padding);
    display: inline-block;
    overflow: hidden;
    color: var(--font-color);
    text-align: center;
}
#explorer .entry-loading {
    opacity: var(--opacity-level-4);
}
#explorer .entry-icon-image i, #explorer content a span.entry-name, #explorer content a span.entry-details {
    display: block;
}
#explorer .entry-icon-image i {
    mask-image: radial-gradient(circle at 50% -30%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 35%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: radial-gradient(circle at 50% -30%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 35%, rgba(0, 0, 0, 0) 100%);
}
#explorer content a.entry-disabled .entry-icon-image {
    filter: saturate(0.15);
    opacity: var(--opacity-level-3);
}
#explorer content a * {
    color: inherit;
}
#explorer content a .entry-icon-image i:not(.spin-x-alt) {
    opacity: 0.95;
}
#explorer content a .entry-icon-image i.fa-play-circle {
    opacity: var(--opacity-level-4);
}
#explorer content a .entry-icon-image i.fa-toggle-off {
    opacity: 0.65;
}
#explorer content a .entry-icon-image {
    width: 92%;
    height: 64%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    position: absolute;
    bottom: 4%;
    left: 4%;
}
#explorer content a .entry-icon-image i {
    width: auto;
    height: auto !important;
    font-size: calc(var(--explorer-entry-icon-height) * 0.9);
}
#explorer content a .entry-icon-image img {    
    height: auto !important;
    max-height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
#explorer content .entry-icon-image .fas:before {
    display: flex;
    justify-content: center;
}
#explorer content a span.entry-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: inline-block;    
    border-radius: var(--radius);
    border: 0px solid rgba(255, 255, 255, 0);
    box-sizing: content-box;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.025) 100%);
}
#explorer content a:not(.selected) span.entry-wrapper {
    border: 1px solid rgba(255, 255, 255, 0.009);
    width: calc(100% - 2px);
    height: calc(100% - 2px);
}
#explorer content a.entry-cover:not(.selected) span.entry-wrapper {
    border: 1px solid rgba(255,255,255,0.03) !important;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
}
#explorer content a.selected span.entry-wrapper {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.375) 100%);
    box-shadow: 0 0 2px white;
}
#explorer content a span.entry-name, #explorer content a span.entry-details {
    text-align: center;
    overflow: hidden;
    word-break: break-word;
    white-space: normal;
}
#explorer content a span.entry-data-in {
    z-index: 1;
    position: absolute;
    display: inline-block;
    text-align: center;    
    top: var(--explorer-padding);
    left: 0;
    z-index: 1;
    width: 100%;
}
#explorer content a span.entry-name {
    letter-spacing: 0.033em;
    font-size: var(--explorer-entry-name-font-size);
    min-height: var(--explorer-entry-name-font-size);
    display: inline-block;
    line-height: 150%;
    text-shadow: 1px 1px black, 0 0 4px black;
    -webkit-font-smoothing: antialiased;
}
#explorer content a span.entry-details {
    line-height: 150%;
    font-size: var(--explorer-entry-details-font-size);
    min-height: var(--explorer-entry-details-font-size);
    color: var(--secondary-font-color);
}
.control-layer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: calc(var(--controls-height) + var(--seekbar-height));
    width: 100%;
    padding: calc(var(--padding) * 7) 0 var(--padding-2x) 0;
    z-index: 4;
    box-sizing: border-box;
    pointer-events: none;
    align-items: center;				
    justify-content: center;
    color: var(--font-color);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.25) 80%, rgba(0, 0, 0, 0.125) 90%, transparent 100%);
    font-size: var(--controls-button-height);
    visibility: hidden;
    display: flex;
}
.control-layer-icon {
    padding: 0 2vmin;
    mask-image: var(--controls-mask-image);
    -webkit-mask-image: var(--controls-mask-image);
}
body.menu-playing .control-layer, body:not(.video) .control-layer {
    display: none;
    visibility: hidden;
}
div#seek-back, div#seek-fwd {
    font-size: var(--controls-button-height);    
    flex-direction: column;
}
div#button-action-feedback i {
    transition: transform 0.5s ease-out 0s, opacity 0.5s ease-out 0s;
}
span.seek-layer-time {
    display: block;
    height: 0;
    font-size: 75%;
}
div#audio-layer {
    font-size: calc(1.5 * var(--controls-height));
}
body.audio:not(.video-paused):not(.video-ended):not(.video-loading):not(.seek-back):not(.seek-fwd):not(.casting) div#audio-layer {
    visibility: visible;
}
body.video-loading:not(.video-paused):not(.menu-playing):not(.video-ended):not(.seek-back):not(.seek-fwd):not(.casting) div#loading-layer {
    visibility: visible;
}
body.video.seek-back div#seek-back {
    visibility: visible;
}
body.video.seek-fwd div#seek-fwd {
    visibility: visible;
}
div#loading-layer {
    opacity: 0;
    transition: opacity 0.5s ease-in 0s;
    flex-direction: column;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.125) 0%, rgba(0, 0, 0, 0.068) 80%, rgba(0, 0, 0, 0.042) 90%, transparent 100%);
    width: 100vw;
    text-align: center;
    justify-content: center;
}
div#loading-layer i.fa-mega {
    font-size: 150%;
}
div#loading-layer > span.loading-layer-status {
    height: 0;
}
div#loading-layer > span.loading-layer-status > span {
    padding: calc(0.5 * var(--padding)) calc(1.5 * var(--padding));
    font-size: var(--explorer-entry-name-font-size);
    background: var(--modal-background-color);
    border-radius: 25vmin;
    position: relative;
    top: -2vmin;
    display: inline-flex;
    justify-content: center;
}
body.idle div#loading-layer > span.loading-layer-status {
    position: absolute;
    bottom: 15vmin;
}
body.idle div#loading-layer > .control-layer-icon {
    display: none;
}
body.video-loading #loading-layer {
    opacity: 1;
}
.control-layer i {
    filter: drop-shadow(0 0 0.75vmin black);
    margin-left: calc(var(--explorer-padding-left) / 2);
}
body:not(.video).miniplayer-cordova div#paused-layer {
    background-color: #000000;
    height: 100vh;
    visibility: visible;
}
body.video-paused:not(.menu-playing):not(.seek-back):not(.seek-fwd) div#paused-layer, body.video-ended:not(.menu-playing):not(.seek-back):not(.seek-fwd) div#paused-layer {
    visibility: visible;   
}
body.video-paused div#audio-layer, body.video-ended div#audio-layer, body.video-loading div#audio-layer {
    display: none !important;
}
body.fullscreen.idle {
    cursor: none !important;
}
controls {
    z-index: 1;
    width: inherit;
    height: inherit;
    position: fixed;
    height: auto;
    left: auto; 
    right: 0;
    display: block;
    box-sizing: border-box;
    background: linear-gradient(to bottom, transparent 0%, black 100%);   
    bottom: calc((var(--controls-height) + var(--seekbar-height)) * -2);
}
body.video controls {
    transition: bottom var(--animation-duration-normal), transform var(--explorer-fx-nav-duration) ease-in-out 0s;
    transform: scale(var(--explorer-fx-nav-inflate));
}
controls > div {
    display: flex;
    align-items: center;
    height: var(--controls-height);
}
div#streamer-info {
    display: flex;
    justify-content: center;    
    position: relative;
    bottom: 0;
    align-items: flex-end;
    opacity: 0;
    transition: opacity var(--explorer-fx-nav-duration) ease-in-out 0s;
}
div#streamer-info > div {
   background-color: rgba(0, 0, 0, 0.5);
   color: #fff;
   display: inline-flex;
   flex-direction: column;
   border-radius: var(--radius);
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   padding: var(--explorer-padding) var(--padding) var(--padding) var(--padding);
   text-align: center;
   line-height: 175%;
   font-size: var(--explorer-entry-name-font-size);   
   position: relative;
   bottom: calc((var(--seekbar-height) - var(--padding)) * -1);
}
body.video:not(.idle):not(.casting):not(.menu-playing) div#streamer-info, body.video-paused div#streamer-info {
    display: flex;
    justify-content: center;    
    position: relative;
    bottom: 0;
    align-items: flex-end;
    opacity: 1;
    transition: opacity var(--explorer-fx-nav-duration) ease-in-out 0s;
}
seekbar {
    height: var(--seekbar-height);
    width: inherit;
    display: block;
    opacity: var(--opacity-level-4);
    pointer-events: auto;
    cursor: wait;
}
seekbar > div {
    padding: 0;
    display: block;
    pointer-events: none;
    height: var(--padding);
    margin-top: calc(-1 * var(--padding));
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
}
seekbar > div > div {
    padding: 0;
    display: block;
    pointer-events: none;
    height: inherit;
    background-color: #fff;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    transition: width 0.1s ease-in-out 0s, background-color 0.6s ease-in-out 0s;
}
body.video seekbar > div > div {
    mask-image: var(--controls-mask-image);
    -webkit-mask-image: var(--controls-mask-image);
}
seekbar input[type="range"] {
    margin: 0;
    height: 100%;
    display: block;
    cursor: pointer;
}
seekbar label {
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    position: absolute;
    pointer-events: none;
    display: inline-block;
    text-shadow: 0 0 2vh var(--font-color);
    height: var(--seekbar-height);
    line-height: var(--seekbar-height);
    color: #000;
    font-size: var(--explorer-entry-name-font-size);
    overflow: hidden;
}
body.video seekbar label {    
    transition: color 0.5s linear 0s;
}
body.audio:not(.miniplayer-cordova):not(.menu-playing) controls, body.casting:not(.menu-playing) controls, body.video.video-playing:not(.idle):not(.menu-playing):not(.miniplayer-cordova) controls, body.video.video-paused:not(.miniplayer-cordova):not(.menu-playing) controls, body.video.video-ended:not(.miniplayer-cordova):not(.menu-playing) controls, body.video.video-loading:not(.miniplayer-cordova):not(.menu-playing):not(.idle) controls {
    bottom: 0;
    transform: none;
}
body.modal controls {
    visibility: visible;
    transform: scale(var(--explorer-fx-nav-default-deflate)) !important;
}
body.miniplayer-cordova controls, body.miniplayer-cordova div#modal, body.miniplayer-cordova #explorer header  {
    display: none !important;
}
body.miniplayer-cordova div#paused-layer {
    padding: 0;
}
controls span.filler {
    flex-grow: 1;
}
controls button {
    width: var(--controls-button-height);
    height: var(--controls-button-height);
    border-width: 0;
    background: none; 
    overflow: visible;
    text-align: center;
    display: inline-flex;
    flex-direction: column;  
    justify-content: center; 
    opacity: 0.9;
    margin: 0 0 0 1.5%;
}
body.video controls button span.button-icon {
    transition: -webkit-mask-image 0.2s linear;
    mask-image: var(--controls-mask-image);
    -webkit-mask-image: var(--controls-mask-image);
}
controls button.play-pause {
    opacity: 1;
    margin: 0;
    margin-left: 1.75%;
}
controls button.selected:not(#info), controls button:hover:not(#info), controls button:active:not(#info) {
    opacity: 1;
}
controls button.selected:not(#info) span.button-icon, controls button:hover:not(#info) span.button-icon, controls button:active:not(#info) span.button-icon {
    mask-image: none;
    -webkit-mask-image: none;
    filter: drop-shadow(0 0 1vmin #ffffff);
}
controls button#info.selected .about-icon-dot, controls button#info:hover .about-icon-dot, controls button#info:active .about-icon-dot {
    opacity: 1;
    filter: drop-shadow(0 0 0.33vmin var(--font-color));
}
controls button label {
    display: none;
    height: 0;
    width: 100% !important;
    position: relative;
}
controls label.status {
    color: #fff;
    margin-left: 2%;
    font-size: var(--explorer-entry-name-font-size);
}
body.video-playing:not(.idle):not(.menu-playing) controls button.selected label, body.video-loading:not(.menu-playing) controls button.selected label, body.video-paused:not(.menu-playing) controls button.selected label, body.video-ended:not(.menu-playing) controls button.selected label {
    display: flex;
    justify-content: center;
}
controls button label span {
    line-height: 150%;
    color: white;
    font-size: var(--explorer-entry-details-font-size);
    position: absolute;
    top: calc(-1.5 * var(--padding));
    white-space: nowrap;
    border-radius: var(--radius);
    display: inline-table;
    padding: 0 var(--padding);
    filter: drop-shadow(0 0 1vmin black);
}
controls span.button-icon { /* classes added to override fontAwesome display property */
    width: 100% !important;
    height: 100% !important;
    max-height: var(--controls-button-height);
    display: flex;
    justify-content: center;
    cursor: pointer;    
    padding: 2vmin 0;
}
controls button.info span.button-icon { /* classes added to override fontAwesome display property */
    flex-direction: column;
    padding-left: 1.5vmin;
}
controls button.info:hover span.button-icon, controls button.info.selected span.button-icon { /* classes added to override fontAwesome display property */
    mask-image: none;
    -webkit-mask-image: none;
}
controls button i.fas, controls button i.fab, controls button span { /* classes added to override fontAwesome display property */
    color: var(--font-color);
    height: 100% !important;
    max-height: var(--controls-button-height);
    font-size: calc(var(--controls-button-height) - 4vmin);
    line-height: 100%;
    display: inline-flex;
}
div#arrow-down-hint {
    justify-content: center;
    width: 100vw;
    height: 0;
    opacity: var(--opacity-level-2);
}
div#arrow-down-hint i {
    display: inline;
    color: var(--font-color);
    font-size: var(--padding-15x);
    top: calc(-2 * var(--padding));
    position: relative;
    cursor: pointer;
    padding: var(--padding);
}
controls button.info i.about-icon-dot {
    background: white;
    display: inline-flex;
    width: calc((var(--controls-button-height) / 8) * 1.33) !important;
    height: calc((var(--controls-button-height) / 8) * 1.33) !important;
    border-radius: 100%;
    transition: background-color 0.6s ease-in-out 0s;
}
controls button.info i.about-icon-dot-second {
    margin: calc((var(--controls-button-height) / 8) / 2) 0;
}
controls button.info.faclr-green i.about-icon-dot-first, seekbar.faclr-green > div > div {
    background: #0f0;
    box-shadow: 0 0 1.5vmin 0.2vmin #0f0;
}
controls button.info.faclr-orange i.about-icon-dot-second, seekbar.faclr-orange > div > div {
    background: #e0d213;
    box-shadow: 0 0 1.5vmin 0.2vmin #e0d213;
}
controls button.info.faclr-red i.about-icon-dot-third, seekbar.faclr-red > div > div {
    background: #f05;
    box-shadow: 0 0 1.5vmin 0.2vmin #f05;
}
controls button.recording.faclr-green i {
    color: #0f0;
}
controls button.recording.faclr-orange i {
    color: #e0d213;
}
controls button.recording.faclr-red i {
    color: #f05;
}
.modal-template-message i.fa-circle.faclr-green {
    color: #0f0 !important;
    filter: drop-shadow(0 0 0.4vmin #0f0);
    margin-right: 0.8vmin;
}
.modal-template-message i.fa-circle.faclr-orange {
    color: #e0d213 !important;
    filter: drop-shadow(0 0 0.4vmin #e0d213);
    margin-right: 0.8vmin;
}
.modal-template-message i.fa-circle.faclr-red {
    color: #f05 !important;
    filter: drop-shadow(0 0 0.4vmin #f05);
    margin-right: 0.8vmin;
}
volume {
    display: none;
    pointer-events: auto;
    position: absolute;
    width: 0;
    height: 0;
}
body.menu-playing volume, body:not(.video) volume {
    display: none !important;
}
volume-wrap {
    position: relative;
    height: calc(var(--controls-button-height) * 0.6);
    width: calc(var(--controls-button-height) * 3);
    left: calc(var(--controls-button-height) * 0.125);
    display: inline-block;
}
volume-wrap > div {
    position: static;
    width: inherit;
    height: inherit;
    transform: rotate(270deg) translate(calc((var(--controls-button-height) * -2.15) * -1), calc((var(--controls-button-height) * 1.25) * -1));
    display: flex;
    flex-direction: row-reverse;    
    align-items: center;
}
volume-wrap > div > input[type=range] {
    width: inherit;
    height: inherit;
    cursor: pointer;
    display: inline-block;
    border-radius: var(--radius);
    box-shadow: 0 0 2vmin -1vmin var(--font-color);
    margin: 0;
}
volume-wrap > div > input[type=range]::-webkit-slider-thumb {
    height: var(--controls-button-height);
    width: 0;
    display: inline-block;
}
volume-wrap > div > input[type=range]::-webkit-slider-runnable-track {
    height: inherit;
    width: inherit;
    display: inline-block;
}
volume-wrap #volume-arrow {
    display: inline-flex;
    border-width: calc(var(--controls-button-height) * 0.125) 1vmin calc(var(--controls-button-height) * 0.125) 0;
    border-color: transparent rgba(255, 255, 255, 0.4) transparent transparent;
    border-style: solid;
    box-sizing: border-box;
    position: relative;
    top: 0.1vmin;
    height: calc(var(--controls-button-height) * 0.25);
}
@media all and (orientation:portrait) {
    controls label.status, button.fullscreen, button.volume, button.ratio {
        display: none;
    }
}
body.casting seekbar, body.casting button.volume, body.casting button.ratio, body.casting button.tune, body.casting button.fullscreen, body.casting label.status {
    display: none;
}
body.casting.video-playing #cast-layer {
    visibility: visible;
}
button.button-alpha i {
    opacity: var(--opacity-level-3);
}
#osd-root {
    position: absolute;
    top: var(--explorer-padding-top);
    left: var(--explorer-padding-left);
    width: 100%;  
    padding: 0 2vmin;
    z-index: 10;
    box-sizing: border-box;
    pointer-events: none;
    display: none; 
    flex-direction: column;
    align-items: center;
    transition: transform var(--explorer-fx-nav-duration) ease-in-out 0s;
}
body.osd #osd-root {
    display: flex; 
}
body.osd:not(.video) #explorer header {
    opacity: 0.15 !important;
}
body.video #osd-root {
    bottom: calc(var(--controls-height) + var(--padding) + var(--seekbar-height));
}
#osd-root > div {
    font-size: var(--explorer-entry-name-font-size);
    height: calc(1.5 * var(--explorer-entry-name-font-size));
    color: var(--font-color);
    display: flex;
    align-items: center;
    border-width: 0;
    margin-bottom: var(--padding);
    border-radius: calc(var(--radius) * 2);
    text-shadow: 0 0 1vh #000, 0 0 6vh #000;
    margin-bottom: var(--padding-quarter);
    opacity: 1;
    background: var(--modal-background-color);
    max-width: 98%;
}
#osd-root > div:not(.osd-highlight) {    
    padding: calc(var(--padding) / 8) var(--padding) calc(var(--padding) / 8) var(--padding);
    margin-left: var(--padding-half);
}
#osd-root > div.osd-highlight {
    font-size: calc(0.25 * var(--explorer-header-height));
    height: calc(var(--explorer-header-height) - (2 * var(--padding)));
    opacity: 1;
    margin-bottom: calc(1.5 * var(--padding));
    margin-left: var(--padding-half);
    margin-top: var(--padding);
    padding: 0 var(--padding);
}
#osd-root > div > div {
    /*
    vertical-align: middle;
    line-height: 150%;
    */
    display: inline-block;
    height: inherit;
    align-items: center;
}
.osd-icon img, .osd-icon i {
    width: auto;
    height: inherit;
    margin-right: var(--padding);
    font-size: var(--explorer-entry-details-font-size);
    display: inline-flex;
    align-items: center;
}
#osd-root > div.osd-highlight .osd-icon img, #osd-root > div.osd-highlight .osd-icon i {
    font-size: calc(0.25 * var(--explorer-header-height));
}
#osd-root .osd-hidden {
    display: none !important;
}
#osd-root .osd-text {
    position: relative;
    line-height: 150%;
    align-items: center;
    display: flex;
    white-space: pre-wrap;
}
#osd-root .osd-text > div {
    display: block;
}
body:not(.video-loading) #osd-entry-debug-conn-err { /* Show connection debug only if video is in loading state */
    display: none !important;
}
.faclr-green {
    color: #094 !important;
}
.faclr-orange {
    color: #f50 !important;
}
.faclr-red {
    color: #f05 !important;
}
.faclr-purple {
    color: #af07c1 !important;
}
span.entry-status-flags {
    line-height: 100%;    
}
span.entry-status-flag {
    border-radius: var(--radius);
    height: calc(var(--explorer-entry-name-font-size) + var(--padding-quarter));
    min-width: calc(var(--explorer-entry-name-font-size) + var(--padding-quarter));
    font-weight: bold;
    text-transform: uppercase;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    opacity: 0.9;
    box-sizing: border-box; 
    white-space: pre;   
}
span.entry-status-flag i.fas.fa-times, span.entry-status-flag i.fas.fa-check {
    margin: calc(var(--padding-quarter) * 0.5) calc(var(--padding-quarter) * 0.5) 0 calc(var(--padding-quarter) * 0.5);
    font-size: calc(var(--explorer-entry-name-font-size) - var(--padding-quarter));
}
span.entry-status-flag i.fas.fa-play {
    margin: calc(var(--padding-quarter) * 0.5) 0 0 calc(var(--padding-quarter) * 0.75);
    font-size: calc(var(--explorer-entry-name-font-size) - (2 * var(--padding-quarter)));
}
body.explorer-vertical span.entry-status-flag i.fas.fa-play {
    margin: calc(var(--padding-quarter) * 0.5) 0 0 calc(var(--padding-quarter) * 1.25);
    font-size: calc(var(--explorer-entry-name-font-size) - (4 * var(--padding-quarter)));
}
span.entry-status-flag-success {
    background: #094;
}
span.entry-status-flag-failure {
    background: #f04;
}
div#modal {
    visibility: hidden;
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    z-index: 9;
    background: var(--modal-background-color);
}
div#modal > div {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: var(--modal-height);
    z-index: 4;
    color: #000;
    display: block;
    box-sizing: border-box;
    top: calc(var(--explorer-padding-top) + var(--padding));
    bottom: calc(var(--explorer-padding-bottom) + var(--padding));
    right: calc(var(--explorer-padding-right) + var(--padding));
    left: calc(var(--explorer-padding-left) + var(--padding));
}
div#modal > div > div {
    display: table;
    vertical-align: middle;
    text-align: center;
    height: var(--modal-height);
}
div#modal > div > div > div {
    display: table-cell;
    width: var(--explorer-width);
    vertical-align: middle;    
    transform: scale(var(--explorer-fx-nav-deflate));
    transition: transform var(--explorer-fx-nav-duration) ease-in-out 0s;    
}
body.modal div#modal > div > div > div {
    transform: none;    
}
body.modal div#home-arrows {
    visibility: hidden;
}
body.modal wrap {
    opacity: var(--opacity-level-2);
}
body.modal #modal {
    visibility: visible;
}
span.modal-template-message {
    font-size: var(--explorer-entry-name-font-size);
    margin-bottom: var(--padding);
    padding: 1.5vmax var(--padding);
    display: flex;
    justify-content: center;
    line-height: 175%;
    flex-shrink: 999;
    overflow: auto;
    word-break: break-word;
}
span.modal-template-message font {
    display: contents;
}
span.modal-template-spacer {
    max-width: var(--explorer-modal-option-min-width);
    padding: var(--padding);
    box-sizing: border-box;
    display: block;
    width: 100%;
}
span.modal-template-text, span.modal-template-textarea {
    padding: 0 var(--padding);
    display: flex;
    max-width: var(--explorer-modal-option-min-width);
    width: 100%;
    box-sizing: border-box;
    align-items: center;    
    font-size: var(--explorer-entry-name-font-size);
    background: linear-gradient(to top, rgba(255, 255, 255, 0.5), white);
    border-radius: var(--radius);
}
span.modal-template-text i, span.modal-template-textarea i {
    color: #000;
    opacity: var(--opacity-level-2);
}
span.modal-template-text i {
    padding-right: var(--padding-half);
}
span.modal-template-textarea i {
    padding-right: var(--padding);
}
span.modal-template-textarea {
    margin-bottom: var(--padding);
}
span.modal-template-textarea, span.modal-template-textarea textarea {
    min-height: 20vmax;
}
span.modal-template-text input, span.modal-template-textarea textarea {
    opacity: var(--opacity-level-4);
    background: transparent;
    padding: 0;
    width: inherit;
    min-height: 7vmax;
    border: 0;
    outline: 0;
    max-width: 97%;
    display: inline-block;
    font-size: var(--explorer-entry-name-font-size);    
    border-radius: var(--radius);
}
span.modal-template-textarea textarea {
    min-height: 25vh;
    padding: var(--padding);
    line-height: 150%;
}
span.modal-template-question {
    color: #000;
    text-align: left;
}
span.modal-template-question i {
    margin-right: var(--padding);
}
span.modal-template-question img {
    height: 2.5vmax;
    width: 2.5vmax;
    background-size: contain;
    background-position: center center;
    margin-right: var(--padding);
    background-repeat: no-repeat;
}
.modal-template-slider, .modal-template-option, .modal-template-option-detailed, .modal-template-question {
    box-sizing: border-box;
    padding: 1.5vmax 0;
    max-width: var(--explorer-modal-option-min-width);
    width: 100%;
    font-size: var(--explorer-entry-name-font-size);
    display: flex;
    align-items: center;
}
a.modal-template-option, a.modal-template-option-detailed {
    border-bottom: 2px solid rgba(0,0,0,0.02);
    box-shadow: 0 -0.5vmin 1vmin 0.5vmin rgba(0, 0, 0, 0.01);
    justify-content: center;
    padding: 2.5vmax 0 ;
    background: linear-gradient(to bottom, rgba(0,0,0, 0.05) 0%, transparent 150%);
    color: black;
}
a.modal-template-option.selected, a.modal-template-option-detailed.selected .modal-template-option-detailed-name {
    font-weight: bold;
}
a.modal-template-option i, a.modal-template-option-detailed i {
    margin-right: var(--padding);
}
a.modal-template-option.selected, a.modal-template-option-detailed.selected {
    box-shadow: 0 0 2vh 0.5vh rgba(0, 0, 0, 0.125);
    background: white;
    opacity: 1;
}
div.modal-template-option-detailed-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: var(--padding-half);
    justify-content: center;
}
div.modal-template-option-detailed-details {
    display: block;
    width: 100%;
    font-size: var(--explorer-entry-details-font-size);
    opacity: var(--opacity-level-3);
    height: auto;
}
span.modal-template-text.selected-parent i, span.modal-template-text.selected-parent input, 
span.modal-template-textarea.selected-parent i, span.modal-template-textarea.selected-parent textarea, 
span.modal-template-text input:focus, span.modal-template-textarea textarea:focus {
    opacity: 1;
}
.modal-wrap {
    max-height: var(--modal-height);
    padding: 0;
    border-radius: var(--radius);
}
.modal-wrap > div {
    overflow: hidden;
    max-height: var(--modal-height);
    padding: var(--padding);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.95) 5%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.8) 100%);
    border-radius: var(--radius);
    box-sizing: border-box;    
    flex-direction: column;
    display: flex;
}
.modal-template-options {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.7) 100%);
    box-sizing: border-box;
    overflow: auto;
    max-height: inherit;
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    border-radius: var(--radius);    
}
@media only screen and (min-width: 321px) and (orientation:landscape) {
    .modal-template-options.two-columns {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .modal-template-options.two-columns a.modal-template-option, .modal-template-options.two-columns a.modal-template-option-detailed {
        width: 50%;
    }
}
.fa-blink-alpha {
    animation: blink-alpha 1.1s infinite linear;
}
@keyframes blink-alpha {
    0% { opacity: 1; }
    20% { opacity: 1; }
    50% { opacity: var(--opacity-level-3); }
    80% { opacity: 1; }
    100% { opacity: 1; }
}
.fa-blink {
    animation: blink 1.1s infinite linear;
}
@keyframes blink {
    0% { opacity: 1; }
    49% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 0; }
}
span.modal-template-slider a:first-child, span.modal-template-slider a:last-child {
    width: 4.9%;
    display: inline-block;
}
span.modal-template-slider {
    background: #fff;
}
span.modal-template-slider .modal-template-slider-track {
    width: calc(100% - (8 * var(--padding)));
    height: calc(4 * var(--padding));
    display: inline-block;
    margin: var(--padding);
    vertical-align: sub;
}
input[type=range] {
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    width: 100%; /* Specific width is required for Firefox. */
    background: transparent; /* Otherwise white in Chrome */
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: inherit;
    width: 1em;
    height: 100%;
}
input[type=range]:focus {
    outline: none;
}
input.modal-template-slider-track {
    overflow: hidden;
    width: 80px;
    -webkit-appearance: none;
    background: linear-gradient(to bottom, transparent -100%, var(--modal-background-color) 400%);
    border-radius: var(--radius);
}
input.modal-template-slider-track::-webkit-slider-runnable-track {
    height: 10px;
    -webkit-appearance: none;
    margin-top: -1px;
    display: block;
}
input.modal-template-slider-track::-webkit-slider-thumb {
    width: 10px;
    -webkit-appearance: none;
    height: 10px;
    cursor: ew-resize;
    background: var(--background-color);
    box-shadow: calc(100vw * -1) 0 0 100vw var(--background-color);
}
span.modal-template-slider-left, span.modal-template-slider-right {
    cursor: pointer;
    font-size: calc(4 * var(--padding));
}
body:not(.menu-playing) #menu-playing-close {
    visibility: hidden;
}
body.menu-playing #explorer .content-out {
    overflow: visible;
}
body.menu-playing #explorer content {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}
body.video #explorer header > div > span {
    visibility: hidden !important;
}
body.menu-playing #explorer content {
    background: transparent;
}
body.menu-playing #explorer {
    width: 100vw;
}
body.menu-playing #main {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0, rgba(0, 0, 0, 0.75) calc(100vh - var(--controls-height)), #000 100vh);
}
#menu-playing-close {
    position: absolute;
    right: 0;
    cursor: pointer;
    color: #ffffff;
}
#menu-playing-close > div {
    position: relative;
    height: var(--explorer-header-height);
    font-size: calc(1.5 * var(--explorer-entry-name-font-size));
    padding: 0;
    top: calc(var(--explorer-header-height) * -1);
    line-height: 100%;
    border-top-left-radius: 2vmin;
    border-top-right-radius: 2vmin;
    display: inline-flex;
    align-items: center;
}
#menu-playing-close.selected > div > i {
    color: #ffffff;
    font-size: calc(1.75 * var(--explorer-entry-name-font-size)) !important;
}
@keyframes slide-in-from-left {
    from { 
        opacity: 0.25;
        transform: scaleX(0); 
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}
.slide-in-from-left {    
    animation: slide-in-from-left 0.250s;
    transform-origin: left;
}
@keyframes spin-x-alt {
    0% {
        transform: scaleX(1);
        opacity: 0.75;
    }
    25% {
        opacity: 0.6;
    }
    50% {
        transform: scaleX(-1);
        opacity: 0.75;
    }
    75% {
        opacity: 0.6;
    }
    100% {
        transform: scaleX(1);
        opacity: 0.75;
    }
}
.spin-x-alt {    
    animation: spin-x-alt 3s infinite;
    display: inline-block;
}
@keyframes inflate {
    0% {
		transform: rotateX(0deg) scale(var(--explorer-fx-nav-deflate));
    }
    70% {
        transform: rotateX(-0.075deg) scale(var(--explorer-fx-nav-semi-inflate));
    }
    100% {
        transform: none;
    }
}
@keyframes deflate {
    0% {
		transform: rotateX(0deg) scale(var(--explorer-fx-nav-inflate));
    }
    70% {
        transform: rotateX(0.075deg) scale(var(--explorer-fx-nav-semi-deflate));
    }
    100% {
        transform: rotateX(0deg) scale(1);
    }
}
.effect-inflate {
    animation: inflate var(--explorer-fx-nav-duration) 1;
}
.effect-deflate {
    animation: deflate var(--explorer-fx-nav-duration) 1;
}
.effect-inflate-deflate-parent {
    perspective: 10vmin;
    transform-origin: center center;
}
.entry-cover-container {    
    min-height: 100%;
    display: flex;
    justify-content: center;
}
.entry-cover-active > div {
    position: absolute;
    width: inherit;
    height: inherit;
    z-index: -999;
    justify-content: center;
    align-items: center;
    display: flex;
}
.entry-disabled.entry-cover-active .entry-wrapper {
    opacity: var(--opacity-level-3);
}
.entry-cover label {
    text-transform: uppercase;
}
.entry-cover .entry-data-in {
    filter: var(--drop-shadow);
    background: radial-gradient(ellipse farthest-corner, rgba(0, 0, 0, 0.15) 33%, transparent 72%);
}
.entry-cover-active > div > img {
    object-fit: cover;
    border-radius: var(--radius);
    min-width: 100%;
    min-height: 100%;
    height: -webkit-fill-available;
    width: -webkit-fill-available;
}
.entry-cover .entry-wrapper {
    background: linear-gradient(to bottom, var(--background-color), transparent);
}
.entry-cover-active .entry-data-in {
    top: 0 !important;
    background: linear-gradient(to bottom, var(--shadow-background-color) -10%, transparent 100%);
    padding-bottom: calc(var(--explorer-entry-name-font-size) * 6);
}
.entry-cover-active .entry-name {
    padding: var(--padding-quarter) var(--padding-half);
    padding-top: var(--padding-half);
    border-radius: var(--radius);    
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    display: inline-block;    
    margin-top: 0;
}
.entry-cover .entry-wrapper {
    background: linear-gradient(to bottom, rgba(0,0,0, 0.3), transparent) !important;
}
#explorer content a.selected span.entry-wrapper.entry-cover-active {
    box-shadow: 0 1px 2px white;
}
.funny-text {
    display: inline-block;
    font-weight: bold;
}