.mmmc-video {
	width: 100%;
	margin: 0 0 20px;
	clear: both;
}

.mmmc-video .video-js {
	width: 100%;
	background: #000;
}

.mmmc-video .video-js .vjs-big-play-button {
	border-radius: 50%;
	width: 2em;
	height: 2em;
	line-height: 2em;
	margin-left: -1em;
	margin-top: -1em;
}

/* S3Bubble's bundled Video.js 7 stylesheet hides some controls globally. */
.mmmc-video .video-js .vjs-skip-backward-30,
.mmmc-video .video-js .vjs-skip-forward-30,
.mmmc-video .video-js .mmmc-settings-button {
	display: inline-block;
}

/* Settings (cog) menu */
.mmmc-video .video-js .mmmc-settings-button {
	cursor: pointer;
}

.mmmc-video .video-js .vjs-icon-cog::before {
	font-size: 16px;
}

.mmmc-video .video-js .mmmc-settings-panel {
	position: absolute;
	right: 1em;
	bottom: 3.6em;
	z-index: 3;
	min-width: 13em;
	max-height: 70%;
	overflow-y: auto;
	padding: 0.3em 0;
	background: rgba(28, 28, 28, 0.92);
	border-radius: 4px;
	font-size: 1.25em;
}

.mmmc-video .video-js .mmmc-settings-panel[hidden] {
	display: none;
}

.mmmc-video .video-js .mmmc-settings-row {
	display: flex;
	justify-content: space-between;
	gap: 1.5em;
	width: 100%;
	padding: 0.55em 1em;
	margin: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font: inherit;
	text-align: left;
	cursor: pointer;
	line-height: 1.2;
}

.mmmc-video .video-js .mmmc-settings-row:hover,
.mmmc-video .video-js .mmmc-settings-row:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	outline: none;
}

.mmmc-video .video-js .mmmc-settings-value {
	opacity: 0.75;
}

.mmmc-video .video-js .mmmc-settings-value::after {
	content: " \203A";
}

.mmmc-video .video-js .mmmc-settings-back {
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	margin-bottom: 0.3em;
	font-weight: bold;
}

.mmmc-video .video-js .mmmc-settings-row.is-selected::before {
	content: "\2713";
	margin-right: 0.6em;
}

.mmmc-video .video-js .mmmc-settings-row.is-selected {
	justify-content: flex-start;
	color: #53bbb4;
}

/* S3Bubble forces its own icon font with !important; take ours back. */
.mmmc-video .video-js .vjs-icon-placeholder,
.mmmc-video .video-js .vjs-icon-placeholder::before,
.mmmc-video .video-js .vjs-icon-cog::before {
	font-family: MMMCVideoJS !important;
}

/* Admin preview (?mmmc_view=full) */
.mmmc-admin-preview {
	clear: both;
	margin: 0 0 20px;
	padding: 12px;
	border: 2px dashed #e0a800;
}

.mmmc-admin-preview-note {
	margin: 0 0 10px;
	font-size: 14px;
}

/* Fill the 16:9 player with the cover image (a few S3Bubble covers are square/4:3). */
.mmmc-video .vjs-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Viewer watermark on full lessons: small, faint, away from the centre and controls. */
.mmmc-video .video-js .mmmc-watermark {
	position: absolute;
	z-index: 2;
	max-width: 45%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font: 500 clamp(10px, 1.3vw, 14px)/1.2 Arial, Helvetica, sans-serif;
	color: rgba(255, 255, 255, 0.32);
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
	pointer-events: none;
	user-select: none;
	transition: opacity 0.6s;
}
.mmmc-video .video-js .mmmc-wm-tl { top: 4%; left: 3%; }
.mmmc-video .video-js .mmmc-wm-tr { top: 4%; right: 3%; }
.mmmc-video .video-js .mmmc-wm-bl { bottom: calc(3em + 4%); left: 3%; }
.mmmc-video .video-js .mmmc-wm-br { bottom: calc(3em + 4%); right: 3%; }