/**
 * 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%);
  --home-bkgnd-color: hsl(0 0% 90%);
  --bar-bkgnd-color: hsl(1 70% 50%);
  --bar-bkgnd-color-pulse: #000;
  --bar-bkgnd-color-pulse-paused: darkorange;
  --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 90% 45%);
  --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 80% 40%);
  --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%);
  --frame-bkgnd-color: 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%);
  --menu-splitter-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;
  --mob-break-max-width: 768px;
  --table-border-radius: .4em;
  --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(1 70% 50%);
  --message-box-color-caption: hsl(0 0% 90%);
  --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;
  --normal-queue-tab-background-color: #E6E6E6;
  --media-library-tab-background-color: #DCE5E5;
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --home-text-color: hsl(0 0% 90%);
    --home-title-color: hsl(0 100% 50%);
    --home-bkgnd-color: hsl(0 0% 8%);
    --bar-bkgnd-color: hsl(0 0% 25%);
    --bar-bkgnd-color-pulse: hsl(1 70% 50%);
    --bar-bkgnd-color-pulse-paused: darkorange;
    --bar-bkgnd-color-top-border: hsl(0 0% 30%);
    --bar-bkgnd-color-bottom-border: hsl(0 0% 20%);
    --bar-bkgnd-color-glass: rgba(255, 0, 0, .5);
    --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 100% 40%);
    --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, .8);
    --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%);
    --frame-bkgnd-color: hsl(0deg 0% 0%);
    --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%);
    --menu-splitter-color: hsl(0 0% 50%);
    --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%);
    --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% 25%);
    --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;
    --normal-queue-tab-background-color: #505050;
    --media-library-tab-background-color: #555959;
    color-scheme: dark;
  }
}

/* Box sizing rules */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  min-height: 100vh;
}

@supports (height: 100dvh) {
  body {
    min-height: 100dvh;
  }
}

html {
  /* Mostly affects iPhone/macOS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /*-webkit-user-select: none;
  user-select: none;*/
}

body {
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-color-def);
  overflow: hidden; /* prevent page refresh on pull-down */
  padding: 0;
  border: none;
  background-color: var(--body-bkgnd-color);
}

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

p {
  margin: .5em 0;
}

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

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

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

  :focus:not(:focus-visible) {
    outline: none;
  }

/* Optional: only if you truly want no outline on focused iframes */
iframe:focus {
  outline: none;
}

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

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

button {
  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;
}

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

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

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

.topmainframe {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: none;
  background-color: var(--home-bkgnd-color);
  position: relative;
}

@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;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .1rem .25rem;
  background-color: var(--bar-bkgnd-color);
  transition: background-color 1s ease-in;
  -webkit-user-select: none;
  user-select: none;
}

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

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

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

.error-reason {
  font-size: 1rem;
  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] {
    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;
  letter-spacing: -.025em;
  color: var(--title-text-color);
  font-weight: bold;
  padding: 0 .1em;
  padding-right: .394em;
  text-shadow: .05em .05em .1em var(--title-text-shadow-color);
}

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

  .top-title .recording-in-progress, .top-title .recording-paused {
    font-size: .6rem;
    font-style: normal;
    margin: 0;
    padding: 0;
    text-align: center;
    color: white;
    font-weight: normal;
    text-shadow: none;
    line-height: .5rem;
  }

.top-logout {
  display: flex;
}

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

.media-list, .story-list {
  overflow: auto;
  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 {
  flex: 1;
  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='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;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

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

  .q-lst-rw-txt.tapflash {
    background-color: rgba(255, 0, 0, 0.5);
  }

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

.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 {
  transition: max-height var(--def-trans-time) ease-out;
}

  .q-lstV2-sub[data-root] {
  }

  .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;
  transition: filter 120ms ease, transform 120ms ease;
  margin: auto 0;
  min-width: 5em;
}

/* Optional: remove Safari’s default tap highlight */
button.btn {
  -webkit-tap-highlight-color: transparent;
}

  /* The flash/pressed look */
  button.btn.is-pressed {
    background-color: var(--btn-bkgnd-color);
    filter: brightness(0.9);
    transform: scale(0.95);
  }

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

  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: auto .2rem;
  padding: 0;
  min-height: 1.5rem;
  min-width: 1.5rem;
}

  button.btn.btn--icon--small:empty {
    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--queuelist {
  background-image: url('img/queue-list-white.svg');
}

  button.btn.btn--queuelist.btn--checked {
    background-image: url('img/queue-list-checked-white.svg');
  }

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

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

button.btn.btn--selectqueuetabs {
  background-image: url('img/tab-white-edit.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');
  }

/* Write Script Main header bar */
button.btn.btn--write-script {
  background-image: url('img/edit-pencil-white.svg');
}

/* Microphone button Main header bar */
button.btn.btn--record-mic {
  background-image: url('img/mic-white.svg');
}

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

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

  /* Record dialog record button while recording */
  button.btn.btn--record[data-state='recording'] {
    background-image: url('img/action-record-stop-filled-red.svg');
  }

/* Record dialog record button */
button.btn.btn--record-pause {
  background-image: url('img/action-record-pause-filled-gray.svg');
}

  /* Record dialog record button while recording */
  button.btn.btn--record-pause[data-state='recording'] {
    background-image: url('img/action-record-pause-filled-red.svg');
    filter: brightness(.8); /* dimmed look */
  }

  /* Record dialog record button while recording */
  button.btn.btn--record-pause[data-state='paused'] {
    background-image: url('img/action-record-pause-filled-red.svg');
    /* glow */
    filter: brightness(1.5) drop-shadow(0 0 6px rgba(255, 0, 0, 0.7)) drop-shadow(0 0 14px rgba(255, 0, 0, 0.45));
  }

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');
  }

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

