/* ============================================================
		   WIGNALL HOME EDITION
		   ABLE PLAYER RESPONSIVE / SIZING FIXES

		   Page-level fixes for legacy Able Player instances.
		   Place AFTER ableplayer.css / ableplayer.min.css.
		   ============================================================ */


		/* ============================================================
		   1. GLOBAL BOX SIZING
		   ============================================================ */

		.able-player-wrapper,
		.able-player-wrapper *,
		.able-wrapper,
		.able-wrapper *,
		.able,
		.able * {
			box-sizing: border-box;
		}


		/* ============================================================
		   2. PLAYER WRAPPER

		   IMPORTANT:
		   Replaces the previous fixed width: 596px rule.

		   All media, controls, captions and status areas now share
		   the same responsive container width.
		   ============================================================ */

		.able-player-wrapper,
		.able-wrapper {
			width: 100% !important;
			max-width: 700px !important;

			margin: 1.75rem 0 !important;
			padding: 0;

			vertical-align: top;
		}


		/* ============================================================
		   3. MAIN ABLE PLAYER

		   Prevent JavaScript-generated or legacy dimensions from
		   making the control container wider or narrower than media.
		   ============================================================ */

		.able-player-wrapper > .able,
		.able-wrapper > .able,
		.able {
			width: 100% !important;
			max-width: 100% !important;

			margin-left: 0;
			margin-right: 0;
		}


		/* ============================================================
		   4. MEDIA CONTAINERS
		   ============================================================ */

		.able .able-media-container,
		.able .able-vidcap-container {
			box-sizing: border-box;

			width: 100% !important;
			max-width: 100% !important;

			margin: 0;
			padding: 0;
		}


		/* ============================================================
		   5. NATIVE VIDEO

		   Makes the actual video exactly match the player/control width.

		   height:auto preserves the original aspect ratio.
		   display:block removes the small inline-video gap that can
		   appear below video elements.
		   ============================================================ */

		.able .able-vidcap-container video,
		.able .able-media-container video {
			display: block !important;

			width: 100% !important;
			max-width: 100% !important;
			height: auto !important;

			margin: 0;
			padding: 0;
		}


		/* ============================================================
		   6. YOUTUBE / VIMEO / EMBEDDED VIDEO

		   Keep embedded players inside the Able Player width.

		   Do not force an arbitrary height here because existing
		   players can have different aspect ratios.
		   ============================================================ */

		.able .able-media-container iframe,
		.able .able-vidcap-container iframe {
			display: block !important;

			width: 100% !important;
			max-width: 100% !important;

			margin: 0;
			padding: 0;

			border: 0;
		}


		/* ============================================================
		   7. VIDEO CAPTION CONTAINER
		   ============================================================ */

		.able .able-vidcap-container {
			position: relative;

			overflow: hidden;

			background: #000000;
		}


		/* Caption wrapper should never exceed video width */

		.able .able-vidcap-container .able-captions-wrapper {
			box-sizing: border-box;

			width: 100% !important;
			max-width: 100% !important;
		}


		/* Captions positioned below video */

		.able .able-vidcap-container .able-captions-below {
			box-sizing: border-box;

			width: 100%;

			margin: 0;
		}


		/* ============================================================
		   8. AUDIO CAPTION CONTAINER

		   General improvement for older audio players on this page.
		   The custom .cc-audio-playlist rules can override these.
		   ============================================================ */

		.able .able-audcap-container {
			box-sizing: border-box;

			width: 100%;
			max-width: 100%;

			margin: 0;
		}


		/* ============================================================
		   9. PLAYER CONTROLS

		   Forces controller, seek bar and status bar to precisely
		   match media width.
		   ============================================================ */

		.able .able-controller {
			box-sizing: border-box;

			width: 100% !important;
			max-width: 100% !important;

			margin: 0;
		}


		/* Control row */

		.able .able-control-row {
			box-sizing: border-box;

			width: 100%;
			max-width: 100%;

			margin: 0;

			gap: 0.25rem;
		}


		/* ============================================================
		   10. SEEKBAR

		   Avoid seekbar overflow caused by its internal horizontal
		   padding.
		   ============================================================ */

		.able .able-seekbar-wrapper {
			box-sizing: border-box;

			width: 100% !important;
			max-width: 100% !important;
		}


		.able .able-seekbar {
			box-sizing: border-box;

			width: 100%;
			max-width: 100%;
		}


		/* ============================================================
		   11. LEFT / RIGHT CONTROL GROUPS

		   Allow controls to wrap cleanly at narrower widths instead
		   of widening the player.
		   ============================================================ */

		.able .able-left-controls,
		.able .able-right-controls {
			max-width: 100%;

			flex-wrap: wrap;

			align-items: center;
		}


		/* Prevent images/icons from changing control dimensions */

		.able-right-controls img,
		.able-left-controls img {
			display: block !important;

			max-width: 100%;
			height: auto;
		}


		/* ============================================================
		   12. STATUS BAR

		   Make elapsed time / status information align exactly with
		   the controller and media.
		   ============================================================ */

		.able .able-status-bar {
			box-sizing: border-box;

			width: 100% !important;
			max-width: 100% !important;

			margin: 0;
		}


		/* ============================================================
		   13. NOW PLAYING
		   ============================================================ */

		.able .able-now-playing {
			box-sizing: border-box;

			width: 100%;
			max-width: 100%;

			margin-left: 0;
			margin-right: 0;
		}


		/* ============================================================
		   14. BIG PLAY BUTTON

		   Keep overlay inside video boundaries.
		   ============================================================ */

		.able button.able-big-play-button {
			box-sizing: border-box;

			width: 100% !important;
			max-width: 100% !important;
		}

		div.able-now-playing span {
			font-size: 1rem !important;
		}

		/* Keep large play icon reasonable on smaller players */

		.able button.able-big-play-button svg {
			width: clamp(4rem, 15vw, 8rem);
			height: clamp(4rem, 15vw, 8rem);
		}


		/* ============================================================
		   15. PLAYLISTS ON OLDER PLAYERS

		   Keep legacy embedded playlists aligned with player width.
		   Does not replace the branded .cc-audio-playlist styling.
		   ============================================================ */

		.able-player-wrapper + .able-playlist,
		.able-wrapper + .able-playlist,
		.able .able-playlist {
			box-sizing: border-box;

			width: 100%;
			max-width: 700px;

			margin-left: 0;
			margin-right: 0;
		}


		/* Prevent individual playlist rows from overflowing */

		.able-playlist li,
		.able-playlist li button {
			box-sizing: border-box;

			max-width: 100%;
		}


		/* Long titles should wrap rather than expand the player */

		.able-playlist li button {
			white-space: normal;

			overflow-wrap: anywhere;
			word-break: normal;
		}


		/* ============================================================
		   16. TRANSCRIPT WINDOWS / INLINE TRANSCRIPTS
		   ============================================================ */

		.able-transcript-area {
			box-sizing: border-box;

			max-width: min(700px, calc(100vw - 2rem));
		}


		/* Text should not force transcript wider */

		.able-transcript {
			box-sizing: border-box;

			max-width: 100%;

			overflow-wrap: break-word;
		}


		/* ============================================================
		   17. PLAYER MENUS / POPUPS

		   Prevent settings, captions and speed menus from overflowing
		   the viewport on narrower screens.
		   ============================================================ */

		.able-popup {
			max-width: min(24rem, calc(100vw - 2rem));

			overflow-wrap: break-word;
		}


		/* ============================================================
		   18. RESPONSIVE TABLET / MOBILE
		   ============================================================ */

		@media (max-width: 767px) {

			.able-player-wrapper,
			.able-wrapper {
				width: 100% !important;
				max-width: 100% !important;

				margin: 1.5rem 0 !important;
			}


			.able,
			.able .able-media-container,
			.able .able-vidcap-container,
			.able .able-controller,
			.able .able-status-bar,
			.able .able-now-playing,
			.able .able-seekbar-wrapper {
				width: 100% !important;
				max-width: 100% !important;
			}


			/*
			 * Give controls room to wrap without clipping.
			 */

			.able .able-control-row {
				justify-content: space-between;

				row-gap: 0.4rem;
			}


			.able .able-left-controls,
			.able .able-right-controls {
				flex-wrap: wrap;

				row-gap: 0.25rem;
			}


			/* Playlist follows mobile width */

			.able-player-wrapper + .able-playlist,
			.able-wrapper + .able-playlist,
			.able .able-playlist {
				width: 100% !important;
				max-width: 100% !important;
			}

		}


		/* ============================================================
		   19. VERY SMALL SCREENS
		   ============================================================ */

		@media (max-width: 480px) {

			/*
			 * Reduce horizontal controller padding so buttons have
			 * enough space without overflowing.
			 */

			.able .able-control-row {
				padding-left: 0.4rem;
				padding-right: 0.4rem;
			}


			.able .able-seekbar-wrapper {
				padding-left: 0.65rem;
				padding-right: 0.65rem;
			}


			.able .able-status-bar {
				padding-left: 0.65rem;
				padding-right: 0.65rem;

				gap: 0.5rem;

				flex-wrap: wrap;
			}


			.able button.able-big-play-button svg {
				width: 4.5rem;
				height: 4.5rem;
			}

		}


		/* ============================================================
		   20. WINDOWS HIGH CONTRAST
		   ============================================================ */

		@media (forced-colors: active) {

			.able {
				border: 1px solid CanvasText;
			}


			.able .able-controller,
			.able .able-status-bar {
				border-color: CanvasText;
			}

		}


		/* ============================================================
		   21. IMPORTANT EXCEPTION:
		   NEW CHAFFEY AUDIO PLAYLIST

		   Preserve the dedicated 700px component behavior and allow
		   its more specific branded rules to control presentation.
		   ============================================================ */

		.cc-audio-playlist,
		.cc-audio-playlist .able-player-wrapper,
		.cc-audio-playlist .able-wrapper,
		.cc-audio-playlist .able {
			max-width: 700px !important;
		}


