/* Set core body defaults */
:root {
	--home-text-color: hsl(0 0% 100%);
	--home-title-color: hsl(0 100% 50%);
	--bar-bkgnd-color: hsl(1 70% 50%);
	--bar-bkgnd-color-pulse: #000;
	--bar-bkgnd-color-top-border: hsl(1 70% 55% / 100%);
	--bar-bkgnd-color-bottom-border: hsl(1 70% 45% / 100%);
	--bar-bkgnd-color-glass: hsl(1 100% 40% / 100%);
	--bar-bkgnd-color-dark: hsl(0 0% 20%);
	--title-text-color: hsl(0 0% 100%);
	--title-text-shadow-color: hsl(0 100% 27%);
	--btn-border-radius: .3em;
	--btn-color: hsl(0 100% 100%);
	--btn-tb-text-color: hsl(0 0% 15%);
	--btn-bkgnd-color: hsl(1 100% 40% / 100%);
	--btn-bkgnd-color-focus: hsl(1 100% 50% / 100%);
	--btn-active-bkgnd-color: hsl(1 100% 50% / 100%);
	--btn-bkgnd-color-hover: rgba(255, 0, 0, 1);
	--button-img-color-red: hsl(0 70% 45%);
	--tabbar-bkgnd-button: hsl(0 0% 85%);
	--tabbar-bkgnd-button-active: hsl(0 60% 50%);
	--body-bkgnd-color: hsl(0deg 0% 100%);
	--text-color-darker: hsl(0 0% 0%);
	--text-color-def: hsl(0 0% 15%);
	--text-color-lighter: hsl(0 0% 25%);
	--text-color-light: hsl(0 0% 30%);
	--field-title-color: hsl(0, 0% 50%);
	--field-input-bkgnd-color: hsl(0 0% 100%);
	--form-bkgnd-color: hsl(0 0% 95%);
	--form-bkgnd-color-detail-group: hsl(180 100% 97%);
	--form-drop-shadow-color: hsl(0 0% 0% / 50%);
	--pane-bkgnd-color: #f3f3f3;
	--menu-item-color: hsl(0 0% 15%);
	--menu-item-hover-color: hsl(0 0% 80%);
	--menu-item-hover-bkgnd-color: hsl(0 0% 80%);
	--list-bkgnd-color: #111;
	--list-bkgnd-color-rundown: hsl(120 100% 90%);
	--list-rw-bk-color-eoc: hsl(39 100% 50%);
	--list-rw-border: hsl(0 0% 80%);
	--list-rw-bkgnd-color-select: hsl(226 100% 45%);
	--list-rw-color-hover: hsl(225 100% 65%);
	--list-rw-border-color-hover: hsl(0 0% 30%);
	--list-rw-bk-color-hover: hsl(226 100% 95%);
	--list-rw-color-sel-hover: hsl(208 100% 95%);
	--list-rw-color-title: hsl(0 0% 0%);
	--list-rw-color-title-eoc: hsl(0 0% 15%);
	--list-rw-color-desc: hsl(0 0% 30%);
	--list-rw-color-date: hsl(0 0% 20%);
	--item-list-header-rundown-bkgnd-color: hsl(120 100% 90%);
	--item-list-footer-rundown-bkgnd-color: hsl(120 100% 90%);
	--item-list-header-bkgnd-color: hsl(0 0% 100%);
	--item-list-footer-bkgnd-color: hsl(0 0% 100%);
	--item-list-program-item-color: hsl(0 0% 30%);
	--item-list-program-item-bkgnd-color: hsl(190 100% 50%);
	--queue-list-rw-color-edit: hsl(120 100% 35%);
	--queue-list-rw-color-read: hsl(200 60% 40%);
	--queue-list-rw-color-none: hsl(0 0% 50%);
	--queue-list-rw-color-media-set: hsl(0 0% 20%);
	--queue-list-rw-color-hover: hsl(225 100% 65%);
	--queue-list-exp-cont-btn-bkgnd-color: transparent;
	--queue-list-rw-color-bkgnd: rgb(128 128 128 / 10%);
	--cart-text-color: hsl(0 0% 15%);
	--cart-loading-color: hsl(35 100% 70%);
	--cart-loaded-color: hsl(135 70% 40%);
	--cart-playing-color: hsl(120 100% 50%);
	--cart-paused-color: hsl(125 25% 68%);
	--cart-error-color: hsl(0 61% 70%);
	--def-trans-time: .15s;
	--modal-trans-time: .3s;
	--color-trans-time: .1s;
	--mob-break-max-width: 768px;
	--table-border-radius: .4em;
	--font-family: Helvetica, Arial, sans-serif;
	--input-border-color: hsl(0 0% 80%);
	--focus-border-color: hsl(0 100% 50%);
	--dropzone-file-upload: hsl(0 0% 90%);
	--dropzone-files-bar: hsl(130 100% 35% / .2);
	--dropzone-progress-msg: green;
	--dropzone-error-msg: red;
	--alert-dialog-border-color: hsl(0 0% 100%);
	--alert-dialog-bkgnd-color-query: hsl(0 0% 90%);
	--alert-dialog-color-query: hsl(0 0% 10%);
	--alert-dialog-bkgnd-color-info: hsl(0 0% 90%);
	--alert-dialog-color-info: hsl(0 0% 10%);
	--alert-dialog-bkgnd-color-success: hsl(0 0% 90%);
	--alert-dialog-color-success: hsl(0 0% 10%);
	--alert-dialog-bkgnd-color-warning: hsl(0 0% 90%);
	--alert-dialog-color-warning: hsl(0 0% 10%);
	--alert-dialog-bkgnd-color-danger: hsl(0 0% 90%);
	--alert-dialog-color-danger: hsl(0 0% 10%);
	--message-box-bkgnd-color-caption: hsl(0 0% 80%);
	--message-box-color-caption: hsl(0 0% 10%);
	--message-box-bkgnd-color: hsl(0 0% 90%);
	--message-box-color: hsl(0 0% 10%);
	--message-box-border-color: hsl(0 0% 100%);
	--message-unread-color: hsl(250 100% 50%);
	--message-flashbk-color: hsl(0 100% 0%);
	--scrollbar-thumb-background-color: #BBB;
	--scrollbar-thumb-background-color-hover: #AAA;
	--scrollbar-thumb-background-color-active: #999;
	--scrollbar-track-background-color: #EEE;
	--frame-footer-black-color: hsl(0 0% 80%);
	--link-normal: #0000EE;
	--link-visited: #551A8B;
	--link-active: #FF0000;
	font-family: var(--font-family);
	font-size: medium;
	font-weight: normal;
	color: var(--text-color-def);
}

