/**
* @stylesheet multimedia-controls.css Multimedia Controls
* @parent ux.ui-elements
**/

/**
* @styles 0-multimedia-layout Layout
*
*
* Controls are presented in two rows.
* * The scrub bar, which is used to scrub through the media clip, is provided on its own in the top row to maximize scrubbing precision.
* * The bottom row contains the following controls from left to right:
*   * Play/Pause
*   * Current time / total length
*   * Mute
*   * Volume slider
*   * Closed captions (video only)
*   * Full screen (video only)
*
* Play/Pause and the time stamps are left-aligned. The remaining controls in the second row are right-aligned.
*
* In addition, a __Hero Play__ button is provided for video clips. It is centered over the video to indicate that the user can click or tap anywhere on the video to play it.
**/

/**
* @styles 1-multimedia-Styling Styling
* Multimedia controls are presented on a light gray `#EAEAEA` background to differentiate them from the surrounding content area.
* ### Hero Play button
* The __Hero Play__ button has three states.
* * _Default_. Displayed when video clip is paused. A white `#FFFFFF` Play icon is surrounded by a 65% opaque black `#000000` background and a white border.
* * _Hover_. Displayed when the cursor is hovered over the video. The button scales up by 120% and increases to 85% opacity.
* * _Playing/Disabled_. The __Hero Play__ button disappears when the video clip is playing, or when a modal system tool (e.g., scratchwork) is active.
* ### Scrub bar
* The scrub bar consists of two elements: the track and the thumb. The track has a height 0.2x the base font size (see the [typography.css] section). The circular thumb has a diameter 3.35x the height of the track. The scrub bar has three states.
*
*
* * _Default_.
*   * The unplayed section of the scrub track is medium gray `#858585`.
*   * The played section of the scrub track is blue `#246BB2`.
*   * The thumb is the same blue as the played section of the scrub track.
* * _Hover/active_. Displayed when the cursor is hovered over the scrub bar or while the user is scrubbing through the media clip.
*   * The track and thumb are scaled up 150%. (Scaling remains during scrubbing, even if the cursor isn’t directly over the scrub bar.)
*   * A dark gray `#535353` bar extends from the right edge of the unplayed section of the track to the cursor position to help the user locate the cursor.
*   * A tooltip appears above the scrub bar showing the time in the media clip associated with the current cursor position during both hover and drag.
* * _Disabled_. Displayed when a modal system tool is active.
*   * The unplayed section of the track changes to a light gray `#A6A6A6`.
*   * The thumb and the played section of the track change to a medium gray `#AAAAAA`.
* ### Volume slider
* The volume slider is styled similarly to the scrub bar with the following exceptions:
* * Only the thumb, not the track, scales up in hover/active state.
* * A tooltip does not display in hover/active state.
* * No dark gray bar appears to indicate the cursor position in hover state.
* ### Other Buttons
* Multimedia control buttons are 2x the base font size (see the [typography.css] section) to ensure easy selection via touch. They have three states.
* * _Default_. A dark gray `#535353` icon with no background or border.
* * _Hover_. Displayed when the cursor is hovered over the button. Icon color lightens to `#1E1E1E`, and a tooltip appears above the button.
* * _Disabled_. Displayed when a modal system tool is active. Icon color lightens even further to `#A6A6A6`.
* ### Tooltips
* Tooltips are displayed as white `#FFFFFF` text on an 85% opaque black `#000000` background with rounded corners. This approach ensures that tooltips are visible on all video content. Tooltips are centered above their associated controls, except in cases where centering would cause the tooltip to extend past the edge of the multimedia control area (e.g., Play/Pause, Full screen). In such cases, the tooltip is aligned to the nearest edge of the control area with a bit of padding.
*
* The tooltip for the scrub bar has a bottom tail to better connect it to the cursor position.
* ### Subtitles
* Subtitles are displayed as white `#FFFFFF` text on an 80% opaque black `#000000` background with rounded corners.
**/