/* ============================================================
   WIGNALL MUSEUM
   LEGACY ABLE PLAYER PLAYLIST BRANDING

   Applies the new 性视界 playlist appearance to existing
   older Able Player playlists on this page.

   Does NOT override the new CC Audio Playlist component.
   ============================================================ */


/* ============================================================
   COLOR VARIABLES
   ============================================================ */

:root {
	--cc-legacy-playlist-red: #990000;
	--cc-legacy-playlist-red-dark: #750000;
	--cc-legacy-playlist-red-darker: #5c0000;
	--cc-legacy-playlist-red-light: #f7eeee;
	--cc-legacy-playlist-red-light-active: #f1e2e2;

	--cc-legacy-playlist-text: #222222;
	--cc-legacy-playlist-border: #d5d5d5;
	--cc-legacy-playlist-white: #ffffff;
}


/* ============================================================
   LEGACY PLAYLIST CONTAINER

   Excludes:
   .cc-audio-playlist__tracks

   This also overrides old inline max-width:400px declarations.
   ============================================================ */

.able-playlist:not(.cc-audio-playlist__tracks) {
	box-sizing: border-box;

	width: 100% !important;
	max-width: 700px !important;

	margin-top: 0;
	margin-right: 0;
	margin-bottom: 1.75rem;
	margin-left: 0;

	padding: 0 !important;

	border: 1px solid var(--cc-legacy-playlist-border);
	border-radius: 0 0 6px 6px;

	overflow: hidden;

	background: var(--cc-legacy-playlist-white);

	list-style: none;
}