/* Queue HList Container ---------------------------------------------------*/

.queue-HList-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
}

/*Queue Tabs ---------------------------------------------------*/
.queue-tab-container {
  display: flex;
  flex-basis: min-content;
  align-content: flex-start;
  flex-wrap: wrap;
  overflow: auto;
  gap: 5px;
  padding: .2em;
  background-color: var(--body-bkgnd-color);
}

button.btn.queue-tab {
  position: relative; /* for overlay */
  overflow: hidden;
  display: inline-flex; /* or flex */
  align-items: center; /* vertical centering */
  gap: 6px; /* space between icon and text */
  min-width: 3em;
  background-color: var(--normal-queue-tab-background-color);
  color: var(--btn-tb-text-color);
  font-weight: normal;
  font-size: .9rem;
  /* This way of doing the border and the 'selected' border prevent the button 
    positions jiggling when the selection changes.*/
  border: 0;
  border-radius: 3px;
  /* Reserve 2px “outside” space, but only draw 1px red */
  box-shadow: 0 0 0 1px gray, /* visible 1px */
  0 0 0 2px transparent; /* invisible spacer so size stays constant */
}

  /* keep content above overlay */
  button.btn.queue-tab > * {
    position: relative;
    z-index: 1;
    pointer-events: none;
  }

  /* the overlay layer */
  button.btn.queue-tab::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    opacity: 0; /* off by default */
    background: transparent;
    /* transition background color and opacity*/
    transition: background-color var(--def-trans-time) linear, opacity var(--def-trans-time) linear;
  }

@media (any-hover: hover) {
  button.btn.queue-tab:hover::before {
    background: rgba(0,0,0,.1); /* “darken” amount */
    opacity: 1;
  }
}

/* turn it on in dark mode for tabs that have a custom color */
@media (prefers-color-scheme: dark) {
  button.btn.queue-tab[data-tab-color]::before {
    opacity: 1;
    background: rgba(0,0,0,.7); /* “darken” amount */
  }
}

@media (prefers-color-scheme: dark) and (any-hover: hover) {
  button.btn.queue-tab:hover::before {
    opacity: 1;
    background: rgba(0,0,0,.5); /* “darken” amount */
  }
}

button.btn.queue-tab.queue-tab--not-tiled {
  font-size: 1rem;
}

button.btn.queue-tab[data-tab-type='queue'] {
  background-color: var(--normal-queue-tab-background-color);
}

button.btn.queue-tab[data-tab-type='media'] {
  background-color: var(--media-library-tab-background-color);
}

button.btn.queue-tab[data-selected='true'] {
  background-color: var(--btn-active-bkgnd-color);
  box-shadow: 0 0 0 2px red; /* visible 2px */
}

button.btn.queue-tab .queue-tab--icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px; /* don’t let it stretch */
  background-image: url("img/AccessRights32_20x20.png");
  background-repeat: no-repeat;
  background-size: auto 20px;
  vertical-align: bottom;
}

button.btn.queue-tab .queue-tab--name {
  display: inline-block;
}

button.btn.queue-tab.dragover {
  background-color: black !important;
  color: white !important;
}

button.btn.queue-tab[data-tab-type='queue'].tapflash,
button.btn.queue-tab[data-tab-type='media'].tapflash {
  background-color: rgba(255, 0, 0, 1) !important;
}

/* Media image inside text -------------------------------------*/
.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;
  flex: 0;
}

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

.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;
  background-color: var(--body-bkgnd-color);
}
/* The frame headers are flex containers. */
.frame-header {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-basis: 2.4rem;
  flex-shrink: 0;
  font-size: 1.1rem;
  padding: .1rem .2rem;
  text-align: center;
  max-height: 4rem; /* prevent it growing to stupid heights, but allow some extra for text content wrapping */
  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);
  -webkit-user-select: none;
  user-select: none;
}

  .frame-header.frame-header--red {
    background-color: hsl(1 70% 50%);
  }

/* The three sections of the frame header */
/* Left section */
.frame-header-left {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
  align-items: center;
}

/* Center section */
.frame-header-center {
  flex: 1 1 auto;
  text-align: center;
  align-items: center;
}

  /* Padding adjustment of 1 button width for center section if desired */
  .frame-header-center[data-rpad='1'] {
    padding-right: 2em;
  }

  /* Padding adjustment of 2 button widths for center section if desired */
  .frame-header-center[data-rpad='2'] {
    padding-right: 4em;
  }

/* Right section */
.frame-header-right {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
  align-items: center;
}

.frame-header-text {
  /*margin: auto .1em;*/
  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: 1rem;
  align-items: center;
  gap: 1rem;
}

.frame-prompt-message {
}

.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;
  inset: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background-color: var(--body-bkgnd-color);
  transition: transform var(--modal-trans-time);
  z-index: 2;
}

.frame-footer {
  display: flex;
  padding: .2em;
  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: 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;
  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';
  }

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