/**
* @styles 2-multimedia-behavior Behavior
* ### Playback
* When the video reaches the end of its run time, it automatically pauses and resets to 0 seconds.
* ### Scrub bar behavior
* Clicking the scrub bar track or dragging the scrub bar thumb causes the video time to change to the position of the cursor. The scrub bar has an invisible touch target that is taller than the visible track (1.24x the base font size) to ensure that it meets minimum touch target size requirements.
* ### Button behavior
* Several buttons have toggle states.
* * The __Play/Pause__ button changes to a Pause icon, and its tooltip changes to "Pause" while the media clip is playing.
* * The __Mute__ button icon has three states: full-volume, half-volume, and muted. (Interaction with the volume slider described below.) The button’s tooltip changes to "Unmute" when the audio is muted.
* * The __Closed caption__ button icon has a slash through it when closed captions are turned off.
* * The __Full screen__ button icon toggles between on and off states. Its tooltip changes to "Exit full screen" when in full-screen mode.
* ### Volume slider & Mute button interactions
* As with the scrub bar, clicking the volume slider track or dragging the volume slider thumb causes the volume to change to the level associated with the position of the cursor. The volume slider has an invisible touch target that is taller than the visible track (1.325x the base font size) to ensure that it meets minimum touch target size requirements.
*
* The volume slider affects the __Mute__ button in the following ways:
* * If the volume is set to >50%, the __Mute__ button is set to the full-volume state.
* * If the volume is set from 1% to 50%, the __Mute__ button is set to the half-volume state.
* * If the volume is set to 0%, the __Mute__ button is set to the muted state.
*
* When the user mutes the audio via the __Mute__ button, it remembers the previous volume level and restores it when the user selects __Mute__ again.
* * When restoring the previous volume level, the __Mute__ button state changes accordingly, as described above.
* * If the volume had been set to 0% via the volume slider, selecting the __Mute__ button causes the volume to be set to 100%.
* ### Full-screen mode
* On entering full-screen mode, the __Hero Play__ button receives focus so that the user can play or pause the video by hitting Enter or Space on the keyboard.
*
* In full-screen mode, the control panel floats above the bottom of video content, taking up the full width of the screen, minus some padding. The corners of the control panel are rounded.
*
* The controls remain on screen while the video is paused. Once the video begins playing, the controls fade out, and the cursor disappears after 3 seconds. The controls and cursor reappear when the video is paused or when the user moves the mouse, clicks the mouse, presses a key on the keyboard, or touches the device screen. When the user causes the controls to reappear during playback, the countdown to fadeout resets to 3 seconds.
*
* When the controls are on screen, subtitles appear above them. When the controls are off screen, subtitles appear 2 line heights above the bottom of the screen. When the controls fade in or out, the subtitles animate between their two positions.
*
* The user can exit full-screen mode by selecting the __Full screen__ button or by hitting Escape on the keyboard.
*
* ### SBT-specific Behavior <img src="static/img/icon-asterisk.svg"/>
* Because SBTs guide test takers through a linear sequence of activities, additional constraints are imposed on multimedia playback.
* * When the video is played for the first time, it automatically enters full-screen mode unless there is other information on screen that the user must attend to while the video is playing. (Asking users to attend to a video and another form of information simultaneously is not considered a best practice and should be avoided.)
* *	Multimedia clips must be viewed/listened to in their entirety before the test taker is allowed to progress to the next screen.
* * The test taker is allowed to use the scrub bar, but only through the section of the clip that has already been viewed/heard.
**/

/**
* @styles 3-multimedia-default Video Variant
* @iframe ../../demos/multimedia-controls/video.html 600
**/

/**
* @styles 4-multimedia-default Audio Variant
* @iframe ../../demos/multimedia-controls/audio.html 200
**/

/**
* @styles 5-multimedia-sis Select-in-stimulus Variant
* The green segment shows a select-in-stimulus selection. (Note that the scrub bar thumb appears on top of the selection segment.)
* @iframe ../../demos/multimedia-controls/sis.html 605
**/

/*----------------------------------------------------------------------------
MEDIA LAYOUT
----------------------------------------------------------------------------*/
#mediaContainer {
	display: inline-block;
	margin: 0;
	position: relative;
	text-align: center; }
#mediaContainer.full-screen {
	background: #000;
	display: block;
	height: 100%;
	width: 100%; }
body.disabled #mediaContainer {
  pointer-events: none; }

#media-wrapper {
	position: relative; }
#mediaContainer.full-screen #media-wrapper {
	height: 100%;
	width: 100%; }

#media {
	display: block;
	height: 100%;
	margin: 0 auto;
	width: 100%;
}

#media-controls {
	background: #eaeaea;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	opacity: 1;
	position: relative;
	transition: none }
