Youtube chapter panel on top of video

moves the chapter panel (invisible) on top of the video (designed for theater mode). Shows up when hovering over it.

/* ==UserStyle==
@name           Youtube chapter panel on top of video
@version        1.0.8
@description    moves the chapter panel (invisible) on top of the video (designed for theater mode). Shows up when hovering over it.
@author         toppits
@license        idc
@namespace      toppits 
@advanced dropdown toggle_left "Toggle Panel side" {
	0 "Right (default)" <<<EOT
	#panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer.ytd-watch-flexy {
    left: inherit !important;
    right: 0 !important;

} EOT;

	1 "Left" <<<EOT
	#panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer.ytd-watch-flexy {
    left: 0 !important;	
	max-width: 450px !important;
  } EOT;
}
==/UserStyle== */
 
@-moz-document url-prefix("https://www.youtube.com") {
	ytd-watch-flexy {
	--ytd-watch-flexy-panel-max-height: calc(var(--ytd-watch-flexy-height-ratio) / var(--ytd-watch-flexy-width-ratio) * (100vw - 100px)) !important;
	}
	#panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer.ytd-watch-flexy {
	position: absolute;
	opacity: 0 !important;
	top: 0 !important;
	z-index: 9999999 !important;
	height: var(--ytd-watch-flexy-panel-max-height) !important;
	max-height: var(--ytd-watch-flexy-panel-max-height) !important;
	margin: 0 !important;
}
	/*[[toggle_left]]*/

#panels.ytd-watch-flexy ytd-engagement-panel-section-list-renderer.ytd-watch-flexy:hover {
	opacity: 1 !important;
	transition-duration: .5s !important;
}

/*current chapter*/
#sync-button.ytd-macro-markers-list-renderer {
	border-radius: 4px !important;
}
}