@media screen and (max-width: 768px) {
  .lst2-rw.sound-clip {
    display: grid;
    grid-template-columns: 2em auto 2em;
    grid-template-areas:
      'name name name'
      'play date upload'
      'play date upload'
      'desc desc desc'
      '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:hover {
    filter: drop-shadow(0px 0px 2px 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 {
  text-overflow: ellipsis;
  width: 100%;
  word-wrap: break-word;
  word-break: break-word;
  color: var(--list-rw-color-title);
  max-height: 4.1em; /* need the .1 to prevent vertical scroll bar on 3 lines high */
  overflow: auto;
}

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

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

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

.lst2-desc {
  color: var(--list-rw-color-desc);
  font-size: .8rem;
  max-height: 3em;
  overflow: auto;
}


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

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

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

@media (any-hover: hover) {
  .msg-list-row: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: fixed;
  display: block;
  left: 0;
  top: 2.1rem;
  width: max-content;
  height: max-content;
  list-style-type: none;
  text-align: left;
  margin: 0;
  padding: 5px 0 5px 1.5rem;
  background-color: var(--form-bkgnd-color);
  color: var(--menu-item-color);
  font-size: .9rem;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
  z-index: 9999;
  max-height: calc(100vh - 3rem);
  overflow: auto;
  border-radius: 5px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

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

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

.drop-down-menu > li {
  position: relative;
  margin: 0;
  padding: .2rem .5rem;
  white-space: nowrap;
}

  .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;
    background-color: var(--form-bkgnd-color);
  }

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

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

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

    .drop-down-menu > li:not(.menu-section):hover::before {
      background-color: var(--menu-item-hover-bkgnd-color);
    }
}

.drop-down-menu.menu--split {
  /* keep your existing drop-down-menu styles (padding, background, shadow, etc.) */
  display: grid;
  grid-template-columns: 1fr 8.5rem; /* left list + commands column width */
  column-gap: 0;
  row-gap: 0;
  position: fixed; /* already in .drop-down-menu, but ok */
}


  /* Put “normal” items in left column */
  .drop-down-menu.menu--split > li.menu-item {
    grid-column: 1;
  }

  /* Put command items in right column */
  .drop-down-menu.menu--split > li.menu-cmd {
    grid-column: 2;
    white-space: nowrap;
    font-weight: 600;
    text-align: left;
  }

  .drop-down-menu.menu--split > li.menu-cmd {
    grid-column: 2;
  }

    .drop-down-menu.menu--split > li.menu-cmd.cmd-new {
      grid-row: 1;
    }

    .drop-down-menu.menu--split > li.menu-cmd.cmd-edit {
      grid-row: 2;
    }

    .drop-down-menu.menu--split > li.menu-cmd.cmd-del {
      grid-row: 3;
    }

  .drop-down-menu.menu--split::after {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: calc(100% - 8.5rem);
    width: 1px;
    background: var(--menu-splitter-color);
    pointer-events: none;
  }

  .drop-down-menu.menu--split > li.menu-cmd::before {
    content: none;
  }

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

.drop-down-menu > li.menu-item.menu-item--new-section {
  border-top: 1px solid var(--menu-splitter-color);
  margin-top: 5px;
  padding-top: 10px;
}

.drop-down-menu > li.menu-item.menu-section {
  font-weight: bold;
  color: dodgerblue;
  padding-left: 0;
  cursor: default;
  pointer-events: none;
}

.drop-down-menu > li {
  cursor: pointer; /* helps iOS treat it as interactive */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (any-hover: none) {
  .drop-down-menu > li.pressed:not(.menu-section) {
    background-color: #c00;
    color: #fff;
  }

    .drop-down-menu > li.pressed:not(.menu-section)::before {
      background-color: #c00;
    }
}

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

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

@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;
  padding: .2rem;
  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;
  border-radius: var(--btn-border-radius);
}

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

.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: var(--body-bkgnd-color);
}

.video-view {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  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: flex;
  flex-direction: row;
  height: 100%;
}

@media screen and (max-width: 1280px) {
  .flex-row-full-height {
    flex-direction: column;
  }
}

@media screen and (max-width: 768px) {
  .flex-row-full-height {
    display: block;
    position: relative;
    overflow: hidden;
  }
}

/* 
  .wrapcol normally lays out its content as columns, but as screen width reduces it stacks vertically.
  If the screen width gets below 768px, the .wrapcol elements become absolutely positioned so they can be stacked
  on top of each other for mobile view.
  #ListFrameContainer is the left column (containing Queue List or Tabs on the left or top, and Story or Media list
  on the right or bottom).
*/

.wrapcol {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

  /*Queue List/Tabs frame takes 1/3 width */
  .wrapcol.wrapcol--list-frame-container {
    flex: 2;
  }

  /*Story List/Media List frame takes 2/3 width */
  .wrapcol.wrapcol--view-frame-container {
    flex: 3;
  }

/*1280px or narrower */
@media screen and (min-width: 1280px) {
  /* Stack the Queue List/Tabs frame and Story List/Media List frame vertically */
  .wrapcol.wrapcol--list-frame-container {
    flex-direction: row;
  }
}

.frame {
  display: flex;
  flex-direction: column;
  overflow: auto;
  border-width: 0;
}

  .frame.frame--queue-list-frame {
    flex: 2;
    background-color: var(--body-bkgnd-color);
  }

  .frame.frame--item-list-frame {
    flex: 3;
  }

@media screen and (max-width: 1280px) {
  .frame.frame--queue-list-frame {
    flex: 0 0;
    max-height: 33%;
    /* 
      flex-basis: auto and height: auto allows frame
      to shrink vertically in column fles, especially 
      noticable in tab view.
    */
    flex-basis: auto;
    height: auto;
  }
}

@media screen and (max-width: 768px) {
  .frame.frame--queue-list-frame {
    flex-grow: 1;
    max-height: none;
    background-color: var(--frame-bkgnd-color);
  }
}

@media screen and (min-width: 768px) {
  .frame {
    padding: 1px;
  }
}

.modalframe {
  width: 80%;
  max-width: 80em;
  height: 80%;
  margin: auto;
  border: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--body-bkgnd-color);
}

.modalframe--select-list {
}

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

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

.modalframe .input-box {
  width: auto;
  height: auto;
  padding: 2rem;
  position: relative;
}

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

.modal {
  z-index: 3;
  position: fixed;
  display: flex;
  inset: 0;
  overflow: auto;
  background-color: rgba(0,0,0,.7);
}

.card-container {
  flex: 1;
  display: flex;
  height: 100%;
  overflow: hidden;
  position: relative;
}

  .card-container > .card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

/*1280px or narrower */
@media screen and (min-width: 1280px) {
  /* Stack the Queue List/Tabs frame and Story List/Media List frame vertically */
  .card.wrapcol.wrapcol--list-frame-container {
    flex-direction: row;
  }
}

@media screen and (max-width: 1280px) {
  .frame.card.frame--queue-list-frame {
    flex: 0 0;
    max-height: 33%;
    /* 
      flex-basis: auto and height: auto allows frame
      to shrink vertically in column fles, especially 
      noticable in tab view.
    */
    flex-basis: auto;
    height: auto;
  }
}

@media screen and (max-width: 768px) {
  .frame.card.frame--queue-list-frame {
    flex: 0 0;
    max-height: none;
    /* 
      flex-basis: auto and height: auto allows frame
      to shrink vertically in column fles, especially 
      noticable in tab view.
    */
    flex-basis: auto;
    height: auto;
  }
}

.card-container > .card.card--hidden {
  display: none;
}

/*1280px or narrower */
/*@media screen and (min-width: 1280px) {
  .card-container > .card {
    flex-direction: row;
  }
}
*/
@media screen and (max-width: 768px) {
  .card-container > .card {
    position: absolute;
    inset: 0;
    height: 100%;
    border: none;
  }

    .card-container > .card.card--hidden {
      pointer-events: none;
      display: none;
    }

    .card-container > .card:not(.card--hidden) {
      pointer-events: auto;
    }
}

.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: 2rem;
  /*font-size: clamp(2rem, 5vw, 8rem);*/
  font-style: italic;
  color: var(--home-title-color);
  font-weight: bold;
  width: 100%;
  padding: .1rem 0;
  text-align: center;
  text-shadow: .05em .05em .1em var(--title-text-shadow-color);
  background-color: var(--home-bkgnd-color);
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

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

/* The waves layer */
.home-waves {
  position: absolute;
  inset: 0; /* expand a bit so curves flow past edges */
  z-index: 0;
  pointer-events: none; /* never block button clicks */
  opacity: .15;
  /* For waves fade out toward edges - currently disabled */
  /*
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,1), rgba(0,0,0,0.3));
  mask-image: radial-gradient(closest-side, rgba(0,0,0,1), rgba(0,0,0,0.3));
  */
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .home-waves {
    opacity: .15;
  }
}


/* Make the SVG fill the available space */
.home-waves svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Ensure buttons render above the waves */
.home-menu-container .btn--home-menu-item {
  position: relative;
  z-index: 1;
}

.home-menu-container .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(1px);
  backdrop-filter: blur(1px);
}

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

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

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

