@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import '../node_modules/video.js/dist/video-js.css';

#drop-zone {
	transition: all 0.3s ease;
}

#drop-zone.dragover {
	filter: opacity(0.5);
	z-index: 9999999;
}

/* Make the video relative, instead of absolute, so that
   the parent container will size based on the video. Also,
   note the max-height rule. Note the line-height 0 is to prevent
   a small artifact on the bottom of the video.
 */
.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3,
video.video-js,
video.vjs-tech {
	max-height: calc(100dvh - 12dvh) !important;
	position: relative !important;
	width: 100%;
	min-width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	padding-top: 0 !important;
	line-height: 0;
	/* background-color: transparent !important; */
}

/* Fix the control bar due to us resetting the line-height on the video-js */
.vjs-control-bar {
	line-height: 1;
}

.video-js .vjs-time-control {
	display: block;
}
.video-js .vjs-remaining-time {
	display: none;
}

/* #video-container {
	    --tw-shadow: 0 0 50px -12px rgb(0 0 0 / 0.25);
    --tw-shadow-colored: 0 0 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	    --tw-shadow-color: #030712;
    --tw-shadow: var(--tw-shadow-colored);
} */
