/**
 * NBWeb.css
 * -----------
 * Global stylesheet for the NewsBoss MoJo web application.
 *
 * Provides base styling, layout utilities, button appearance,
 * form elements, responsive behavior, and component-specific themes.
 *
 * Features:
 * - CSS resets and global box-sizing
 * - Theme variables and media query breakpoints
 * - Button styles with `.btn`, `.btn--icon`, and modifiers
 * - Form input styling for accessibility and clarity
 * - Component-specific styles: toolbars, editors, tabs, spinners
 * - Visibility control classes: `.is-hidden`, `.disabled`
 * - Responsive layout helpers using flex and grid
 *
 * Used by:
 * - All major NewsBoss MoJo HTML views and embedded frames
 */

/* 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%);
  --tiny-editor-bar-bkgnd-color: hsl(0 0% 100%);
  --tiny-editor-btn-text-color: hsl(0 0% 15%);
  --tiny-editor-btn-svg-bkgnd-disabled: rgba(155, 155, 155, 0.5);
  --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%);
  --body-bkgnd-color-dark: hsl(0deg 0% 80%);
  --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%);
  --text-color-green: hsl(120 100% 35%);
  --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% 15%);
  --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: 12pt;
  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%);
    --tiny-editor-bar-bkgnd-color: hsl(0 0% 25%);
    --tiny-editor-btn-text-color: hsl(0 0% 100%);
    --tiny-editor-btn-svg-bkgnd-disabled: rgba(155, 155, 155, 0.5);
    --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%);
    --body-bkgnd-color-dark: hsl(0deg 0% 30%);
    --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%);
    --text-color-green: hsl(120 100% 50%);
    --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% 10%);
    --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;
    color-scheme: dark;
  }
}

/*@media screen and (max-width: 768px) {
  :root {
    font-size: 10pt;
  }
}
*/
/* 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-top: .5em;
  margin-bottom: .5em;
}

/* 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;
}

* {
  scrollbar-width: thin;
  scrollbar-color: auto;
}

/* 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;*/
}

  body.story-view-body {
    padding: 0 5px;
    overflow: auto;
    -webkit-user-select: text;
    user-select: text;
  }

button {
  /*padding: .25em;*/

  flex-shrink: 1;
  background-color: var(--tabbar-bkgnd-button);
  cursor: pointer;
  font-size: 1rem;
  transition: background-color var(--def-trans-time) linear;
  border: none;
  padding: .3em 1em;
  border-radius: var(--btn-border-radius);
  font-family: var(--font-family);
  -webkit-user-select: none;
  user-select: none;
}

  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: .25em;
  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: 1.2rem;
  color: red;
}

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] /*, button */ /*, input[type=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;
  margin: 0 auto;
  padding: 0 .1em;
  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;
  border: 1px solid transparent;
}

  .queue-library-list:focus {
    outline: none;
    border: 1px solid var(--focus-border-color);
  }

.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;
}

  .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/X-black.svg');
  }

@media (prefers-color-scheme: dark) {
  .q-lst-rw-txt[data-type='twitter']::after {
    background-image: url('img/X-white.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;
  }


button.btn,
input.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: .2em .25em;
  background-color: var(--btn-bkgnd-color);
  color: var(--btn-color);
  transition: background-color var(--def-trans-time) linear;
  margin: auto 0;
  min-width: 5em;
  /*border: 1px solid red;*/
}

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

  /*  .btn:empty {
    width: 2rem;
    height: 2rem;
    padding: 0;
  }
*/
  button.btn.active {
    background-color: var(--btn-active-bkgnd-color);
  }

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

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

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

/* Adds space for icon */
button.btn.btn--icon,
input.btn.btn--icon {
  background-repeat: no-repeat;
  background-size: 2rem;
  background-position: center;
  min-height: 2rem;
  min-width: 2rem;
  border: none;
}