.home-menu-container .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 {
  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;
  -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);
  -webkit-user-select: none;
  user-select: none;
}

/* Flash content for 50% DC */
@keyframes ipc-flash {
  0%, 50% {
    opacity: 1;
  }

  50%, 100% {
    opacity: 0;
  }
}

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

@media (prefers-color-scheme: dark) {
  .ipc-indicator-span {
    filter: none;
  }
}

@keyframes ipc-heartbeat {
  0%, 100% {
    transform: scale(.9);
    opacity: .5;
  }

  15% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(.9);
    opacity: .5;
  }
}

span.ipc-indicator-span[data-ipc-status="on"] {
  display: inline-block;
  transform-origin: center;
  background-image: url('img/ipc-on.svg');
  filter: none;
  animation: ipc-heartbeat 1s ease-in-out infinite;
  will-change: transform, opacity;
}

.home-footer {
  display: grid;
  grid-template-columns: 2em 1fr 2em;
  grid-template-areas:
    'help version darkmode'
    'help copyright darkmode';
  margin: 0;
  padding: .2rem;
  background-color: var(--bar-bkgnd-color-glass);
  -webkit-user-select: none;
  user-select: none;
}

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

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

/* NBStoryItemListView styles */
.item-list-table-container {
  position: relative;
  overflow: auto;
  height: 100%;
  background-color: var(--body-bkgnd-color);
}

.item-list-table {
  width: 100%;
  border: none;
  border-spacing: 0 .2em;
  padding: 0 .2em;
  border: 1px solid transparent;
  -webkit-user-select: none;
  user-select: none;
}

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

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

.item-list-table thead,
.item-list-table tfoot {
  position: sticky;
  z-index: 2;
  background-color: var(--item-list-header-bkgnd-color);
  text-align: left;
  font-size: 1em;
  color: var(--list-rw-color-desc);
}

.item-list-table tfoot {
  background-color: var(--item-list-footer-bkgnd-color);
}

.item-list-table thead {
  top: 0px;
}

.item-list-table tfoot {
  bottom: 0;
}

.item-list-table th {
  font-weight: normal;
}

.item-list-table tr {
  position: relative;
}

.item-list-table td {
  padding: .1em .2em;
  background-color: var(--form-bkgnd-color);
  border-top: 1px solid var(--list-rw-border);
  border-bottom: 1px solid var(--list-rw-border);
}

  .item-list-table td:first-child {
    border-left: 1px solid var(--list-rw-border);
    border-top-left-radius: var(--table-border-radius);
    border-bottom-left-radius: var(--table-border-radius);
  }

  .item-list-table td:last-child {
    border-right: 1px solid var(--list-rw-border);
    border-top-right-radius: var(--table-border-radius);
    border-bottom-right-radius: var(--table-border-radius);
  }