@media (prefers-color-scheme: dark) {
	:root {
		--home-text-color: hsl(0 0% 90%);
		--home-title-color: hsl(0 100% 50%);
		--bar-bkgnd-color: hsl(0 0% 25%);
		--bar-bkgnd-color-pulse: hsl(1 70% 50%);
		--bar-bkgnd-color-top-border: hsl(0 0% 30%);
		--bar-bkgnd-color-bottom-border: hsl(0 0% 20%);
		--bar-bkgnd-color-glass: hsl(1 100% 40% / 40%);
		--bar-bkgnd-color-dark: hsl(0 0% 20%);
		--title-text-color: hsl(1 85% 50% / 1);
		--title-text-shadow-color: hsl(0 0% 0%);
		--btn-color: hsl(0 100% 100%);
		--btn-tb-text-color: hsl(0 0% 90%);
		--btn-bkgnd-color: hsl(1 100% 40% / 100%);
		--btn-bkgnd-color-focus: hsl(1 100% 50% / 100%);
		--btn-active-bkgnd-color: hsl(1 100% 50% / 100%);
		--btn-bkgnd-color-hover: rgba(255, 0, 0, 1);
		--button-img-color-red: hsl(0 70% 45%);
		--tabbar-bkgnd-button: hsl(0 0% 10%);
		--tabbar-bkgnd-button-active: #cc3333;
		--body-bkgnd-color: hsl(0 0% 10%);
		--text-color-darker: hsl(0 0% 100%);
		--text-color-def: hsl(0 0% 80%);
		--text-color-lighter: hsl(0 0% 70%);
		--text-color-light: hsl(0 0% 60%);
		--field-title-color: hsl(0 0% 60%);
		--field-input-bkgnd-color: hsl(0 0% 10%);
		--form-bkgnd-color: hsl(0 0% 20%);
		--form-bkgnd-color-detail-group: hsl(180 50% 20%);
		--form-drop-shadow-color: hsl(0 0% 0%);
		--pane-bkgnd-color: hsl(0 1% 17%);
		--menu-item-color: hsl(0 0% 80%);
		--menu-item-hover-color: hsl(0 0% 15%);
		--menu-item-hover-bkgnd-color: hsl(0 0% 80%);
		--list-bkgnd-color: hsl(240 1% 15%);
		--list-bkgnd-color-rundown: hsl(120 100% 10%);
		--list-rw-bk-color-eoc: #9a6400;
		--list-rw-border: #454545;
		--list-rw-bkgnd-color-select: hsl(226 100% 45%);
		--list-rw-color-hover: #000;
		--list-rw-border-color-hover: hsl(0 0% 60%);
		--list-rw-bk-color-hover: hsl(226 100% 95%);
		--list-rw-color-sel-hover: hsl(208 100% 95%);
		--list-rw-color-title: hsl(0 0% 90%);
		--list-rw-color-title-eoc: #eee;
		--list-rw-color-desc: hsl(0 0% 70%);
		--list-rw-color-date: hsl(0 0% 80%);
		--item-list-header-rundown-bkgnd-color: hsl(120 100% 10%);
		--item-list-footer-rundown-bkgnd-color: hsl(120 100% 10%);
		--item-list-header-bkgnd-color: hsl(0 0% 10%);
		--item-list-footer-bkgnd-color: hsl(0 0% 10%);
		--item-list-program-item-color: hsl(102 40% 100%);
		--item-list-program-item-bkgnd-color: hsl(190 100% 30%);
		--queue-list-rw-color-edit: hsl(120 80% 60%);
		--queue-list-rw-color-read: hsl(200 100% 60%);
		--queue-list-rw-color-none: hsl(0 0% 50%);
		--queue-list-rw-color-media-set: hsl(0 0% 90%);
		--queue-list-rw-color-hover: hsl(0 0% 100%);
		--queue-list-exp-cont-btn-bkgnd-color: transparent;
		--queue-list-rw-color-bkgnd: rgb(128 128 128 / 15%);
		--cart-text-color: #aaa;
		--cart-loading-color: hsl(35 100% 70%);
		--cart-loaded-color: hsl(135 70% 40%);
		--cart-playing-color: hsl(120 100% 50%);
		--cart-paused-color: hsl(125 25% 68%);
		--cart-error-color: hsl(0 61% 70%);
		--font-family: Helvetica, Arial, sans-serif;
		--input-border-color: hsl(0 0% 30%);
		--focus-border-color: hsl(0 100% 30%);
		--dropzone-file-upload: hsl(0 0% 20%);
		--dropzone-files-bar: hsl(130 100% 50% / .2);
		--dropzone-progress-msg: lightgreen;
		--dropzone-error-msg: red;
		--alert-dialog-border-color: hsl(0 0% 30%);
		--alert-dialog-bkgnd-color-query: hsl(0 0% 15%);
		--alert-dialog-color-query: hsl(0 0% 90%);
		--alert-dialog-bkgnd-color-info: hsl(0 0% 15%);
		--alert-dialog-color-info: hsl(0 0% 90%);
		--alert-dialog-bkgnd-color-success: hsl(0 0% 15%);
		--alert-dialog-color-success: hsl(0 0% 90%);
		--alert-dialog-bkgnd-color-warning: hsl(0 0% 15%);
		--alert-dialog-color-warning: hsl(0 0% 90%);
		--alert-dialog-bkgnd-color-danger: hsl(0 0% 15%);
		--alert-dialog-color-danger: hsl(0 0% 90%);
		--message-box-bkgnd-color-caption: hsl(0 0% 30%);
		--message-box-color-caption: hsl(0 0% 90%);
		--message-box-bkgnd-color: hsl(0 0% 15%);
		--message-box-color: hsl(0 0% 90%);
		--message-box-border-color: hsl(0 0% 30%);
		--message-unread-color: hsl(200 100% 50%);
		--message-flashbk-color: hsl(0 100% 50%);
		--scrollbar-thumb-background-color: #434343;
		--scrollbar-thumb-background-color-hover: #555;
		--scrollbar-thumb-background-color-active: #666;
		--scrollbar-track-background-color: #111;
		--link-normal: #5f94fe;
		--link-visited: #b666ff;
		--link-active: #FF0000;
		font-weight: normal;
		color-scheme: dark;
	}
}

/* Box sizing rules */
*, *::before, *::after {
	box-sizing: border-box;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
/*p,*/
figure,
/*blockquote,*/
dl,
dd {
	margin: 0;
}

p {
	margin-bottom: 1em;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
	list-style: none;
}

/* Set core root defaults */
html:focus-within {
	scroll-behavior: smooth;
}


@media (prefers-color-scheme: light) {
}


/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
/*img,
picture {
	max-width: 100%;
	display: block;
}
*/
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font: inherit;
}

:link {
	color: var(--link-normal);
}

:visited {
	color: var(--link-visited);
}

	:link:active, :visited:active {
		color: var(--link-active);
	}

:link, :visited {
	text-decoration: underline;
	cursor: pointer;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

:focus {
	outline: 1px solid var(--focus-border-color);
}

iframe:focus {
	outline: none;
}

@media (pointer: coarse) {
	:focus {
		outline: none;
	}
}

html {
	height: 100%;
	-webkit-user-select: none;
	user-select: none;
}

/* for Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--scrollbar-thumb-background-color) transparent;
}

/* For Chrome, Edge, Safari */
*::-webkit-scrollbar {
	width: 1.2em;
	height: 1em;
}

*::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-thumb-background-color);
	border-radius: 1em;
	/*box-shadow: inset 2px 2px 2px hsl(0deg 0% 100% / 25%), inset -2px -2px 2px rgb(0 0 0 / 25%);*/
	box-shadow: inset 0px 0px 2px hsl(0deg 0% 100% / 25%);
	border: .3em solid transparent;
	background-clip: content-box;
}

	*::-webkit-scrollbar-thumb:hover {
		background-color: var(--scrollbar-thumb-background-color-hover);
	}

	*::-webkit-scrollbar-thumb:active {
		background-color: var(--scrollbar-thumb-background-color-active);
	}

*::-webkit-scrollbar-track {
	/*background: linear-gradient(90deg,var(--scrollbar-thumb-background-color),var(--scrollbar-thumb-background-color) 1px, var(--scrollbar-track-background-color) 0, var(--scrollbar-track-background-color));*/
	background-color: transparent;
}

body {
	height: 100%;
	min-height: 100%;
	overflow: hidden; /* prevent page refresh on pull-down */
	padding: 0;
	border: none;
	font-size: 1rem;
	background-color: var(--body-bkgnd-color);
	/*touch-action: pan-x pan-y;*/
}

button {
	flex-shrink: 1;
	background-color: var(--tabbar-bkgnd-button);
	cursor: pointer;
	font-size: 1rem;
	padding: .25em;
	transition: background-color var(--def-trans-time) linear;
}

	button.active {
		background-color: var(--tabbar-bkgnd-button-active);
		color: white;
	}


input, input:active, input:focus, input:focus-within, input:hover, input:visited, textarea {
	font-size: 1rem !important;
}

.pane {
	background-color: var(--pane-bkgnd-color);
}

.top-body {
	display: flex;
	flex-direction: column;
	background-color: #2f4f4f;
}

.top-body__wrap {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0 auto;
	overflow: hidden;
}

.tophead {
	width: 100%;
	height: 3em;
	overflow: hidden;
	border: none;
}

.topmainframe {
	flex-grow: 1;
	flex-shrink: 0;
	border: none;
}

@media screen and (max-width: 768px) {
	.topmainframe {
		border: none;
	}

	.top-body__wrap {
		margin: 0;
	}
}

.logo {
	float: left;
	cursor: pointer;
}

.main-body {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: grid;
	grid-template-rows: auto 1fr;
	overflow: hidden;
}

.body-app-top-bar {
	display: flex;
	justify-content: space-between;
	height: 3em;
	width: 100%;
	padding: .5em;
	background-color: var(--bar-bkgnd-color);
	overflow: hidden;
	transition: background-color 1s ease-in;
}

	.body-app-top-bar[data-pulse] {
		background-color: var(--bar-bkgnd-color-pulse);
	}

.error-code {
	font-size: .8rem;
	color: gray;
}

.error-reason {
	font-size: .8rem;
	color: gray;
}

input, textarea, select {
	padding: .2em;
	border: 1px solid var(--input-border-color);
	border-radius: var(--btn-border-radius);
	color: var(--text-color-def);
	background-color: var(--field-input-bkgnd-color);
}

	input:focus, textarea:focus, select:focus {
		border: 1px solid var(--focus-border-color);
		outline: none;
	}

	input[type=submit], input[type=button], button {
		border: none;
		padding: .3em 1em;
		border-radius: var(--btn-border-radius);
		font-family: var(--font-family);
		-webkit-user-select: none;
		user-select: none;
	}

	input[type=file] {
		display: block;
		cursor: pointer;
		background-color: var(--btn-bkgnd-color);
		color: var(--btn-color);
		transition: background-color var(--def-trans-time) linear;
		width: min(20em, 90%);
		margin: .2em auto;
		border: none;
		padding: 0;
	}

		input[type=file]::file-selector-button {
			content: 'Choose a file';
			font-size: 1rem;
			padding: .5em 2em;
			cursor: pointer;
			color: var(--btn-color);
			background-color: var(--btn-bkgnd-color);
			border: none;
			width: 100%;
		}

.input--plain {
	background-color: transparent;
}

@media (any-hover: hover) {
	input[type=submit]:hover, input[type=button]:hover, input[type=file]:hover, input[type=file]::file-selector-button:hover, button:hover {
		transition: background-color var(--def-trans-time) linear;
		background-color: var(--btn-bkgnd-color-hover);
		opacity: 1;
	}
}

input#qpath {
	text-overflow: ellipsis;
}

.red-text {
	color: #FF0000
}


.top-title {
	font-size: 2rem;
	font-style: italic;
	line-height: .4em;
	letter-spacing: -.025em;
	color: var(--title-text-color);
	font-weight: bold;
	padding: 0 .5em;
	text-shadow: .05em .05em .1em var(--title-text-shadow-color);
}

	.top-title .tm {
		font-style: normal;
		font-weight: normal;
		font-size: .2em;
		vertical-align: 150%;
	}