/* ============================================================
   INDIVIDUAL TRACK
   ============================================================ */

.able-playlist:not(.cc-audio-playlist__tracks) > li {
	position: relative;

	box-sizing: border-box;

	width: 100%;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-top: 1px solid var(--cc-legacy-playlist-border) !important;

	background: var(--cc-legacy-playlist-white) !important;
	color: var(--cc-legacy-playlist-text) !important;
}


/* Avoid double border on first track */

.able-playlist:not(.cc-audio-playlist__tracks) > li:first-child {
	border-top: 0 !important;
}


/* ============================================================
   TRACK BUTTON
   ============================================================ */

.able-playlist:not(.cc-audio-playlist__tracks) > li > button {
	position: relative;

	display: block;

	box-sizing: border-box;

	width: 100%;
	min-height: 56px;

	margin: 0 !important;

	/*
	 * Left padding:
	 * play indicator

	 * Right padding:
	 * navigation chevron
	 */
	padding: 0.95rem 3.75rem 0.95rem 3.15rem !important;

	border: 0 !important;
	border-radius: 0 !important;

	background: var(--cc-legacy-playlist-white) !important;
	color: var(--cc-legacy-playlist-text) !important;

	font: inherit;
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.45;

	text-align: left !important;
	text-decoration: none !important;

	white-space: normal;

	overflow-wrap: break-word;

	cursor: pointer;
}