.item-list-table tr.tapflash > td,
.item-list-table tr.tapflash > th {
  position: relative;
}

  .item-list-table tr.tapflash > td::after,
  .item-list-table tr.tapflash > th::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 0, 0, 0.12);
    pointer-events: none;
    border-radius: inherit; /* works on first/last cell with radius */
  }

.item-tbl-tr {
  cursor: pointer;
}

@media (any-hover: hover) {
  .item-tbl-tr:hover {
    filter: drop-shadow(0px 0px 2px var(--list-rw-border-color-hover));
  }
}

.item-tbl-tr .col-slug::before {
  display: inline-block;
  background-size: 1em;
  background-repeat: no-repeat;
  width: 1em;
  height: 1em;
  margin: auto .25em auto 0;
  vertical-align: bottom;
}

.item-tbl-tr .lock-span {
  margin-right: 0.1em;
}

/*      .item-tbl-tr .lock-span,
          .item-tbl-tr .audio-ind-span,
          .item-tbl-tr .video-ind-span,
          .item-tbl-tr .image-ind-span,
          .item-tbl-tr .embargo-ind-span,
          .item-tbl-tr .expirepending-ind-span,
          .item-tbl-tr .expired-ind-span {
            margin-right: 0.1em;
          }
    */
.item-tbl-tr .hold-span,
.item-tbl-tr .arch-span,
.item-tbl-tr .colorcat-span,
.item-tbl-tr .prompter-pos-span {
  margin-left: 0.1em;
}

  .item-tbl-tr .hold-span:empty,
  .item-tbl-tr .arch-span:empty,
  .item-tbl-tr .colorcat-span:empty,
  .item-tbl-tr .prompter-pos-span:empty {
    margin-left: 0;
  }

  .item-tbl-tr .colorcat-span, .item-tbl-tr .colorcat-span > svg {
    width: auto;
    height: 1em;
    vertical-align: bottom;
  }

  .item-tbl-tr .prompter-pos-span img {
    width: auto;
    height: 1em;
    margin-right: 0.1em;
    vertical-align: bottom;
  }

.item-tbl-tr[data-story-locked='true'] .lock-span::after,
.item-tbl-tr[data-hasattachments='true'] .has-attachments-span::after,
.item-tbl-tr[data-hasaudio='true'] .audio-ind-span::after,
.item-tbl-tr[data-hasvideo='true'] .video-ind-span::after,
.item-tbl-tr[data-hasimage='true'] .image-ind-span::after,
.item-tbl-tr[data-has-embargo='true'] .embargo-ind-span::after,
.item-tbl-tr[data-has-expire-pending='true'] .expirepending-ind-span::after,
.item-tbl-tr[data-hasexpired='true'] .expired-ind-span::after,
.item-tbl-tr[data-hold='true'] .hold-span::after,
.item-tbl-tr[data-arch='true'] .arch-span::after {
  /* no content so it is not visible! */
  display: inline-block;
  background-size: 1em;
  background-repeat: no-repeat;
  width: 1em;
  height: 1em;
  vertical-align: bottom;
  background-position: right
}

.item-tbl-tr[data-story-locked] .lock-span::after {
  content: ' ';
  background-image: url('img/lock.svg');
}

.item-tbl-tr[data-hasattachments] .has-attachments-span::after {
  content: ' ';
  background-image: url('img/attach-file.svg');
}

.item-tbl-tr[data-hasaudio] .audio-ind-span::after {
  content: ' ';
  background-image: url('img/headset.svg');
}

.item-tbl-tr[data-hasvideo] .video-ind-span::after {
  content: ' ';
  background-image: url('img/videocam.svg');
}

.item-tbl-tr[data-hasimage] .image-ind-span::after {
  content: ' ';
  background-image: url('img/image.svg');
}

.item-tbl-tr[data-has-embargo] .embargo-ind-span::after {
  content: ' ';
  background-image: url('img/front-hand-filled.svg');
}

.item-tbl-tr[data-has-expire-pending] .expirepending-ind-span::after {
  content: ' ';
  background-image: url('img/hourglass.svg');
}

.item-tbl-tr[data-has-expired] .expired-ind-span::after {
  content: ' ';
  background-image: url('img/skull-and-crossbones.svg');
}

.item-tbl-tr[data-hold] .hold-span::after {
  content: ' ';
  background-image: url('img/pin-red-filled.svg');
}

.item-tbl-tr[data-arch] .arch-span::after {
  content: ' ';
  background-image: url('img/archive-box.svg');
}

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

@media (any-hover: hover) {
  .item-list-table .item-tbl-tr:hover * {
    border-color: var(--list-rw-border-color-hover);
  }
}

.item-list-table .item-tbl-icon {
  margin: .2em;
  height: 1.5em;
  width: 1.5em;
  background-repeat: no-repeat;
  background-size: 1.5em;
  background-color: transparent;
  transition: background-image var(--def-trans-time) linear;
}

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

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

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

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

.item-list-table-error-message {
  position: absolute;
  width: 100%;
  z-index: 2;
  color: red;
  text-align: center;
  padding: 1em;
}

.item-list-table .item-tbl-title {
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  word-wrap: break-word;
  color: var(--list-rw-color-title);
}

.item-list-table .item-tbl-desc {
  color: var(--list-rw-color-desc);
  font-size: .9rem;
}

.item-list-table .item-tbl-extra {
  color: var(--list-rw-color-date);
  font-size: .8rem;
}

.item-list-table .item-list-table-moved {
  color: var(--list-rw-color-date);
  white-space: nowrap;
  font-size: .8rem;
  margin-left: auto;
}