#media-controls.hidden {
	display: none; }
#mediaContainer.full-screen #media-controls {
	border-radius: 0.25em;
	bottom: 0.5em;
	left: 0.5em;
	padding: 0.25em;
	position: absolute;
	width: calc(100% - 1em); }
#mediaContainer.full-screen.fadeout #media-controls {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease-out }

.media-left-controls,
.media-right-controls {
	align-items: center;
	color: #535353;
	display: flex;
	padding-bottom: 0.125em;
 	position: relative; }
#media-controls.media-sis-variant .media-left-controls,
#media-controls.media-sis-variant .media-right-controls {
  padding-top: 0.125em;
}


/*----------------------------------------------------------------------------
HERO PLAY BUTTON STYLES
----------------------------------------------------------------------------*/
#video-hero-play {
	bottom: 0;
	left: 0;
	margin: 0;
	outline: none;
	position: absolute;
	right: 0;
	top: 0;
  transition: opacity 0.2s ease-out;
	width: 100%;
}

body.disabled #video-hero-play,
#video-hero-play.paused {
	opacity: 0;
}

#video-hero-play::before {
	background: #000;
	background: rgba(0,0,0,0.65);
	border: none;
	border-radius: 50%;
	color: #fff;
	content: '\e915';
	display: block;
	font-family: 'icons';
	font-size: 3em;
	height: 1em;
	line-height: 0.96;
	margin: 0 auto;
	opacity: 1;
	pointer-events: none;
	transition: background .2s ease-out, transform .2s ease-out, opacity .2s ease-out;
	width: 1em;
}

#video-hero-play:hover::before {
	background: #000;
	background: rgba(0,0,0,0.85);
	transform: scale(1.2);
}

/*----------------------------------------------------------------------------
SLIDER CONTAINER STYLES
----------------------------------------------------------------------------*/
.slider-container {
	background: #858585;
	height: 0.2em;
	position: relative;
  transition: background 0.2s ease-out; }

body.disabled .slider-container {
  background: #ccc;
}

#media-progress-container-outer {
	margin: 0.625em 0.5em 0.415em;
	position: relative;
	width: 100%;
}
#media-controls.media-sis-variant #media-progress-container-outer {
	margin: 0.415em 0.5em 0.625em;
}

#media-progress-container {
	transition: background 0.2s ease-out, transform 0.2s ease-out;
	width: 100%; }
#media-progress-container:hover,
#media-progress-container.hover {
	transform: scaleY(1.5); }
#media-controls.media-sis-variant #media-progress-container {
  background: transparent;
  border: 0.1em solid #535353;
  height: 0.4em; }
#media-controls.media-sis-variant #media-progress-container:hover,
#media-controls.media-sis-variant #media-progress-container.hover {
	transform: none; }
	body.disabled #media-controls.media-sis-variant #media-progress-container {
		border-color: #a6a6a6;
	}

#media-volume-container {
	margin: 0 0.75em 0 0.25em;
	width: 3.5em;
}


/*----------------------------------------------------------------------------
HOVER BAR STYLES
----------------------------------------------------------------------------*/
#media-hover {
	background: #535353;
	height: 0.2em;
	left: 0;
	opacity: 1;
	pointer-events: none;
	position: absolute;
	top: 0;
	transform-origin: 0 0;
	transition: opacity .2s ease-out;
	width: 100%; }
#media-hover.hidden {
	opacity: 0; }
#media-controls.media-sis-variant #media-hover {
  height: 0.25em; }
#mediaContainer.full-screen #media-controls.media-sis-variant #media-hover {
  top: -0.05em; }


/*----------------------------------------------------------------------------
PROGRESS ELEMENT STYLES
----------------------------------------------------------------------------*/
progress[value] {
	-moz-appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: none;
	height: 0.2em;
	position: relative;
	vertical-align: top;
	width: 100%;
}

#media-controls.media-sis-variant #media-progress {
  height: 0.25em; }
#mediaContainer.full-screen #media-controls.media-sis-variant #media-progress {
  top: -0.05em; }

progress[value]::-webkit-progress-bar {
	background-color: transparent; }

progress[value]::-moz-progress-bar{
	background-color: #246BB2;
	transition: background 0.2s ease-out, transform 0.2s ease-out; }
