/*
**************************************************
   IMPORTANT: Video and Tools Module Block
**************************************************
*/

/* =============STREAMSHARE TOKENS=================== */

[dataTheme="eclipse"] {
	--streamshare-seek-track: var(--canvas-main);
	--streamshare-seek-track-progress: #005BA0;
	--streamshare-seek-track-thumb: #1477AD;
	--streamshare-seek-track-thumb-active: #2997BC;
}

/* ---------- Twilight ---------- */
[dataTheme="twilight"] {
	--streamshare-seek-track: #383838;
	--streamshare-seek-track-progress: #0078D4;
	--streamshare-seek-track-thumb: #199BE2;
	--streamshare-seek-track-thumb-active: #35C1F1;
}

/* ---------- Radiance ---------- */
[dataTheme="radiance"] {
	--streamshare-seek-track: #DBDBDB;
	--streamshare-seek-track-progress: #0078D4;
	--streamshare-seek-track-thumb: #199BE2;
	--streamshare-seek-track-thumb-active: #35C1F1;
}

/* =============SIDEBAR=================== */

#moduleSidebarStreamShareOptionsContainer {
	min-height: 40px;
	height: 40px;
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	background: var(--button-subtle-fill);
	border-top: 2px solid var(--canvas-surface-border);
	cursor: pointer;
	z-index: 1;
}

#moduleSidebarStreamShareOptionsContainer div {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	gap: 10px;
	border-bottom: 2px solid var(--canvas-surface-border);
}

.objectSidebarStreamShareOptionsCatalogue[inactive] > .objectSidebarStreamShareOptionsIcon,
.objectSidebarStreamShareOptionsCatalogue[inactive] > .objectSidebarStreamShareOptionsTitle,
.objectSidebarStreamShareOptionsToolkit[inactive] > .objectSidebarStreamShareOptionsIcon,
.objectSidebarStreamShareOptionsToolkit[inactive] > .objectSidebarStreamShareOptionsTitle {
	opacity: 0.25;
}

.objectSidebarStreamShareOptionsCatalogue[active] > .objectSidebarStreamShareOptionsIcon,
.objectSidebarStreamShareOptionsCatalogue[active] > .objectSidebarStreamShareOptionsTitle,
.objectSidebarStreamShareOptionsToolkit[active] > .objectSidebarStreamShareOptionsIcon,
.objectSidebarStreamShareOptionsToolkit[active] > .objectSidebarStreamShareOptionsTitle {
	opacity: 1;
}

#moduleSidebarStreamShareOptionsContainer div:hover {
	background: var(--button-subtle-fill-hover);
}

#moduleSidebarStreamShareOptionsContainer div[active] {
	background: var(--button-subtle-fill-active);
	border-bottom: 2px solid var(--canvas-panel-border);
}

#moduleSidebarStreamShareOptionsContainer div:first-of-type {
	border-right: 2px solid var(--canvas-surface-border);
}

.objectSidebarStreamShareOptionsIcon {
	width: 24px;
	height: 24px;
}

.objectSidebarStreamShareOptionsTitle {
	font-weight: 700;
}

#moduleSidebarContentContainer {
	height: 100%;
	padding: 0.5rem;
}

/* =============SIDEBAR QUICK ACTIONS=================== */

#moduleSidebarStreamSharePlayerOptionsContainer {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--button-subtle-fill);
	border-bottom: 2px solid var(--canvas-surface-border);
	cursor: pointer;
	z-index: 1;
}

#moduleSidebarStreamSharePlayerOptionsContainer div {
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

#moduleSidebarStreamSharePlayerOptionsContainer > .moduleSidebarStreamSharePlayerOptionsSearch {
	width: 100%;
	justify-content: flex-start;
	align-items: center;
	gap: 0;
	background: var(--button-standard-fill);
	cursor: default;
}

.moduleSidebarStreamSharePlayerOptionsSearch > #appStreamShareSearchCatalogueIcon {
	left: 10px;
	position: absolute;
	z-index: 1;
}

.objectSidebarStreamShareOptionsInput {
	margin: 0 5px 0 5px;
	padding: 5px 5px 5px 35px;
	height: 18px;
}