.top-logout {
	display: flex;
}

.media-list, .story-list {
	/*height: 100%;*/
	overflow: auto;
	/*flex-grow: 10;*/
	background-color: var(--body-bkgnd-color);
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
}

	.media-list:focus, .story-list:focus {
		outline: none;
		border: 1px solid var(--focus-border-color);
	}

@media (pointer: coarse) {
	.media-list:focus, .story-list:focus {
		border: 1px solid transparent;
	}
}

.flex-col {
	flex-grow: 1;
}

.queue-list {
	overflow: auto;
	background-color: var(--body-bkgnd-color);
	border: none;
	padding: 0;
	margin: 0;
}

.queue-library-list {
	height: 100%;
	overflow: auto;
	margin: 0;
	padding: 0;
}

.q-lst-rw {
	position: relative;
	font-size: 1rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: max-height var(--def-trans-time) ease-out;
	background-color: transparent;
	color: var(--text-color-def);
	--before-width: 1em;
}

	/*Hierarchy level depth indicating background...*/
	.q-lst-rw[data-level='2'] {
		background-color: rgb(128 128 128 / 10%);
	}

	.q-lst-rw[data-level='3'] {
		background-color: rgb(128 128 128 / 15%);
	}

	.q-lst-rw[data-level='4'] {
		background-color: rgb(128 128 128 / 20%);
	}

	.q-lst-rw[data-level='5'] {
		background-color: rgb(128 128 128 / 25%);
	}

	.q-lst-rw::before {
		content: '';
		display: inline-block;
		background-size: 1em 1em;
		background-repeat: no-repeat;
		width: var(--before-width);
		height: 1em;
		margin: auto .25em auto 0;
		vertical-align: middle;
		left: 0;
		top: .3em;
	}

	.q-lst-rw[data-access='edit']::before {
		background-image: url('img/edit-filled-orange.svg');
	}

	/*	.q-lst-rw[data-access='edit'] {
		color: var(--queue-list-rw-color-edit);
	}*/

	.q-lst-rw[data-access='readcopy']::before {
		background-image: url('img/content-paste-glasses.svg');
	}


	.q-lst-rw[data-access='read']::before {
		background-image: url('img/glasses.svg');
	}

	.q-lst-rw[data-access='copy']::before {
		background-image: url('img/content-paste.svg');
	}

	/*	.q-lst-rw[data-access='read'] {
		color: var(--queue-list-rw-color-read);
	}*/
	.q-lst-rw[data-access='none'] {
		color: var(--queue-list-rw-color-none);
	}

/*	.q-lst-rw[data-type='rss']::before {
		background-image: url('img/rss-feed-orange.svg');
	}

	.q-lst-rw[data-type='twitter']::before {
		background-image: url('img/twitter-logo-blue.svg');
	}

	.q-lst-rw[data-type='email']::before {
		background-image: url('img/email-blue.svg');
	}
*/
.q-lst-rw-txt {
	cursor: pointer;
	vertical-align: middle;
	padding-right: .5em;
	/*font-weight: 500;*/
}

	.q-lst-rw-txt.dragover {
		background-color: black;
		color: white;
	}

	.q-lst-rw-txt::before, .q-lst-rw-txt::after {
		content: none;
		display: inline-block;
		background-size: 1em 1em;
		background-repeat: no-repeat;
		width: 1em;
		height: 1em;
		margin: auto .25em auto .25em;
		vertical-align: middle;
	}

	.q-lst-rw-txt::before {
		position: absolute;
		left: 0;
		top: .3em;
	}

	.q-lst-rw-txt[data-type='normal']::before {
	}

	.q-lst-rw-txt[data-type='rundown']::after {
		content: '';
		background-image: url('img/mic-red.svg');
	}

	.q-lst-rw-txt[data-type='rss']::after {
		content: '';
		background-image: url('img/rss-feed-orange.svg');
	}

	.q-lst-rw-txt[data-type='twitter']::after {
		content: '';
		background-image: url('img/twitter-logo-blue.svg');
	}

	.q-lst-rw-txt[data-type='email']::after {
		content: '';
		background-image: url('img/email-blue.svg');
	}


.q-lst-rw[data-selected='1'] > .q-lst-rw-txt:first-of-type {
	font-weight: bold;
	filter: brightness(120%);
}

.q-lst-rw-not-tiled {
	font-size: 1.5rem;
}

.q-lst-rw-exp-cont {
	cursor: pointer;
	color: #DB4453;
	vertical-align: middle;
	height: 1.5em;
	width: 1.5em;
	border-radius: var(--btn-border-radius);
	transition: var(--def-trans-time);
	background-color: var(--queue-list-exp-cont-btn-bkgnd-color)
}

@media (any-hover: hover) {
	.q-lst-rw-exp-cont:hover {
		filter: brightness(150%);
	}
}

.q-lst-rw-exp-cont--down {
	transform: rotate(90deg);
}

.q-lstV2-sub {
	/*padding-left: 1.5em;*/
	transition: max-height var(--def-trans-time) ease-out;
}

	.q-lstV2-sub[data-root] {
		/*padding-left: .5em;*/
	}

	.q-lstV2-sub[data-hidden='true'] {
		transition: max-height var(--def-trans-time) ease-out;
		max-height: 0px;
	}

.q-lst-rw--media-set {
	color: var(--queue-list-rw-color-media-set);
}

.q-lst-rw--media-set > .q-lst-rw-txt {
	font-style: italic;
}

.media-image {
	height: 1.2em;
	width: 1.2em;
	vertical-align: middle;
}

.tabbar {
	display: flex;
	flex-grow: 0;
	flex-shrink: 0;
	justify-content: center;
	overflow: hidden;
	background-color: var(--body-bkgnd-color);
}

	.tabbar button {
		margin: .2em;
		/*flex-grow: 1;*/
		/*flex-shrink: 1;*/
		flex-basis: 7em;
	}

@media (any-hover: hover) {
	.tabbar button:hover {
		background-color: rgba(255, 0, 0, .7);
	}
}

.download-link {
	margin-left: .5em;
}

.fr-view img.img-link, .img-link {
	width: 2rem;
	height: 2rem;
	border-radius: var(--btn-border-radius);
	cursor: pointer;
	vertical-align: middle;
}

.ql-editor {
	white-space: normal;
}

	.ql-editor p {
		margin-bottom: 1em;
	}

.ql-container {
	font-size: 1rem;
}

pre.cart {
	font-family: var(--font-family);
	white-space: normal;
}

@media (any-hover: hover) {
	.img-link:hover {
		transition: background-color var(--def-trans-time) linear;
		background-color: rgba(255, 0, 0, .7);
	}
}

.img-link--download {
	background-image: url('img/file-download-filled-black.svg');
	background-repeat: no-repeat;
	background-size: 2rem 2rem;
	background-color: transparent;
	margin-left: 0.25em;
}

@media (prefers-color-scheme: dark) {
	.img-link--download {
		background-image: url('img/file-download-filled-white.svg');
	}
}

/*.q-lst-rw--selected > .q-lst-rw-txt:first-of-type {
	font-weight: bold;
}
*/
/*@-webkit-keyframes glow {
	from {
		text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #e60073, 0 0 4px #e60073, 0 0 5px #e60073, 0 0 6px #e60073, 0 0 7px #e60073;
	}

	to {
		text-shadow: 0 0 2px #fff, 0 0 3px #ff4da6, 0 0 4px #ff4da6, 0 0 5px #ff4da6, 0 0 6px #ff4da6, 0 0 7px #ff4da6, 0 0 8px #ff4da6;
	}
}*/

@media (any-hover: hover) {
	.q-lst-rw-txt:hover {
		color: var(--queue-list-rw-color-hover);
	}
}

.frame-body {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.frame-header {
	/*flex-basis: calc(2rem + .2em + 4px);*/ /* icon + padding + borders */
	/*flex-grow: 0;*/
	flex: none;
	/*flex-shrink: 0;*/
	font-size: 1.1rem;
	padding: .1em .25em;
	text-align: center;
	background-color: var(--bar-bkgnd-color);
	color: white;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: 'left center right';
	gap: 5px;
	border-top: 2px solid var(--bar-bkgnd-color-top-border);
	border-bottom: 2px solid var(--bar-bkgnd-color-bottom-border);
	/*height: 2em;*/
	min-height: calc(2rem + .2em + 4px);
}

.frame-header-left {
	grid-area: left;
}

.frame-header-center {
	grid-area: center;
	display: inline-block;
	margin: auto 0;
	flex-direction: row;
	justify-content: center;
}

	.frame-header-center[data-rpad='1'] {
		padding-right: 2em;
	}

	.frame-header-center[data-rpad='2'] {
		padding-right: 4em;
	}

.frame-header-right {
	grid-area: right;
}


@media (pointer: coarse) {
	.frame-header-left {
		margin-left: 0.25em;
	}

	.frame-header-right {
		margin-right: 0.25em;
	}
}

.frame-header-text {
	margin: auto 0;
	word-break: break-word;
}

.frame-header-text--small {
	font-size: .8rem;
	color: lightgray;
}

.frame-drop-down {
	transform: translate(0, -100%);
}

.frame-prompt {
	display: flex;
	justify-content: left;
	padding: .2rem;
	background-color: var(--form-bkgnd-color);
	font-size: .8rem;
}

.frame-prompt-message {
	margin-top: auto;
	margin-bottom: auto;
}

.frame-client {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
}

.frame-middle {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	flex-grow: 1;
	background-color: var(--body-bkgnd-color);
	/*background-color: hsl(222deg 67% 15% / 45%);*/
}

.frame-middle-absolute {
	position: absolute;
	overflow: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--body-bkgnd-color);
	transition: transform var(--modal-trans-time);
	padding: 1em;
	z-index: 2;
}