progress[value]::-webkit-progress-value {
	background-color: #246BB2;
	transition: background 0.2s ease-out, transform 0.2s ease-out; }

body.disabled progress[value]::-webkit-progress-value {
  background-color: #aaa;
}


/*----------------------------------------------------------------------------
RANGE INPUT STYLES
----------------------------------------------------------------------------*/
/* Reset the default browser styles */
input[type=range] {
	-moz-appearance: none;
	-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
	background: transparent;
	cursor: pointer;
	font-size: inherit;
	height: 0.6em;
	left: 0;
	margin: 0 0 0 -0.1em;
	outline: 0;
	position: absolute;
	top: -0.2em;
	width: calc(100% + 0.2em); /* Specific width is required for Firefox. */
  z-index: 1;
}

input[type=range]::-ms-track {
  border-color: transparent;
  color: transparent;
	cursor: pointer;
	width: 100%;
}

/* Style the thumb for each browser */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #246bb2;
	border: none;
	border-radius: 50%;
  height: 0.7em;
  margin-top: -0.05em; /* Need to specify a margin in Chrome, but in Firefox and IE it is automatic */
	transition: background 0.2s ease-out, transform 0.2s ease-out;
  width: 0.7em; }
input[type=range]::-moz-range-thumb {
	-moz-appearance: none;
  background: #246bb2;
	border: none;
	border-radius: 50%;
  height: 0.7em;
  transition: background 0.2s ease-out, transform 0.2s ease-out;
  width: 0.7em; }
input[type=range]::-ms-thumb {
  background: #246bb2;
	border: none;
	border-radius: 50%;
  height: 0.7em;
  transition: background 0.2s ease-out, transform 0.2s ease-out;
  width: 0.7em; }

body.disabled input[type=range]::-webkit-slider-thumb {
  background: #aaa;
}
body.disabled input[type=range]::-moz-range-thumb {
  background: #aaa;
}
body.disabled input[type=range]::-ms-thumb {
  background: #aaa;
}

/* Style the track in each browser */
input[type=range]::-webkit-slider-runnable-track {
  background: transparent;
	height: 0.6em;
	transition: transform 0.2s ease-out;
	width: 100%; }
input[type=range]::-moz-range-track {
  background: transparent;
	height: 0.6em;
	transition: transform 0.2s ease-out;
	width: 100%; }
input[type=range]::-ms-track {
  background: transparent;
	height: 0.6em;
	transition: transform 0.2s ease-out;
	width: 100%; }

input[type=range].hover::-webkit-slider-thumb,
input[type=range]:hover::-webkit-slider-thumb {
	transform: scale(1.5); }
input[type=range].hover::-moz-range-thumb,
input[type=range]:hover::-moz-range-thumb {
	transform: scale(1.5); }
input[type=range].hover::-ms-thumb,
input[type=range]:hover::-ms-thumb {
	transform: scale(1.5); }

/* Styles specific to scrub bar */
#media-progress-container.hover input[type=range]::-webkit-slider-thumb,
#media-progress-container:hover input[type=range]::-webkit-slider-thumb {
	transform: scaleX(1.5); }
#media-progress-container.hover input[type=range]::-moz-range-thumb,
#media-progress-container:hover input[type=range]::-moz-range-thumb {
	transform: scaleX(1.5); }
#media-progress-container.hover input[type=range]::-ms-thumb,
#media-progress-container:hover input[type=range]::-ms-thumb {
	transform: scaleX(1.5); }

#media-controls.media-sis-variant #media-progress-container.hover input[type=range]::-webkit-slider-thumb,
#media-controls.media-sis-variant #media-progress-container:hover input[type=range]::-webkit-slider-thumb {
	transform: scale(1.5); }
#media-controls.media-sis-variant #media-progress-container.hover input[type=range]::-moz-range-thumb,
#media-controls.media-sis-variant #media-progress-container:hover input[type=range]::-moz-range-thumb {
	transform: scale(1.5); }
#media-controls.media-sis-variant #media-progress-container.hover input[type=range]::-ms-thumb,
#media-controls.media-sis-variant #media-progress-container:hover input[type=range]::-ms-thumb {
	transform: scale(1.5); }

/* Styles specific to volume slider */
#media-volume::-webkit-slider-runnable-track {
	height: 1.325em; }
#media-volume::-moz-range-track {
	height: 1.325em; }
#media-volume::-me-track {
	height: 1.325em; }