.moduleSidebarStreamSharePlayerOptionsSearch > button {
	padding: 0;
	margin: 0 5px 0 0;
	position: relative;
	z-index: 1;
}

#appStreamShareRebuildCatalogueIcon {
	margin-top: 4px;
}

.moduleSidebarStreamSharePlayerOptionsFTP,
.objectSidebarStreamSharePlayerOptionsEject {
	background: var(--button-standard-fill);
}

.moduleSidebarStreamSharePlayerOptionsFTP:hover,
.objectSidebarStreamSharePlayerOptionsEject:hover {
	background: var(--button-standard-fill-hover);
}

.moduleSidebarStreamSharePlayerOptionsFTP:active,
.objectSidebarStreamSharePlayerOptionsEject:active {
	background: var(--button-standard-fill-active);
}

.objectSidebarStreamSharePlayerOptionsEject[unloaded] {
	background: var(--button-standard-fill-active);
	cursor: not-allowed;
}

.objectSidebarStreamSharePlayerOptionsEject[unloaded] > .objectSidebarStreamShareOptionsIcon,
.objectSidebarStreamSharePlayerOptionsEject[unloaded] > .objectSidebarStreamShareOptionsTitle {
	opacity: 0.25;
}

.objectSidebarStreamSharePlayerOptionsEject[loaded] {
	cursor: pointer;
}

.objectSidebarStreamSharePlayerOptionsEject[loaded] > .objectSidebarStreamShareOptionsIcon,
.objectSidebarStreamSharePlayerOptionsEject[loaded] > .objectSidebarStreamShareOptionsTitle {
	opacity: 1;
}

#moduleSidebarStreamSharePlayerOptionsContainer div[active] {
    background: var(--button-subtle-fill-active);
}

.objectSidebarStreamShareOptionsCatalogue[active] .moduleSidebarStreamSharePlayerOptionsFTP {
	display: block;
}

.objectSidebarStreamShareOptionsCatalogue[inactive] .moduleSidebarStreamSharePlayerOptionsFTP {
	display: hidden;
}

/* =============SIDEBAR CATALOGUE MEDIA=============== */

#appStreamShareGuideContainer {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.appStreamShareMultimediaFile {
	margin: 0.1rem 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: var(--canvas-panel);
	border: 1px solid var(--canvas-panel-border);
	border-radius: var(--radius-object);
	box-shadow: var(--shadow-medium);
}

.appStreamShareMultimediaFile[active] {
	outline: 2px solid gray;
}

.appStreamShareMultimediaFile:not(:last-child) {
	margin-bottom: 10px;
}

.appStreamShareMultimediaFileMetadataInfoBlock {
	height: 72px;
	width: 100%;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--canvas-panel-border);
}

#moduleBodyFramework[right] .appStreamShareMultimediaFileMetadataInfoBlock {
	flex-direction: row;
}

#moduleBodyFramework[right] .appStreamShareMultimediaFileMetadataText {
	text-align: left;
	border-right: 1px solid var(--canvas-panel-border);
	overflow-y: auto;
}

#moduleBodyFramework[left] .appStreamShareMultimediaFileMetadataText {
	text-align: right;
	border-left: 1px solid var(--canvas-panel-border);
}

.appStreamShareMultimediaFileMetadataText {
	height: 72px;
	padding: 0 0.5rem;
	align-content: center;
	flex: 1;
	overflow-y: auto;
}

.appStreamShareMultimediaFileMetadataTitle {
	font-size: calc(var(--base-font-size) * 0.75);
	font-weight: 700;
}

.appStreamShareMultimediaFileMetadataDate,
.appStreamShareMultimediaFileMetadataDateElapsed,
.appStreamShareMultimediaFileControlsSize {
	color: var(--canvas-panel-text-muted);
	font-size: calc(var(--base-font-size) * 0.66);
	font-weight: 300;
}

.appStreamShareMultimediaFileMetadataThumbnail {
	height: 72px;
	width: 72px;
}

.appStreamShareMultimediaFileMetadataThumbnail img {
	height: 72px;
	width: 72px;
}

#moduleBodyFramework[right] .appStreamShareMultimediaFileMetadataThumbnail img {
	border-radius: 0 4px 0 0;
}