button.btn.btn--icon--small {
  background-size: 1.25rem;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.5rem;
  padding: 0;
  min-height: 1.5rem;
  min-width: 1.5rem;
}

  button.btn.btn--icon--small:empty {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.5rem;
    min-height: 1.5rem;
    min-width: 1.5rem;
    padding: 0;
  }

button.btn.btn--icon--left,
input.btn.btn--icon--left {
  background-position: left;
  padding-left: 2rem;
}

button.btn.btn--icon--right {
  background-position: right;
  padding-right: 2rem;
  padding-left: .5rem;
}

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

button.btn.btn--edit-pane {
  margin-right: 0;
  -webkit-border-top-right-radius: 0;
  border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  border-bottom-right-radius: 0;
}

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

/* Sets background transparent for use on toolbars */
button.btn.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) {
  button.btn.btn--icon, button.btn.btn--icon--right, button.btn.btn--icon--top, button.btn.btn--tb {
    font-size: 0;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

button.btn.btn--add-alt-story {
  background-image: url('img/symbol-add.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.25em;
  width: 1.5em;
  height: 1.5em;
  min-height: 1.5em;
  min-width: 1.5em;
}

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

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

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

button.btn--login {
  font-size: 1.5rem;
}

button.btn--disconnect {
  margin: 1em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

button.btn.btn--folder,
input.btn.btn--folder {
  background-image: url('img/folder-white.svg');
  margin: 0 auto; /* this is to stop the media upload file select button growing to full width  */
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  button.btn.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) {
  button.btn.btn-dropdown:hover {
    transition: background-color var(--def-trans-time) linear;
    background-color: rgba(255, 0, 0, .7);
  }
}

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

button.btn.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: 2rem;
  height: 2rem;
}

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

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

.tabbar {
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--body-bkgnd-color);
  border-bottom: 1px solid gray;
  padding-top: .2em;
  min-height: 2em;
}

.tabbar--left {
  text-align: left;
}

.tabbar button {
  position: relative;
  margin: auto .2em auto auto;
  min-height: 1.8em;
  border: 1px solid gray;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom: 0;
  background-color: var(--body-bkgnd-color);
  color: var(--btn-tb-text-color);
}

  .tabbar button.btn.btn--checked {
    border-color: var(--tabbar-bkgnd-button-active);
    background-color: var(--tabbar-bkgnd-button-active);
    color: var(--btn-color);
  }

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

.tab-contents-container {
  min-height: 3rem;
}

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

.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: 1rem;
  }

.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.25rem;
}

@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: 2.4rem;
  flex-shrink: 0;
  font-size: 1.1rem;
  padding: .1rem .2rem;
  text-align: center;
  background-color: var(--bar-bkgnd-color);
  color: white;
  border-top: .1rem solid var(--bar-bkgnd-color-top-border);
  border-bottom: .1rem solid var(--bar-bkgnd-color-bottom-border);
}

.frame-header-left {
  float: left;
  margin-right: 0.5em;
}

.frame-header-center {
  margin: auto 0;
  line-height: normal;
}

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

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

.frame-header-right {
  float: right;
  margin-left: 0.5em;
}

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

.frame-header-text--small {
  font-size: .8em;
  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);
}

.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);
  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);
  overflow-y: auto;
  padding: .2rem;
  max-height: 40%;
}

  .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.5rem 1.5rem;
    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.5rem;
    width: 1.5rem;
    background-image: url('img/expand-less-black.svg');
    background-repeat: no-repeat;
    background-size: 1.5rem 1.5rem;
    background-position: center;
    cursor: pointer;
  }

.tab-content {
  display: none;
}

  .tab-content.active {
    display: flex;
  }

.tab-btn-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 5px;
}

button.tab-menu-button {
  min-width: auto;
  border-top: 1px solid gray;
  border-right: 1px solid gray;
  border-left: none;
  border-radius: 0;
  -webkit-border-top-right-radius: var(--btn-border-radius);
  border-top-right-radius: var(--btn-border-radius);
  padding: 0.1em 0.5em;
}

@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: 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;
  color: var(--text-color-green);
}

.story-text {
  flex-grow: 1;
  -webkit-user-select: text;
  user-select: text;
  position: relative;
}