#media-volume::-webkit-slider-thumb {
	margin-top: 0.292em; }
#media-volume::-moz-range-thumb {
	margin-top: 0.292em; }
#media-volume::-ms-thumb {
	margin-top: 0.292em; }


/*----------------------------------------------------------------------------
MEDIA BUTTON STYLES
----------------------------------------------------------------------------*/
.media-btn {
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	font-family: inherit;
	font-size: 2em;
	margin: 0 0.0625em;
	padding: 0;
	position: relative;
	transition: color 0.2s ease-out; }
.media-btn:hover {
	color: #1e1e1e; }
body.disabled .media-btn {
  color: #a6a6a6;
}

.media-time-display {
	margin-left: 0.25em;
}

/* Hides browser default video controls in fullscreen but shows them in normal screen
even if 'controls' attribute is set to false */
video::-webkit-media-controls-enclosure {
  display: none !important;
}


/*----------------------------------------------------------------------------
TOOLTIP STYLES
----------------------------------------------------------------------------*/
.media-tooltip {
	background: #000;
	background: rgba(0,0,0,0.8);
	border-radius: 0.2em;
	bottom: calc(100% + 1.5em);
	color: #fff;
	left: 0;
	opacity: 0;
	padding: 0.2em 0.5em;
	pointer-events: none;
	position: absolute;
	transition: opacity .2s ease-out; }
#media-controls.media-sis-variant .media-tooltip {
  bottom: calc(100% + 0.38em); }
#mediaContainer.full-screen .media-tooltip {
	bottom: calc(100% + 1.75em); }
#mediaContainer.full-screen #media-controls.media-sis-variant .media-tooltip {
	bottom: calc(100% + 0.63em); }

#media-tooltip-seek:after {
	border-left: 0.5em solid transparent;
	border-right: 0.5em solid transparent;
	border-top: 0.5em solid #000;
	border-top: 0.5em solid rgba(0,0,0,0.8);
	content: '';
	left: 50%;
	position: absolute;
	top: 100%;
	transform: translateX(-50%);
}

#media-tooltip-seek {
	bottom: calc(100% + 1.25em);
	left: 0;
	margin-left: 0.2em;
	opacity: 1;
	transform: translateX(-50%);
	transition: opacity .2s ease-out; }
#media-controls.media-sis-variant #media-tooltip-seek {
  bottom: calc(100% + 3.25em); }
#mediaContainer.full-screen #media-tooltip-seek {
	bottom: calc(100% + 1.5em); }
#mediaContainer.full-screen #media-controls.media-sis-variant #media-tooltip-seek {
  bottom: calc(100% + 3.5em); }
#media-tooltip-seek.hidden {
	opacity: 0; }

#media-btn-playpause-tooltip {
	left: 0.25em; }

#media-btn-mute-tooltip {
	left: 1em;
	transform: translateX(-50%);
}

#video-btn-cc-tooltip {
	left: initial;
	right: 0.25em; }

#video-btn-fs-tooltip {
	left: initial;
	right: 0.25em; }

#media-btn-playpause:hover ~ #media-btn-playpause-tooltip,
#media-btn-mute:hover ~ #media-btn-mute-tooltip,
#video-btn-cc:hover ~ #video-btn-cc-tooltip,
#video-btn-fs:hover ~ #video-btn-fs-tooltip {
	opacity: 1; }


/*----------------------------------------------------------------------------
CLOSED CAPTION STYLES
----------------------------------------------------------------------------*/
::cue {
  font: normal normal 1rem/1.45 Calibri;
}

#video-custom-track-wrapper {
	bottom: 0.5em;
	left: 50%;
	pointer-events: none;
	position: absolute;
  transform: translateX(-50%);
	width: 100%; }
#video-custom-track-wrapper.hidden {
	display: none; }
#mediaContainer.full-screen #video-custom-track-wrapper {
	bottom: 5em;
	transition: bottom 0.2s; }
#mediaContainer.full-screen.fadeout #video-custom-track-wrapper {
	bottom: 2em;
	transition: bottom 0.2s 0.2s; }

#video-custom-track {
	background: #000;
	background: rgba(0,0,0,0.8);
	border-radius: 0.15em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	color: #fff;
	font-size: 0.92em;
	line-height: normal;
	padding: 0; }
#video-custom-track.hidden {
	display: none; }