#moduleBodyFramework[left] .appStreamShareMultimediaFileMetadataThumbnail img {
	border-radius: 4px 0 0 0;
}

.appStreamShareMultimediaFileControls {
	height: 32px;
	width: 100%;
	display: flex;
	flex-direction: row;
	background: var(--canvas-main);
	border-top: 1px solid var(--canvas-panel-border);
}

.appStreamShareMultimediaFileControlsButton {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	gap: 5px;
	background: var(--button-subtle-fill);
	cursor: pointer;
}

.appStreamShareMultimediaFileControlsButton:hover {
	background: var(--button-subtle-fill-hover);
}

.appStreamShareMultimediaFileControlsButton:active {
	background: var(--button-subtle-fill-active);
}

.appStreamShareMultimediaFileControls div:first-of-type {
	border-right: 1px solid var(--canvas-panel-border);
}

.appStreamShareMultimediaFileControlsIcon {
	width: 24px;
	height: 24px;
}

.appStreamShareMultimediaFileControlsText {
	font-size: calc(var(--base-font-size) * 0.67);
	font-weight: 700;
	opacity: 0.8;
}

/* =============SIDEBAR TOOLKIT TAB=============== */



/* =============VIDEO PLAYER BLOCK=============== */

#appStreamShareMediaPlayerScopeContainer {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.25rem;
}


#appStreamShareMediaPlayerContainer {
	position: relative;
	text-align: center;
}

#appStreamShareMediaPlayer {
	width: 100%;
	background: var(--canvas-surface);
	border-radius: 8px 8px 0 0;
	box-shadow: var(--shadow-small);
}

#appStreamShareMediaPlayer[contain] {
	object-fit: contain;
}

#appStreamShareMediaPlayer[cover] {
	object-fit: cover;
}

#appStreamShareCustomControlsContainer {
	top: -3px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
	background: var(--canvas-surface);
	border-radius: 0 0 8px 8px;
	box-shadow: var(--shadow-small);
}

#appStreamShareCustomControlsSeekBar {
	height: 10px;
}

#appStreamShareMediaSeekBar {
	top: -6px;
	padding: 0;
	margin: 0;
	height: 10px;
	background: linear-gradient(
		to right,
		var(--accent-color, var(--streamshare-seek-track-thumb-active)) 0%,
		var(--accent-color, var(--streamshare-seek-track-thumb-active)) 0%,
		var(--streamshare-seek-track) 0%,
		var(--streamshare-seek-track) 100%
	);
	border: 2px solid var(--canvas-surface-border);
	border-top: none;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.1s linear;
	cursor: pointer;
}

#appStreamShareMediaSeekBar::-webkit-slider-runnable-track {
	max-height: 10px;
	background: transparent;
	border-radius: 0;
}

#appStreamShareMediaSeekBar::-moz-range-track {
	max-height: 6px;
	background: transparent;
	border-radius: 0;
}

#appStreamShareMediaSeekBar::-webkit-slider-thumb {
	top: -3px;
	width: 16px;
	height: 16px;
	position: relative;
	background: var(--streamshare-seek-track-thumb);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-medium);
	-webkit-appearance: none;
	appearance: none;
}

#appStreamShareMediaSeekBar::-moz-range-thumb {
	width: 16px;
	height: 16px;
	background: var(--streamshare-seek-track-thumb);
	box-shadow: var(--shadow-medium);
	border-radius: var(--radius-card);
	transition: transform 0.25s;
}

#appStreamShareMediaSeekBar:hover::-webkit-slider-thumb {
	background: var(--streamshare-seek-track-thumb-active);
	transform: scale(1.1);
	transition: transform 0.25s;
	cursor: grab;
}

#appStreamShareMediaSeekBar:hover::-moz-range-thumb {
	background: var(--streamshare-seek-track-thumb-active);
	transform: scale(1.1);
	transition: transform 0.25s;
	cursor: grab;
}

#appStreamShareMediaSeekBar:active::-webkit-slider-thumb {
	cursor: grabbing;
}

#appStreamShareMediaSeekBar:active::-moz-range-thumb {
	cursor: grabbing;
}

#appStreamShareMediaSeekBar:focus {
	outline: none;
}