.frame-footer {
	padding: .2em;
	text-align: center;
	color: white;
	background-color: var(--form-bkgnd-color); /*var(--bar-bkgnd-color-dark);*/
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: 'left center right';
	gap: .2em;
	flex-grow: 0;
	flex-shrink: 0;
}

.frame-footer-black {
	color: var(--frame-footer-black-color);
	background-color: black;
}

.frame-footer-gray {
	color: black;
	background-color: var(--form-bkgnd-color);
}

.form-footer {
	flex-grow: 0;
	flex-shrink: 0;
	text-align: center;
	padding: .25em 0;
}

.item-header {
	display: flex;
	position: relative;
	flex-direction: column;
	flex-shrink: 0;
	background-color: var(--form-bkgnd-color);
	color: var(--text-color-def);
	/*max-height: 30%;*/
	overflow-y: auto;
	padding: .2rem;
}

	.item-header[data-contracted='true'] .field[data-contract] {
		display: none;
	}

	/*display an indicator when datalist contracted.*/
	.item-header[data-contracted='true']::after {
    content: '';
    display: block;
		position:absolute;
		right: 0;
		bottom: 0;
    margin: auto;
    height: 1.5em;
    width: 1.5em;
    background-image: url('img/expand-more-black.svg');
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    background-position: center;
    cursor: pointer;
	}

	/*display an indicator when datalist not contracted.*/
	.item-header[data-contracted='false']::after {
		content: '';
		display: block;
		position: absolute;
		right: 0;
		bottom: 0;
		margin: auto;
		height: 1.5em;
		width: 1.5em;
		background-image: url('img/expand-less-black.svg');
		background-repeat: no-repeat;
		background-size: 1.5em 1.5em;
		background-position: center;
		cursor: pointer;
	}

@media (prefers-color-scheme: dark) {
	.item-header[data-contracted='true']::after {
		background-image: url('img/expand-more-white.svg');
	}
	.item-header[data-contracted='false']::after {
		background-image: url('img/expand-less-white.svg');
	}
}

.flex-vertical-container {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	flex-grow: 1;
	width: 100%;
}

.story-eoc {
	font-size: 2rem;
	text-align: center;
	padding: 3em 0;
	flex-grow: 1;
	background-color: var(--body-bkgnd-color);
}

.story-main {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	/*overflow-y: auto;*/
	overflow: hidden;
	background-color: var(--body-bkgnd-color);
}

.story-indicator {
	background-repeat: no-repeat;
	background-size: 1rem;
  background-position-x: center;
	background-position-y: center;
	width: 1.5rem;
	padding: 0 .25rem 0 .25rem;
}

.story-indicator-pinned {
	background-image: url('img/pin-red-filled.svg');
}

.story-indicator-lock {
	background-image: url('img/lock.svg');
}

.story-view-duration {
	flex-grow: 1;
	margin: auto;
}

.story-text {
	/*padding: .5rem;*/
	flex-grow: 1;
	-webkit-user-select: text;
	user-select: text;
}

.footer-audio {
	flex: none;
	color: var(--text-color-def);
	background-color: var(--form-bkgnd-color); /* var(--bar-bkgnd-color-dark);*/
	padding-bottom: .5rem;
}

.audio-player-filename {
	padding: .1rem;
	text-overflow: ellipsis;
	overflow: hidden;
	text-align: center;
}

.audio-player-controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	flex-grow: 100;
}

.audio-player-prev-next {
	white-space: nowrap;
}

.audio-player {
	flex-shrink: 1;
	flex-grow: 0;
	vertical-align: middle;
	padding-left: .1em;
	margin: .4em 0 .2em 0;
	/*width: min(30em, calc(100% - 6em));*/
	height: 2em;
}

.message-header-line {
	display: flex;
}

.message-body {
	flex: 1;
	padding: .25rem;
	overflow: auto;
	background-color: var(--body-bkgnd-color);
	border: 1px solid transparent;
}

	.message-body:focus {
		outline: none;
		border: 1px solid var(--focus-border-color);
	}

	.message-body > textarea {
		flex: 1;
	}


.item-list-refresh-indicator {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: 0;
	overflow: hidden;
	z-index: 2;
	background-repeat: no-repeat;
	background-size: 2em 2em;
	background-color: transparent;
	background-position: center 80%;
	background-image: url('img/arrow-downward-white.svg');
}

	.item-list-refresh-indicator[data-triggered] {
		background-image: url('img/downloading-white.svg');
	}

.lst2-rw {
	cursor: pointer;
	font-size: 1rem;
	margin: .2rem .3rem;
	padding: .1rem .2rem;
	background-color: var(--form-bkgnd-color);
	border-radius: var(--btn-border-radius);
	border: 1px solid var(--list-rw-border);
}

	.lst2-rw.media {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			'media filename date'
			'media slug date'
			'desc desc desc';
		gap: 5px;
	}

/*	.lst2-rw.sound-clip {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			'play name date upload delete'
			'play desc date upload delete'
			'prog prog prog prog   prog';
		gap: 0 5px;
	}
*/
	.lst2-rw.sound-clip {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			'play name date upload'
			'play desc date upload'
			'prog prog prog prog  ';
		gap: 0 5px;
	}

.story-list-rundown-headers {
	display: grid;
	grid-template-columns: min(50%, 20em) 3em auto;
	font-size: .8rem;
	gap: 5px;
	margin: .2rem .3rem;
	padding: .1rem .2rem;
}

.lst2-rw__select.media {
	grid-template-columns: auto 1fr auto auto;
	grid-template-areas:
		'media filename date select'
		'media slug date select'
		'desc desc desc select';
}

@media (any-hover: hover) {
	.lst2-rw:hover, .lst2-rw:hover * {
		border-color: var(--list-rw-border-color-hover);
	}
}

.lst2-rw[data-selected='1'], .lst2-rw[data-selected='1'] * {
	background-color: var(--list-rw-bkgnd-color-select);
	color: white;
}

@media (any-hover: hover) {
	.lst2-rw[data-selected='1']:hover, .lst2-rw[data-selected='1']:hover * {
		color: var(--list-rw-color-sel-hover);
	}
}

.lst2-icon {
	margin: .2rem;
	height: 1.5rem;
	width: 1.5rem;
	background-repeat: no-repeat;
	background-size: 1.5rem;
	background-color: transparent;
	transition: background-image var(--def-trans-time) linear;
}

	.lst2-icon.media-icon {
		grid-area: media;
	}

		.lst2-icon.media-icon[data-class='audio'] {
			background-image: url('img/headset.svg');
		}

@media (any-hover: hover) {
	.lst2-icon.media-icon[data-class='audio']:hover {
		background-image: url('img/play-arrow-filled.svg');
	}
}

@media (any-hover: hover) and (prefers-color-scheme: dark) {
	.lst2-icon.media-icon[data-class='audio']:hover {
		background-image: url('img/play-arrow-filled-white.svg');
	}
}

.lst2-icon.media-icon[data-class='video'] {
	background-image: url('img/videocam.svg');
}

.lst2-icon.media-icon[data-class='image'] {
	background-image: url('img/image.svg');
}

.lst2-error-message {
	color: red;
	text-align: center;
	padding: 1rem;
}

.lst2-title {
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	word-wrap: break-word;
	word-break: break-word;
	color: var(--list-rw-color-title);
	/*transition: color var(--color-trans-time) linear;*/
}

	.lst2-title.filename {
		grid-area: filename;
	}

	.lst2-title.slug {
		grid-area: slug;
		font-size: .8rem;
	}

.lst2-desc {
	color: var(--list-rw-color-desc);
	font-size: .8rem;
	/*transition: color var(--color-trans-time) linear;*/
}

	.lst2-desc.desc {
		grid-area: desc;
	}

.lst2-ext {
	color: var(--list-rw-color-date);
	flex: none;
	font-size: .8rem;
	text-align: right;
	/*transition: color var(--color-trans-time) linear;*/
}

	.lst2-ext.dur {
		grid-area: dur;
		text-align: right;
	}

	.lst2-ext.date {
		grid-area: date;
	}

.lst2-select {
	grid-area: select;
	padding: .1rem .1rem .1rem 2rem;
	margin-left: .2rem;
	height: 2rem;
	background-repeat: no-repeat;
	background-size: 2rem;
	background-color: transparent;
	/*cursor: pointer;*/
	vertical-align: middle;
	/*-webkit-user-select: none;*/
	/*user-select: none;*/
	background-image: url('img/arrow-circle-right-red.svg');
	transition: background-color var(--def-trans-time), background-image var(--def-trans-time);
}

@media (any-hover: hover) {
	.lst2-select:hover {
		background-image: url('img/arrow-circle-right-white.svg');
		background-color: rgba(255, 0, 0, .7);
	}
}

.lst2-play {
	grid-area: play;
}

.lst2-upload {
	grid-area: upload;
}

.lst2-delete {
	grid-area: delete;
}

