.video-js .vjs-settings-panel {
	position: absolute;
	z-index: 110;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: var(--settings-menu-width, 400px);
	max-width: var(--settings-available-width, calc(100cqw - 24px));
	padding: 8px;
	border-radius: 12px;
	background: var(--settings-background, rgb(0 0 0 / 60%));
	color: #fff;
	font: 500 14px/1.4 Arial, Helvetica, sans-serif;
	text-align: left;
	box-shadow: 0 4px 24px rgb(0 0 0 / 20%);
	overflow: hidden;
	overscroll-behavior: contain;
}
.video-js .vjs-settings-panel-submenu {
	width: max-content;
	min-width: min(var(--settings-submenu-min-width, 200px), var(--settings-available-width, calc(100cqw - 24px)));
	max-width: min(var(--settings-submenu-max-width, 400px), var(--settings-available-width, calc(100cqw - 24px)));
}
.video-js .vjs-settings-list { min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #aaa transparent; }
.video-js .vjs-settings-row,
.video-js .vjs-settings-back {
	box-sizing: border-box;
	position: relative;
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) auto 16px;
	align-items: center;
	gap: 16px;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 10px 8px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.video-js .vjs-settings-row:hover:not(:disabled),
.video-js .vjs-settings-back:hover { background: rgb(255 255 255 / 10%); }
.video-js .vjs-settings-row:focus-visible,
.video-js .vjs-settings-back:focus-visible { outline: 2px solid #fff; outline-offset: -2px; background: rgb(255 255 255 / 10%); }
.video-js .vjs-settings-row:disabled { opacity: .45; cursor: default; }
.video-js .vjs-settings-row[aria-busy="true"] { cursor: progress; }
.video-js .vjs-settings-icon { display: block; flex: 0 0 auto; width: 24px; height: 24px; pointer-events: none; }
.video-js .vjs-settings-row > .vjs-settings-icon:last-child { width: 16px; height: 16px; }
.video-js .vjs-settings-label { min-width: 0; overflow-wrap: anywhere; }
.video-js .vjs-settings-row-nested { grid-template-columns: minmax(0, 1fr) auto 16px; }
.video-js .vjs-menu-label { position: relative; display: inline-block; }
.video-js .vjs-menu-badge { position: absolute; left: calc(100% + 5px); top: 0; padding: 2px 3px; border-radius: 2px; background: #f03; color: #fff; font: 700 8px/1 Arial, Helvetica, sans-serif; text-transform: uppercase; white-space: nowrap; pointer-events: none; }
.video-js .vjs-menu-button > .vjs-control-badge { left: auto; right: -6px; top: calc(50% - 13px); }
.video-js .vjs-settings-value { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(255 255 255 / 75%); text-align: right; }
.video-js .vjs-settings-row[role="menuitemcheckbox"] > .vjs-settings-value { display: none; }
.video-js .vjs-settings-toggle { grid-column: 3 / 5; justify-self: end; width: 40px; height: 24px; padding: 2px; box-sizing: border-box; border-radius: 12px; background: rgb(0 0 0 / 30%); }
.video-js .vjs-settings-row-nested .vjs-settings-toggle { grid-column: 2 / 4; }
.video-js .vjs-settings-toggle::before { content: ""; display: block; width: 20px; height: 20px; background: rgb(255 255 255 / 70%); border-radius: 50%; transform: translateX(0); transition: transform .15s; }
.video-js .vjs-settings-row[aria-checked="true"] .vjs-settings-toggle { background: var(--settings-toggle-on, rgb(255 255 255 / 30%)); }
.video-js .vjs-settings-row[aria-checked="true"] .vjs-settings-toggle::before { transform: translateX(16px); background: #fff; }
.video-js .vjs-settings-back { flex: 0 0 auto; grid-template-columns: 24px minmax(0, 1fr); border-radius: 0; border-bottom: 1px solid rgb(255 255 255 / 15%); margin-bottom: 8px; }
.video-js .vjs-settings-back > span { min-width: 0; overflow-wrap: anywhere; }
.video-js .vjs-settings-empty,
.video-js .vjs-settings-error { padding: 12px 8px; font-size: 13px; }
.video-js .vjs-settings-error { flex: 0 0 auto; color: #ffb3bd; }
.video-js .vjs-settings-menu-button { cursor: pointer; }
.video-js .vjs-settings-button-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.video-js .vjs-settings-button-icon::before { display: none; }
.video-js.vjs-settings-open .vjs-control-bar,
.video-js.vjs-settings-open.vjs-user-inactive.vjs-playing .vjs-control-bar { opacity: 1; visibility: visible; pointer-events: auto; transition: none; }
@container (max-width: 480px) {
	.video-js .vjs-settings-row { gap: 10px; }
	.video-js .vjs-settings-value { max-width: 100px; }
}
@media (prefers-reduced-motion: reduce) { .video-js .vjs-settings-toggle::before { transition: none; } }