#video-wrapper {
    width: 100%;
    height: 100%;
    /* max-width: 640px;
    max-height: 360px; */
  }
  #video-compare-container {
    /* display: inline-block; */
    /* line-height: 0; */
    position: relative;
    width: 100%;
    padding-top: 56.25%;  /* 360/640*100=56.25 */
  }
  #video-compare-container > video {
    width: 100%;
    position: absolute;
    top: 0; 
    height: 100%;
  }
  #video-clipper {
    width: 50%; 
    position: absolute;
    top: 0; 
    bottom: 0;
    overflow: hidden;
  }
  #video-clipper video {
    width: 200%;
    position: absolute;
    height: 100%;
  }

  .label-class {
    display: none;
    text-align: center;

    border: 2px solid transparent;
    border-radius: 4px;
    box-shadow: transparent 0px 2px 6px 0px;
    line-height: 1.25;
    overflow-wrap: break-word;
    /* cursor: pointer; */
    transition-property: visibility, border-color, opacity, box-shadow;
    transition-duration: 0.2s, 0.2s, 0.2s, 0.4s;
    transition-timing-function: linear, ease, ease, ease;
    transition-delay: 0.1s;
    /* bottom: 40px; */
    top: 12px;
    padding: 6px 10px;
    /* background-color: rgba(182, 46, 46, 0.5); */
    background-color: rgba(43, 51, 63, 0.7);

    font-size: 16px;
    font-weight: bold;
    color: rgb(255, 255, 255);
    position: absolute;
    max-width: 33%;
    min-width: 100px;
  }
  .before-label-class {
    left: 12px;
  }
  .after-label-class {
    right: 12px;
  }
  .hide-label {
    visibility: visible;
    opacity: 0;
    pointer-events: none;
    transition: visibility 1s, opacity 1s;
  }
  #vertical-bar {
    height: 100%;
    width: 6px;
    right: 0;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 3px 0px;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 0;
  }
  .resize-cursor {
    cursor: ew-resize;
  }