.lst2-progress {
	position: relative;
	font-size: 0.6em;
	color: var(--dropzone-progress-msg);
	/*transition: color var(--color-trans-time) linear;*/
	grid-area: prog;
	--bar-pos: 0%;
}

	.lst2-progress::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: linear-gradient(to right, var(--dropzone-files-bar) var(--bar-pos), hsl(0 0% 0% / .0) 0%)
	}

	.lst2-progress:empty {
		display: none;
	}


.msg-list-frame {
	flex: 1;
	height: 100%;
	padding: 0;
	background-color: var(--body-bkgnd-color);
}

.msg-list {
	height: 100%;
	overflow: auto;
	border: 1px solid transparent;
}

	.msg-list:focus {
		border: 1px solid var(--focus-border-color);
	}

.msg-list-row {
	font-size: 1rem;
	margin: .3em;
	padding: .3em;
	overflow: hidden;
	cursor: pointer;
	background-color: var(--form-bkgnd-color);
	border-radius: var(--btn-border-radius);
	border: 1px solid var(--list-rw-border);
}

	.msg-list-row[data-selected='1'] {
		background-color: var(--list-rw-bkgnd-color-select);
		color: white;
	}

	.msg-list-row:hover {
		/*color: var(--list-rw-color-hover);
		background-color: var(--list-rw-bk-color-hover);*/
		border-color: var(--list-rw-border-color-hover);
	}

.msg-list-row-unread .msg-row-line:first-of-type {
	font-weight: normal;
	color: var(--message-unread-color);
}

.msg-row-line {
	display: flex;
	padding-left: .5em;
	padding-bottom: .5em;
}

.msg-list-row-unread .msg-row-line {
	border-left: 2px solid var(--message-unread-color);
}

.msg-list-sender {
	flex: 1;
	font-size: 1.2em;
	margin: auto;
}

.msg-list-date {
	flex-shrink: 0;
	padding-left: .2em;
	overflow: hidden;
	font-size: .8em;
	margin: auto;
}

.msg-list-subject {
	flex: 1;
	margin: auto;
}

.msg-list-hold {
	margin-left: .1em;
	margin-right: .1em;
	width: 1.5em;
	height: 1.5em;
	background-repeat: no-repeat;
	background-size: 1.5em 1.5em;
	background-color: transparent;
	background-image: url('img/push-pin-black.svg');
}

@media (prefers-color-scheme: dark) {
	.msg-list-hold {
		background-image: url('img/push-pin-white.svg');
	}
}

.msg-list-row[data-hold='true'] .msg-list-hold {
	background-image: url('img/push-pin-filled.svg');
}

.msg-header-sender {
	flex: 1;
	font-size: 1.2em;
	margin: auto;
	color: var(--text-color-darker);
}

.msg-header-subject {
	flex: 1;
	font-size: 1.1em;
	margin: auto;
	color: var(--text-color-darker);
}

.msg-header-date {
	font-size: .9em;
	margin: auto;
}

.main-form-body {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: auto;
}

.progress-msg {
	visibility: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	padding: 10px 20px;
	border: 1px solid;
	border-color: steelblue;
	border-radius: var(--btn-border-radius);
	color: black;
	background-color: lightskyblue;
	font-size: 1.5rem;
	text-align: center;
	z-index: 10;
}

.main-form-header {
	flex-basis: 2.2rem;
	flex-grow: 0;
	flex-shrink: 0;
	font-size: 1.1rem;
	line-height: 2rem;
	padding: .1rem;
	background-color: var(--bar-bkgnd-color);
	color: white;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.messages-header {
	background-color: darkcyan;
	border-top: 2px solid darkcyan;
	border-bottom: 2px solid darkcyan;
}

.select-header {
	background-color: mediumseagreen;
	border-top: 2px solid mediumseagreen;
	border-bottom: 2px solid mediumseagreen;
}

.btn {
	display: inline-block;
	font-size: 1rem;
	font-weight: normal;
	cursor: pointer;
	vertical-align: middle;
	-webkit-user-select: none;
	user-select: none;
	flex-shrink: 0;
	border-radius: var(--btn-border-radius);
	padding: .3em .5em;
	background-color: var(--btn-bkgnd-color);
	color: var(--btn-color);
	transition: background-color var(--def-trans-time) linear;
	margin: auto 0;
	min-width: 5em;
}

	.btn:focus {
		background-color: var(--btn-bkgnd-color-focus);
	}

	.btn:empty {
		width: 2rem;
		height: 2rem;
		padding: 0;
	}

	.btn.active {
		background-color: var(--btn-active-bkgnd-color);
	}

	.btn:disabled {
		opacity: .5;
		background-color: transparent;
	}

	.btn[data-hide] {
		display: none;
	}

@media (any-hover: hover) {
	.btn:hover:enabled {
		background-color: var(--btn-bkgnd-color-hover);
		opacity: 1;
	}
}

/* Adds space for icon */
.btn--icon {
	background-repeat: no-repeat;
	background-size: 2rem;
	min-height: 2rem;
	min-width: 2rem;
	padding-left: 2rem;
}

.btn--icon-right {
	background-repeat: no-repeat;
	background-size: 2rem;
	min-height: 2rem;
	min-width: 2rem;
	background-position: right;
	padding-right: 2rem;
	padding-left: .5rem;
}

.btn--icon-top {
	background-repeat: no-repeat;
	background-size: 2rem;
	min-height: 2rem;
	min-width: 3rem;
	background-position-x: center;
	background-position-y: top;
	padding-top: 2rem;
	padding-right: .5rem;
	padding-left: .5rem;
}

.btn--checked {
	/*background-color: var(--btn-active-bkgnd-color);*/
	background-repeat: no-repeat;
	background-size: 2rem;
	background-image: url('img/done-white.svg');
}

/* Sets background transparent for use on toolbars */
.btn--tb {
	font-size: .8rem;
	color: var(--btn-tb-text-color);
	background-color: transparent;
}

/* Remove button labels on tiny screens */
@media screen and (max-width: 320px) {
	.btn--icon, .btn--icon-right, .btn--icon-top, .btn--tb {
		font-size: 0;
	}
}

.btn--message {
	background-image: url('img/message-white.svg');
}

.btn--home {
	background-image: url('img/home-filled-white.svg');
}

.btn--user {
	background-image: url('img/logout-filled-white.svg');
}

.btn--help {
	background-image: url('img/help-outline-white.svg');
}

.btn--close {
	background-image: url('img/close-white.svg');
}

.btn--done {
	background-image: url('img/done-white.svg');
}

.btn--done-close {
	background-image: url('img/done-close-white.svg');
}

.btn--upload {
	background-image: url('img/upload-filled-black.svg');
}

	.btn--upload[data-uploaded='true'] {
		background-image: url('img/upload-done-filled-black.svg');
	}

.btn--clear {
	background-image: url('img/crop-square-white.svg');
}

.btn--back {
	background-image: url('img/circle-chevron-left-white.svg');
}

.btn--prev {
	background-image: url('img/chevron-left-black.svg');
}

.btn--next {
	background-image: url('img/chevron-right-black.svg');
}

.btn--refresh {
	background-image: url('img/refresh-white.svg');
}

.btn--sort {
	background-image: url('img/sort-white.svg');
}

.btn--home-help {
	background-image: url('img/help-outline.svg');
}

.btn--home-dark-mode {
	background-image: url('img/dark-mode-white.svg');
}

	.btn--home-dark-mode[data-active] {
		background-image: url('img/dark-mode-filled-red.svg');
	}

.btn--logout {
	background-image: url('img/logout-filled-white.svg');
	margin: auto 1em;
}

.btn--new {
	background-image: url('img/add-circle-outline-white.svg');
}

.btn--edit {
	background-image: url('img/edit-filled-black.svg');
}

.btn--print {
	background-image: url('img/print-filled-black.svg');
}

.btn--delete {
	background-image: url('img/delete-black.svg');
}

.btn--menu {
	background-image: url('img/menu-black.svg');
}

.btn--reply {
	background-image: url('img/reply-black.svg');
}

.btn--stop {
	background-image: url('img/stop-filled-black.svg');
}

	.btn--stop[data-state='playing'] {
		background-image: url('img/stop-filled-black.svg');
	}

.btn--play {
	background-image: url('img/play-arrow-filled.svg');
}

	.btn--play[data-state='playing'] {
		background-image: url('img/pause-circle-filled-black.svg');
	}

.btn--record {
	background-image: url('img/action-record-red.svg');
}

	.btn--record[data-state='recording'] {
		background-image: url('img/stop-circle-red.svg');
	}

.btn--fullscreen {
	background-image: url('img/fullscreen-black.svg');
}

	.btn--fullscreen[data-expanded] {
		background-image: url('img/fullscreen-exit-white.svg');
	}

.btn--exit-fullscreen {
	background-image: url('img/fullscreen-exit-white.svg');
}

@media (prefers-color-scheme: dark) {
	.btn--prev {
		background-image: url('img/chevron-left-white.svg');
	}

	.btn--next {
		background-image: url('img/chevron-right-white.svg');
	}

	.btn--edit {
		background-image: url('img/edit-filled-white.svg');
	}

	.btn--print {
		background-image: url('img/print-filled-white.svg');
	}

	.btn--upload {
		background-image: url('img/upload-filled-white.svg');
	}

		.btn--upload[data-uploaded='true'] {
			background-image: url('img/upload-done-filled-white.svg');
		}

	.btn--delete {
		background-image: url('img/delete-white.svg');
	}

	.btn--menu {
		background-image: url('img/menu-white.svg');
	}

	.btn--reply {
		background-image: url('img/reply-white.svg');
	}

	.btn--fullscreen {
		background-image: url('img/fullscreen-white.svg');
	}

	.btn--stop {
		background-image: url('img/stop-filled-white.svg');
	}

		.btn--stop[data-state='playing'] {
			background-image: url('img/stop-filled-white.svg');
		}

	.btn--play {
		background-image: url('img/play-arrow-filled-white.svg');
	}

		.btn--play[data-state='playing'] {
			background-image: url('img/pause-circle-filled-white.svg');
		}
}

.btn--send {
	background-image: url('img/send-filled-white.svg');
}

.btn--msg-hold {
	background-image: url('img/push-pin-black.svg');
}

@media (prefers-color-scheme: dark) {
	.btn--msg-hold {
		background-image: url('img/push-pin-white.svg');
	}
}

.btn--msg-hold[data-hold='true'] {
	background-image: url('img/push-pin-filled.svg');
}

.btn--more-less {
	background-image: url('img/expand-less-white.svg');
}

	.btn--more-less[data-more="1"] {
		background-image: url('img/expand-more-white.svg');
	}

.btn-dropdown {
	padding-left: .5em;
	padding-right: 1.5em;
	vertical-align: middle;
	background-image: url('img/keyboard-arrow-down-white.svg');
	background-repeat: no-repeat;
	background-size: 1.5em 1.5em;
	background-position: right;
	transition: var(--def-trans-time);
}

	.btn-dropdown[data-checked="1"] {
		color: white;
		background-color: var(--tabbar-bkgnd-button-active);
		background-image: url('img/keyboard-arrow-up-white.svg');
	}

@media (any-hover: hover) {
	.btn-dropdown:hover {
		transition: background-color var(--def-trans-time) linear;
		background-color: rgba(255, 0, 0, .7);
	}
}

.drop-down-menu-button {
	position: relative; /* for absolute .drop-down-menu */
	/* will not respond to :empty so add width manually */
	width: 2rem;
	padding: 0;
}

.drop-down-menu {
	position: absolute;
	display: block;
	left: 0;
	top: 2.1rem;
	width: max-content;
	list-style-type: none;
	text-align: left;
	margin: 0;
	padding: 0 0 0 1.5rem;
	background-color: var(--form-bkgnd-color);
	color: var(--menu-item-color);
	font-size: 1.2rem;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,.5);
	z-index: 5;
}

	.drop-down-menu.drop-up-menu {
		top: revert;
		bottom: 2.1rem;
	}

	/*.drop-down-menu.drop-down-menu--no-active {
		padding: 0;
	}*/

	.drop-down-menu[data-show='0'] {
		display: none;
	}

	.drop-down-menu > li {
		position: relative; /* for absolute ::before */
		margin: 0;
		padding: .25rem .5rem;
	}

		.drop-down-menu > li::before {
			content: '';
			position: absolute;
			left: -1.5em;
			width: 1.5em;
			top: 0;
			bottom: 0;
			background-repeat: no-repeat;
			background-size: 1em 1em;
			background-position: center;
		}

		.drop-down-menu > li[data-selected]::before {
			background-image: url('img/done-white.svg');
		}