/* ============================================================
   LEFT PLAY INDICATOR
   ============================================================ */

.able-playlist:not(.cc-audio-playlist__tracks) > li > button::before {
	content: "\25B6";

	position: absolute;

	top: 50%;
	left: 1.15rem;

	transform: translateY(-50%);

	color: var(--cc-legacy-playlist-red);

	font-size: 0.8rem;
	line-height: 1;
}


/* ============================================================
   RIGHT CHEVRON

   CSS-drawn for better visibility and consistency.
   ============================================================ */

.able-playlist:not(.cc-audio-playlist__tracks) > li > button::after {
	content: "";

	position: absolute;

	top: 50%;
	right: 1.35rem;

	box-sizing: border-box;

	width: 0.65rem;
	height: 0.65rem;

	border-top: 3px solid var(--cc-legacy-playlist-red);
	border-right: 3px solid var(--cc-legacy-playlist-red);

	transform: translateY(-50%) rotate(45deg);

	transition:
		right 0.18s ease,
		border-color 0.18s ease;
}


/* ============================================================
   HOVER
   ============================================================ */

.able-playlist:not(.cc-audio-playlist__tracks)
> li:not(.able-current)
> button:hover {

	background: var(--cc-legacy-playlist-red-light) !important;
	color: var(--cc-legacy-playlist-red-dark) !important;
}


.able-playlist:not(.cc-audio-playlist__tracks)
> li:not(.able-current)
> button:hover::before {

	color: var(--cc-legacy-playlist-red-dark);
}


.able-playlist:not(.cc-audio-playlist__tracks)
> li:not(.able-current)
> button:hover::after {

	right: 1.15rem;

	border-color: var(--cc-legacy-playlist-red-dark);
}


/* ============================================================
   SELECTED / CURRENT TRACK

   Overrides Able Player's default selected color.
   ============================================================ */

.able-playlist:not(.cc-audio-playlist__tracks)
> li.able-current {

	border-color: var(--cc-legacy-playlist-red) !important;

	background: var(--cc-legacy-playlist-red) !important;
	color: var(--cc-legacy-playlist-white) !important;

	outline: none;
}


.able-playlist:not(.cc-audio-playlist__tracks)
> li.able-current
> button {

	background: var(--cc-legacy-playlist-red) !important;
	color: var(--cc-legacy-playlist-white) !important;

	font-weight: 700 !important;
}


/* Selected play indicator */

.able-playlist:not(.cc-audio-playlist__tracks)
> li.able-current
> button::before {

	color: var(--cc-legacy-playlist-white);
}


/* Selected chevron */

.able-playlist:not(.cc-audio-playlist__tracks)
> li.able-current
> button::after {

	border-color: var(--cc-legacy-playlist-white);
}


/* ============================================================
   SELECTED TRACK HOVER
   ============================================================ */

.able-playlist:not(.cc-audio-playlist__tracks)
> li.able-current
> button:hover {

	background: var(--cc-legacy-playlist-red-dark) !important;
	color: var(--cc-legacy-playlist-white) !important;
}


.able-playlist:not(.cc-audio-playlist__tracks)
> li.able-current
> button:hover::before {

	color: var(--cc-legacy-playlist-white);
}


.able-playlist:not(.cc-audio-playlist__tracks)
> li.able-current
> button:hover::after {

	right: 1.15rem;

	border-color: var(--cc-legacy-playlist-white);
}


/* ============================================================
   KEYBOARD FOCUS
   NON-SELECTED TRACK
   ============================================================ */

.able-playlist:not(.cc-audio-playlist__tracks)
> li:not(.able-current)
> button:focus,

.able-playlist:not(.cc-audio-playlist__tracks)
> li:not(.able-current)
> button:focus-visible {

	position: relative;

	z-index: 2;

	background: var(--cc-legacy-playlist-red-light) !important;
	color: var(--cc-legacy-playlist-red-dark) !important;

	outline: 3px solid var(--cc-legacy-playlist-red) !important;
	outline-offset: -4px;
}