#appStreamShareMediaSeekBar::-moz-range-progress {
	background-color: var(--accent-color, var(--streamshare-seek-track-thumb-active));
	height: 10px;
}

#appStreamShareMediaSeekBar::-ms-fill-lower {
	background-color: var(--accent-color, var(--streamshare-seek-track-thumb-active));
}

#appStreamShareCustomControlsMediaControls {
	padding: 0 10px 10px 10px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

#appStreamShareCustomControlsMediaControlsLeft {
	display: flex;
	flex-direction: row;
    justify-content: space-between;
	align-items: center;
	gap: 10px;
}

#appStreamShareMediaTimes {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#appStreamShareMediaCurrentTime, #appStreamShareMediaRemainingTime {
	text-align: center;
}

#appStreamShareMediaRemainingTime {
	color: var(--canvas-card-text-muted);
}

#appStreamShareMediaVolumeContainer {
	left: 15px;
	bottom: 85px;
	padding: 10px;
	height: 20px;
	width: 200px;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--canvas-card);
	border: 1px solid var(--canvas-card-border);
	border-radius: var(--radius-object);
	box-shadow: var(--shadow-small);
}

#appStreamShareMediaVolumeBar {
	padding: 0;
	margin: 0;
	height: 10px;
	background: linear-gradient(to right, var(--accent-color, var(--streamshare-seek-track-thumb-active)) 0%, var(--accent-color, var(--streamshare-seek-track-thumb-active)) 0%, var(--streamshare-seek-track) 0%, var(--streamshare-seek-track) 100%);
	border: none;
	border-bottom: 2px solid var(--canvas-surface-border);
	border-radius: var(--radius-object);
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.1s linear;
	cursor: pointer;
}

#appStreamShareMediaVolumeBar::-webkit-slider-runnable-track {
	max-height: 10px;
	background: transparent;
	border-radius: 0;
}

#appStreamShareMediaVolumeBar::-moz-range-track {
	max-height: 6px;
	background: transparent;
	border-radius: 0;
}

#appStreamShareMediaVolumeBar::-webkit-slider-thumb {
	top: -0.185rem;
	width: 16px;
	height: 16px;
	position: relative;
	background: var(--streamshare-seek-track-thumb);
	border-radius: var(--radius-card);
	-webkit-appearance: none;
	appearance: none;
}

#appStreamShareMediaVolumeBar::-moz-range-thumb {
	width: 16px;
	height: 16px;
	background: var(--streamshare-seek-track-thumb);
	border-radius: var(--radius-card);
	transition: transform 0.25s;
}

#appStreamShareMediaVolumeBar:hover::-webkit-slider-thumb {
	background: var(--streamshare-seek-track-thumb-active);
	transform: scale(1.1);
	transition: transform 0.25s;
	cursor: grab;
}

#appStreamShareMediaVolumeBar:hover::-moz-range-thumb {
	background: var(--streamshare-seek-track-thumb-active);
	transform: scale(1.1);
	transition: transform 0.25s;
	cursor: grab;
}

#appStreamShareMediaVolumeBar:active::-webkit-slider-thumb {
	cursor: grabbing;
}

#appStreamShareMediaVolumeBar:active::-moz-range-thumb {
	cursor: grabbing;
}

#appStreamShareMediaVolumeContainer[hidden] {
	display: none;
}

#appStreamShareMediaVolumeBar {
	padding: 0;
	margin: 0 10px 0 0;
	border: none;
}

#appStreamShareMediaStopButton, #appStreamShareMediaPlayPauseButton, #appStreamShareMediaPlayVolume, #appStreamShareMediaSettingsButton, #appStreamShareMediaToggleScreenButton {
	height: 16px;
	width: 16px;
	padding: 16px;
	background-size: contain;
	cursor: pointer;
}

#appStreamShareMediaStopButton {
	background-image: url('../icons/iconStreamShareMediaControlsStop.png');
}

#appStreamShareMediaCurrentTimeDisplay {
	margin-top: 7px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

#appStreamShareMediaSettingsButton {
	background-image: url('../icons/iconStreamShareMediaControlsSettings.png');
}