@media (any-hover: hover) {
	.drop-down-menu > li:hover {
		color: var(--menu-item-hover-color);
		background-color: var(--menu-item-hover-bkgnd-color);
	}
}

.field {
	display: flex;
	flex-grow: 0;
	flex-shrink: 1;
	flex-direction: row;
	padding: .1rem 0;
}

.field--center {
	margin-inline: auto;
}

.field--shallow {
	flex-shrink: 0;
	padding-top: 0;
	min-height: unset;
}

.field--bold {
	font-weight: bold;
}

.gray-text {
	color: gray;
}

.field-title {
	text-align: right;
	flex-grow: 0;
	flex-shrink: 0;
	margin: auto .3em;
	color: var(--field-title-color);
	flex-basis: 10rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.field-title-story-header {
	margin-top: 0;
}

.field-title--center {
	flex-basis: unset;
	margin-left: auto;
}

.field-title.field-title-story-header {
	flex-basis: auto;
}

.field-title--smaller {
	font-size: .8em;
}

.field-title.field-title-new-story {
	flex-basis: 7rem;
}

.field-input {
	flex-grow: 1;
	margin: auto auto auto 0;
}

@media screen and (max-width: 768px) {
	.field-title:not(.field-title-story-header) {
		display: none;
	}

	.field-input {
		flex-grow: 1;
		margin: auto;
	}
}

.field-input--center {
	flex-grow: 0;
	margin-inline: auto;
}

.field-value {
	flex-grow: 1;
	width: 100%;
	-webkit-user-select: text;
	user-select: text;
	margin: auto 0;
}

.field-value--smaller {
	font-size: .8em;
}

.field-rtf {
	display: flex;
	flex-grow: 1;
}

.field-error {
	background: hsl(0 100% 50% / .2);
	border: 1px solid hsl(0 100% 50% / 1);
	border-radius: var(--btn-border-radius);
	padding: .25rem .5rem;
	margin-left: 7rem;
	margin-bottom: .2rem;
}

@media screen and (max-width: 768px) {
	.field-error {
		margin-left: 0;
	}
}

.field-error:empty {
	display: none;
}


@media screen and (max-width: 768px) {
	input:required::placeholder {
		color: red;
	}
}

div[data-required="1"]::before {
	content: "*";
	color: #FF0000;
}

.expanding-field-row {
	display: flex;
	flex: 1;
	padding: .1rem 0;
	min-height: 20rem;
}

.expanding-field-column {
	display: flex;
	flex: 1;
	padding: .1rem 0;
	flex-direction: column;
	overflow: hidden;
}

	.expanding-field-column .field-title {
		text-align: left;
		flex-basis: auto;
		padding: .2em;
	}

.messages-new {
	display: grid;
	grid-template-rows: auto 1fr auto;
	flex: 1;
	overflow: hidden;
	min-height: 300px;
}

@media screen and (min-width: 768px) {
	.messages-new {
		padding-left: .1rem;
	}
}

.main-form-form {
	display: flex;
	flex-direction: column;
	flex: 1;
	/*height: 100%;*/
	padding: .2rem;
	/*width: 100%;*/
	overflow: hidden;
}

.main-form-form-header {
	padding: .2rem .2rem .5rem .2rem;
	background-color: var(--form-bkgnd-color);
}

.main-form-container {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	flex: 1;
	width: 100%;
}

	.main-form-container textarea {
		font-family: var(--font-family);
		font-size: 1rem;
		padding: .2rem;
		border-radius: var(--btn-border-radius);
		resize: none;
	}

	.main-form-container input[type=text], .main-form-container select, .main-form-container textarea {
		font-family: var(--font-family);
		font-size: 1rem;
		width: 100%;
	}

	.main-form-container .field-group-fixed-height {
		flex-grow: 0;
		flex-shrink: 0;
	}

.main-form-form--flex-row {
	flex-direction: row;
}

.detail-group {
	position: relative;
	padding: .1em .2em;
	margin: .2em 0;
	border: 1px solid var(--tabbar-bkgnd-button-active);
	border-radius: var(--btn-border-radius);
}

	.detail-group::before {
		content: '';
		position: absolute;
		right: .25em;
		top: -6px;
		width: 4.45em;
		height: 5px;
		background-color: var(--tabbar-bkgnd-button-active);
	}

	.detail-group.is-hidden::before {
		content: none;
	}

.list-placeholder {
	background-color: var(--body-bkgnd-color);
	text-align: center;
	padding: 1rem;
}

@media screen and (min-width: 768px) {
	input::placeholder {
		color: transparent;
	}

	textarea::placeholder {
		color: transparent;
	}

	.ck.ck-editor__editable > .ck-placeholder::before {
		color: transparent;
	}
}

.result-body {
	background-color: black;
	margin: 0px;
}

	.result-body .result-message-block {
		background-color: var(--body-bkgnd-color);
		color: black;
		font-size: 1rem;
		text-align: center;
		margin: 20px;
		padding: 20px;
	}

		.result-body .result-message-block button {
			width: 150px;
		}

.image-view-container {
	flex-grow: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: black;
}

.image-view-image {
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
}

.video-main {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	overflow: hidden;
	background-color: white;
}

.video-view {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	background-color: black;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.video-view-video {
	display: block;
	margin: auto;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.message-container {
	height: 100%;
}

.message {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	transform: translate(-50%, -50%);
	font-size: 1rem;
}

.message-container2 {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	transform: translate(-50%, -50%);
	font-size: 1rem;
}

.message-spinner {
	margin: 0;
	padding: 1rem;
	display: inline-block;
	border: 1rem solid #cdcdcd;
	border-radius: 50%;
	border-top-color: #3498db;
	padding: 2rem;
	animation: spin 2s linear infinite;
}

.flex-row-full-height {
	display: block;
	position: relative;
	height: 100%;
	overflow: hidden;
}

@media screen and (min-width: 768px) {
	.flex-row-full-height {
		display: flex;
		flex-direction: row;
		height: 100%;
	}
}

.wrapcol {
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

@media screen and (min-width: 768px) {
	.wrapcol {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
}

@media screen and (max-width: 768px) {
	.wrapcol {
		left: 0;
		width: 100vw;
		transition: left var(--modal-trans-time);
		position: absolute;
		display: block;
		flex: 1;
	}
}

@media screen and (min-width: 1280px) {
	.wrapcol#ListFrameContainer {
		flex-direction: row;
	}
}

.frame {
	display: block;
	overflow: auto;
	min-width: 100px;
	width: 100%;
	flex: 1;
	border-width: 0;
}

	.frame#QueueList {
		min-width: 15em;
	}

	.frame#StoryItemList {
		flex: 2;
	}

	.frame#MediaItemList {
		flex: 2;
	}

	.frame#StoryView, .frame#ImageView, .frame#VideoView {
	}

	.frame#StoryEditView {
	}