.item-list-table .item-tbl-select {
  padding: .1em .1em .1em 2em;
  margin-left: .2em;
  height: 2em;
  background-repeat: no-repeat;
  background-size: 2em;
  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) {
  .item-list-table .item-tbl-select:hover {
    background-image: url('img/arrow-circle-right-white.svg');
    background-color: rgba(255, 0, 0, .7);
  }
}

.item-list-table th.col-slug {
  padding-left: .2rem;
}

.item-list-table th.col-moved {
  white-space: nowrap;
  text-align: right;
  vertical-align: top;
}

.item-list-table td.col-moved {
  white-space: nowrap;
  text-align: right;
  vertical-align: top;
}

.item-list-table th.col-dur,
.item-list-table td.col-dur,
.item-list-table th.col-hit,
.item-list-table td.col-hit,
.item-list-table th.col-cume,
.item-list-table td.col-cume {
  padding-right: .5rem;
  white-space: nowrap;
  text-align: right;
  vertical-align: top;
}

.col-rdinfo {
  padding-left: 1rem;
}

.dur-diff {
  color: green;
  padding-right: 1rem;
}

  .dur-diff[data-duration-diff='1'] {
    color: red;
  }

  .dur-diff[data-duration-diff='-1'] {
    color: blue;
  }

@media (prefers-color-scheme: dark) {
  .dur-diff {
    color: hsl(120, 100%, 50%);
  }

    .dur-diff[data-duration-diff='-1'] {
      color: hsl(180, 100%, 50%);
    }
}

.dur-sel {
  padding-right: 1rem;
}

.dur-tot {
  padding-right: 1rem;
}

[data-id="StoryView_QueueName"][data-rundown='true'] .item-list-table-container {
  background-color: var(--list-bkgnd-color-rundown);
}

[data-id="StoryListContainer"][data-rundown='true'] .item-list-table-container thead {
  background-color: var(--item-list-header-rundown-bkgnd-color);
}

[data-id="StoryListContainer"][data-rundown='true'] .item-list-table-container tfoot {
  background-color: var(--item-list-footer-rundown-bkgnd-color);
}

[data-id="StoryListContainer"][data-rundown='true'] .item-list-refresh-indicator {
  background-color: var(--list-bkgnd-color-rundown);
  color: red;
}

.item-tbl-tr[data-program-item='true'] td {
  background-color: var(--item-list-program-item-bkgnd-color);
  font-weight: 500;
  color: var(--item-list-program-item-color);
}

.item-tbl-tr[data-commercial-item='true'] td {
  background-color: #ff00ff;
  font-weight: 500;
}

.item-tbl-tr[id='seoc'] td {
  background-color: var(--list-rw-bk-color-eoc);
  color: var(--list-rw-color-title-eoc);
}

.drop-indicator {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  border: none;
  background-color: hsl(1 100% 50% / 100%);
}

/* NBStoryView */

[data-id="StoryView_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;
}

[data-id="StoryView_QueueName"][data-type='normal']::before {
}

[data-id="StoryView_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));
}

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

[data-id="StoryView_QueueName"][data-type='twitter']::before {
  content: '';
  background-image: url('img/X-black.svg');
}

@media (prefers-color-scheme: dark) {
  [data-id="StoryView_QueueName"][data-type='twitter']::before {
    background-image: url('img/X-white.svg');
  }
}

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

[data-id="story-menu"] li[data-action="hold"]::before {
  background-image: url('img/push-pin-filled-ok.svg');
}

[data-id="story-menu"] li[data-action="free"]::before {
  background-image: url('img/push-pin-filled-cancel.svg');
}

[data-id="story-menu"] li[data-action="remEditLock"]::before {
  background-image: url('img/lock-cancel.svg');
}

li[data-action="new_story"]::before {
  background-image: url('img/tool-pencil-filled-add.svg');
}

li[data-action="edit_story"]::before {
  background-image: url('img/tool-pencil-filled.svg');
}

li[data-action="delete_story"]::before {
  background-image: url('img/waste-bin-full-filled.svg');
}


.email-attachments {
}

.email-attachments-toolbar {
}

.email-attachments-container {
  display: flex;
  gap: .5em;
  overflow: auto;
}

.email-attachment {
  position: relative;
  width: 120px;
  min-width: 120px;
  height: 96px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid lightgray;
  background-color: var(--body-bkgnd-color);
  cursor: pointer;
  transition: background-color .15s ease;
}

.email-attachment__overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none; /* prevent capturing events when hidden */
}

.email-attachment:hover .email-attachment__overlay,
.email-attachment:focus-within .email-attachment__overlay {
  opacity: 1;
  transform: none;
  pointer-events: auto; /* clickable when visible */
}

.email-attachment__overlay-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  gap: .25rem;
  padding: .25rem .25rem;
  background-color: var(--body-bkgnd-color);
  opacity: 70%;
}

.email-attachment__overlay-title {
  display: -webkit-box; /* required for clamp */
  -webkit-box-orient: vertical; /* required for clamp */
  -webkit-line-clamp: 3; /* number of lines */
  overflow: hidden;
  line-height: 1.1em; /* optional */
  /* remove fixed height; let clamp control it */
  min-width: 0; /* for flex parents */
  flex: 1 1 auto;
  font-size: 0.75rem;
  /* let long filenames wrap instead of overflowing */
  overflow-wrap: anywhere; /* modern */
  word-break: break-word; /* fallback */
}

.email-attachment__overlay-size {
  font-size: 0.5rem;
}