.footer-audio {
  flex: none;
  color: var(--text-color-def);
  background-color: var(--form-bkgnd-color);
  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: .1rem;
  margin: .4rem 0 .2rem 0;
  height: 2rem;
}

.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: 2rem 2rem;
  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: .2em .2em;
  padding: .1em .2em;
  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;
  vertical-align: middle;
  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: .1rem;
  margin-right: .1rem;
  width: 1.5rem;
  height: 1.5rem;
  background-repeat: no-repeat;
  background-size: 1.5rem 1.5rem;
  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;
}

.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;
}

@media screen and (min-width: 768px) {
  .drop-down-menu {
    font-size: 1rem;
  }
}

.drop-down-menu--no-icon {
  padding: 0;
}

.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.5rem;
    width: 1.5rem;
    top: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    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;
  gap: .3em;
  align-items: baseline;
}

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

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

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

.field--multi-single-row {
  flex-wrap: wrap;
  justify-self: flex-start;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 768px) {
  .field--multi-single-row {
    /*gap: 10px;*/
  }
}

.gray-text {
  color: gray;
}

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

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

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

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

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

.field-title.field-title-new-story {
  flex-basis: 5em;
}

.field-title.field-title-datetime {
}

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

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

  .field-title.field-title-datetime {
    flex-basis: 5em;
  }

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

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

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

.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#QueueListFrame {
    min-width: 15em;
  }

  .frame#StoryItemListFrame {
    flex: 2;
  }

  .frame#MediaItemListFrame {
    flex: 2;
  }

  .frame#StoryViewFrame, .frame#ImageViewFrame, .frame#VideoViewFrame {
  }

  .frame#StoryEditViewFrame {
  }

@media screen and (min-width: 768px) {
  .frame {
    padding: 1px;
    /*border: 1px solid white;*/
  }
}

@media screen and (min-width: 1280px) {
  .frame#QueueListFrame, .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: 3rem;
  background-repeat: no-repeat;
  width: 3rem;
  height: 3rem;
  margin: auto 1rem 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--information .message-box-icon {
  background-image: url('img/info-blue.svg');
}

button.btn--message-box {
  margin: .5em;
}

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

.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;
  white-space: nowrap;
}

.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;
  }

.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 {
    -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);
}

button.btn--home-menu-item {
  display: grid;
  grid-auto-flow: column;
  background-color: var(--bar-bkgnd-color-glass);
  font-size: clamp(1rem, 5vw, 1.5rem);
  padding: .5em 2em;
  -webkit-backdrop-filter: blur(.2em);
  backdrop-filter: blur(.2em);
}

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

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

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

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

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

.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;
  color: var(--home-text-color);
  background-color: var(--bar-bkgnd-color-glass);
  backdrop-filter: blur(.5em);
}

/* Flash content for 50% DC */
@keyframes ipc-flash {
  0%, 50% {
    filter: brightness(0.1);
  }

  50%, 100% {
    filter: brightness(1) saturate(3);
  }
}

.ipc-indicator-span {
  display: inline-block;
  width: 1.0rem;
  height: 1.0rem;
  background-size: cover;
  background-repeat: no-repeat;
  margin-left: .1rem;
  background-image: url('img/ipc-off.svg');
  animation: ipc-flash 0.8s ease-in-out infinite;
}

/* Flash content for 90% DC */
@keyframes ipc-flash-on {
  0%, 20% {
    filter: brightness(0.5) saturate(1);
  }

  20%, 100% {
    filter: brightness(1) saturate(3);
  }
}

span.ipc-indicator-span[data-ipc-status="on"] {
  text-wrap: nowrap;
  background-image: url('img/ipc-on.svg');
  animation: ipc-flash-on 2s ease-in-out infinite;
}

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

  .home-footer button.btn.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 !important;
}

#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/X-black.svg');
}

@media (prefers-color-scheme: dark) {
  #QueueName[data-type='twitter']::before {
    background-image: url('img/X-white.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;
}