@media screen and (min-width: 768px) {
	.frame {
		padding: .25rem;
		border: none;
	}
}

@media screen and (min-width: 1280px) {
	.frame#QueueList, .frame#ItemList {
		height: 100%;
	}
}

.modalframe {
	width: 80%;
	max-width: 80em;
	height: 80%;
	margin: auto;
	border: none;
}

.modalframe--select-list {
}

@media screen and (max-width: 768px) {
	.modalframe {
		width: 100%;
		max-width: 100%;
		height: 100%;
	}

	.modalframe--select-list {
		transform: translate(0);
	}
}

.footer {
	height: 1.7rem;
	width: 100%;
	margin: 0;
	border-width: 1px 0 0 0;
}

.modal {
	display: flex;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	background-color: rgba(0,0,0,.7);
}

.card-container {
	overflow: hidden;
	position: relative;
}

.card {
	width: 100%;
	overflow: hidden;
}

@media screen and (min-width: 768px) {
	.card.card--hidden {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	.card {
		position: absolute;
		inset: 0;
		height: 100%;
		/* For now Safari stuffs up with transform transitions,,,*/
		/*transition: transform var(--modal-trans-time);*/
		border: none;
	}

		.card.card--hidden {
			transform: translate(calc(100vw), 0);
		}

		.card:not(.card--hidden) {
			transform: translate(0, 0);
		}
}


/*Initially set hidden cards to z-index -1 to prevent them showing in 
  Safari when loaded and the initial transform is applied. Really a bug
  in Safari I think.*/
.card.card--hidden.card--hidden-init {
	z-index: -1;
}

.message-box-container {
	max-width: min(30em, 90%);
	margin: auto;
	padding: .5em;
	border: 1px solid transparent;
	border-radius: var(--btn-border-radius);
	font-size: 1rem;
	text-align: center;
	background-color: var(--message-box-bkgnd-color);
	color: var(--message-box-color);
}

.message-box-caption {
	font-size: 1.1em;
	background-color: var(--message-box-bkgnd-color-caption);
	color: var(--message-box-color-caption);
	padding: .25em;
	margin: -.5rem -.5rem 0 -.5rem;
}

.message-box-content {
	display: grid;
	grid-template-columns: 3em 1fr;
	gap: 1em;
}

.message-box-icon {
	background-size: 3em;
	background-repeat: no-repeat;
	width: 3em;
	height: 3em;
	margin: auto 1em auto 0;
	border-color: var(--message-box-border-color);
}

.message-box-text {
	padding: 2em 0;
	text-align: left;
}

.message-box-container--ok .message-box-icon {
	background-image: url('img/check-circle-green.svg');
}

.message-box-container--stop .message-box-icon {
	background-image: url('img/dangerous-red.svg');
}

.message-box-container--question .message-box-icon {
	background-image: url('img/question-mark-blue.svg');
}

.message-box-container--exclamation .message-box-icon {
	background-image: url('img/warning-amber.svg');
}

.message-box-container--info .message-box-icon {
	background-image: url('img/info-blue.svg');
}

.message-box-btn {
	margin: .2em;
	min-width: 5em;
	font-size: 1em;
	background-color: var(--btn-bkgnd-color);
	color: var(--btn-color);
}

	.message-box-btn .message-box-button-subtext {
		display: block;
		font-size: .8em;
	}

/*.tooltip {
}

	.tooltip .tooltiptext {
		visibility: hidden;
		background-color: dimgray;
		color: white;
		text-align: center;
		padding: .25rem;
		border-radius: .2rem;
		width: auto;
		position: absolute;
		z-index: 1;
		bottom: 100%;
		left: 50%;
		margin-left: -50%;
		opacity: 0;
		transition: opacity .25s;
		transition-delay: .5s;
	}

	.tooltip:hover .tooltiptext {
		visibility: visible;
		opacity: 1;
	}*/
	/* Froala styles */
	#froala-editor {
		flex: 1;
		overflow: auto;
		border: 1px solid var(--input-border-color);
		border-radius: unset;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		display: flex;
		flex-direction: column;
	}

	#froala-editor[data-focus] {
		border: 1px solid var(--focus-border-color);
	}

/*.fr-box {
	display: flex;
	flex-direction: column;
	width: 100%;
	flex: 1;
	overflow: hidden;

}
*/
/*.fr-toolbar.fr-top {
	border-radius: var(--btn-border-radius)	var(--btn-border-radius) 0 0;
}
*/
/*.fr-box.fr-basic .fr-element {
	padding: .5rem;
	line-height: 120%;
}
*/

/*.fr-wrapper {
	border: none !important;
	flex: 1;
}

.fr-toolbar {
	border-color: var(--input-border-color) !important;
}

.fr-second-toolbar {
	display: none;
}
*/

.cart-block {
	display: block;
	font-family: var(--font-family);
	font-size: 1rem;
	box-shadow: .1em .1em 1em var(--form-drop-shadow-color);
	width: 90%;
	margin: 1em auto;
	background-color: var(--cart-loading-color);
	border-radius: var(--btn-border-radius);
	padding: .25em;
	text-align: left;
	line-height: normal;
	color: black;
}

	/*Loaded state*/
	.cart-block[data-state='loaded'],
	.cart-block[data-state='paused'] {
		background-color: var(--cart-loaded-color);
	}

	/*Playing state*/
	.cart-block[data-state='playing'] {
		background-color: var(--cart-playing-color);
		color: black;
	}

	/*Error state*/
	.cart-block[data-state='error'] {
		background-color: var(--cart-error-color);
	}

.cart-info {
	display: block;
	text-align: left;
	font-size: .8rem;
	padding: .2em;
}

.cart-info--error {
	color: red;
	padding: .2rem;
	background-color: var(--form-bkgnd-color);
}

.cart-info--heading {
	color: #4f4f4f;
	padding-right: .5em;
}

.cart-info--lib-file-name {
	display: block;
	position: relative;
	font-size: 1.3rem;
}

.cart-info-time-outcue-container {
	display: flex;
}

.cart-info--time {
	display: inline-block;
	min-width: 4em;
	border-radius: var(--btn-border-radius);
	background-color: black;
	color: cyan;
	text-align: center;
	flex: 0;
}

.cart-info--outcue {
	display: block;
	padding: 0 .2em;
	border-radius: var(--btn-border-radius);
	flex: 1;
	-webkit-backdrop-filter: brightness(1.2);
	backdrop-filter: brightness(1.2);
}

/*Underline after the title*/
.cart-block .cart-info--lib-file-name::after {
	content: "";
	position: absolute;
	height: 1px;
	left: 0;
	bottom: -1px;
	width: 100%;
	background-color: var(--cart-loading-color);
	filter: brightness(80%);
}

/*Underline after the title -  states*/
.cart-block[data-state='loaded'] .cart-info--lib-file-name::after,
.cart-block[data-state='paused'] .cart-info--lib-file-name::after {
	background-color: var(--cart-loaded-color);
}

.cart-block[data-state='playing'] .cart-info--lib-file-name::after {
	background-color: var(--cart-playing-color);
}

.cart-block[data-state='error'] .cart-info--lib-file-name::after {
	background-color: var(--cart-error-color);
}

/*Audio player controls*/
.inline-audio-player {
	display: block;
	vertical-align: middle;
	margin: .4em auto;
	width: min(30em, 100%);
	height: 2em;
}

.cart-prev-next--prev {
	background-image: url('img/skip-previous-filled-black.svg');
	margin: 0 .25em 0 .5em;
}

.cart-prev-next--next {
	background-image: url('img/skip-next-filled-black.svg');
	margin: 0 .5em 0 .25em;
}

@media (prefers-color-scheme: dark) {
	.cart-prev-next--prev {
		background-image: url('img/skip-previous-filled-white.svg');
	}

	.cart-prev-next--next {
		background-image: url('img/skip-next-filled-white.svg');
	}
}

.pic-view-img {
	position: relative;
	height: 10rem;
}

	.pic-view-img[data-expanded="1"] {
		width: 100%;
		height: auto;
	}

.btn-media-exp-cont {
	position: absolute;
	top: .2rem;
	right: .6rem;
	display: inline-block;
	font-size: 1rem;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	border: none;
	border-radius: var(--btn-border-radius);
	background-image: url('img/fullscreen-exit-white.svg');
	background-position: right;
	background-repeat: no-repeat;
	background-size: 2rem;
	background-color: var(--btn-bkgnd-color);
	transition: background-color var(--def-trans-time) linear;
	margin: auto 0;
	width: 2em;
	height: 2rem;
}

	.btn-media-exp-cont[data-more="1"] {
		background-image: url('img/fullscreen-white.svg');
	}

.home-body {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	background-image: url('img/slanted-gradient-gray.svg');
	background-size: cover;
}

