#sidebar {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh + -65px);
  z-index: 2000;
  width: 250px;
  overflow: auto;
  background-color: #303030;
}
.video + #sidebar {
  transition: all .5s;
  margin-right: -250px;
    
}
.video:hover + #sidebar,.video  + #sidebar:hover {
  transition-delay: .8s;
  margin-right: 0;
}

.light #sidebar {
  background-color: #111;
}
#sidebar.drag {
  box-sizing: border-box;
  outline: 2px dashed rgba(255,255,255,0.7);
  outline-offset: -3px; 
}
#sidebar.drag > #upload-container {
  display: none;  
}
#sidebar.no-drag {
  box-sizing: unset;
  outline: none;  
}
#sidebar.no-drag > #upload-container {
  display: inherit; 
}
#sidebar-header {
  background-color: #222;
  padding: 10px;
  -webkit-app-region: drag;
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.light #sidebar-header {
  background-color: #1b1b1b;
}