.downloadAttachment {
  width: 2em;
  height: 2em;
  min-height: 2em;
  display: inline-grid;
  place-items: center;
  border: none;
  border-radius: .5em;
  background: #fff;
  color: #111;
  cursor: pointer;
}

  .downloadAttachment:hover {
    filter: brightness(0.95);
  }

  .downloadAttachment:active {
    transform: translateY(1px);
  }

  .downloadAttachment svg {
    width: 1.2em;
    height: 1.2em;
    fill: currentColor;
  }

.email-attachment--media {
  flex-direction: column;
}

img.attachment-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

img.attachment-media {
  height: 80%;
}

.email-attachment__media-top {
  flex-grow: .8;
}

.email-attachment__media-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: .25em; /* optional spacing */
  width: 100%;
  height: 1.5em;
  font-size: .6em;
  padding: 0 .1em;
  background-color: var(--body-bkgnd-color-dark);
}
  /* Non-text items shouldn’t shrink */
  .email-attachment__media-bottom .icon,
  .email-attachment__media-bottom .btn {
    flex: 0 0 auto;
  }

  /* Text item should take remaining space and be allowed to shrink */
  .email-attachment__media-bottom .label {
    flex: 1 1 auto; /* fill remaining width */
    min-width: 0; /* <-- enables ellipsis in flex */
    align-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.media-view {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1000;
  background-color: var(--body-bkgnd-color);
}

.media-view__title {
  padding: 0.5em 1em;
}

.media-view__size {
  font-size: 0.8em;
}

.media-view .media-view__content {
  flex-grow: 1;
  align-content: center;
  text-align: center;
  position: relative;
}

  .media-view .media-view__content .media_obj {
    height: 100%;
    max-height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
    margin: auto;
    object-fit: contain;
  }


/* Image View Styles */
.expanded-controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  display: grid;
  grid-template-columns: clamp(3em, 20vw, 20em) 1fr clamp(3em, 20vw, 20em);
  grid-template-rows: 3em 1fr;
  grid-template-areas:
    'top top top'
    'left center right';
}

.expanded-controls-tool-bar {
  grid-area: top;
  background-color: transparent;
  text-align: right;
  padding: .5em;
}

  .expanded-controls-tool-bar:hover {
    background-color: hsl(0 0% 100% / .1);
  }

.expanded-controls-prev-btn {
  grid-area: left;
  background-color: transparent;
  cursor: pointer;
}

.expanded-controls-next-btn {
  grid-area: right;
  background-color: transparent;
  cursor: pointer;
}

  .expanded-controls-tool-bar:hover,
  .expanded-controls-prev-btn:hover,
  .expanded-controls-next-btn:hover {
  }

  .expanded-controls-tool-bar button, .expanded-controls-prev-btn img, .expanded-controls-next-btn img {
    display: none;
  }

.expanded-controls-tool-bar:hover button {
  display: inline-block;
}

.expanded-controls-prev-btn:hover img {
  display: block;
  width: 3em;
  height: 100%;
  margin: auto auto auto 0;
}

.expanded-controls-next-btn:hover img {
  display: block;
  width: 3em;
  height: 100%;
  margin: auto 0 auto auto;
}

.expanded-controls-prev-btn:hover {
  background-image: linear-gradient(to left, hsl(0 0% 100% / 0), hsl(0 0% 100% / .1));
}

.expanded-controls-next-btn:hover {
  background-image: linear-gradient(to right, hsl(0 0% 100% / 0), hsl(0 0% 100% / .1));
}

.image-dimensions {
  font-size: .8em;
}

/* Story Editor Styles */

.tox.tox-tinymce {
  flex: 1;
  margin: 0.25em 0 0 0;
  border: 1px solid var(--input-border-color);
  border-radius: var(--btn-border-radius);
}

  .tox.tox-tinymce.focused {
    border: 1px solid var(--focus-border-color);
  }

.tox:not(.tox-tinymce-inline) div.tox-editor-header,
.tox div.tox-menubar,
.tox div.tox-toolbar__primary,
.tox div.tox-toolbar-overlord {
  background-color: var(--tiny-editor-bar-bkgnd-color);
  padding: 0;
}

.tox button.tox-mbtn,
.tox button.tox-tbtn,
.tox button.tox-tbtn--select {
  background: transparent;
  color: var(--tiny-editor-btn-text-color);
  font-size: 1rem;
}

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

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

  .tox button.tox-tbtn--disabled svg,
  .tox button.tox-tbtn--disabled:hover svg,
  .tox button.tox-tbtn:disabled svg,
  .tox button.tox-tbtn:disabled:hover svg {
    fill: var(--tiny-editor-btn-svg-bkgnd-disabled);
  }

  .tox button.tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active),
  .tox button.tox-mbtn--active,
  .tox button.tox-mbtn:not(:disabled).tox-mbtn--active:focus {
    background: var(--btn-bkgnd-color-hover);
  }

  .tox button.tox-tbtn--disabled,
  .tox button.tox-tbtn--disabled:hover,
  .tox button.tox-tbtn:disabled,
  .tox button.tox-tbtn:disabled:hover {
    background: transparent;
  }

  .tox button.tox-mbtn:focus:not(:disabled) {
    background: var(--btn-bkgnd-color-hover);
  }

.tox-promotion {
  display: none;
}

#mytextarea_ifr {
  background-color: var(--body-bkgnd-color);
  padding: 0.5em 0 0.5em 0.5em;
}

.editor-bar {
  display: flex;
  padding: .2em;
}

.story-duration {
  flex-grow: 0;
  text-align: right;
  margin: auto;
  color: var(--text-color-green);
  flex-basis: 3em;
}

.story-duration-alert {
  color: darkorange;
}

  .story-duration-alert::before {
    content: "*";
  }


/* New Recording Styles */