@media (prefers-color-scheme: dark) {
	.home-body {
		background-image: url('img/slanted-gradient-gray.svg');
		-webkit-backdrop-filter: invert(.8) brightness(.3);
		backdrop-filter: invert(.8) brightness(.3);
	}
}

.home-title {
	display: inline-block;
	letter-spacing: -.025em;
	font-size: 4rem; /* fallback for IE error page */
	font-size: clamp(2rem, 5vw, 8rem);
	font-style: italic;
	color: var(--home-title-color);
	font-weight: bold;
	width: 100%;
	padding: .25em 0;
	text-align: center;
	text-shadow: .05em .05em .1em var(--title-text-shadow-color);
	/*text-shadow: 0 0 .2em rgba(255, 0, 0, 0.7);*/
}

	.home-title .tm {
		font-style: normal;
		font-weight: normal;
		font-size: .2em;
		vertical-align: 200%;
	}

.mojo {
	margin-left: .5em;
	font-weight: 500;
}

.home-menu-container {
	display: grid;
	margin: auto;
	padding: .5em;
	list-style: none;
	overflow-y: auto;
	gap: clamp(.05em, 1vh, 1em);
}

.home-menu-item {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	background-color: var(--bar-bkgnd-color-glass);
	font-size: clamp(1rem, 5vw, 1.5rem);
	font-weight: 300;
	color: var(--home-text-color);
	padding: .5em 2em;
	-webkit-backdrop-filter: blur(.1em);
	backdrop-filter: blur(.2em);
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
	border-radius: var(--btn-border-radius);
}

	.home-menu-item:focus {
		outline: none;
		border: none;
	}

	.home-menu-item:active {
		background-color: var(--btn-bkgnd-color-hover);
	}

.home-menu-text {
	margin: auto auto auto 0;
}

@media (any-hover: hover) {
	.home-menu-item:hover {
		background-color: var(--btn-bkgnd-color-hover);
	}
}

.home-menu-item > img {
	width: 2em;
	height: 2em;
	vertical-align: middle;
	margin-right: 2em;
}

.home-container {
	background-color: hsl(0 0% 0% / 0.1);
	padding: 1em 0;
	align-content: center;
	height: 100%;
}

.home-button-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(8em, 35%)); /*35% will cause max of 2 columns*/
	justify-content: center;
	gap: 5% 5%;
}

@media screen and (min-width: 768px) {
	.home-button-container {
		gap: 10% 10%;
	}
}

.home-button {
	display: flex;
	flex-direction: column;
	height: max-content;
	background-color: var(--bar-bkgnd-color-glass);
	font-size: 1.1rem;
	font-weight: 300;
	color: white;
	text-align: center;
	border-radius: var(--btn-border-radius);
	padding: 1em 0;
	cursor: pointer;
	/*box-shadow: 0px 0px 10px 1px darkred inset;*/
	-webkit-backdrop-filter: blur(.5em);
	backdrop-filter: blur(.5em);
	border: none;
	transition: background-color var(--def-trans-time) linear;
}

@media screen and (min-width: 768px) {
	.home-button {
		font-size: 1.2rem;
	}
}

.home-button:hover {
	background-color: var(--btn-bkgnd-color-hover);
}

.home-button > img {
	width: 3em;
	height: 3em;
	margin: auto;
}

.home-user {
	font-size: 1rem;
	text-align: right;
	padding: .25em 0;
	color: var(--home-text-color);
	background-color: var(--bar-bkgnd-color-glass);
	-webkit-backdrop-filter: blur(.5em);
	backdrop-filter: blur(.5em);
}

.home-footer {
	display: grid;
	grid-template-columns: 2em 1fr 2em;
	grid-template-areas:
		'help version darkmode'
		'help copyright darkmode';
	margin: .5em;
}

	.home-footer .btn {
		margin: auto;
		width: 2em;
	}

.home-help {
	grid-area: help;
}

.home-version {
	grid-area: version;
	font-size: .7rem;
	margin: auto;
	color: white;
}

.home-copyright {
	grid-area: copyright;
	font-size: .7rem;
	margin: auto;
	color: white;
}

.is-hidden {
	display: none;
}

/*div[style*="z-index: 9999"], div[style*="z-index:9999"] {
	height: 0;
	transform: translate(calc(100vw), 0);
}
*/

#QueueName::before {
	content: none;
	display: inline-block;
	background-size: 1.2em;
	background-repeat: no-repeat;
	width: 1.2em;
	height: 1.2em;
	margin: auto .25em auto 0;
	vertical-align: middle;
}

#QueueName[data-type='normal']::before {
}

#QueueName[data-type='rundown']::before {
	content: '';
	background-image: url('img/mic-bright-red.svg');
	filter: drop-shadow(0px 0px 2px rgb(0 0 0 / 1));
}

#QueueName[data-type='rss']::before {
	content: '';
	background-image: url('img/rss-feed-orange.svg');
}

#QueueName[data-type='twitter']::before {
	content: '';
	background-image: url('img/twitter-logo-blue.svg');
}

#QueueName[data-type='email']::before {
	content: '';
	background-image: url('img/email-blue.svg');
}

.dropzone {
	margin: .5em auto;
	min-height: min(50%, 20em);
	min-width: max(19em, 90%);
	background-color: var(--dropzone-file-upload);
	text-align: center;
	padding: .25em;
	border-radius: var(--btn-border-radius);
	box-shadow: 5px 5px 15px var(--form-drop-shadow-color);
	overflow-y: auto;
}

	.dropzone[data-dropactive] {
		transition: background-color var(--def-trans-time) linear;
		background-color: var(--dropzone-files-bar);
	}

.dropzone-grid-sel-files {
	display: grid;
	grid-template-columns: 1fr auto 2.5em;
	margin: 2em auto;
	font-size: 1rem;
	border: none;
	padding: 0 .3em;
}

.dropzone-grid-sel-files__rw {
	display: grid;
	grid-column: span 3;
	border-spacing: 0 4px;
	grid-template-columns: 1fr auto 2.5em;
	/*grid-template-columns: subgrid;*/
	align-items: center;
	gap: 1em;
	position: relative;
	border-top: 1px solid var(--list-rw-border);
	overflow-x: auto;
	--bar-pos: 0%;
}

	.dropzone-grid-sel-files__rw:last-child {
		border-bottom: 1px solid var(--list-rw-border);
	}

	.dropzone-grid-sel-files__rw::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: linear-gradient(to right, var(--dropzone-files-bar) var(--bar-pos), hsl(0 0% 0% / .0) 0%)
	}

.dropzone-grid-sel-files__box {
	padding: 0.5rem .2rem;
}

.dropzone-grid-sel-files__box--name {
	text-align: left;
}

.dropzone-grid-sel-files__box--status::after {
	position: absolute;
}

.dropzone-grid-sel-files-err {
	text-align: left;
	font-size: 0.6rem;
	color: red;
	max-width: 30vw;
}

.dropzone-grid-sel-files__rw[data-status='finished'] .dropzone-grid-sel-files__box--name {
}

.dropzone-grid-sel-files__rw[data-status='error'] .dropzone-grid-sel-files__box--name {
	color: red;
}

.dropzone-grid-sel-files__box--size {
	text-align: right;
	font-size: 0.7rem;
	text-decoration-color: var(--text-color-light);
}

.dropzone-grid-sel-files__box--status {
	background-repeat: no-repeat;
	background-size: contain;
	width: 2em;
	height: 2em;
}

.dropzone-grid-sel-files__rw[data-status='pending'] .dropzone-grid-sel-files__box--status {
	background-image: url('img/pending-black.svg');
}

.dropzone-grid-sel-files__rw[data-status='uploading'] .dropzone-grid-sel-files__box--status {
	background-image: url('img/cloud-upload-blue.svg');
	animation-name: uploadIconStretch;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-play-state: running;
}

.dropzone-grid-sel-files__rw[data-status='processing'] .dropzone-grid-sel-files__box--status {
	background-image: url('img/cached.svg');
	animation-name: uploadIconStretch;
	animation-duration: .5s;
	animation-timing-function: ease-out;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-play-state: running;
}

@keyframes uploadIconStretch {
	0% {
		transform: scale(.5);
	}

	100% {
		transform: scale(1.0);
	}
}

.dropzone-grid-sel-files__rw[data-status='finished'] .dropzone-grid-sel-files__box--status {
	background-image: url('img/cloud-done-green.svg');
}

.dropzone-grid-sel-files__rw[data-status='error'] .dropzone-grid-sel-files__box--status {
	background-image: url('img/error-outline-red.svg');
}

.dropzone-drag-drop-info {
	color: var(--field-title-color);
	font-variant: small-caps;
	text-align: center;
}

	.dropzone-drag-drop-info.drop-icon::before {
		content: '';
		display: inline-block;
		vertical-align: middle;
		background-repeat: no-repeat;
		background-size: contain;
		width: 2em;
		height: 2em;
		background-image: url('img/copy-all-green.svg');
	}

.dropzone-library-name {
	text-align: center;
	padding: 1em;
}

.dropzone-progress-message {
	display: block;
	font-size: 0.6em;
	color: var(--dropzone-progress-msg);
}

.dropzone-progress-message--error {
	display: block;
	font-size: 0.6em;
	color: var(--dropzone-error-msg);
}

.dropzone-rad-btn {
	display: inline-block;
	margin: .5em;
}