.able-playlist:not(.cc-audio-playlist__tracks)
> li:not(.able-current)
> button:focus::before,

.able-playlist:not(.cc-audio-playlist__tracks)
> li:not(.able-current)
> button:focus-visible::before {

	color: var(--cc-legacy-playlist-red-dark);
}


.able-playlist:not(.cc-audio-playlist__tracks)
> li:not(.able-current)
> button:focus::after,

.able-playlist:not(.cc-audio-playlist__tracks)
> li:not(.able-current)
> button:focus-visible::after {

	border-color: var(--cc-legacy-playlist-red-dark);
}


/* ============================================================
   KEYBOARD FOCUS
   SELECTED TRACK
   ============================================================ */

.able-playlist:not(.cc-audio-playlist__tracks)
> li.able-current
> button:focus,

.able-playlist:not(.cc-audio-playlist__tracks)
> li.able-current
> button:focus-visible {

	position: relative;

	z-index: 2;

	background: var(--cc-legacy-playlist-red-dark) !important;
	color: var(--cc-legacy-playlist-white) !important;

	outline: 3px solid var(--cc-legacy-playlist-white) !important;
	outline-offset: -5px;

	box-shadow:
		inset 0 0 0 1px var(--cc-legacy-playlist-red-dark);
}


.able-playlist:not(.cc-audio-playlist__tracks)
> li.able-current
> button:focus::before,

.able-playlist:not(.cc-audio-playlist__tracks)
> li.able-current
> button:focus-visible::before {

	color: var(--cc-legacy-playlist-white);
}


.able-playlist:not(.cc-audio-playlist__tracks)
> li.able-current
> button:focus::after,

.able-playlist:not(.cc-audio-playlist__tracks)
> li.able-current
> button:focus-visible::after {

	border-color: var(--cc-legacy-playlist-white);
}


/* ============================================================
   ACTIVE / CLICK
   ============================================================ */

.able-playlist:not(.cc-audio-playlist__tracks)
> li:not(.able-current)
> button:active {

	background: var(--cc-legacy-playlist-red-light-active) !important;
	color: var(--cc-legacy-playlist-red-darker) !important;
}


.able-playlist:not(.cc-audio-playlist__tracks)
> li.able-current
> button:active {

	background: var(--cc-legacy-playlist-red-darker) !important;
	color: var(--cc-legacy-playlist-white) !important;
}


/* ============================================================
   LEGACY PLAYLIST + PLAYER ALIGNMENT

   When an older playlist sits immediately after its player,
   keep both at the same width.
   ============================================================ */

.able-player-wrapper + .able-playlist:not(.cc-audio-playlist__tracks),
.able-wrapper + .able-playlist:not(.cc-audio-playlist__tracks) {
	width: 100% !important;
	max-width: 700px !important;
}


/* When Able Player embeds the playlist inside the player */

.able .able-playlist:not(.cc-audio-playlist__tracks) {
	width: 100% !important;
	max-width: none !important;

	margin-bottom: 0;

	border-right: 0;
	border-bottom: 0;
	border-left: 0;

	border-radius: 0;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

	.able-playlist:not(.cc-audio-playlist__tracks) {
		width: 100% !important;
		max-width: 100% !important;

		margin-bottom: 1.5rem;
	}


	.able-playlist:not(.cc-audio-playlist__tracks)
	> li
	> button {

		min-height: 58px;

		padding:
			0.95rem
			3.5rem
			0.95rem
			3rem !important;
	}


	.able-playlist:not(.cc-audio-playlist__tracks)
	> li
	> button::before {

		left: 1.05rem;
	}


	.able-playlist:not(.cc-audio-playlist__tracks)
	> li
	> button::after {

		right: 1.25rem;

		width: 0.6rem;
		height: 0.6rem;

		border-top-width: 3px;
		border-right-width: 3px;
	}

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

	.able-playlist:not(.cc-audio-playlist__tracks)
	> li
	> button {

		padding-left: 2.85rem !important;
		padding-right: 3.25rem !important;
	}

}


/* ============================================================
   WINDOWS HIGH CONTRAST / FORCED COLORS
   ============================================================ */