.input-dialog {
  width: min(90%, 30em);
  height: fit-content;
  background-color: var(--message-box-bkgnd-color);
  color: var(--message-box-color);
  border: 1px solid transparent;
  border-radius: var(--btn-border-radius);
  overflow: hidden;
  text-align: center;
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 1em;
}

  .input-dialog::backdrop {
    background: rgba(0,0,0,.7);
  }

.input-dialog-caption {
  font-size: 1.1em;
  background-color: var(--message-box-bkgnd-color-caption);
  color: var(--message-box-color-caption);
  padding: .25em;
  margin: -1em -1em 0 -1em;
  text-align: center;
}

.input-dialog-content {
  padding: 2em 0;
}

.field-title.field-title--sound-clip {
  flex-basis: 6em;
}

.input-dialog input {
  width: 100%;
}

  .input-dialog input[type=radio] {
    display: inline-block;
    width: auto;
    margin: .5em;
  }

.input-dialog .radio-group {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: inherit;
}

#ClipName {
  flex-shrink: 0;
  color: hsl(0 0% 80%);
  background-color: #444;
  padding: .2em;
  max-height: 3em;
  overflow: auto;
}

  #ClipName[data-recording='true'] {
    background-color: #E00;
  }

  #ClipName::before {
    content: ".";
    visibility: hidden;
  }

div[data-id='waveform'] {
  position: relative;
  height: 64px;
  flex-shrink: 0;
  background-color: #222;
}

.waveform-overlay {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  line-height: 64px;
  background-color: hsl(200 100% 20%);
}

  .waveform-overlay[data-show='false'] {
    display: none;
  }

div[data-id='wave-timeline'] {
  flex-basis: 1em;
  flex-shrink: 0;
  min-height: 20px;
}

.sound-clips {
  display: contents;
  flex-shrink: 1;
}

.sound-clips-list {
  flex: 1;
  overflow-y: scroll;
  overflow-x: auto;
  padding: 0;
  margin: 0;
}

.clip {
  padding-bottom: 1rem;
}

audio {
  width: 100%;
  height: 2em;
  margin: 1rem auto 0.5rem;
}

.clip p {
  display: inline-block;
  font-size: 1rem;
}

.clip button {
  font-size: 1rem;
}

button.btn.record-button {
  margin: 2px;
  width: 70px;
  height: 70px;
  background-size: 70px;
}

  button.btn.record-button:focus, button.btn.record-button:hover, button.btn.record-button:hover:enabled {
    background-color: transparent;
    outline: 1px solid red;
  }

@media screen and (max-width: 768px) {
  button.btn.record-button {
    margin: 1px;
    width: 50px;
    height: 50px;
    background-size: 50px;
  }
}

button.btn.play-pause-button {
  flex-shrink: 0;
  margin: 1rem auto;
  width: 3rem;
  height: 3rem;
  background-repeat: no-repeat;
  background-size: 3rem 3rem;
  background-color: transparent;
  background-position: center;
  background-image: url('img/play-arrow-filled-black.svg');
}

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

@media (prefers-color-scheme: dark) {
  button.btn.play-pause-button {
    background-image: url('img/play-arrow-filled-white.svg');
  }

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

.record-counter-message-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: auto;
}

.record-counter {
  display: none;
  margin: auto;
  font-family: monospace;
  font-size: 4rem;
}

  .record-counter[data-state='recording'] {
    display: block;
    color: red;
  }

  .record-counter[data-state='paused'] {
    display: block;
    color: darkorange;
  }

.record-status {
  display: none;
  margin: auto;
  font-size: 2rem;
  text-align: center;
}

  .record-status[data-state='recording'] {
    display: block;
    color: red;
  }

  .record-status[data-state='paused'] {
    display: block;
    color: darkorange;
  }

.record-close-message {
  margin: auto;
  font-size: .8rem;
  color: var(--text-color-darker);
  text-align: center;
  max-width: 20em;
}

.record-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

#notifications {
  display: block;
  flex: 1;
  margin: 0;
  padding: 0.3rem;
  overflow: auto;
  line-height: 1.2;
  width: 100%;
  max-height: 5.4em;
}

  #notifications li {
    margin-left: 1.5rem;
  }

.list-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 2em;
}

/* New Message Styles */
#sendToField {
  max-width: 20rem;
}

@media screen and (max-width: 768px) {
  #sendToField {
    width: 100%;
    max-width: 100%;
  }
}

/* Login Styles */
.form-container {
  display: flex;
  height: 100%;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}

.form-login {
  width: 100%;
}

.form-login-field {
  height: 3em;
  width: 20em;
  position: relative;
  margin: 1em auto;
  overflow: hidden;
  text-align: center;
}

.form-login-btn {
  width: 20em;
  margin: 1em auto;
  text-align: center;
}

.form-login input {
  width: 100%;
  height: 100%;
  padding-top: 20px;
  border: none;
  background-color: transparent;
  outline: none;
}

.form-login label {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-bottom: 1px solid var(--input-border-color);
}

  .form-login label::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 100%;
    width: 100%;
    border-bottom: 3px solid var(--input-border-color);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

.content-name {
  position: absolute;
  bottom: 5px;
  left: 0px;
  transition: all 0.3s ease;
}

.form-login input:focus + .label-name .content-name,
.form-login input:valid + .label-name .content-name {
  transform: translateY(-150%);
  font-size: .8em;
}

.form-login input:focus + .label-name::after,
.form-login input:valid + .label-name::after {
  transform: translateX(0%);
}

.form-login-message {
  padding: 1em;
  text-align: center;
}

.form-login-message--warning {
  color: red;
  font-size: 1rem;
}

#SiteName {
  font-weight: bold;
  font-size: 1.5rem;
}