#appStreamShareMediaToggleScreenButton {
	background-image: url('../icons/iconStreamShareMediaControlsExpand.png');
}

/* =============MEDIA INFORMATION (PLAYER SECTION)=============== */

#moduleMediaInformationContainer {
	flex: 1;
}

#moduleMediaInformationContainer > #moduleMediaDescriptionContainer {
	display: flex;
	flex-direction: column;
}

#moduleMediaDescriptionContainer > #moduleMediaDescriptionBlock1 {
	padding: 10px;
	display: flex;
	flex-direction: column;
	border-bottom: 2px solid var(--canvas-surface-border);
}

#moduleMediaDescriptionBlock1 > #moduleMediaDescriptionBlock1TitleContainer {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.25rem;
}

#moduleMediaDescriptionBlock1TitleContainer > div {
	margin: 0;
	font-size: calc(var(--base-font-size) * 1.25);
	font-weight: bold;
}

#moduleMediaDescriptionContainer > #moduleMediaDescriptionBlock1 p {
	margin: 0;
	color: var(--canvas-surface-text);
	font-size: calc(var(--base-font-size) * 0.67);
	font-style: oblique;
}

#moduleMediaDescriptionBlock1 > #moduleMediaDescriptionBlock1MetadataContainer {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

#appStreamShareMediaMediaMetadata[missing] {
    display: none;
}

#appStreamShareMediaMediaMetadata[found] {}

#moduleMediaDescriptionContainer > #moduleMediaDescriptionBlock2 {
	padding: 10px;
}

#moduleMediaDescriptionContainer > #moduleMediaDescriptionBlock2 p {
	margin: 0;
	font-size: calc(var(--base-font-size) * 1);
}

#appStreamShareMediaMediaDescription[missing] {
	color: var(--canvas-surface-text);
	font-size: calc(var(--base-font-size) * 0.67);
	font-style: oblique;
}

#appStreamShareMediaMediaDescription[found] {
	font-style: normal;
}

/* =============TAB TOOLKITS=================== */

.moduleActionTitleContainer {
	background-color: var(--canvas-main);
	border-bottom: 2px solid var(--canvas-surface-border);
}

.moduleActionTitleContainer > div {
	margin: 5px 10px 5px 10px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.moduleActionTitleText {
	margin: 0;
	font-size: calc(var(--base-font-size) * 1);
	font-weight: bold;
}

#objectPlaybackTransposerIcon, #objectPlaybackLooperIcon {
	height: 16px;
	width: 16px;
}

[dataTheme="eclipse"] #objectPlaybackTransposerIcon,
[dataTheme="twilight"] #objectPlaybackTransposerIcon {
	content: url('../icons/iconStreamShareAudioWaveDark.png');
}

[dataTheme="radiance"] #objectPlaybackTransposerIcon {
	content: url('../icons/iconStreamShareAudioWaveLight.png');
}

[dataTheme="eclipse"] #objectPlaybackLooperIcon,
[dataTheme="twilight"] #objectPlaybackLooperIcon {
	content: url('../icons/iconStreamShareAudioLoopDark.png');
}

[dataTheme="radiance"] #objectPlaybackLooperIcon {
	content: url('../icons/iconStreamShareAudioLoopLight.png');
}

/* TRANSPOSER */

#moduleTransposerContainer {
	margin: 0 0 0.5rem 0;
	display: flex;
	flex-direction: column;
	background-color: var(--canvas-panel);
	box-shadow: var(--shadow-small);
	border: 1px solid var(--canvas-surface-border);
	border-radius: var(--radius-object);
}

#moduleTranspositionActionsContainer {
	padding: 0 10px 10px 10px;
}

#objectPlaybackTransposerSlider {
	top: -6px;
	padding: 0;
	margin: 15px 0 0 0;
	height: 10px;
	background: linear-gradient(
		to right,
		var(--accent-color, var(--streamshare-seek-track-thumb-active)) 0%,
		var(--accent-color, var(--streamshare-seek-track-thumb-active)) 0%,
		var(--streamshare-seek-track) 0%,
		var(--streamshare-seek-track) 100%
	);
	border: 1px solid var(--canvas-surface-border);
	border-radius: var(--radius-object);
	-webkit-appearance: none;
	appearance: none;
	transition: background 0.1s linear;
	cursor: pointer;
}