@media (forced-colors: active) {

	.able-playlist:not(.cc-audio-playlist__tracks) {
		border: 1px solid CanvasText;
	}


	.able-playlist:not(.cc-audio-playlist__tracks) > li {
		border-top: 1px solid CanvasText !important;
	}


	.able-playlist:not(.cc-audio-playlist__tracks)
	> li
	> button {

		background: Canvas !important;
		color: ButtonText !important;
	}


	.able-playlist:not(.cc-audio-playlist__tracks)
	> li
	> button::before {

		color: ButtonText;
	}


	.able-playlist:not(.cc-audio-playlist__tracks)
	> li
	> button::after {

		border-color: ButtonText;
	}


	.able-playlist:not(.cc-audio-playlist__tracks)
	> li.able-current {

		border: 2px solid Highlight !important;

		background: Highlight !important;
		color: HighlightText !important;
	}


	.able-playlist:not(.cc-audio-playlist__tracks)
	> li.able-current
	> button {

		background: Highlight !important;
		color: HighlightText !important;
	}


	.able-playlist:not(.cc-audio-playlist__tracks)
	> li.able-current
	> button::before {

		color: HighlightText;
	}


	.able-playlist:not(.cc-audio-playlist__tracks)
	> li.able-current
	> button::after {

		border-color: HighlightText;
	}


	.able-playlist:not(.cc-audio-playlist__tracks)
	> li
	> button:focus,

	.able-playlist:not(.cc-audio-playlist__tracks)
	> li
	> button:focus-visible {

		outline: 3px solid Highlight !important;
	}

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

	.able-playlist:not(.cc-audio-playlist__tracks)
	> li
	> button::after {

		transition: none;
	}

}


/* ============================================================
   WIGNALL MUSEUM
   LEGACY ABLE PLAYER CAPTION TREATMENT

   Applies the full-width 性视界-branded caption treatment
   to the older audio and video players on this page.
   ============================================================ */


/* ============================================================
   AUDIO CAPTION CONTAINER
   ============================================================ */

.able .able-audcap-container {
	box-sizing: border-box;

	width: 100% !important;
	max-width: 100% !important;

	min-height: 3.75rem;

	margin: 0 !important;
	padding: 0 !important;

	background: #242424;

	border-top: 4px solid #990000;
}


/* Caption positioning wrapper */

