html{
    width: 100%;
    height: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    box-sizing: border-box;
}
body{
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    box-sizing: border-box;
}
.video{
    width: 50%;
    height: 100%;
    display: flex;
    flex-flow: wrap;
    text-align: center;
    align-items: center;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;

}
video {
    width: 320px;
    height: 240px;    
    box-shadow: 2px 2px 0px #88c8 inset;
    border: 1px solid #88c8;
    border-radius: 5px 5px 5px 5px;
    position: absolute; 
    top: 0px;
    left: 0px;
    object-fit: fill;
}

#subtitles {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #ffff00;
    text-shadow: 0px 0px 1px #000;
    font-size: 16px;
    display: table-cell;
    border: 1px solid #cc88;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 2px 2px 0px #cc88 inset;
    width: 320px; 
    height: 240px;
    padding: 0px 0px 0px 0px;
    position: absolute; 
    top: 0px;
    left: 0px;
    text-align: center;
    vertical-align: bottom;
}
.relative {
    position: relative;
    width: 320px;
    height: 240px;
}
.absolute {
    position: absolute; 
    top: 0px;
    left: 0px;
}
h1#time {
    width: 128px;
    position: absolute;
    top: 8px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    left: calc(25% - 64px);
}
canvas#output, canvas#buffer, canvas#differ, canvas#cloned{
    display: inline-block;
    width: 80px;
    height: 80px;
    border: 1px solid #8c88;
    border-radius: 5px;
    box-shadow: 2px 2px 0px #8c88 inset;                
    image-rendering: pixelated;
    image-rendering: crisp-edges;
} 
canvas#differ{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0.5;;
}
progress[value] {
    /* Reset the default appearance */
    -webkit-appearance: none;
    appearance: none;
    background-color: #eee;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
    width: calc(100% - 16px);;
    height: 20px;
}
#progress {
    position: absolute;
    left: 8px;
    bottom: 8px; 
    height: 38px !important;
}
#scenes {
    position: absolute;
    /* left: 8px;
    top: calc(100% - 96px);
    width: calc(100% - 16px);
    height: 100%; */
    right: 8px;
    top: 8px;
    width: 50%;
    height: calc(100% - 56px);
    border: 1px #8888 ridge;
    background: #101018;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    vertical-align: top;
    justify-content: top;
    overflow-x: hidden;
    overflow-y: auto;
}
li:hover {
    background: #fff3;
    cursor: pointer;
}

ul li img {
    width: 32px;
    height: 24px; 
}

ul li {
    display: inline-block;
    text-align: center;
    list-style: none;
    width: 80px;
    text-overflow: ellipsis;
    color: #ffe;
    height: 80px;;
}
ul li div {
    display: inline-block; 
    width:  100%;
}
ul div {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 9px;
    width: 64px;
}
ul div {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 9px;
    width: 64px;
    text-align: center;
}
ul li span {
    display: inline-block;
    font-size: 8px; 
    width: 100%;
    height: 32px;
    white-space: nowrap;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
}
#similarity19 { left:1px; top: 0px; }
#similarity18 { left:1px; top: 4px; }
#similarity17 { left:1px; top: 8px; }
#similarity16 { left:1px; top: 12px; }
#similarity15 { left:1px; top: 16px; }
#similarity14 { left:1px; top: 20px; }
#similarity13 { left:1px; top: 24px; }
#similarity12 { left:1px; top: 28px; }
#similarity11 { left:1px; top: 32px; }
#similarity10 { left:1px; top: 36px; }
#similarity9  { left:1px; top: 40px; }
#similarity8  { left:1px; top: 44px; }
#similarity7  { left:1px; top: 48px; }
#similarity6  { left:1px; top: 52px; }
#similarity5  { left:1px; top: 56px; }
#similarity4  { left:1px; top: 60px; }
#similarity3  { left:1px; top: 64px; }
#similarity2  { left:1px; top: 68px; }
#similarity1  { left:1px; top: 72px; }
#similarity0  { left:1px; top: 76px; }
#similarity   { left:1px; top: 80px; }

#histogram progress {
    position: absolute;
    border:none;
    /* transform: rotate(270deg); */
    width: 40px;
    height: 3px;
    border-radius: 0px !important;
    
}

#histogram progress {
    background-image: linear-gradient(90deg, #210, #012);
}
#histogram progress[value]::-webkit-progress-bar,
#histogram progress[value]::-moz-progress-bar{
    background-image: linear-gradient(90deg, #f80, #08f);
}

#similarity {
    background-image: linear-gradient(90deg, #200, #020) !important;                                
}
#similarity[value]::-moz-progress-bar,
#similarity[value]::-webkit-progress-bar {
    background-image: linear-gradient(90deg, #f00, #0f0) !important;
}



#histogram {
    position: absolute;
    left: 8px;
    top: 8px;
    width: 42px;
    height: 84px;
    display: flex;
    flex-direction: row;
    flex-shrink: 3;
    border-radius: 0px;
    align-content: flex-start;
    background-image: linear-gradient(#111, #000) !important;
}