#objectPlaybackTransposerSlider::-webkit-slider-runnable-track {
	max-height: 10px;
	background: transparent;
	border-radius: 0;
}

#objectPlaybackTransposerSlider::-moz-range-track {
	max-height: 6px;
	background: transparent;
	border-radius: 0;
}

#objectPlaybackTransposerSlider::-webkit-slider-thumb {
	top: -3px;
	width: 16px;
	height: 16px;
	position: relative;
	background: var(--streamshare-seek-track-thumb);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-medium);
	-webkit-appearance: none;
	appearance: none;
}

#objectPlaybackTransposerSlider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	background: var(--streamshare-seek-track-thumb);
	box-shadow: var(--shadow-medium);
	border-radius: var(--radius-card);
	transition: transform 0.25s;
}

#objectPlaybackTransposerSlider:hover::-webkit-slider-thumb {
	background: var(--streamshare-seek-track-thumb-active);
	transform: scale(1.1);
	transition: transform 0.25s;
	cursor: grab;
}

#objectPlaybackTransposerSlider:hover::-moz-range-thumb {
	background: var(--streamshare-seek-track-thumb-active);
	transform: scale(1.1);
	transition: transform 0.25s;
	cursor: grab;
}

#objectPlaybackTransposerSlider:active::-webkit-slider-thumb {
	cursor: grabbing;
}

#objectPlaybackTransposerSlider:active::-moz-range-thumb {
	cursor: grabbing;
}

#objectPlaybackTransposerSlider:focus {
	outline: none;
}

#objectPlaybackTransposerSlider::-moz-range-progress {
	background-color: var(--accent-color, var(--streamshare-seek-track-thumb-active));
	height: 10px;
}

#objectPlaybackTransposerSlider::-ms-fill-lower {
	background-color: var(--accent-color, var(--streamshare-seek-track-thumb-active));
}

#objectPlaybackTransposerSliderContainer {
	display: flex;
	flex-direction: column;
}

#objectPlaybackTransposerSliderHints {
	margin: -5px 10px 5px 10px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: calc(var(--base-font-size) * 0.750);
}

#objectPlaybackTransposerSliderHints span {
	cursor: help;
}

#objectTransposeControlsButtons button {
	margin: 0;
}

#objectTransposeControlsButtons {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	gap: 10px;
}

#objectPlaybackTransposerUpButton, #objectPlaybackTransposerUpPrecisionButton {
	transform: rotate(-0.25turn);
}

#objectPlaybackTransposerDownButton, #objectPlaybackTransposerDownPrecisionButton {
	transform: rotate(-0.25turn);
}

#objectPlaybackPitchSync {
	font-size: calc(var(--base-font-size) * 1);
}

/* LOOPER */

#moduleLooperContainer {
	display: flex;
	flex-direction: column;
	background-color: var(--canvas-panel);
	box-shadow: var(--shadow-small);
	border: 1px solid var(--canvas-surface-border);
	border-radius: var(--radius-object);
}

#moduleTransientLooperActionsContainer {
	padding: 0 20px 20px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* =============TAB CONTENTS=================== */




/* =============VIDEO LIST=============== */

#moduleMediaListContainer {
	width: 100%;
	height: 100%;
	background: #151515;
	border: 1px solid #090909;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

#moduleMediaListContainer > #moduleMediaListTitle {
	padding: 10px;
	font-size: calc(var(--base-font-size) * 1.25);
	font-weight: bold;
	border-bottom: 2px solid #363636;
}

#moduleMediaListContainer > #moduleMediaListTitle p {
	margin: 0;
}

#moduleMediaListContainer > #moduleMediaList {
	padding: 10px;
}

.video-folder-content {
	margin-left: 10px;
	display: none;
	flex-direction: column;
}

.video-folder-content.expanded {
	display: flex;
}

.video-folder-toggle {
	margin: 5px;
	width: -webkit-fill-available;
	width: -moz-available;
	text-align: left;
}

.video-button {
	margin: 5px;
	width: -webkit-fill-available;
	width: -moz-available;
	text-align: left;
	background-color: #484848;
	border: 1px solid #363636;
}