.able .able-audcap-container .able-captions-wrapper {
	box-sizing: border-box;

	width: 100% !important;
	max-width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* ============================================================
   AUDIO CAPTION TEXT

   Fill the entire caption region instead of allowing the
   background to appear only directly behind the text.
   ============================================================ */

.able .able-audcap-container .able-captions {
	box-sizing: border-box;

	display: block;

	width: 100% !important;
	max-width: 100% !important;
	min-height: 3.75rem;

	margin: 0 !important;
	padding: 0.85rem 1.25rem !important;

	border: 0;
	border-radius: 0;

	line-height: 1.55;
	text-align: center;
}


/* ============================================================
   VIDEO CAPTION CONTAINER
   ============================================================ */

.able .able-vidcap-container {
	box-sizing: border-box;

	width: 100% !important;
	max-width: 100% !important;

	margin: 0;
	padding: 0;

	overflow: hidden;

	background: #000000;
}


/*
 * Ensure caption positioning is based on the full
 * video width.
 */

.able .able-vidcap-container .able-captions-wrapper {
	box-sizing: border-box;

	width: 100% !important;
	max-width: 100% !important;

	margin-right: 0 !important;
	margin-left: 0 !important;
}


/* ============================================================
   VIDEO CAPTIONS BELOW VIDEO

   If a user preference places captions below the video,
   give the caption area the same full-width branded panel.
   ============================================================ */

.able .able-vidcap-container .able-captions-below {
	box-sizing: border-box;

	width: 100% !important;
	max-width: 100% !important;

	min-height: 3.75rem;

	margin: 0 !important;
	padding: 0 !important;

	background: #242424;

	border-top: 4px solid #990000;
}


/* Caption text when captions are below video */

.able .able-vidcap-container .able-captions-below .able-captions {
	box-sizing: border-box;

	display: block;

	width: 100% !important;
	max-width: 100% !important;

	margin: 0 !important;
	padding: 0.85rem 1.25rem !important;

	border: 0;
	border-radius: 0;

	line-height: 1.55;
	text-align: center;
}


/* ============================================================
   CAPTIONS DISPLAYED OVER VIDEO

   Do not add the 性视界 panel background to captions that
   overlay the actual video. Able Player's user-controlled
   caption background remains responsible for readability.
   ============================================================ */

.able .able-vidcap-container .able-captions-wrapper:not(.able-captions-below) {
	max-width: 100% !important;
}


/* ============================================================
   NOW PLAYING

   Visually connects audio captions with the controls.
   ============================================================ */

.able .able-now-playing {
	box-sizing: border-box;

	width: 100%;
	max-width: 100%;

	margin: 0;

	padding: 0.75rem 1rem;

	border-top: 1px solid #3f3f3f;

	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.45;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

	.able .able-audcap-container,
	.able .able-vidcap-container,
	.able .able-audcap-container .able-captions-wrapper,
	.able .able-vidcap-container .able-captions-wrapper,
	.able .able-vidcap-container .able-captions-below {
		width: 100% !important;
		max-width: 100% !important;
	}


	.able .able-audcap-container .able-captions,
	.able .able-vidcap-container .able-captions-below .able-captions {
		width: 100% !important;
		max-width: 100% !important;

		min-height: 4rem;

		padding: 0.85rem 1rem !important;

		font-size: 1rem;
		line-height: 1.5;
	}

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

	.able .able-audcap-container .able-captions,
	.able .able-vidcap-container .able-captions-below .able-captions {
		padding: 0.8rem 0.85rem !important;
	}

}


/* ============================================================
   WINDOWS HIGH CONTRAST / FORCED COLORS
   ============================================================ */

@media (forced-colors: active) {

	.able .able-audcap-container,
	.able .able-vidcap-container .able-captions-below {
		background: Canvas;

		border-top: 4px solid CanvasText;
	}

}

/* ============================================================
   ABLE PLAYER
   RESTORE STANDARD PLAYER CONTROLS

   Must load AFTER all custom Able Player page styles.
   ============================================================ */


/* ============================================================
   MAIN CONTROLLER
   ============================================================ */

.able .able-controller {
	position: relative !important;

	display: block !important;

	width: 100% !important;
	max-width: 100% !important;

	margin: 0 !important;

	padding-right: 4px;
	padding-left: 4px;

	visibility: visible !important;
	opacity: 1 !important;

	background-color: var(--able-controller-background, #464646);
}


/* Audio player spacing used by Able Player 2020 skin */

.able.able-audio .able-controller,
.able-audio .able-controller {
	padding-top: 8px;
}


/* ============================================================
   SEEKBAR
   ============================================================ */

.able .able-seekbar-wrapper {
	box-sizing: border-box;

	display: block !important;

	width: 100% !important;
	max-width: 100% !important;

	margin: 0;

	padding: 6px 12px;

	visibility: visible !important;
	opacity: 1 !important;
}


.able .able-seekbar {
	position: relative;

	display: flex !important;

	align-items: center;

	box-sizing: border-box;

	width: 100% !important;
	max-width: 100% !important;

	height: 0.5rem;

	visibility: visible !important;
	opacity: 1 !important;
}


/* ============================================================
   CONTROL ROW
   ============================================================ */

.able .able-control-row {
	box-sizing: border-box;

	display: flex !important;

	width: 100% !important;
	max-width: 100% !important;

	margin: 0;

	padding: 8px 9px;

	gap: 4px;

	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;

	visibility: visible !important;
	opacity: 1 !important;
}


/* ============================================================
   LEFT AND RIGHT CONTROL GROUPS
   ============================================================ */

.able .able-left-controls,
.able .able-right-controls {
	display: flex !important;

	width: auto !important;
	max-width: 100%;

	gap: 3px;

	align-items: center;
	flex-wrap: wrap;

	overflow: visible !important;

	visibility: visible !important;
	opacity: 1 !important;
}


/* ============================================================
   PLAYER CONTROL BUTTONS
   ============================================================ */

.able .able-controller div[role="button"] {
	position: relative;

	display: flex !important;

	box-sizing: border-box;

	min-width: 24px;
	min-height: 24px;

	width: 1rem;
	height: 1rem;

	padding: 2px;

	align-items: center;
	justify-content: center;

	border: 0;

	overflow: visible !important;

	visibility: visible !important;
	opacity: 1 !important;

	z-index: 6600;
}


/* Play button requires slightly more internal spacing */

.able .able-controller div.able-button-handler-play[role="button"] {
	padding: 4px;
}


/* Standard button elements, if generated by the player */

.able .able-controller button {
	visibility: visible !important;
	opacity: 1 !important;
}


/* ============================================================
   CONTROL ICONS

   Prevent 性视界/site-wide image styles from hiding,
   shrinking or misaligning Able Player control icons.
   ============================================================ */

.able .able-controller svg {
	display: block !important;

	width: 1em;
	height: 1em;

	max-width: none !important;
	max-height: none !important;

	visibility: visible !important;
	opacity: 1 !important;

	fill: currentColor;
}


.able .able-controller img {
	display: block !important;

	width: auto;
	height: auto;

	max-width: none !important;

	visibility: visible !important;
	opacity: 1 !important;
}


/* ============================================================
   STATUS BAR
   ============================================================ */

.able .able-status-bar {
	box-sizing: border-box;

	display: flex !important;

	width: 100% !important;
	max-width: 100% !important;

	margin: 0;

	padding: 8px 12px;

	gap: 12px;

	align-items: center;
	justify-content: space-between;

	visibility: visible !important;
	opacity: 1 !important;

	background: var(--able-statusbar-background, #000000);
	color: var(--able-statusbar-color, #dadada);
}


/* ============================================================
   MEDIA WIDTH
   Keep video/media aligned with controller
   ============================================================ */

.able .able-media-container,
.able .able-vidcap-container {
	box-sizing: border-box;

	width: 100% !important;
	max-width: 100% !important;

	margin: 0;
}


.able .able-vidcap-container video,
.able .able-media-container video {
	display: block !important;

	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;

	margin: 0;
}


/* ============================================================
   PLAYER WIDTH

   Responsive without changing Able Player's internal layout.
   ============================================================ */

.able-player-wrapper,
.able-wrapper {
	box-sizing: border-box;

	width: 100% !important;
	max-width: 700px !important;

	margin-right: 0;
	margin-left: 0;
}


.able-player-wrapper .able,
.able-wrapper .able {
	box-sizing: border-box;

	width: 100% !important;
	max-width: 100% !important;
}


/* ============================================================
   BIG PLAY BUTTON

   Preserve Able Player's native overlay behavior.
   Do NOT give this button a manually calculated height.
   ============================================================ */

.able-wrapper .able button.able-big-play-button {
	position: absolute;

	display: flex !important;

	top: 0;
	left: 0;

	width: 100% !important;
	height: 100% !important;

	padding: 0;

	align-items: center;
	justify-content: center;

	visibility: visible;
}


/* Don't let global button rules distort the play icon */

.able-big-play-button svg {
	width: 8rem;
	height: 8rem;

	max-width: 140px;
	max-height: 140px;
}


/* ============================================================
   KEYBOARD FOCUS
   ============================================================ */

.able .able-controller div[role="button"]:focus,
.able .able-controller div[role="button"]:focus-visible,
.able .able-controller button:focus,
.able .able-controller button:focus-visible {
	outline: 3px solid #ffbf47 !important;
	outline-offset: 3px;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

	.able-player-wrapper,
	.able-wrapper,
	.able,
	.able .able-media-container,
	.able .able-vidcap-container,
	.able .able-controller,
	.able .able-status-bar,
	.able .able-seekbar-wrapper {
		width: 100% !important;
		max-width: 100% !important;
	}


	.able .able-control-row {
		padding: 8px;

		gap: 5px;
	}


	.able .able-left-controls,
	.able .able-right-controls {
		gap: 4px;
	}

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

	.able .able-control-row {
		padding: 7px 6px;
	}


	.able .able-seekbar-wrapper {
		padding-right: 10px;
		padding-left: 10px;
	}


	.able .able-status-bar {
		padding-right: 10px;
		padding-left: 10px;

		gap: 6px;

		flex-wrap: wrap;
	}

}

/* ============================================================
   LEGACY ABLE PLAYER PLAYLIST BRANDING
   Ends here
   ============================================================ */