@charset "UTF-8";
/**
 * fade in text by transitioning from transparent. Usage:
 * - set color: transparent on element
 * - set --fade-in-text-color: <intended text color>
 */
@keyframes fade-in-text {
  0% {
    color: transparent;
  }
  100% {
    color: var(--fade-in-text-color);
  }
}
@keyframes fade-in-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes section-title-underline {
  0% {
    transform: translate(-50%, 0) scale(0, 1);
  }
  100% {
    transform: translate(0, 0) scale(1, 1);
  }
}
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
:root {
  --fg-primary: #12348e;
  --fg-accent: #ed7450;
  --fg-danger: #981826;
  --fg-secondary: #1e9d79;
  --fg-alternate: #752e7c;
  --fg-body: #000000;
  --fg-soft: #717dab;
  --fg-button: #ffffff;
  --dark-fg-primary: #4a75e4;
  --dark-fg-accent: #d08549;
  --dark-fg-danger: #cb4855;
  --dark-fg-secondary: #17b688;
  --dark-fg-alternate: #9c4ca4;
  --dark-fg-body: #ffffff;
  --dark-fg-soft: #717dab;
  --dark-fg-button: #2a2a2a;
  --bg-body: #ffffff;
  --bg-body-alt: #fafafa;
  --bg-main: #9ea8cd;
  --bg-dashboard: #f3f3f3;
  --bg-element: #ececec;
  --bg-gradient-start: rgba(0, 60, 219, 0.3);
  --bg-gradient-end: rgba(152, 180, 255, 0.3);
  --bg-gradient: linear-gradient(186.9deg, var(--bg-gradient-start) 5.4%, var(--bg-gradient-end) 78.07%);
  --bg-hover: #e1eaff;
  --bg-overlay: rgba(6, 19, 54, 0.45);
  --bg-boxed-switch-off: rgba(0,0,0,0.5);
  --bg-boxed-switch-on: rgba(255,255,255,0.8);
  --bg-zebra: #f9f9f9;
  --bg-fab-shadow: rgba(0,0,0,0.25);
  --bg-chip: rgba(237, 116, 80, 0.1);
  --bg-chip-hover: rgba(18, 52, 142, 0.1);
  --dark-bg-body: #2f3136;
  --dark-bg-body-alt: #2f3136;
  --dark-bg-main: #595f6a;
  --dark-bg-dashboard: #26272b;
  --dark-bg-element: #4f5055;
  --dark-bg-hover: #41454f;
  --dark-bg-overlay: rgba(99, 109, 135, 0.45);
  --dark-bg-gradient-start: rgba(0, 60, 219, 0.3);
  --dark-bg-gradient-end: rgba(152, 180, 255, 0.3);
  --dark-bg-gradient: linear-gradient(186.9deg, var(--dark-bg-gradient-start) 5.4%, var(--dark-bg-gradient-end) 78.07%);
  --dark-bg-boxed-switch-off: rgba(255,255,255,0.5);
  --dark-bg-boxed-switch-on: rgba(0,0,0,0.8);
  --dark-bg-bg-zebra: #2a2b2f;
  --dark-bg-fab-shadow: rgba(0,0,0,0.25);
  --dark-bg-chip: rgba(237, 116, 80, 0.1);
  --dark-bg-chip-hover: rgba(18, 52, 142, 0.1);
}

body {
  --fab-shadow: 0 2px 5px 0px var(--bg-fab-shadow);
  --bg-fab: var(--fg-accent);
  --fg-fab: var(--bg-body);
  --bg-fab-hover: var(--fg-primary);
  --bg-fab-active: var(--bg-main);
  background: var(--bg-body);
  color: var(--fg-body);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--fg-primary);
}

body.dark-mode {
  --fg-primary: var(--dark-fg-primary);
  --fg-accent: var(--dark-fg-accent);
  --fg-danger: var(--dark-fg-danger);
  --fg-secondary: var(--dark-fg-secondary);
  --fg-alternate: var(--dark-fg-alternate);
  --fg-body: var(--dark-fg-body);
  --fg-button: var(--dark-fg-button);
  --fg-soft: var(--dark-fg-soft);
  /** background colors */
  --bg-body: var(--dark-bg-body);
  --bg-body-alt: var(--dark-bg-body-alt);
  --bg-main: var(--dark-bg-main);
  --bg-dashboard: var(--dark-bg-dashboard);
  --bg-element: var(--dark-bg-element);
  --bg-gradient: var(--dark-bg-gradient);
  --bg-hover: var(--dark-bg-hover);
  --bg-overlay: var(--dark-bg-overlay);
  --bg-chip: var(--dark-bg-chip);
  --bg-chip-hover: var(--dark-bg-chip-hover);
  /** overlays for boxed toggle switch backgrounds */
  --bg-boxed-switch-off: var(--dark-bg-boxed-switch-off);
  --bg-boxed-switch-on: var(--dark-bg-boxed-switch-on);
  /* color for tables, etc. zebra-striping */
  --bg-zebra: var(--dark-bg-zebra);
  /** floating buttons */
  --fab-shadow: 0 2px 5px 0px var(--dark-bg-fab-shadow);
  --bg-fab: var(--dark-fg-accent);
  --fg-fab: var(--dark-bg-body);
  --bg-fab-hover: var(--dark-fg-primary);
  --bg-fab-active: var(--dark-bg-main);
}

/**
 * Target iOS devices only.
 */
/**
 * Target non-iOS devices.
 */
/**
 * rounded corners
 */
/** things that shouldn't resize to flex containers */
/**
 * values greater than the variables below will set breaksizes for corresponding
 * screen sizes. This is screen-width, not height.
 */
/* above HD */
/* HD desktop */
/* Mid-sized desktop/laptop */
/* Mid-sized desktop/laptop */
/* tablet/phablet */
/* phone */
/**
 * Mixin for responsive breaksizes. Possible $size values:
 * - large: HD+ desktops
 * - medium: Mid-size desktop/laptop
 * - small: tablet/phablet
 * - tiny: mobile phone
 * - <px>: specific size in pixel units, e.g. 256px
 */
:root {
  --body-width: 1200px;
  --100vh: 100vh;
  --radius: 4px;
  --radius-small: calc(var(--rad) * 0.5);
  --anim-step: 0.3s;
  --underline-width: 100%;
  --form-left-padding: 1rem;
  --form-element-padding: 0.125rem 1rem 0.125rem var(--form-left-padding);
  --button-padding: 0 1rem;
  --form-element-width: 370px;
  --form-element-height: 50px;
  --form-radio-width: 20px;
  --form-element-margin: 6px;
}
@media screen and (max-width: 1366px) {
  :root {
    --body-width: 100vw;
  }
}

/**
 * typography.scsss
 *
 * Define baseline typography for the whole site.
 *
 * Typography specific to individual classes/modules should go in corresponding
 * stylesheets, not here.
 */
:root {
  /** site-wide font stack */
  --font-stack-default: Edge;
  --font-stack-spaced: EdgeSpaced;
  --font-stack-mono: Consolas, "Courier New", Courier, monospace;
  /**
   * Sizes kept in variables so that we can apply them to elements that
   * should share styles.
   *
   * fs = font size
   * lh = line height
   */
  /* h1 and main titles */
  --fs-h1: 36px;
  --lh-h1: 56px;
  /* h2 and h2-tier titles */
  --fs-h2: 32px;
  --lh-h2: 56px;
  /* h3 and h3-tier titles */
  --fs-h3: 28px;
  --lh-h3: 56px;
  /* h3 and h3-tier titles */
  --fs-h4: 18px;
  --lh-h4: 28px;
  /* general default font-size */
  --fs-body: 17px;
  --lh-body: 28px;
  /* for monospace fonts */
  --fs-mono: 14px;
  --lh-mono: 28px;
  --lh-mono-sm: 24px;
  /* modal dialog title */
  --fs-modal-title: 24px;
  --lh-modal-title: 28px;
  /* modal dialog body */
  --fs-modal-body: 20px;
  --lh-modal-body: 32px;
  --lh-modal-body-md: 42px;
  /* subtitles */
  --fs-sub: 18px;
  --lh-sub: 28px;
  /* general button & form elements */
  --fs-button: 16px;
  --lh-button: 28px;
  /* small/secondary buttons */
  --fs-button-sm: 14px;
  --lh-button-sm: 28px;
  /* small/secondary body texts */
  --fs-body-sm: 14px;
  --lh-body-sm: 28px;
  /* sidebar navigation menu items */
  --fs-sidebar: 14px;
  /* accordion headings, etc. */
  --fs-sh: 24px;
  --lh-sh: 28px;
}

* {
  font-family: var(--font-stack-default);
  font-stretch: condensed;
  font-weight: 500;
  letter-spacing: 0.0001rem;
}

body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

h1, h2, h3, h4 {
  font-weight: 500;
}
h1 strong, h2 strong, h3 strong, h4 strong {
  font-weight: 700;
}
h1 u, h2 u, h3 u, h4 u {
  font-style: inherit;
  text-decoration: none;
  position: relative;
}
h1 u::after, h2 u::after, h3 u::after, h4 u::after {
  content: " ";
  position: absolute;
  animation: section-title-underline calc(2 * var(--anim-step)) ease forwards;
  bottom: -4px;
  left: 0;
  width: var(--underline-width);
  height: 1px;
  background: var(--bg-element);
}
h1 *, h2 *, h3 *, h4 * {
  font-weight: inherit;
}

h1 {
  font-size: var(--fs-h1);
  font-family: var(--font-stack-spaced);
  line-height: var(--lh-h1);
  text-transform: uppercase;
}

h2 {
  color: var(--fg-accent);
  font-size: var(--fs-h2);
  font-family: var(--font-stack-spaced);
  line-height: var(--lh-h2);
  text-transform: uppercase;
}

h3, h4 {
  font-weight: 400;
}
h3 strong, h4 strong {
  font-weight: 500;
}

h3 {
  color: var(--fg-secondary);
  font-size: var(--fs-h3);
  font-family: var(--font-stack-spaced);
  line-height: var(--lh-h3);
  text-transform: uppercase;
}

h4 {
  color: var(--fg-secondary);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}

/** icon fonts */
.fa {
  font-size: inherit;
  /* font-size: 20px; */
}

:is(.fa, .far, .fas).primary {
  color: var(--fg-primary);
}

:is(.fa, .far, .fas):is(.info, .secondary) {
  color: var(--fg-secondary);
}

:is(.fa, .far, .fas).alternate {
  color: var(--fg-alternate);
}

:is(.fa, .far, .fas):is(.warning, .accent) {
  color: var(--fg-accent);
}

:is(.fa, .far, .fas).danger {
  color: var(--fg-danger);
}

a {
  cursor: pointer;
  color: var(--fg-accent);
  text-decoration: underline;
}
a:hover, a:focus, a:active {
  outline: 0;
}

button, input, textarea {
  font-family: var(--font-stack-default);
}

strong {
  font-weight: 600;
  font-style: inherit;
}
strong * {
  font-weight: inherit;
}

em {
  font-style: italic;
}
em * {
  font-style: inherit;
}

code {
  display: inline-block;
  color: var(--fg-soft);
  background: var(--bg-element);
  font-family: var(--font-stack-mono);
  font-size: 0.9em;
  padding: 0.1em 0.4em;
  border-radius: 3px;
}

pre code {
  color: var(--bg-body);
  background: var(--fg-body);
  font-size: 1rem;
  display: block;
  width: 100%;
  padding: 0.5em 1em;
  border-radius: var(--radius);
}

:is(span, i.icon).palette {
  color: var(--fg-body);
}
:is(span, i.icon).primary {
  color: var(--fg-primary);
}
:is(span, i.icon):is(.secondary, .ok) {
  color: var(--fg-secondary);
}
:is(span, i.icon).tertiary {
  color: var(--fg-alternate);
}
:is(span, i.icon):is(.danger, .bad, .error) {
  color: var(--fg-danger);
}
:is(span, i.icon):is(.warning, .accent) {
  color: var(--fg-accent);
}

/* firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--bg-body) var(--bg-element);
}

/* webkit browsers */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--bg-body);
}

*::-webkit-scrollbar-thumb {
  background: var(--bg-element);
  border-radius: 6px;
  border: 3px solid var(--bg-body);
}

/**
 * layout.scss
 *
 * Universal layout structure. Sets up page width and a few other things.
 */
* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html {
  scroll-behavior: auto;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100vw;
  scroll-behavior: auto;
}
body .page {
  width: 100%;
  min-height: var(--100vh);
}
@media screen and (max-width: 767px) {
  body:not(#video-player) {
    /* fixme this should just use var(--header-height) but it gets overridden */
    padding-top: 75px !important;
  }
  body:not(#video-player) .page {
    min-height: calc(var(--100vh) - 75px);
    width: var(--body-width);
    overflow-x: hidden;
  }
}

body > * {
  max-width: var(--body-width);
}
@media screen and (max-width: 1366px) {
  body > * {
    max-width: 100%;
  }
}

/**
 * General purpose floating action button.
 */
span.fab {
  cursor: pointer;
  position: absolute;
  top: 50%;
  display: flex;
}
span.fab i.fa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-self: center;
  align-items: center;
  width: 45px;
  height: 45px;
  background: var(--bg-fab);
  border-radius: 22.5px;
  color: var(--fg-fab);
  font-size: 14px;
  box-shadow: var(--fab-shadow);
}
span.fab i.fa:hover {
  outline: 0;
  background-color: var(--bg-fab-hover);
}
span.fab i.fa:active, span.fab i.fa:focus {
  background-color: var(--bg-fab-active);
}

hr {
  position: relative;
  width: 100%;
  border: 0;
  border-radius: 1px;
  height: 1px;
  background-color: var(--bg-element);
  margin: 0 auto var(--fs-h2);
}

footer {
  text-align: center;
  color: var(--fg-primary);
}

.collapsible {
  height: auto;
  max-height: calc(var(--lh-sh) + 0.25rem);
  transition: max-height var(--anim-step) ease;
  overflow: hidden;
  /* /h2 */
}
.collapsible h2.collapse-title {
  user-select: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--anim-step) ease;
  font-weight: 500;
  font-size: var(--fs-sh);
  line-height: var(--lh-sh);
  margin: 0;
  padding: 0;
  color: var(--fg-accent);
}
.collapsible h2.collapse-title:hover {
  background: var(--bg-body-alt);
}
.collapsible h2.collapse-title .collapse-label {
  font-weight: 400;
  font-size: var(--fs-sh);
  font-family: var(--font-stack-spaced);
  line-height: var(--lh-sh);
  margin: 0 0 0.25rem;
  padding: 0;
  overflow: hidden;
}
.collapsible h2.collapse-title i {
  font-size: var(--fs-h2);
  transform: rotateX(180deg);
  transition: transform var(--anim-step) ease;
}
.collapsible:is(.open, :focus, :focus-within) {
  max-height: 100vh; /* fallback; the script should do a better job than this */
}
.collapsible:is(.open, :focus, :focus-within) > h2 i {
  transform: rotateX(0deg);
}

/* /.collapsible */
.sortable {
  --drop-target-margin: 6px;
  --child-element-height: var(--form-element-height);
  position: relative;
}
.sortable .ghost {
  position: absolute !important;
  top: 0;
  left: 0;
  transition: top 0.05s ease;
  z-index: 1000;
  cursor: grabbing;
}
.sortable .draggable {
  position: relative;
  cursor: grab;
}
.sortable .draggable.dragging {
  opacity: 0 !important;
}
.sortable img.pixel {
  position: absolute;
  left: 0;
  top: 0;
}
.sortable .sortable-drop-target {
  height: var(--drop-target-margin);
  margin: calc(-0.5 * var(--drop-target-margin)) 0;
  overflow: hidden;
}
.sortable .sortable-drop-target.receiving {
  transition: height 0.1s ease;
  height: calc(2 * var(--drop-target-margin) + var(--child-element-height));
}

a.underline span {
  text-decoration: underline;
}

#player.player-expanded {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 999999;
}

.key-value-container {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}
.key-value-container.wrap {
  display: block;
}
.key-value-container .label {
  font-size: 20px;
  color: var(--fg-primary);
}
.key-value-container .value {
  font-size: 20px;
  margin-left: 1rem;
  color: var(--fg-soft);
  word-break: break-word;
}

/**
 * Styles specific to dashboard-layout pages.
 *
 * Sets up a 3 column by 4 row grid meant to contain dashboard-widget components,
 * which wrap individual views in the grid and are managed independently by UI
 * scripts.
 *
 * Also contains header and footer styles unique to dashboards.
 *
 * By default each widget fills its column (spans 4 rows). Individual pages should
 * control their widget's row and column spans if the columns should be split.
 */
body.dashboard {
  --body-width: 100%;
  --dashboard-header-height: 70px;
  --dashboard-footer-height: 61px;
  --dashboard-sidebar-width: 18rem;
  --dashboard-widget-margin: 1px;
  --dashboard-main-width: calc(100vw - var(--dashboard-sidebar-width));
  --dashboard-columns: 3;
  --dashboard-rows: 4;
  /** general purpose dashboard widget */
}
@media screen and (max-width: 1366px) {
  body.dashboard {
    --dashboard-columns: 2;
  }
}
@media screen and (max-width: 767px) {
  body.dashboard {
    --dashboard-columns: 1;
    --form-element-width: 100%;
  }
  body.dashboard:not(#video-player) {
    /* fixme this should just use var(--header-height) but it gets overridden */
    padding-top: var(--dashboard-header-height) !important;
  }
  body.dashboard:not(#video-player) .page {
    min-height: calc(100vh - 75px);
  }
}
body.dashboard .page {
  width: 100%;
  max-width: initial;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: var(--bg-dashboard);
}
body.dashboard #avatar-container .avatar-dropdown {
  top: calc(var(--dashboard-header-height) - 1px);
}
body.dashboard main {
  display: grid;
  grid-template-columns: repeat(var(--dashboard-columns), 1fr);
  grid-template-rows: repeat(var(--dashboard-rows) 1fr);
  grid-gap: var(--dashboard-widget-margin);
  width: var(--dashboard-main-width);
  margin-left: var(--dashboard-sidebar-width);
  flex-grow: 1;
  /* a dashboard with a single full-page cell */
}
body.dashboard main.lonely {
  --dashboard-columns: 1;
  position: relative;
  grid-template-rows: auto;
  grid-auto-flow: row;
}
body.dashboard main.lonely .dashboard-widget:not(.action-bar) {
  min-height: calc(100vh - 16rem);
  max-width: var(--dashboard-main-width);
}
@media screen and (min-width: 1921px) {
  body.dashboard main {
    margin: 1rem 0 0 calc(1rem + var(--dashboard-sidebar-width));
  }
}
body.dashboard .dashboard-widget {
  grid-row: span var(--dashboard-rows);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: var(--form-element-width);
  background-color: var(--bg-body);
}
body.dashboard .dashboard-widget .title-container {
  min-width: var(--form-element-width);
}
body.dashboard .dashboard-widget .title-container > h2 {
  position: relative;
  max-width: var(--form-element-width);
  margin-top: 0;
}
body.dashboard .dashboard-widget .title-container > h2::after {
  content: " ";
  position: absolute;
  animation: section-title-underline calc(2 * var(--anim-step)) ease forwards;
  bottom: -4px;
  left: 0;
  width: var(--underline-width);
  height: 1px;
  background: var(--bg-element);
}
@media screen and (max-width: 1366px) {
  body.dashboard .dashboard-widget.analytics {
    display: none;
  }
  body.dashboard .dashboard-widget.actions {
    grid-column: span var(--dashboard-columns);
  }
}
@media screen and (max-width: 767px) {
  body.dashboard .dashboard-widget > * {
    width: 100%;
  }
}
body.dashboard footer {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-grow: 0;
  width: 100%;
  max-width: calc(100vw - var(--dashboard-sidebar-width));
  align-items: center;
  margin-left: var(--dashboard-sidebar-width);
  background: var(--bg-body);
  border-top: 1px solid var(--bg-element);
}
body.dashboard footer p > * {
  margin: 0 0.5em;
}
body.dashboard #modal {
  padding-left: var(--dashboard-sidebar-width);
}
@media screen and (max-width: 767px) {
  body.dashboard #modal {
    padding-left: 0;
  }
}

/* /.dashboard */
body.dashboard .dashboard-widget.access-rights .no-permission .message.info {
  animation: none;
}

/**
 * loading.scss
 *
 * stuff related to the loader overlay - see:
 * - src/lib/ui/component/loading.js
 * - src/lib/ui/view/loading-view.js
 */
@keyframes loading-spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes loading-pulse {
  0% {
    opacity: 0.25;
  }
  40% {
    opacity: 0.5;
  }
  45% {
    opacity: 0.95;
  }
  50% {
    opacity: 0.25;
  }
  65% {
    opacity: 0.95;
  }
  85% {
    opacity: 0.15;
  }
  100% {
    opacity: 0.25;
  }
}
body.em-loading {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
body.em-loading .em-loading-overlay {
  display: flex;
}

.em-loading-overlay {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-body);
  z-index: 1000;
  opacity: 1;
  transition: opacity var(--transition-time) ease;
}
.em-loading-overlay p {
  word-break: break-word;
  margin: 0 2em;
  text-transform: uppercase;
  color: var(--fg-primary);
  font-size: var(--fs-sh);
  line-height: var(--lh-sh);
}
.em-loading-overlay figure {
  max-width: 100px;
}
@supports not (-webkit-touch-callout: none) {
  .em-loading-overlay figure {
    animation: loading-spin 1.5s infinite linear;
  }
}
@supports (-webkit-touch-callout: none) {
  .em-loading-overlay figure {
    animation: loading-pulse 2s infinite linear;
  }
}
.em-loading-overlay figure img {
  width: 100%;
  height: auto;
}

body.modal-open {
  scroll-behavior: auto;
  position: fixed;
  overflow: hidden;
}

#modal {
  position: fixed;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  height: calc(var(--mobile100vh, 1vh) * 100);
  background: var(--bg-overlay);
  z-index: 2000;
}
@media screen and (max-width: 767px) {
  #modal {
    display: block;
    overflow-x: auto;
  }
}
#modal:empty {
  display: none;
}

@keyframes translate-notification {
  from {
    transform: translateX(404px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes close-notification {
  0% {
    max-height: 150px;
    margin-bottom: 16px;
    opacity: 1;
  }
  to {
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
  }
}
.em-notifications-overlay {
  position: fixed;
  top: calc(var(--header-height) + 9px);
  right: 0;
  display: block;
  z-index: 999;
}

body.dashboard .em-notifications-overlay {
  top: calc(var(--dashboard-header-height) + 9px);
}

.em-notifications-overlay .notification {
  background: var(--bg-body);
  width: 384px;
  max-width: calc(100vw - 48px);
  margin-bottom: 10px;
  margin-right: 20px;
  padding: 16px 10px 16px 24px;
  overflow: hidden;
  word-wrap: break-word;
  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.1215686275), 0 6px 16px rgba(0, 0, 0, 0.0784313725), 0 9px 28px 8px rgba(0, 0, 0, 0.0509803922);
  border-radius: var(--radius);
}
.em-notifications-overlay .notification button {
  color: var(--fg-body);
}
.em-notifications-overlay .notification:not(.closing) {
  animation: translate-notification 0.2s ease-out;
}
.em-notifications-overlay .notification.closing {
  animation: close-notification 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.em-notifications-overlay .notification.success {
  background: var(--fg-secondary);
  color: var(--fg-button);
}
.em-notifications-overlay .notification.success button {
  color: var(--fg-button);
}
.em-notifications-overlay .notification.fail {
  background: var(--fg-danger);
  color: var(--fg-button);
}
.em-notifications-overlay .notification.fail button {
  color: var(--fg-button);
}
.em-notifications-overlay .notification .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.em-notifications-overlay .notification .header > span {
  flex-grow: 1;
  font-size: 17px;
  font-weight: 600;
}

form.bulk {
  --grid-columns: 7;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr), auto;
  grid-template-rows: auto;
  grid-gap: 0.5em;
  /* fixme universalize this button id */
}
form.bulk label {
  display: inline-block;
  width: 100%;
  text-transform: uppercase;
  color: var(--fg-primary);
  font-weight: 600;
  margin-left: 1rem;
  white-space: nowrap;
}
form.bulk label .required {
  color: var(--fg-warn);
}
form.bulk input {
  width: auto;
  min-width: 0;
}
form.bulk input:invalid {
  border-color: var(--fg-danger);
}
form.bulk .field {
  width: 100%;
  min-width: 0;
  margin: 0;
}
form.bulk .field input {
  width: 100%;
}
form.bulk .field .help {
  display: none;
}
form.bulk span.status {
  width: auto;
  height: auto;
  align-self: center;
  justify-self: flex-start;
  font-size: var(--fs-h3);
  margin-left: 2rem;
}
form.bulk span.status.ok {
  color: var(--fg-secondary);
}
form.bulk span.status.error {
  color: var(--fg-danger);
}
form.bulk span.status.saving {
  color: var(--fg-primary);
  animation: spinner 1s linear;
  animation-iteration-count: infinite;
}
form.bulk button#add-user, form.bulk button#add-content {
  grid-column: span var(--grid-columns);
  margin-top: 2rem;
}
form.bulk .buttons {
  grid-column: span var(--grid-columns);
}
form.bulk .buttons button {
  display: flex;
  align-items: center;
}
form.bulk .buttons button i {
  margin-right: 0.5rem;
  margin-bottom: 1px;
}
form.bulk div.helps {
  grid-column: span var(--grid-columns);
  margin: 0 0 1rem;
}
form.bulk div.helps:empty {
  display: none;
}
form.bulk div.helps .help {
  border: 0 none;
  max-width: initial;
  padding: 0 1em;
  text-indent: 0;
}
form.bulk input[type=file] {
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
}
form.bulk .messages {
  grid-column: span var(--grid-columns);
  margin: 0 auto;
  max-width: initial;
}
form.bulk .messages:empty {
  display: none;
}

/* ./form.bulk */
button {
  width: var(--form-element-width);
  height: 45px;
  border-radius: var(--radius);
  flex-shrink: 0;
  flex-grow: 0;
  /* generally buttons should be fixed-size */
  width: auto;
  display: flex;
  flex-direction: row;
  flex-shrink: 1;
  flex-wrap: nowrap;
  margin: var(--form-element-margin) auto;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-body);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  text-transform: uppercase;
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
  /* faux buttons are elements that look like buttons but aren't interactable */
}
button > span, button label span {
  display: inline-flex;
  font-family: var(--font-stack-spaced);
  flex-shrink: 1;
  flex-grow: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: inherit;
  user-select: none;
}
button i:is(.fa, .fas, .far) {
  display: flex;
  justify-content: center;
  width: 1rem;
  font-size: var(--fs-body-sm);
  margin: 0 0.55rem -1px;
}
button i:is(.fa, .fas, .far):first-child {
  margin-left: 0;
}
button i:is(.fa, .fas, .far):last-child {
  margin-right: 0;
}
button.main {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  height: 50px;
}
button.ok {
  background: var(--fg-secondary);
}
button.warn {
  background: var(--fg-accent);
}
button.danger {
  background: var(--fg-danger);
}
button.secondary {
  background: var(--fg-secondary);
}
button.alternate {
  background: var(--fg-alternate);
}
button:is(:hover, :active, :focus) {
  opacity: 0.8;
  outline: 0;
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
button:is(:hover, :active, :focus).ok {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
button:is(:hover, :active, :focus).warn {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
button:is(:hover, :active, :focus).danger {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
button:is(:hover, :active, :focus).secondary {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
button:is(:hover, :active, :focus).alternate {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
button.icon {
  width: calc(var(--form-element-height) - 2px);
  height: calc(var(--form-element-height) - 2px);
}
button.icon i:is(.fa, .fas, .far) {
  margin: 0 0 -3px;
}
button.stand-in {
  background: var(--bg-body);
  border: 2px dashed var(--fg-primary);
  color: var(--fg-primary);
  height: var(--form-element-height);
  width: fit-content;
}
button.stand-in.secondary {
  color: var(--fg-secondary);
  border-color: var(--fg-secondary);
}
button.stand-in.alternate {
  color: var(--fg-alternate);
  border-color: var(--fg-alternate);
}
button.stand-in:is(.accent, .warn) {
  color: var(--fg-accent);
  border-color: var(--fg-accent);
}
button.stand-in:is(.danger, .error) {
  color: var(--fg-danger);
  border-color: var(--fg-danger);
}
button.inverse {
  background: var(--bg-body);
  border: 1px solid var(--fg-primary);
  color: var(--fg-primary);
}
button.inverse:focus {
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
button.inverse:is(.ok, .secondary) {
  border-color: var(--fg-secondary);
  color: var(--fg-secondary);
}
button.inverse:is(.ok, .secondary):focus {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
button.inverse.warn {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
button.inverse.warn:focus {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
button.inverse.danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
button.inverse.danger:focus {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
button.inverse.alternate {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
button.inverse.alternate:focus {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
button.inline {
  width: 50px;
}
button.subtle {
  border-radius: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: transparent;
  border: none;
  vertical-align: center;
  width: auto;
  height: auto;
  margin: 0.5rem auto;
  text-transform: none;
  font-weight: normal;
  color: var(--fg-primary);
}
button.subtle span {
  font-family: var(--font-stack-default);
}
button.subtle:is(.forward, .back) i.fa {
  margin: 2px 0 0 0;
}
button.subtle:is(:focus, :hover, :active) {
  outline: 0;
  box-shadow: unset;
  border: none;
  text-decoration: underline;
}
button.subtle.primary {
  color: var(--fg-primary);
}
button.subtle.secondary, button.subtle.ok {
  color: var(--fg-secondary);
}
button.subtle.alternate {
  color: var(--fg-accent);
}
button.subtle.accent, button.subtle.warning {
  color: var(--fg-accent);
}
button.subtle.danger {
  color: var(--fg-danger);
}
button:is(:disabled, .disabled) {
  color: var(--bg-element);
  background: var(--bg-main);
}
button:is(:disabled, .disabled):is(.inverse, .stand-in) {
  opacity: 1;
  border-color: var(--bg-main);
  color: var(--bg-main);
  background: none;
}
button:is(:disabled, .disabled).subtle {
  color: var(--bg-main);
  background: none;
  text-decoration: none;
}
button:is(.disabled, :disabled, .faux) {
  cursor: default;
  pointer-events: none;
}
button:is(.disabled, :disabled, .faux):is(:hover, :active, :focus) {
  opacity: 1;
  outline: 0;
  box-shadow: unset;
}
button:is(.disabled, :disabled, .faux):is(.inverse, .stand-in):is(:focus, :active, :hover) {
  outline: 0;
  box-shadow: unset;
}

a.button {
  width: var(--form-element-width);
  height: 45px;
  border-radius: var(--radius);
  flex-shrink: 0;
  flex-grow: 0;
  /* generally buttons should be fixed-size */
  width: auto;
  display: flex;
  flex-direction: row;
  flex-shrink: 1;
  flex-wrap: nowrap;
  margin: var(--form-element-margin) auto;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-body);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  text-transform: uppercase;
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
  /* faux buttons are elements that look like buttons but aren't interactable */
  text-transform: initial;
}
a.button > span, a.button label span {
  display: inline-flex;
  font-family: var(--font-stack-spaced);
  flex-shrink: 1;
  flex-grow: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: inherit;
  user-select: none;
}
a.button i:is(.fa, .fas, .far) {
  display: flex;
  justify-content: center;
  width: 1rem;
  font-size: var(--fs-body-sm);
  margin: 0 0.55rem -1px;
}
a.button i:is(.fa, .fas, .far):first-child {
  margin-left: 0;
}
a.button i:is(.fa, .fas, .far):last-child {
  margin-right: 0;
}
a.button.main {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  height: 50px;
}
a.button.ok {
  background: var(--fg-secondary);
}
a.button.warn {
  background: var(--fg-accent);
}
a.button.danger {
  background: var(--fg-danger);
}
a.button.secondary {
  background: var(--fg-secondary);
}
a.button.alternate {
  background: var(--fg-alternate);
}
a.button:is(:hover, :active, :focus) {
  opacity: 0.8;
  outline: 0;
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
a.button:is(:hover, :active, :focus).ok {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
a.button:is(:hover, :active, :focus).warn {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
a.button:is(:hover, :active, :focus).danger {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
a.button:is(:hover, :active, :focus).secondary {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
a.button:is(:hover, :active, :focus).alternate {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
a.button.icon {
  width: calc(var(--form-element-height) - 2px);
  height: calc(var(--form-element-height) - 2px);
}
a.button.icon i:is(.fa, .fas, .far) {
  margin: 0 0 -3px;
}
a.button.stand-in {
  background: var(--bg-body);
  border: 2px dashed var(--fg-primary);
  color: var(--fg-primary);
  height: var(--form-element-height);
  width: fit-content;
}
a.button.stand-in.secondary {
  color: var(--fg-secondary);
  border-color: var(--fg-secondary);
}
a.button.stand-in.alternate {
  color: var(--fg-alternate);
  border-color: var(--fg-alternate);
}
a.button.stand-in:is(.accent, .warn) {
  color: var(--fg-accent);
  border-color: var(--fg-accent);
}
a.button.stand-in:is(.danger, .error) {
  color: var(--fg-danger);
  border-color: var(--fg-danger);
}
a.button.inverse {
  background: var(--bg-body);
  border: 1px solid var(--fg-primary);
  color: var(--fg-primary);
}
a.button.inverse:focus {
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
a.button.inverse:is(.ok, .secondary) {
  border-color: var(--fg-secondary);
  color: var(--fg-secondary);
}
a.button.inverse:is(.ok, .secondary):focus {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
a.button.inverse.warn {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
a.button.inverse.warn:focus {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
a.button.inverse.danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
a.button.inverse.danger:focus {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
a.button.inverse.alternate {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
a.button.inverse.alternate:focus {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
a.button.inline {
  width: 50px;
}
a.button.subtle {
  border-radius: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: transparent;
  border: none;
  vertical-align: center;
  width: auto;
  height: auto;
  margin: 0.5rem auto;
  text-transform: none;
  font-weight: normal;
  color: var(--fg-primary);
}
a.button.subtle span {
  font-family: var(--font-stack-default);
}
a.button.subtle:is(.forward, .back) i.fa {
  margin: 2px 0 0 0;
}
a.button.subtle:is(:focus, :hover, :active) {
  outline: 0;
  box-shadow: unset;
  border: none;
  text-decoration: underline;
}
a.button.subtle.primary {
  color: var(--fg-primary);
}
a.button.subtle.secondary, a.button.subtle.ok {
  color: var(--fg-secondary);
}
a.button.subtle.alternate {
  color: var(--fg-accent);
}
a.button.subtle.accent, a.button.subtle.warning {
  color: var(--fg-accent);
}
a.button.subtle.danger {
  color: var(--fg-danger);
}
a.button:is(:disabled, .disabled) {
  color: var(--bg-element);
  background: var(--bg-main);
}
a.button:is(:disabled, .disabled):is(.inverse, .stand-in) {
  opacity: 1;
  border-color: var(--bg-main);
  color: var(--bg-main);
  background: none;
}
a.button:is(:disabled, .disabled).subtle {
  color: var(--bg-main);
  background: none;
  text-decoration: none;
}
a.button:is(.disabled, :disabled, .faux) {
  cursor: default;
  pointer-events: none;
}
a.button:is(.disabled, :disabled, .faux):is(:hover, :active, :focus) {
  opacity: 1;
  outline: 0;
  box-shadow: unset;
}
a.button:is(.disabled, :disabled, .faux):is(.inverse, .stand-in):is(:focus, :active, :hover) {
  outline: 0;
  box-shadow: unset;
}

.button-group {
  display: flex;
  flex-direction: row;
  margin: 12px 0;
}
.button-group.centered {
  justify-content: center;
}
.button-group button {
  border-radius: 0;
  border-right-width: 0;
  margin: 0;
}
.button-group button:first-of-type {
  border-radius: var(--radius) 0 0 var(--radius);
}
.button-group button:last-of-type {
  border-radius: 0 var(--radius) var(--radius) 0;
  border-right-width: 1px;
}
.button-group button:first-of-type:last-of-type {
  border-radius: var(--radius);
}

.fake-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.fake-input .label {
  display: none; /* labels are not displayed in current design */
  font-weight: 600;
  text-transform: capitalize;
  color: var(--fg-primary);
}
.fake-input .value {
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--form-element-width);
  height: var(--form-element-height);
  padding: var(--form-element-padding);
  border: 1px solid var(--bg-element);
  outline: none;
  font-size: var(--fs-body);
  background: var(--bg-body);
  color: var(--fg-body);
  transition: border-color var(--anim-step) ease;
  display: block;
  line-height: var(--form-element-height);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fake-input .value.warn, .fake-input .value.invalid, .fake-input .value.danger {
  border-color: var(--fg-danger);
}
.fake-input .value::placeholder {
  color: var(--bg-main);
}
.fake-input .value:focus, .fake-input .value:focus-within, .fake-input .value:hover, .fake-input .value:active {
  outline: none;
  border-color: var(--bg-main);
}
.fake-input .value:disabled, .fake-input .value.disabled {
  border-color: var(--bg-main);
  background: var(--bg-element);
  color: var(--bg-main);
}

.fake-input-field {
  border-color: var(--bg-main);
  background: var(--bg-element);
  cursor: pointer;
}

.form-managed.field:is(.checkbox, .checklist, .radio) {
  width: var(--form-element-width);
  margin: 0;
  padding: 0;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  flex-grow: 0;
  flex-wrap: nowrap;
  width: 100%;
  margin: 0;
  margin-top: var(--form-element-margin) 0;
  padding: var(--form-element-padding);
  font-size: var(--fs-body);
  height: var(--form-element-height);
  max-width: var(--form-element-width);
  padding-top: 0;
  padding-bottom: 0;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner:not(.disabled) {
  cursor: pointer;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner:not(.disabled) label {
  cursor: pointer;
}
.form-managed.field:is(.checkbox, .checklist, .radio) label {
  display: inline-block;
  width: 100%;
  text-transform: uppercase;
  color: var(--fg-primary);
  font-weight: 600;
  margin-left: 1rem;
  text-transform: none;
  margin-left: 0;
  user-select: none;
}
.form-managed.field:is(.checkbox, .checklist, .radio) label .required {
  color: var(--fg-warn);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) {
  position: relative;
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) i.icon {
  position: absolute;
  top: 0;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  height: 24px;
  /* override styles in .boxed here */
  width: 24px !important;
  margin: 0 !important;
  pointer-events: none;
  color: white;
  font-size: var(--fs-body) !important;
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]) {
  width: var(--form-element-width);
  height: 45px;
  border-radius: var(--radius);
  flex-shrink: 0;
  flex-grow: 0;
  /* generally buttons should be fixed-size */
  width: auto;
  display: flex;
  flex-direction: row;
  flex-shrink: 1;
  flex-wrap: nowrap;
  margin: var(--form-element-margin) auto;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-body);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  text-transform: uppercase;
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
  /* faux buttons are elements that look like buttons but aren't interactable */
  margin: 0;
  padding: 0;
  visibility: visible;
  width: 24px;
  height: 24px;
  -webkit-appearance: none;
  appearance: none;
  border-radius: calc(0.5 * var(--radius));
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]) > span, .form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]) label span {
  display: inline-flex;
  font-family: var(--font-stack-spaced);
  flex-shrink: 1;
  flex-grow: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: inherit;
  user-select: none;
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]) i:is(.fa, .fas, .far) {
  display: flex;
  justify-content: center;
  width: 1rem;
  font-size: var(--fs-body-sm);
  margin: 0 0.55rem -1px;
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]) i:is(.fa, .fas, .far):first-child {
  margin-left: 0;
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]) i:is(.fa, .fas, .far):last-child {
  margin-right: 0;
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).main {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  height: 50px;
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).ok {
  background: var(--fg-secondary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).warn {
  background: var(--fg-accent);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).danger {
  background: var(--fg-danger);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).secondary {
  background: var(--fg-secondary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).alternate {
  background: var(--fg-alternate);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):is(:hover, :active, :focus) {
  opacity: 0.8;
  outline: 0;
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):is(:hover, :active, :focus).ok {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):is(:hover, :active, :focus).warn {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):is(:hover, :active, :focus).danger {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):is(:hover, :active, :focus).secondary {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):is(:hover, :active, :focus).alternate {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).icon {
  width: calc(var(--form-element-height) - 2px);
  height: calc(var(--form-element-height) - 2px);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).icon i:is(.fa, .fas, .far) {
  margin: 0 0 -3px;
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).stand-in {
  background: var(--bg-body);
  border: 2px dashed var(--fg-primary);
  color: var(--fg-primary);
  height: var(--form-element-height);
  width: fit-content;
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).stand-in.secondary {
  color: var(--fg-secondary);
  border-color: var(--fg-secondary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).stand-in.alternate {
  color: var(--fg-alternate);
  border-color: var(--fg-alternate);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).stand-in:is(.accent, .warn) {
  color: var(--fg-accent);
  border-color: var(--fg-accent);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).stand-in:is(.danger, .error) {
  color: var(--fg-danger);
  border-color: var(--fg-danger);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).inverse {
  background: var(--bg-body);
  border: 1px solid var(--fg-primary);
  color: var(--fg-primary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).inverse:focus {
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).inverse:is(.ok, .secondary) {
  border-color: var(--fg-secondary);
  color: var(--fg-secondary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).inverse:is(.ok, .secondary):focus {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).inverse.warn {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).inverse.warn:focus {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).inverse.danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).inverse.danger:focus {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).inverse.alternate {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).inverse.alternate:focus {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).inline {
  width: 50px;
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).subtle {
  border-radius: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: transparent;
  border: none;
  vertical-align: center;
  width: auto;
  height: auto;
  margin: 0.5rem auto;
  text-transform: none;
  font-weight: normal;
  color: var(--fg-primary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).subtle span {
  font-family: var(--font-stack-default);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).subtle:is(.forward, .back) i.fa {
  margin: 2px 0 0 0;
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).subtle:is(:focus, :hover, :active) {
  outline: 0;
  box-shadow: unset;
  border: none;
  text-decoration: underline;
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).subtle.primary {
  color: var(--fg-primary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).subtle.secondary, .form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).subtle.ok {
  color: var(--fg-secondary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).subtle.alternate {
  color: var(--fg-accent);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).subtle.accent, .form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).subtle.warning {
  color: var(--fg-accent);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).subtle.danger {
  color: var(--fg-danger);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):is(:disabled, .disabled) {
  color: var(--bg-element);
  background: var(--bg-main);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):is(:disabled, .disabled):is(.inverse, .stand-in) {
  opacity: 1;
  border-color: var(--bg-main);
  color: var(--bg-main);
  background: none;
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):is(:disabled, .disabled).subtle {
  color: var(--bg-main);
  background: none;
  text-decoration: none;
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):is(.disabled, :disabled, .faux) {
  cursor: default;
  pointer-events: none;
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):is(.disabled, :disabled, .faux):is(:hover, :active, :focus) {
  opacity: 1;
  outline: 0;
  box-shadow: unset;
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):is(.disabled, :disabled, .faux):is(.inverse, .stand-in):is(:focus, :active, :hover) {
  outline: 0;
  box-shadow: unset;
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):not(:checked) {
  background: var(--bg-body);
  border: 1px solid var(--fg-primary);
  color: var(--fg-primary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):not(:checked):focus {
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):not(:checked):is(.ok, .secondary) {
  border-color: var(--fg-secondary);
  color: var(--fg-secondary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):not(:checked):is(.ok, .secondary):focus {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):not(:checked).warn {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):not(:checked).warn:focus {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):not(:checked).danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):not(:checked).danger:focus {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):not(:checked).alternate {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]):not(:checked).alternate:focus {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner-checkbox input:checked + i.icon {
  display: flex;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner:is(.disabled) {
  cursor: unset;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner:is(.disabled) label {
  color: var(--bg-main);
}

.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed {
  width: var(--form-element-width);
  height: 45px;
  border-radius: var(--radius);
  flex-shrink: 0;
  flex-grow: 0;
  /* generally buttons should be fixed-size */
  width: auto;
  display: flex;
  flex-direction: row;
  flex-shrink: 1;
  flex-wrap: nowrap;
  margin: var(--form-element-margin) auto;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-body);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  text-transform: uppercase;
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
  /* faux buttons are elements that look like buttons but aren't interactable */
  cursor: pointer;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed > span, .form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed label span {
  display: inline-flex;
  font-family: var(--font-stack-spaced);
  flex-shrink: 1;
  flex-grow: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: inherit;
  user-select: none;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed i:is(.fa, .fas, .far) {
  display: flex;
  justify-content: center;
  width: 1rem;
  font-size: var(--fs-body-sm);
  margin: 0 0.55rem -1px;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed i:is(.fa, .fas, .far):first-child {
  margin-left: 0;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed i:is(.fa, .fas, .far):last-child {
  margin-right: 0;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.main {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  height: 50px;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.ok {
  background: var(--fg-secondary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.warn {
  background: var(--fg-accent);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.danger {
  background: var(--fg-danger);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.secondary {
  background: var(--fg-secondary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.alternate {
  background: var(--fg-alternate);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed:is(:hover, :active, :focus) {
  opacity: 0.8;
  outline: 0;
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed:is(:hover, :active, :focus).ok {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed:is(:hover, :active, :focus).warn {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed:is(:hover, :active, :focus).danger {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed:is(:hover, :active, :focus).secondary {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed:is(:hover, :active, :focus).alternate {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.icon {
  width: calc(var(--form-element-height) - 2px);
  height: calc(var(--form-element-height) - 2px);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.icon i:is(.fa, .fas, .far) {
  margin: 0 0 -3px;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.stand-in {
  background: var(--bg-body);
  border: 2px dashed var(--fg-primary);
  color: var(--fg-primary);
  height: var(--form-element-height);
  width: fit-content;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.stand-in.secondary {
  color: var(--fg-secondary);
  border-color: var(--fg-secondary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.stand-in.alternate {
  color: var(--fg-alternate);
  border-color: var(--fg-alternate);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.stand-in:is(.accent, .warn) {
  color: var(--fg-accent);
  border-color: var(--fg-accent);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.stand-in:is(.danger, .error) {
  color: var(--fg-danger);
  border-color: var(--fg-danger);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.inverse {
  background: var(--bg-body);
  border: 1px solid var(--fg-primary);
  color: var(--fg-primary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.inverse:focus {
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.inverse:is(.ok, .secondary) {
  border-color: var(--fg-secondary);
  color: var(--fg-secondary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.inverse:is(.ok, .secondary):focus {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.inverse.warn {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.inverse.warn:focus {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.inverse.danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.inverse.danger:focus {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.inverse.alternate {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.inverse.alternate:focus {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.inline {
  width: 50px;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.subtle {
  border-radius: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: transparent;
  border: none;
  vertical-align: center;
  width: auto;
  height: auto;
  margin: 0.5rem auto;
  text-transform: none;
  font-weight: normal;
  color: var(--fg-primary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.subtle span {
  font-family: var(--font-stack-default);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.subtle:is(.forward, .back) i.fa {
  margin: 2px 0 0 0;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.subtle:is(:focus, :hover, :active) {
  outline: 0;
  box-shadow: unset;
  border: none;
  text-decoration: underline;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.subtle.primary {
  color: var(--fg-primary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.subtle.secondary, .form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.subtle.ok {
  color: var(--fg-secondary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.subtle.alternate {
  color: var(--fg-accent);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.subtle.accent, .form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.subtle.warning {
  color: var(--fg-accent);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.subtle.danger {
  color: var(--fg-danger);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed:is(:disabled, .disabled) {
  color: var(--bg-element);
  background: var(--bg-main);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed:is(:disabled, .disabled):is(.inverse, .stand-in) {
  opacity: 1;
  border-color: var(--bg-main);
  color: var(--bg-main);
  background: none;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed:is(:disabled, .disabled).subtle {
  color: var(--bg-main);
  background: none;
  text-decoration: none;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed:is(.disabled, :disabled, .faux) {
  cursor: default;
  pointer-events: none;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed:is(.disabled, :disabled, .faux):is(:hover, :active, :focus) {
  opacity: 1;
  outline: 0;
  box-shadow: unset;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed:is(.disabled, :disabled, .faux):is(.inverse, .stand-in):is(:focus, :active, :hover) {
  outline: 0;
  box-shadow: unset;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed label {
  font-weight: normal;
  text-transform: uppercase;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed :is(.inner-checkbox, input[type=radio]) {
  margin-left: 0.25rem;
  flex-shrink: 0;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed:is(.ok, .secondary) label {
  color: var(--fg-secondary);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed:is(.accent, .warn) label {
  color: var(--fg-accent);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.danger label {
  color: var(--fg-danger);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.alternate label {
  color: var(--fg-alternate);
}

.form-managed.field.checkbox:not(.boxed) .help {
  margin-top: -12px;
}

.field .field-color {
  display: flex;
  width: var(--form-element-width);
  height: var(--form-element-height);
  background: var(--bg-body);
  border: 1px solid var(--bg-element);
  outline: none;
  padding: var(--form-element-padding);
  font-size: 13px;
  border-radius: var(--radius);
  flex-direction: row;
  align-items: center;
}
.field .field-color div {
  padding-right: 10px;
}
.field .field-color .color-display {
  display: block;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  flex-grow: 0;
  cursor: pointer;
  border: 1px solid #000000;
  border-radius: 4px;
}

.form-managed.field.date-time {
  display: flex;
  justify-content: stretch;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--form-element-width);
  margin: var(--form-element-margin) 0;
}
.form-managed.field.date-time .inner {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-column-gap: var(--form-element-margin);
  margin: 0;
  width: 100%;
}
.form-managed.field.date-time .inner input {
  width: auto;
  position: relative;
  margin: 0;
}
.form-managed.field.date-time p.help {
  flex-basis: 100%;
}

div[role=group] {
  margin: var(--form-element-margin) 0;
}
div[role=group]:first-child {
  margin-top: 0;
}
div[role=group].buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
}
div[role=group]:empty {
  margin: 0;
}
div[role=group] .password-input-toggleable {
  display: flex;
  align-items: center;
  width: var(--form-element-width);
  height: var(--form-element-height);
  border: 1px solid var(--bg-element);
  border-radius: var(--radius);
  padding: var(--form-element-padding);
  transition: border-color var(--anim-step) ease;
}
div[role=group] .password-input-toggleable:focus, div[role=group] .password-input-toggleable:focus-within, div[role=group] .password-input-toggleable:hover, div[role=group] .password-input-toggleable:active {
  outline: none;
  border-color: var(--bg-main);
}
div[role=group] .password-input-toggleable input {
  width: 100%;
  height: 100%;
  border-radius: unset;
  border: unset;
  flex-shrink: unset;
  padding: 0;
}
div[role=group] .password-input-toggleable input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s;
}
div[role=group] .password-input-toggleable i {
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 3px;
}

.field.label-set {
  max-width: var(--form-element-width);
}
.field.label-set .labels {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--form-element-width);
  height: var(--form-element-height);
  padding: var(--form-element-padding);
  border: 1px solid var(--bg-element);
  outline: none;
  font-size: var(--fs-body);
  background: var(--bg-body);
  color: var(--fg-body);
  transition: border-color var(--anim-step) ease;
  border-radius: var(--radius);
  max-width: 100%;
  width: auto;
  position: relative;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  gap: var(--form-element-margin);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 0;
  height: auto;
  min-height: var(--form-element-height);
  padding: 0.5rem;
  margin: var(--form-element-margin) 0 0;
  user-select: none;
}
.field.label-set .labels.warn, .field.label-set .labels.invalid, .field.label-set .labels.danger {
  border-color: var(--fg-danger);
}
.field.label-set .labels::placeholder {
  color: var(--bg-main);
}
.field.label-set .labels:focus, .field.label-set .labels:focus-within, .field.label-set .labels:hover, .field.label-set .labels:active {
  outline: none;
  border-color: var(--bg-main);
}
.field.label-set .labels:disabled, .field.label-set .labels.disabled {
  border-color: var(--bg-main);
  background: var(--bg-element);
  color: var(--bg-main);
}
.field.label-set .labels:empty::before {
  content: "Select labels...";
  color: var(--fg-soft);
  font-weight: normal;
  position: absolute;
  top: 0.5rem;
  left: 1rem;
}
.field.label-set button {
  margin: 0;
  width: 100%;
  border-radius: 0 0 var(--radius) var(--radius);
  transition-property: color, border-color, background-color, opacity;
}
.field.label-set:not(.disabled) button {
  border-color: var(--bg-element);
  color: var(--fg-primary);
}
.field.label-set:not(.disabled) button:is(:hover, :active, :focus) {
  outline: 0;
  box-shadow: unset;
  color: var(--bg-body);
  background-color: var(--fg-primary);
  border-color: var(--fg-primary);
}
.field.label-set:is(.disabled) :is(.labels, button) {
  border-color: var(--bg-element);
}
.field.label-set:not(.disabled):is(:hover, :active, :focus, :focus-within) :is(.labels, button) {
  border-color: var(--bg-main);
}
.field.label-set .label {
  border-radius: calc(var(--radius) * 0.5);
  display: flex;
  flex-shrink: 1;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  width: auto;
  height: var(--lh-body);
  margin: 0;
  user-select: none;
}
.field.label-set .label i {
  display: block;
  font-size: 0.8em;
  margin-right: 0.35rem;
  height: 1em;
  width: 1em;
  text-align: right;
}
.field.label-set .label i.fa-tag {
  display: block;
}
.field.label-set .label i.fa-times {
  display: none;
}
.field.label-set:not(.disabled) .label {
  background-color: var(--fg-accent);
  color: var(--bg-body);
  cursor: pointer;
  transition: background-color var(--anim-step) ease, opacity var(--anim-step) ease;
}
.field.label-set:not(.disabled) .label:nth-child(4n+1) {
  background-color: var(--fg-secondary);
}
.field.label-set:not(.disabled) .label:nth-child(4n+2) {
  background-color: var(--fg-primary);
}
.field.label-set:not(.disabled) .label:nth-child(4n+3) {
  background-color: var(--fg-alternate);
}
.field.label-set:not(.disabled) .label:hover {
  background-color: var(--fg-danger);
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.field.label-set:not(.disabled) .label:is(:hover, :active, :focus) i.fa-tag {
  display: none;
}
.field.label-set:not(.disabled) .label:is(:hover, :active, :focus) i.fa-times {
  display: inline-block;
}
.field.label-set.disabled .label {
  background-color: var(--bg-zebra);
  color: var(--fg-soft);
}
.field.label-set.disabled .label:nth-child(odd) {
  background-color: var(--bg-dashboard);
}

.form-managed.field.password .inner {
  position: relative;
}
.form-managed.field.password .inner input {
  padding-right: 3rem;
}
.form-managed.field.password .inner i {
  position: absolute;
  top: 0;
  right: 0;
  width: 3rem;
  height: var(--form-element-height);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-main);
  transition: color var(--anim-step) ease;
  cursor: pointer;
  user-select: none;
}
.form-managed.field.password .inner:is(:hover, :active, :focus, :focus-within) input {
  border-color: var(--bg-main);
}
.form-managed.field.password .inner:is(:hover, :active, :focus, :focus-within) i {
  color: var(--fg-soft);
}
.form-managed.field.password .inner:is(:hover, :active, :focus, :focus-within) i:is(:hover, :active, :focus) {
  color: var(--fg-primary);
}

.form-managed.field.radio .inner-radio input[type=radio] {
  border-radius: 100%;
  outline: 4px solid white !important;
  outline-offset: -5px;
  flex-shrink: 0;
}
.form-managed.field.radio .inner-radio.CONTENT_BOX {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}
.form-managed.field.radio .inner-radio.CONTENT_BOX > span {
  position: relative;
  width: 165px;
  height: 188px;
  padding: 0;
  margin: 0;
  border-radius: var(--radius);
  border: 1px solid #E7E7E7;
  background: #EFF4FF;
}
.form-managed.field.radio .inner-radio.CONTENT_BOX > span > input {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 19px;
  height: 19px;
  border-color: #E7E7E7;
  box-shadow: none;
}
.form-managed.field.radio .inner-radio.CONTENT_BOX > span .entry-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.form-managed.field.radio .inner-radio.CONTENT_BOX > span .entry-content .icon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 96px !important;
  height: 96px;
  font-size: 56px;
  color: var(--fg-primary);
  background: rgba(16, 44, 128, 0.15);
  border-radius: 100%;
}
.form-managed.field.radio .inner-radio.CONTENT_BOX > span .entry-content .title {
  margin-top: 17px;
  letter-spacing: -0.1px;
  text-transform: uppercase;
  font-weight: 700;
}
.form-managed.field.radio .inner-radio.CONTENT_BOX > span .entry-content .subtitle {
  font-weight: 700;
  letter-spacing: -0.1px;
  opacity: 0.7;
}
.form-managed.field.radio .inner-radio.CONTENT_BOX > span.checked {
  background: var(--bg-body);
  border: 1px solid rgba(1, 145, 110, 0.38);
}
.form-managed.field.radio .inner-radio.CONTENT_BOX > span.checked > input {
  background: #01916E;
}
.form-managed.field.radio .inner-radio.CONTENT_BOX > span.checked .entry-content .icon {
  background: rgba(1, 145, 110, 0.15);
  color: #01916E;
}
.form-managed.field.radio .inner-radio.CONTENT_BOX > span.checked .entry-content .title, .form-managed.field.radio .inner-radio.CONTENT_BOX > span.checked .entry-content .subtitle {
  color: #01916E;
}

.form-managed.field-select .cameo-list-select-item:is(:hover, :active, :focus) {
  border-color: var(--bg-main);
}
.form-managed.field-select.invalid .cameo-list-select-item {
  border-color: var(--fg-danger);
}
.form-managed.field-select.empty .cameo-list-select-item .label {
  color: var(--bg-main);
}

.form-managed.field.slug {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  max-width: var(--form-element-width);
  margin-top: 6px;
}
.form-managed.field.slug input {
  width: auto;
  flex-shrink: 1;
  flex-grow: 1;
}
.form-managed.field.slug button {
  height: 50px;
  margin: 0 0 0 var(--form-element-margin);
  flex-shrink: 1;
  flex-grow: 0;
}
.form-managed.field.slug p.help {
  flex-basis: 100%;
}

div.text-input.form-managed {
  position: relative;
}
div.text-input.form-managed input + button.icon.subtle {
  position: absolute;
  right: 0.25em;
  bottom: calc(0.5 * var(--form-element-height) - 10px);
  height: 20px;
  width: 20px;
  font-size: 20px;
  margin: 0;
  padding-bottom: 0;
}
div.text-input.form-managed input + button.icon.subtle:is(:focus, :focus-within, :active, :hover) {
  text-decoration: none;
}
div.text-input.form-managed input + button.icon.subtle i.icon {
  font-size: 20px;
  margin: 0;
}

.form-managed.field.toggle .inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  flex-grow: 0;
  flex-wrap: wrap;
  cursor: pointer;
  height: var(--form-element-height);
  max-width: var(--form-element-width);
  width: 100%;
  margin: var(--form-element-margin) 0;
  padding: var(--form-element-padding);
  font-size: var(--fs-body);
}
.form-managed.field.toggle .inner label {
  display: initial;
  color: var(--fg-primary);
  margin-right: 1em;
  user-select: none;
}
.form-managed.field.toggle .inner input {
  display: none;
}
.form-managed.field.toggle .inner .switch {
  cursor: pointer;
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 12px;
  background-color: var(--fg-danger);
  transition: background-color var(--anim-step) ease, opacity var(--anim-step) ease;
}
.form-managed.field.toggle .inner .switch.on {
  background-color: var(--fg-secondary);
}
.form-managed.field.toggle .inner .switch:before {
  content: " ";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 10px;
  background-color: var(--bg-body);
  top: 2px;
  left: 2px;
  transform: translateX(0);
  transition: transform calc(var(--anim-step) * 0.5) ease;
}
.form-managed.field.toggle .inner .switch.on:before {
  transform: translateX(14px);
}
.form-managed.field.toggle .inner:is(:hover, :focus, :focus-within) {
  outline: 0;
}
.form-managed.field.toggle .inner:is(:hover, :focus, :focus-within) .switch:not(.on) {
  background-color: var(--fg-soft);
}
.form-managed.field.toggle .inner:is(:hover, :focus, :focus-within) .switch.on {
  opacity: 0.75;
}
.form-managed.field.toggle .inner:is(.disabled, .disabled:hover) .switch {
  background-color: var(--bg-element) !important;
}
.form-managed.field.toggle .inner:is(.disabled, .disabled:hover) .switch:before {
  opacity: 0.9;
}
.form-managed.field.toggle .inner:is(.disabled, .disabled:hover) label {
  color: var(--bg-main);
}

.form-managed.field.toggle .inner.boxed {
  width: var(--form-element-width);
  height: 45px;
  border-radius: var(--radius);
  flex-shrink: 0;
  flex-grow: 0;
  /* generally buttons should be fixed-size */
  width: auto;
  display: flex;
  flex-direction: row;
  flex-shrink: 1;
  flex-wrap: nowrap;
  margin: var(--form-element-margin) auto;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-body);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  text-transform: uppercase;
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
  /* faux buttons are elements that look like buttons but aren't interactable */
  width: min-content;
  cursor: pointer;
}
.form-managed.field.toggle .inner.boxed > span, .form-managed.field.toggle .inner.boxed label span {
  display: inline-flex;
  font-family: var(--font-stack-spaced);
  flex-shrink: 1;
  flex-grow: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: inherit;
  user-select: none;
}
.form-managed.field.toggle .inner.boxed i:is(.fa, .fas, .far) {
  display: flex;
  justify-content: center;
  width: 1rem;
  font-size: var(--fs-body-sm);
  margin: 0 0.55rem -1px;
}
.form-managed.field.toggle .inner.boxed i:is(.fa, .fas, .far):first-child {
  margin-left: 0;
}
.form-managed.field.toggle .inner.boxed i:is(.fa, .fas, .far):last-child {
  margin-right: 0;
}
.form-managed.field.toggle .inner.boxed.main {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  height: 50px;
}
.form-managed.field.toggle .inner.boxed.ok {
  background: var(--fg-secondary);
}
.form-managed.field.toggle .inner.boxed.warn {
  background: var(--fg-accent);
}
.form-managed.field.toggle .inner.boxed.danger {
  background: var(--fg-danger);
}
.form-managed.field.toggle .inner.boxed.secondary {
  background: var(--fg-secondary);
}
.form-managed.field.toggle .inner.boxed.alternate {
  background: var(--fg-alternate);
}
.form-managed.field.toggle .inner.boxed:is(:hover, :active, :focus) {
  opacity: 0.8;
  outline: 0;
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.form-managed.field.toggle .inner.boxed:is(:hover, :active, :focus).ok {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.form-managed.field.toggle .inner.boxed:is(:hover, :active, :focus).warn {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.form-managed.field.toggle .inner.boxed:is(:hover, :active, :focus).danger {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.form-managed.field.toggle .inner.boxed:is(:hover, :active, :focus).secondary {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.form-managed.field.toggle .inner.boxed:is(:hover, :active, :focus).alternate {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.form-managed.field.toggle .inner.boxed.icon {
  width: calc(var(--form-element-height) - 2px);
  height: calc(var(--form-element-height) - 2px);
}
.form-managed.field.toggle .inner.boxed.icon i:is(.fa, .fas, .far) {
  margin: 0 0 -3px;
}
.form-managed.field.toggle .inner.boxed.stand-in {
  background: var(--bg-body);
  border: 2px dashed var(--fg-primary);
  color: var(--fg-primary);
  height: var(--form-element-height);
  width: fit-content;
}
.form-managed.field.toggle .inner.boxed.stand-in.secondary {
  color: var(--fg-secondary);
  border-color: var(--fg-secondary);
}
.form-managed.field.toggle .inner.boxed.stand-in.alternate {
  color: var(--fg-alternate);
  border-color: var(--fg-alternate);
}
.form-managed.field.toggle .inner.boxed.stand-in:is(.accent, .warn) {
  color: var(--fg-accent);
  border-color: var(--fg-accent);
}
.form-managed.field.toggle .inner.boxed.stand-in:is(.danger, .error) {
  color: var(--fg-danger);
  border-color: var(--fg-danger);
}
.form-managed.field.toggle .inner.boxed.inverse {
  background: var(--bg-body);
  border: 1px solid var(--fg-primary);
  color: var(--fg-primary);
}
.form-managed.field.toggle .inner.boxed.inverse:focus {
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.form-managed.field.toggle .inner.boxed.inverse:is(.ok, .secondary) {
  border-color: var(--fg-secondary);
  color: var(--fg-secondary);
}
.form-managed.field.toggle .inner.boxed.inverse:is(.ok, .secondary):focus {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.form-managed.field.toggle .inner.boxed.inverse.warn {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
.form-managed.field.toggle .inner.boxed.inverse.warn:focus {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.form-managed.field.toggle .inner.boxed.inverse.danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
.form-managed.field.toggle .inner.boxed.inverse.danger:focus {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.form-managed.field.toggle .inner.boxed.inverse.alternate {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
.form-managed.field.toggle .inner.boxed.inverse.alternate:focus {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.form-managed.field.toggle .inner.boxed.inline {
  width: 50px;
}
.form-managed.field.toggle .inner.boxed.subtle {
  border-radius: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: transparent;
  border: none;
  vertical-align: center;
  width: auto;
  height: auto;
  margin: 0.5rem auto;
  text-transform: none;
  font-weight: normal;
  color: var(--fg-primary);
}
.form-managed.field.toggle .inner.boxed.subtle span {
  font-family: var(--font-stack-default);
}
.form-managed.field.toggle .inner.boxed.subtle:is(.forward, .back) i.fa {
  margin: 2px 0 0 0;
}
.form-managed.field.toggle .inner.boxed.subtle:is(:focus, :hover, :active) {
  outline: 0;
  box-shadow: unset;
  border: none;
  text-decoration: underline;
}
.form-managed.field.toggle .inner.boxed.subtle.primary {
  color: var(--fg-primary);
}
.form-managed.field.toggle .inner.boxed.subtle.secondary, .form-managed.field.toggle .inner.boxed.subtle.ok {
  color: var(--fg-secondary);
}
.form-managed.field.toggle .inner.boxed.subtle.alternate {
  color: var(--fg-accent);
}
.form-managed.field.toggle .inner.boxed.subtle.accent, .form-managed.field.toggle .inner.boxed.subtle.warning {
  color: var(--fg-accent);
}
.form-managed.field.toggle .inner.boxed.subtle.danger {
  color: var(--fg-danger);
}
.form-managed.field.toggle .inner.boxed:is(:disabled, .disabled) {
  color: var(--bg-element);
  background: var(--bg-main);
}
.form-managed.field.toggle .inner.boxed:is(:disabled, .disabled):is(.inverse, .stand-in) {
  opacity: 1;
  border-color: var(--bg-main);
  color: var(--bg-main);
  background: none;
}
.form-managed.field.toggle .inner.boxed:is(:disabled, .disabled).subtle {
  color: var(--bg-main);
  background: none;
  text-decoration: none;
}
.form-managed.field.toggle .inner.boxed:is(.disabled, :disabled, .faux) {
  cursor: default;
  pointer-events: none;
}
.form-managed.field.toggle .inner.boxed:is(.disabled, :disabled, .faux):is(:hover, :active, :focus) {
  opacity: 1;
  outline: 0;
  box-shadow: unset;
}
.form-managed.field.toggle .inner.boxed:is(.disabled, :disabled, .faux):is(.inverse, .stand-in):is(:focus, :active, :hover) {
  outline: 0;
  box-shadow: unset;
}
.form-managed.field.toggle .inner.boxed label {
  font-weight: 600;
}
.form-managed.field.toggle .inner.boxed:not(.inverse, .disabled) label {
  color: var(--fg-button);
}
.form-managed.field.toggle .inner.boxed:not(.inverse, .disabled) .switch {
  background-color: var(--bg-boxed-switch-on);
}
.form-managed.field.toggle .inner.boxed:not(.inverse, .disabled) .switch:not(.on) {
  background-color: var(--bg-boxed-switch-off);
}
.form-managed.field.toggle .inner.boxed:not(.inverse, .disabled) .switch:before {
  background-color: var(--fg-primary);
}
.form-managed.field.toggle .inner.boxed:not(.inverse, .disabled).secondary .switch:before {
  background-color: var(--fg-secondary);
}
.form-managed.field.toggle .inner.boxed:not(.inverse, .disabled).alternate .switch:before {
  background-color: var(--fg-alternate);
}
.form-managed.field.toggle .inner.boxed:not(.inverse, .disabled).warn .switch:before {
  background-color: var(--fg-accent);
}
.form-managed.field.toggle .inner.boxed:not(.inverse, .disabled).danger .switch:before {
  background-color: var(--fg-danger);
}
.form-managed.field.toggle .inner.boxed.inverse {
  border-color: var(--fg-soft);
}
.form-managed.field.toggle .inner.boxed.inverse label {
  font-weight: 500;
}
.form-managed.field.toggle .inner.boxed:is(.disabled, :disabled) {
  background: var(--bg-dashboard);
}
.form-managed.field.toggle .inner.boxed:is(.disabled, :disabled):not(.inverse) label {
  color: var(--bg-body);
}

.field-with-help {
  display: block;
  position: relative;
}
.field-with-help input {
  padding-right: 2.5rem;
}
.field-with-help .open-help-fab {
  right: 1rem;
  bottom: 15px;
  transition: all var(--anim-step) ease;
}
.field-with-help .open-help-fab:hover {
  color: var(--fg-secondary);
  text-shadow: 0 0 1px var(--fg-secondary);
}

p.message.help {
  align-items: flex-start;
  font-size: var(--fs-body-sm);
  line-height: 1.5em;
  max-width: var(--form-element-width);
  color: var(--fg-secondary);
  margin: var(--form-element-margin) 0 0 0;
  padding: var(--form-element-padding);
  padding-top: 0;
  padding-bottom: 0;
}
p.message.help.invalid {
  color: var(--fg-danger);
}
p.message.help.required {
  color: var(--fg-accent);
}
p.message.help.hint {
  color: var(--fg-secondary);
}
p.message.help .icon {
  margin-top: 0;
}

div[role=group]:not(:focus-within) p.help.hint {
  display: none;
}

input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--form-element-width);
  height: var(--form-element-height);
  padding: var(--form-element-padding);
  border: 1px solid var(--bg-element);
  outline: none;
  font-size: var(--fs-body);
  background: var(--bg-body);
  color: var(--fg-body);
  transition: border-color var(--anim-step) ease;
  border-radius: var(--radius);
  flex-shrink: 0;
  flex-grow: 0;
  /* generally inputs should be fixed-size */
}
input.warn, input.invalid, input.danger {
  border-color: var(--fg-danger);
}
input::placeholder {
  color: var(--bg-main);
}
input:focus, input:focus-within, input:hover, input:active {
  outline: none;
  border-color: var(--bg-main);
}
input:disabled, input.disabled {
  border-color: var(--bg-main);
  background: var(--bg-element);
  color: var(--bg-main);
}
input .inner {
  max-width: var(--form-element-width);
}

input[type=date], input[type=time] {
  flex-direction: row;
}

input[type=time]:invalid {
  border-color: var(--fg-danger);
}

input[type=checkbox] {
  visibility: hidden;
}
input[type=checkbox]::before {
  border-radius: var(--radius-small);
  position: relative;
  left: 0;
  width: 20px;
  height: 20px;
  background: var(--bg-body);
  border: 1px solid var(--bg-main);
}
input[type=checkbox]:checked::before {
  background: var(--fg-primary);
  border-color: var(--fg-primary);
  color: var(--fg-button);
  content: u2713;
}

input[type=radio] {
  width: var(--form-radio-width);
  height: 20px;
  margin: 0 0 0 5px;
}

input[type=file] {
  width: var(--form-element-width);
  height: var(--form-element-height);
}
input[type=file] :after {
  width: var(--form-element-width);
  height: 45px;
  border-radius: var(--radius);
  flex-shrink: 0;
  flex-grow: 0;
  /* generally buttons should be fixed-size */
  width: auto;
  display: flex;
  flex-direction: row;
  flex-shrink: 1;
  flex-wrap: nowrap;
  margin: var(--form-element-margin) auto;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-body);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  text-transform: uppercase;
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
  /* faux buttons are elements that look like buttons but aren't interactable */
  content: "select file";
}
input[type=file] :after > span, input[type=file] :after label span {
  display: inline-flex;
  font-family: var(--font-stack-spaced);
  flex-shrink: 1;
  flex-grow: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: inherit;
  user-select: none;
}
input[type=file] :after i:is(.fa, .fas, .far) {
  display: flex;
  justify-content: center;
  width: 1rem;
  font-size: var(--fs-body-sm);
  margin: 0 0.55rem -1px;
}
input[type=file] :after i:is(.fa, .fas, .far):first-child {
  margin-left: 0;
}
input[type=file] :after i:is(.fa, .fas, .far):last-child {
  margin-right: 0;
}
input[type=file] :after.main {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  height: 50px;
}
input[type=file] :after.ok {
  background: var(--fg-secondary);
}
input[type=file] :after.warn {
  background: var(--fg-accent);
}
input[type=file] :after.danger {
  background: var(--fg-danger);
}
input[type=file] :after.secondary {
  background: var(--fg-secondary);
}
input[type=file] :after.alternate {
  background: var(--fg-alternate);
}
input[type=file] :after:is(:hover, :active, :focus) {
  opacity: 0.8;
  outline: 0;
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
input[type=file] :after:is(:hover, :active, :focus).ok {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
input[type=file] :after:is(:hover, :active, :focus).warn {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
input[type=file] :after:is(:hover, :active, :focus).danger {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
input[type=file] :after:is(:hover, :active, :focus).secondary {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
input[type=file] :after:is(:hover, :active, :focus).alternate {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
input[type=file] :after.icon {
  width: calc(var(--form-element-height) - 2px);
  height: calc(var(--form-element-height) - 2px);
}
input[type=file] :after.icon i:is(.fa, .fas, .far) {
  margin: 0 0 -3px;
}
input[type=file] :after.stand-in {
  background: var(--bg-body);
  border: 2px dashed var(--fg-primary);
  color: var(--fg-primary);
  height: var(--form-element-height);
  width: fit-content;
}
input[type=file] :after.stand-in.secondary {
  color: var(--fg-secondary);
  border-color: var(--fg-secondary);
}
input[type=file] :after.stand-in.alternate {
  color: var(--fg-alternate);
  border-color: var(--fg-alternate);
}
input[type=file] :after.stand-in:is(.accent, .warn) {
  color: var(--fg-accent);
  border-color: var(--fg-accent);
}
input[type=file] :after.stand-in:is(.danger, .error) {
  color: var(--fg-danger);
  border-color: var(--fg-danger);
}
input[type=file] :after.inverse {
  background: var(--bg-body);
  border: 1px solid var(--fg-primary);
  color: var(--fg-primary);
}
input[type=file] :after.inverse:focus {
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
input[type=file] :after.inverse:is(.ok, .secondary) {
  border-color: var(--fg-secondary);
  color: var(--fg-secondary);
}
input[type=file] :after.inverse:is(.ok, .secondary):focus {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
input[type=file] :after.inverse.warn {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
input[type=file] :after.inverse.warn:focus {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
input[type=file] :after.inverse.danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
input[type=file] :after.inverse.danger:focus {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
input[type=file] :after.inverse.alternate {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
input[type=file] :after.inverse.alternate:focus {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
input[type=file] :after.inline {
  width: 50px;
}
input[type=file] :after.subtle {
  border-radius: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: transparent;
  border: none;
  vertical-align: center;
  width: auto;
  height: auto;
  margin: 0.5rem auto;
  text-transform: none;
  font-weight: normal;
  color: var(--fg-primary);
}
input[type=file] :after.subtle span {
  font-family: var(--font-stack-default);
}
input[type=file] :after.subtle:is(.forward, .back) i.fa {
  margin: 2px 0 0 0;
}
input[type=file] :after.subtle:is(:focus, :hover, :active) {
  outline: 0;
  box-shadow: unset;
  border: none;
  text-decoration: underline;
}
input[type=file] :after.subtle.primary {
  color: var(--fg-primary);
}
input[type=file] :after.subtle.secondary, input[type=file] :after.subtle.ok {
  color: var(--fg-secondary);
}
input[type=file] :after.subtle.alternate {
  color: var(--fg-accent);
}
input[type=file] :after.subtle.accent, input[type=file] :after.subtle.warning {
  color: var(--fg-accent);
}
input[type=file] :after.subtle.danger {
  color: var(--fg-danger);
}
input[type=file] :after:is(:disabled, .disabled) {
  color: var(--bg-element);
  background: var(--bg-main);
}
input[type=file] :after:is(:disabled, .disabled):is(.inverse, .stand-in) {
  opacity: 1;
  border-color: var(--bg-main);
  color: var(--bg-main);
  background: none;
}
input[type=file] :after:is(:disabled, .disabled).subtle {
  color: var(--bg-main);
  background: none;
  text-decoration: none;
}
input[type=file] :after:is(.disabled, :disabled, .faux) {
  cursor: default;
  pointer-events: none;
}
input[type=file] :after:is(.disabled, :disabled, .faux):is(:hover, :active, :focus) {
  opacity: 1;
  outline: 0;
  box-shadow: unset;
}
input[type=file] :after:is(.disabled, :disabled, .faux):is(.inverse, .stand-in):is(:focus, :active, :hover) {
  outline: 0;
  box-shadow: unset;
}

input[type=color] {
  padding: 0;
  border: 0;
  border-radius: 4px;
  outline: none;
  width: 70px;
  height: 36px;
  color: var(--fg-body);
}

label.required::after {
  content: "*";
}

.form-managed.field.hidden {
  display: none;
}

label {
  display: none;
}

textarea {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--form-element-width);
  height: var(--form-element-height);
  padding: var(--form-element-padding);
  border: 1px solid var(--bg-element);
  outline: none;
  font-size: var(--fs-body);
  background: var(--bg-body);
  color: var(--fg-body);
  transition: border-color var(--anim-step) ease;
  border-radius: var(--radius);
  height: auto;
  min-height: calc(4 * var(--lh-body));
  max-width: var(--form-element-width);
  font-family: var(--font-stack-default);
  padding-top: 0.75rem;
}
textarea.warn, textarea.invalid, textarea.danger {
  border-color: var(--fg-danger);
}
textarea::placeholder {
  color: var(--bg-main);
}
textarea:focus, textarea:focus-within, textarea:hover, textarea:active {
  outline: none;
  border-color: var(--bg-main);
}
textarea:disabled, textarea.disabled {
  border-color: var(--bg-main);
  background: var(--bg-element);
  color: var(--bg-main);
}

/** action bar as seen on bulk upload & manage pages / `dashboard-action-bar` */
.action-bar {
  position: sticky;
  top: calc(var(--dashboard-header-height) - 1px);
  max-width: var(--dashboard-main-width);
  z-index: 100;
  background: var(--bg-body);
  grid-column: span var(--dashboard-columns);
  grid-row: span 1 !important;
  overflow: hidden;
  justify-content: center;
  /* /#action-bar-search */
}
.action-bar #action-bar-search {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  margin: 0;
  /* /.results */
}
.action-bar #action-bar-search .pane-left {
  display: flex;
  align-items: center;
  margin-right: 1rem;
}
.action-bar #action-bar-search.open .search-container .search-block {
  opacity: 1;
  width: calc(100% - 40px);
}
.action-bar #action-bar-search .search-container {
  display: flex;
  align-items: center;
  height: 100%;
  background: var(--bg-body);
  z-index: 999;
  /* /.search-block */
}
.action-bar #action-bar-search .search-container:is(:focus-within, :hover) .search-block {
  opacity: 1;
  width: calc(100% - 40px);
}
.action-bar #action-bar-search .search-container .search-toggle:is(:focus, :active, :hover) + .search-block {
  opacity: 1;
  width: calc(100% - 40px);
}
.action-bar #action-bar-search .search-container .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  width: 36px;
  height: 36px;
  color: var(--fg-button);
  background: var(--fg-primary);
  border-radius: var(--radius);
  cursor: pointer;
}
.action-bar #action-bar-search .search-container .search-block {
  background: var(--bg-body);
  display: flex;
  align-items: center;
  flex-shrink: 1;
  flex-grow: 1;
  position: absolute;
  opacity: 0;
  left: 40px;
  width: 0;
  transition: all var(--anim-step) ease-in-out;
  overflow: hidden;
  padding-left: 12px;
}
.action-bar #action-bar-search .search-container .search-block input {
  margin: 0;
  flex-shrink: 1;
  flex-grow: 1;
  width: auto;
}
.action-bar #action-bar-search .search-container .search-block button {
  height: var(--form-element-height);
  margin: 0 0 0 0.5em;
  width: auto;
}
@media screen and (max-width: 1185px) {
  .action-bar #action-bar-search .search-container {
    flex-direction: column-reverse;
    justify-content: space-around;
  }
  .action-bar #action-bar-search .search-container .results {
    align-items: center;
  }
}
@media screen and (max-width: 880px) {
  .action-bar #action-bar-search .search-container .search-block {
    flex-wrap: wrap;
    justify-content: center;
  }
  .action-bar #action-bar-search .search-container .search-block input {
    flex-basis: 100%;
    width: 100%;
    max-width: initial;
  }
  .action-bar #action-bar-search .search-container .search-block button {
    margin-top: 0.5rem;
  }
  .action-bar #action-bar-search .search-container .search-block button:first-of-type {
    margin-left: 0;
  }
  .action-bar #action-bar-search .search-container .search-block button:last-of-type {
    margin-right: 0;
  }
}
.action-bar #action-bar-search .pane-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-grow: 1;
}
.action-bar #action-bar-search .pane-right .additional-controls {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.action-bar #action-bar-search .pane-right .additional-controls button {
  margin-top: 0;
  margin-bottom: 0;
}
.action-bar #action-bar-search .pane-right .additional-controls .toggle > span, .action-bar #action-bar-search .pane-right .additional-controls .toggle {
  margin-top: 0;
  margin-bottom: 0;
}
.action-bar #action-bar-search .results {
  display: flex;
  color: var(--fg-secondary);
  text-transform: uppercase;
  flex-shrink: 0;
  margin: 0;
}
.action-bar #action-bar-search .results span {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: var(--fs-sh);
  font-weight: 500;
}
.action-bar #action-bar-search .results span.result-count {
  line-height: 1.4em;
}
.action-bar #action-bar-search .results span.result-count a {
  margin-left: 0.5rem;
  flex-basis: 100%;
  color: var(--fg-danger);
}
.action-bar #action-bar-search .results span.result-count a:hover, .action-bar #action-bar-search .results span.result-count a:active {
  text-decoration: none;
}
.action-bar #actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.action-bar #actions > span {
  display: flex;
  align-items: center;
  flex-shrink: 1;
  flex-grow: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 1rem;
}
.action-bar #actions > span:first-child {
  margin-left: 0;
}
.action-bar #actions button {
  margin: 0 0 0 1rem;
}
.action-bar #actions button:first-child {
  margin-left: 0;
}
@media screen and (max-width: 1366px) {
  .action-bar #actions button {
    justify-content: flex-start;
    width: 50px;
    padding: 0;
    overflow: hidden;
  }
  .action-bar #actions button i {
    width: 50px;
    margin: 0;
    flex-shrink: 0;
  }
}

/* ./.action-bar */
.admin-message-display {
  position: relative;
  width: inherit;
  display: flex;
  flex-direction: column;
  background: var(--bg-body-alt);
  border: 1px solid var(--bg-element);
  border-radius: var(--radius);
  padding: 10px 16px;
  margin-top: 14px;
}
.admin-message-display.super-reply {
  border-color: var(--fg-danger);
}
.admin-message-display.has-reports {
  border-color: var(--fg-danger);
}
.admin-message-display .reports-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  min-width: 22px;
  position: absolute;
  top: -13px;
  background: var(--fg-button);
  border: 1px solid var(--fg-danger);
  border-radius: var(--radius);
  color: var(--fg-danger);
  padding: 0 4px;
}
.admin-message-display .reports-container > span {
  margin-right: 4px;
  font-size: var(--fs-body-sm);
}
.admin-message-display .reports-container > i {
  font-size: 13px;
}
.admin-message-display .button-group {
  display: none;
  position: absolute;
  right: 10px;
  top: -30px;
}
.admin-message-display .button-group button {
  width: 30px;
  height: 30px;
  padding: 0;
}
.admin-message-display .button-group button i {
  font-size: 10px;
}
.admin-message-display.clickable {
  cursor: pointer;
}
.admin-message-display:hover .button-group {
  display: flex;
}
.admin-message-display .message-header {
  display: flex;
  justify-content: space-between;
}
.admin-message-display .message-header-left {
  display: flex;
  align-items: center;
  flex: 1;
  overflow: hidden;
}
.admin-message-display .message-header-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.admin-message-display .message-header .chat-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  font-size: 0.666rem;
  background: var(--fg-primary);
  color: var(--fg-button);
  flex-shrink: 0;
  border-radius: var(--radius);
  margin-right: 8px;
}
.admin-message-display .message-header .users-splitter {
  margin: 0 10px;
}
.admin-message-display .message-header .username {
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 64px;
}
.admin-message-display .message-header .super-reply-username {
  font-weight: 600;
  color: var(--fg-danger);
}
.admin-message-display .text {
  color: var(--fg-body);
  font-size: 15px;
  margin-top: 10px;
  word-wrap: break-word;
}
.admin-message-display .date {
  color: var(--fg-soft);
  font-size: 12px;
  margin-left: 0.5rem;
}
.admin-message-display .chat-attachments {
  padding: 0;
  margin-top: 0.5rem;
}
.admin-message-display .chat-attachments:empty {
  display: none;
}
.admin-message-display .chat-attachments .cameo {
  margin-bottom: 0;
}

.avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 10px;
  padding-top: 4px;
  border-radius: 100%;
  background-color: var(--fg-primary);
  color: var(--fg-button);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 22px;
  opacity: 0.6;
  transition: all var(--anim-step) ease;
}
.avatar:hover, .avatar:active {
  opacity: 1;
}

span.badge {
  height: 25px;
  display: block;
  min-width: 100px;
  border-radius: var(--radius);
  background-color: var(--bg-main);
  color: var(--bg-body);
  text-transform: uppercase;
  justify-self: flex-end;
  text-align: center;
  font-size: calc(var(--fs-body-sm) - 4px);
  line-height: calc(var(--lh-body-sm) - 4px);
}
span.badge.assigned {
  background-color: var(--fg-soft);
}
span.badge.enrolled {
  background-color: var(--fg-alternate);
}
span.badge:is(.disabled, .incomplete, .danger, .error) {
  color: var(--bg-body);
  background-color: var(--fg-danger);
}
span.badge.in_progress {
  background-color: var(--fg-primary);
}
span.badge:is(.complete, .warning) {
  color: var(--bg-body);
  background-color: var(--fg-accent);
}
span.badge:is(.available, .enabled, .scored, .grade) {
  background-color: var(--fg-secondary);
}

.cameo {
  border-radius: var(--radius);
  display: flex;
  height: var(--form-element-height);
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  width: var(--form-element-width);
  user-select: none;
  padding: 0 0.5rem 0 1rem;
  border: 1px solid var(--bg-element);
  margin-bottom: 0.5rem;
}
.cameo .spin {
  animation: spinner 1s linear;
  animation-iteration-count: infinite;
}
.cameo .label {
  flex-shrink: 1;
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  margin-right: 0.5rem;
  font-weight: inherit;
}
.cameo > i:first-of-type {
  margin: 0 0.5rem 0 0;
  min-width: 1rem;
}
.cameo .controls {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex-grow: 0;
  flex-shrink: 0;
}
.cameo button {
  width: 30px;
  height: 30px;
  margin: 0 0.25rem 0 0;
}
.cameo button i {
  font-size: var(--fs-body);
}
.cameo.ok {
  border-color: var(--fg-secondary);
}
.cameo.warning {
  border-color: var(--fg-accent);
}
.cameo.danger {
  border-color: var(--fg-danger);
}
.cameo.highlighted {
  background-color: var(--bg-hover) !important;
  border: 1px solid var(--fg-primary);
}
.cameo.disabled {
  pointer-events: none;
  user-select: none;
  background-color: var(--bg-element) !important;
  opacity: 0.7;
}

.page-list-cameos {
  width: var(--form-element-width);
}

.cameo-list-select-item {
  cursor: pointer;
  background-color: transparent;
}
.cameo-list-select-item .label i {
  margin-right: 0.25em;
}
.cameo-list-select-item.faded:not(.selected) {
  background-color: rgba(255, 255, 255, 0.2);
}
.cameo-list-select-item.selected {
  border-color: var(--fg-primary);
}

.cameo-principal > i {
  color: var(--fg-primary);
}

.cameo-question > i.icon {
  color: var(--fg-primary);
}
.cameo-question > i.fa-text {
  color: var(--fg-alternate);
}
.cameo-question > i.fa-file-upload {
  color: var(--fg-secondary);
}

.cameo-solution > i.icon {
  color: var(--fg-danger);
}
.cameo-solution.correct > i.icon {
  color: var(--fg-secondary);
}
.cameo-solution .red {
  color: var(--fg-danger);
}
.cameo-solution .green {
  color: var(--fg-secondary);
}

.cameo-user.moderator > :is(i.icon, .label) {
  color: var(--fg-alternate);
}

/**
 * Collections of cards - grids, carousels, embedded page sections.
 */
/* used by left/right buttons on carousels */
@keyframes fade-hide {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
.content-card-carousel, .section-embedded-item {
  --per-page: 4.5;
  /* custom break for carousels */
  --card-margin: 16px;
  --total-margins: calc(var(--card-margin) * var(--per-page) * 2 - var(--card-margin));
  --card-padding: 20px;
  --card-width: calc(
    calc(var(--body-width) - var(--total-margins))
    / var(--per-page)
  );
  position: relative;
  overflow: visible;
}
@media screen and (max-width: 1079px) {
  .content-card-carousel, .section-embedded-item {
    --per-page: 3.5;
  }
}
@media screen and (max-width: 767px) {
  .content-card-carousel, .section-embedded-item {
    --per-page: 2.5;
  }
}
@media screen and (max-width: 419px) {
  .content-card-carousel, .section-embedded-item {
    --per-page: 1.5;
  }
}
.content-card-carousel .cards, .section-embedded-item .cards {
  display: flex;
  overflow: hidden;
  flex-direction: row;
  width: 100%;
  /* this creates a little breathing room in the flex layout to ensure it can
   * scroll to the end */
}
.content-card-carousel .cards .endcap, .section-embedded-item .cards .endcap {
  display: block;
  flex-shrink: 0;
  width: var(--card-margin);
  height: 1px;
}
.content-card-carousel span.fab, .section-embedded-item span.fab {
  transition: opacity var(--anim-step) ease;
  z-index: 100;
  /* opacity: 0; */
}
.content-card-carousel span.fab i.fa, .section-embedded-item span.fab i.fa {
  transition: all var(--anim-step) ease;
}
.content-card-carousel span.fab.prev, .section-embedded-item span.fab.prev {
  left: -25px;
}
@media screen and (max-width: 1366px) {
  .content-card-carousel span.fab.prev, .section-embedded-item span.fab.prev {
    left: 5px;
  }
}
.content-card-carousel span.fab.next, .section-embedded-item span.fab.next {
  right: -25px;
}
@media screen and (max-width: 1366px) {
  .content-card-carousel span.fab.next, .section-embedded-item span.fab.next {
    right: 5px;
  }
}
.content-card-carousel span.fab.disabled, .section-embedded-item span.fab.disabled {
  animation: fade-hide var(--anim-step) ease forwards;
  display: none;
  opacity: 0;
}
.content-card-carousel span.fab.disabled i.fa, .section-embedded-item span.fab.disabled i.fa {
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
.content-card-carousel:hover span.fab, .section-embedded-item:hover span.fab {
  opacity: 1;
}

.content-card-grid {
  --per-page: 4;
  --card-margin: 16px;
  --total-margins: calc(var(--card-margin) * var(--per-page) * 2 - var(--card-margin));
  --card-padding: 20px;
  --card-width: calc(
    calc(var(--body-width) - var(--total-margins))
    / var(--per-page)
  );
  /* custom break for carousels */
}
@media screen and (max-width: 1079px) {
  .content-card-grid {
    --per-page: 3;
  }
}
@media screen and (max-width: 767px) {
  .content-card-grid {
    --per-page: 2;
  }
}
@media screen and (max-width: 419px) {
  .content-card-grid {
    --per-page: 1;
  }
}
.content-card-grid .cards {
  display: grid;
  grid-template-columns: repeat(var(--per-page), 1fr);
  grid-template-rows: auto;
  grid-gap: calc(var(--card-margin) * 2);
  margin: 0 calc(var(--card-margin) / 2);
  overflow: visible;
  margin-bottom: 37px;
}
.content-card-grid .cards .content-card {
  margin: 0;
}

:is(.content-card-carousel, .course-carousel, .content-grid) > h2 {
  /* structurally this is h2, but stylistically it's h3 ... */
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  color: var(--fg-primary);
  /*
  color: transparent;
  --fade-in-text-color: var(--fg-primary);
  animation: fade-in-text var(--anim-step) ease forwards;
  animation-delay: var(--anim-step);
  */
  position: relative;
}
:is(.content-card-carousel, .course-carousel, .content-grid) > h2::after {
  content: " ";
  position: absolute;
  animation: section-title-underline calc(2 * var(--anim-step)) ease forwards;
  bottom: -4px;
  left: 0;
  width: var(--underline-width);
  height: 1px;
  background: var(--bg-element);
}
:is(.content-card-carousel, .course-carousel, .content-grid) > h2::after {
  bottom: -12px;
}
@media screen and (max-width: 1366px) {
  :is(.content-card-carousel, .course-carousel, .content-grid) > h2 {
    margin-left: 15px;
  }
}

/**
 * Cards for metadata content.
 */
/** note content card relies on --card-width, --card-margin being set by wrapper element */
.content-card {
  --card-shadow: 1px 1px 10px 0px rgba(0,0,0,0.15);
  --poster-width: calc(var(--card-width) - calc(var(--card-padding) * 2));
  /* FIXME make responsive (somehow?) */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--card-padding);
  margin: var(--card-margin);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  width: var(--card-width);
  height: auto;
  flex-shrink: 0;
  flex-grow: 0;
}
.content-card:first-of-type {
  margin-left: var(--card-margin);
}
.content-card:last-of-type {
  margin-right: var(--card-margin);
}
.content-card .poster {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  flex-grow: 0;
  width: var(--poster-width);
  height: calc(var(--poster-width) * 1.5);
  border-radius: var(--radius);
  background-position: center;
  background-size: cover;
  color: transparent;
  position: relative;
}
.content-card .poster .quick-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: background-color 0.3s ease;
}
.content-card .poster .quick-view button {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.content-card .poster:hover .quick-view:not(.no-hover) {
  background-color: rgba(255, 255, 255, 0.5);
}
.content-card .poster:hover .quick-view:not(.no-hover) button {
  opacity: 1;
}
.content-card .poster[data-image-loaded=not-loaded] .quick-view {
  background-color: white;
}
.content-card.lecture-card .poster[data-image-loaded=not-loaded] {
  opacity: 0;
}
.content-card .placeholder {
  width: 100%;
  min-width: initial;
  height: 100%;
}
.content-card .placeholder .icon {
  font-size: calc(var(--card-width) * 0.5);
  color: var(--bg-zebra);
}
.content-card h3 {
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  height: var(--lh-sub);
  overflow: hidden;
  color: var(--fg-primary);
  text-transform: capitalize;
  font-weight: 600;
  margin-top: 16px;
  margin-bottom: 8px;
  width: 100%;
  white-space: nowrap;
  text-align: center;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.content-card progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  top: calc(var(--radius) * -1);
  height: var(--radius);
  background-color: rgba(255, 255, 255, 0.3);
  border: 0;
  justify-self: start;
  width: 100%;
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}
.content-card progress::-webkit-progress-value {
  background: var(--fg-accent);
}
.content-card progress::-webkit-progress-bar {
  background-color: transparent;
}
.content-card progress::-moz-progress-bar {
  background-color: var(--fg-accent);
}
.content-card .description {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--bg-main);
  margin: 8px 0;
  text-align: center;
  height: var(--lh-body);
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.content-card .description:not(.poster ~ .description) {
  height: calc(var(--poster-width) * 1.5 + var(--lh-body-sm));
  -webkit-line-clamp: unset;
}
.content-card .description:not(.poster ~ .description) p:first-of-type {
  margin-top: 0;
}
.content-card a.button {
  width: 90px;
  height: 40px;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}
.content-card.assessment-card .poster .icon, .content-card.course-item-card .poster .icon {
  font-size: calc(var(--card-width) * 0.8);
  color: var(--fg-primary);
}
.content-card.big.course-item-card .poster .icon {
  font-size: calc(var(--card-width) * 0.45);
}

.content-card.big {
  --card-height: 560px;
  --per-page: 1.5;
  --card-margin: 16px;
  --total-margins: calc(var(--card-margin) * var(--per-page) * 2 - var(--card-margin));
  --card-padding: 20px;
  --card-width: calc(
          calc(var(--body-width) - var(--total-margins))
          / var(--per-page)
  );
  --poster-width: calc(var(--card-height) * 15 / 22);
  --info-width: var(--poster-width);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
  height: var(--card-height);
}
@media screen and (max-width: 767px) {
  .content-card.big {
    --card-height: calc(100vh - var(--header-height) - var(--lh-h1) - 6em);
    --per-page: 1.2;
    display: flex;
    flex-direction: column;
  }
}
@media screen and (min-width: 768px) {
  .content-card.big .pane {
    height: 100%;
  }
}
@media screen and (min-width: 768px) {
  .content-card.big .poster-pane {
    position: relative;
    flex-shrink: 0;
    padding: 0;
    overflow: hidden;
  }
  .content-card.big .poster-pane .quick-view {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .content-card.big .poster-pane {
    display: flex;
    width: 100%;
    height: 64%;
  }
}
.content-card.big .poster-pane .poster {
  width: 100%;
  max-height: 100%;
  object-fit: cover;
}
.content-card.big .poster-pane progress {
  position: absolute;
  bottom: 0;
  top: unset;
}
.content-card.big .info-pane {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  max-width: 100%;
}
@media screen and (min-width: 768px) {
  .content-card.big .info-pane {
    height: 100%;
    padding: 0.5em 0;
  }
}
.content-card.big .info-pane .info-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.content-card.big .info-pane .info-content .title {
  margin: 0;
}
@media screen and (min-width: 768px) {
  .content-card.big .info-pane .info-content .title {
    font-size: var(--fs-modal-title);
    line-height: var(--lh-modal-title);
    overflow: hidden;
    word-wrap: break-word;
    white-space: normal;
    height: auto;
  }
}
@media screen and (max-width: 767px) {
  .content-card.big .info-pane .info-content .title {
    -webkit-line-clamp: 2;
    white-space: normal;
    max-height: calc(2 * var(--lh-sub));
    height: auto;
  }
}
@media screen and (min-width: 768px) {
  .content-card.big .info-pane .info-content .description {
    margin: 1em 0 0;
    word-wrap: break-word;
    color: var(--fg-primary);
    height: 100% !important;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
}
@media screen and (max-width: 767px) {
  .content-card.big .info-pane .info-content .description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    height: calc(var(--lh-body-sm) * 2);
  }
}
.content-card.big .info-pane .info-content .labels {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1em;
}
@media screen and (max-width: 767px) {
  .content-card.big .info-pane .info-content .labels {
    display: none;
  }
}
.content-card.big .info-pane .info-content .labels a {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  max-width: calc(100% - 0.5em);
  padding: 0 0.5em;
  margin: 0 0.25em 0.5em;
  font-size: 0.8rem;
  text-transform: capitalize;
  text-decoration: none;
  color: var(--fg-soft);
  background-color: var(--bg-element);
  border-radius: calc(var(--radius) * 0.5);
  transition: all var(--anim-step) ease;
}
.content-card.big .info-pane .info-content .labels a i {
  font-size: 0.8em;
  text-decoration: none;
  margin-right: 0.25rem;
}
.content-card.big .info-pane .info-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-top: 1em;
}
.content-card.big .info-pane .info-footer .quick-view {
  display: flex;
  justify-content: center;
  gap: 1em;
}
@media screen and (max-width: 767px) {
  .content-card.big .info-pane .info-footer .quick-view {
    display: none;
  }
}
.content-card.big .info-pane .info-footer .mobile {
  display: none;
}
@media screen and (max-width: 767px) {
  .content-card.big .info-pane .info-footer .mobile {
    display: block;
  }
}
.content-card.big .info-pane .info-footer button {
  margin: 0 auto;
  font-size: var(--fs-button);
  height: 45px;
}

.consents {
  padding-bottom: 1.5rem;
}
.consents .field.checkbox {
  margin-top: 1rem;
}
.consents .field.checkbox.disabled {
  opacity: 0.6;
}
.consents .field.checkbox .inner {
  height: unset;
  padding: 0;
}
.consents .field.checkbox .inner .custom-label {
  padding-right: 1rem;
  font-size: var(--fs-mono);
  line-height: var(--lh-mono-sm);
  color: var(--fg-soft);
}
.consents .field.checkbox .inner .inner-checkbox input, .consents .field.checkbox .inner .inner-checkbox i {
  width: 20px !important;
  height: 20px;
}
.consents .field.checkbox .inner .inner-checkbox i {
  font-size: var(--fs-mono) !important;
}
.consents .field.checkbox .help {
  margin-top: 3px;
}

.cameo.cameo-theme .badge {
  min-width: initial;
  margin-right: 0.25rem;
  padding: 0 0.5rem 0;
}

.sm-chart {
  width: 100%;
  height: 100%;
}
.sm-chart-with-toggle, .sm-chart-with-calendar {
  display: flex;
  flex-direction: column-reverse;
}
.sm-chart-with-calendar button {
  margin: 0;
}
.sm-chart-with-calendar .scrub-bar {
  margin-right: 1rem;
}
.sm-chart .tab-container.multi-toggle > .notches-wrapper > .notches {
  width: fit-content;
}
.sm-chart .tab-container.multi-toggle > .notches-wrapper > .notches .notch {
  padding: 0 2rem;
}
.sm-chart .children-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.sm-chart .no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: var(--fg-soft);
}
.sm-chart .no-data i {
  font-size: 5rem;
}
.sm-chart .no-data p {
  font-size: var(--fs-h4);
}

@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#app-chat .chat-interface {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height) - 6px);
  width: var(--body-width);
  flex-grow: 1;
}
#app-chat .chat-interface .panes {
  position: relative;
  display: flex;
  height: 100%;
}
#app-chat .chat-interface .panes .pane {
  padding-bottom: 1.5rem;
}
#app-chat .chat-interface .panes .pane:first-child {
  width: 260px;
  overflow: auto;
  flex-shrink: 0;
  border-right: 1px solid var(--bg-element);
}
#app-chat .chat-interface .panes .pane:nth-child(2) {
  background: var(--bg-body);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
#app-chat .chat-interface .collapsible {
  margin-top: 1rem;
}
#app-chat .chat-interface .collapsible .collapse-title {
  color: var(--fg-primary);
  padding: 0 14px 0 18px;
}
#app-chat .chat-interface .collapsible .collapse-title .collapse-label {
  font-size: var(--fs-h4);
  font-family: var(--font-stack-default);
  font-weight: 600;
  line-height: 28px;
  text-transform: none;
}
#app-chat .chat-interface .collapsible .collapse-title i {
  font-size: 18px;
}
#app-chat header.horizontal + div.chat-interface {
  margin-top: -1.5em;
}
#app-chat .chat-channels {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  padding-top: 2rem;
}
#app-chat .chat-channels .channel-container {
  position: relative;
}
#app-chat .chat-channels .channel-container .remove-channel-btn {
  display: none;
  position: absolute;
  top: 7.5px;
  right: 0;
  background: transparent;
  color: var(--fg-danger);
  height: 30px;
  width: 30px;
  margin: 0;
  z-index: 5;
  cursor: pointer;
  border: 0;
  box-shadow: none;
  opacity: 1;
}
#app-chat .chat-channels .channel-container .remove-channel-btn:hover {
  background: var(--fg-danger);
  color: var(--fg-button);
}
#app-chat .chat-channels .channel-container:hover .remove-channel-btn {
  display: flex;
}
#app-chat .chat-channels button.channel {
  width: 100%;
  justify-content: flex-start;
  margin: 0;
  border: 0;
  border-radius: unset;
  box-shadow: none;
  background: transparent;
  color: var(--fg-primary);
  text-transform: unset;
  font-size: 16px;
  font-weight: 400;
  padding: 0 16px 0 29px;
}
#app-chat .chat-channels button.channel i {
  width: 20px;
  font-size: 14px;
  margin-right: 8px;
  margin-bottom: 0;
  flex-shrink: 0;
}
#app-chat .chat-channels button.channel span {
  display: block;
}
#app-chat .chat-channels button.channel.unread-channel {
  font-weight: 900;
}
#app-chat .chat-channels button.channel:hover {
  background: var(--bg-dashboard);
}
#app-chat .chat-channels button.channel.primary {
  background: var(--fg-primary);
  color: var(--fg-button);
}
#app-chat .chat-channels button.channel.top-level {
  font-size: var(--fs-h4);
  font-weight: 600;
  padding-left: 18px;
  padding-right: 14px;
}
#app-chat .chat-channels button.channel.add-dm-user {
  text-transform: uppercase;
  color: var(--fg-danger);
}
#app-chat .chat-window {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
  flex-grow: 1;
  padding: var(--form-element-margin) 0;
  gap: var(--form-element-margin);
  border-radius: var(--radius);
  overflow-y: auto;
}
#app-chat .scroll-bottom-button {
  position: absolute;
  right: 20px;
  bottom: 90px;
  width: 40px;
  height: 40px;
  z-index: 10;
  border-radius: var(--radius);
  background-color: var(--fg-accent);
}
#app-chat .chat-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background: var(--fg-button);
  color: var(--fg-primary);
  border: 1px solid var(--fg-primary);
  flex-shrink: 0;
  border-radius: var(--radius);
  margin-right: 8px;
}
#app-chat .chat-message {
  --radius: 4px;
  position: relative;
  display: flex;
  width: 100%;
  padding: 8px 20px;
  transition: background-color 0.2s ease-in-out;
}
#app-chat .chat-message.super-reply .chat-avatar {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
#app-chat .chat-message.super-reply .content .username {
  color: var(--fg-danger);
  font-weight: 600;
}
#app-chat .chat-message:hover {
  background-color: var(--bg-dashboard);
}
#app-chat .chat-message:hover .button-group {
  display: flex;
}
#app-chat .chat-message.highlighted {
  background-color: var(--bg-dashboard);
}
#app-chat .chat-message a {
  text-decoration: none;
}
#app-chat .chat-message .content {
  display: flex;
  flex-direction: column;
}
#app-chat .chat-message .content .username {
  color: var(--fg-primary);
  font-size: 17px;
  word-break: break-word;
}
#app-chat .chat-message .content .time {
  color: var(--fg-soft);
  font-size: 14px;
  margin-left: 0.5rem;
  line-height: 26px;
}
#app-chat .chat-message .content .text {
  color: var(--fg-body);
  font-size: 16px;
  word-break: break-word;
}
#app-chat .chat-message .button-group {
  display: none;
  position: absolute;
  right: 20px;
  top: -30px;
}
#app-chat .chat-message .button-group button {
  width: 30px;
  height: 30px;
}
#app-chat .chat-message .attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 0.5rem;
}
#app-chat .chat-message .attachments .cameo {
  margin-bottom: 0;
}
#app-chat .other .chat-avatar {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
#app-chat .moderator :is(.chat-avatar, .chat-avatar a) {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
#app-chat .moderator :is(.content .username, .message-detailed .message-details .container-text .container-name .name) {
  color: var(--fg-alternate);
}
#app-chat .chat-header {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  justify-content: space-between;
  height: 62px;
  padding: 0 16px 0 32px;
  border-bottom: 1px solid var(--bg-element);
  background: var(--bg-body);
}
#app-chat .chat-header .channel-title {
  color: var(--fg-primary);
  flex-shrink: 1;
}
#app-chat .chat-header .channel-title .label {
  display: flex;
  align-items: center;
  font-size: 18px;
}
#app-chat .chat-header .channel-title .label i {
  margin-right: 10px;
}
#app-chat .chat-header .channel-title .label span {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app-chat .chat-no-channel-selected {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#app-chat .chat-no-channel-selected .label {
  font-size: var(--fs-h3);
  color: var(--fg-soft);
}
#app-chat .channel-actions {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#app-chat .channel-actions button.icon {
  width: 34px;
  height: 34px;
}
#app-chat .channel-actions .actions-left-side, #app-chat .channel-actions .actions-right-side {
  display: flex;
}
#app-chat .channel-actions .actions-left-side button:not(:first-child), #app-chat .channel-actions .actions-right-side button:not(:first-child) {
  margin-left: 6px;
}
#app-chat .channel-actions .actions-left-side button {
  pointer-events: auto;
}
#app-chat .messages {
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
  padding-bottom: 2em;
}
#app-chat .message-detailed {
  display: flex;
  flex-direction: column;
  width: 100%;
}
#app-chat .message-detailed .chat-attachments {
  padding: 0;
  margin-top: 10px;
}
#app-chat .message-detailed .date {
  color: var(--fg-primary);
  font-size: 16px;
  line-height: 1.38463;
  padding: 16px 0 12px 16px;
  margin: 0 16px;
}
#app-chat .message-detailed a {
  text-decoration: none;
}
#app-chat .message-detailed .message-details {
  position: relative;
  display: flex;
  border-radius: 12px;
  padding: 12px 16px;
  margin: 0 16px;
  background: var(--bg-body);
  border: 1px solid var(--bg-element);
  cursor: pointer;
}
#app-chat .message-detailed .message-details.selectable:hover {
  background: var(--bg-dashboard);
}
#app-chat .message-detailed .message-details.selected {
  background: var(--bg-dashboard);
}
#app-chat .message-detailed .message-details .button-group {
  display: none;
  position: absolute;
  right: 0;
  top: -30px;
}
#app-chat .message-detailed .message-details .button-group button {
  width: 30px;
  height: 30px;
}
#app-chat .message-detailed .message-details:hover .button-group {
  display: flex;
}
#app-chat .message-detailed .chat-avatar {
  margin-top: 7px;
}
#app-chat .message-detailed .container-text {
  width: 100%;
  margin-left: 6px;
}
#app-chat .message-detailed .container-text .container-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#app-chat .message-detailed .container-text .container-name .name, #app-chat .message-detailed .container-text .container-name .time {
  color: var(--fg-primary);
  font-size: 15px;
}
#app-chat .message-detailed .container-text .text-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
#app-chat .message-detailed .container-text .text-wrapper .text {
  color: var(--fg-soft);
  font-size: 15px;
  line-height: 1.46668;
  font-weight: 400;
  word-break: break-word;
}
#app-chat .message-detailed .container-text .text-wrapper .mention-badge {
  flex-shrink: 0;
  border-radius: 16px;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  height: 18px;
  line-height: 18px;
  margin-left: 4px;
  margin-top: 2px;
  padding: 0 9px;
  color: var(--fg-button);
  background: var(--fg-danger);
}
#app-chat #action-bar-search {
  width: 100%;
  display: flex;
  align-items: center;
}
#app-chat #action-bar-search .search-block {
  display: flex;
  align-items: center;
}
#app-chat #action-bar-search .search-block input, #app-chat #action-bar-search .search-block button {
  height: 40px;
}
#app-chat #action-bar-search .search-block button {
  font-size: 14px;
}
#app-chat #action-bar-search .search-block > *:not(:first-child) {
  margin-left: 8px;
}
#app-chat #action-bar-search .results {
  margin: 0 auto;
}
#app-chat #action-bar-search .results .result-count {
  color: var(--fg-secondary);
  font-weight: 400;
}
#app-chat #action-bar-search .results .result-count .clear-results {
  margin-left: 5px;
}
#app-chat .cameo-file.ok {
  border-color: var(--fg-primary);
  color: var(--fg-primary);
}
#app-chat .cameo-file.danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}

.report-message .input-wrapper {
  flex-direction: column;
  height: auto;
  align-items: flex-start;
  margin-top: 0;
}
.report-message .input-wrapper .input-set {
  flex-direction: column;
  align-items: flex-start;
  margin: 10px 0;
}
.report-message .input-wrapper .input-set .item {
  flex-direction: row-reverse;
  margin-left: 0;
  margin-right: 0;
  height: 32px;
}
.report-message .input-wrapper .input-set .item input[type=radio] {
  display: inline;
  visibility: visible;
  flex-grow: 0;
  accent-color: #e87350;
  height: 16px;
  margin: 0 10px 0 0;
}

.chat-input {
  display: flex;
  gap: var(--form-element-margin);
  padding: 0 20px;
  align-items: center;
}
.chat-input .field.text-input {
  width: 100%;
  flex-grow: 1;
  margin-bottom: 0;
}
.chat-input .field.text-input input {
  width: 100%;
  height: 40px;
}
.chat-input button {
  width: 40px;
  height: 40px;
}

.chat-attachments {
  display: flex;
  gap: var(--form-element-margin);
  padding: 0 63px;
  flex-wrap: wrap;
}

.chat-input-outer-wrapper .attachment, .chat-message .attachment, .chat-attachments .attachment {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 200px;
  height: 40px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--fg-soft);
  cursor: pointer;
}
.chat-input-outer-wrapper .attachment.failed, .chat-message .attachment.failed, .chat-attachments .attachment.failed {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
.chat-input-outer-wrapper .attachment.failed .attachment-icon, .chat-input-outer-wrapper .attachment.failed .attachment-name, .chat-message .attachment.failed .attachment-icon, .chat-message .attachment.failed .attachment-name, .chat-attachments .attachment.failed .attachment-icon, .chat-attachments .attachment.failed .attachment-name {
  color: var(--fg-danger);
}
.chat-input-outer-wrapper .attachment .image, .chat-message .attachment .image, .chat-attachments .attachment .image {
  width: inherit;
  height: inherit;
  object-fit: cover;
}
.chat-input-outer-wrapper .attachment .attachment-icon, .chat-message .attachment .attachment-icon, .chat-attachments .attachment .attachment-icon {
  color: var(--fg-primary);
  font-size: 20px;
  margin-right: 6px;
}
.chat-input-outer-wrapper .attachment .attachment-name, .chat-message .attachment .attachment-name, .chat-attachments .attachment .attachment-name {
  font-size: var(--fs-body-sm);
  color: var(--fg-soft);
  max-width: 80%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.chat-input-outer-wrapper .attachment .spin, .chat-message .attachment .spin, .chat-attachments .attachment .spin {
  animation: spinner 1s linear;
  animation-iteration-count: infinite;
}
.chat-input-outer-wrapper .attachment button.icon.danger, .chat-message .attachment button.icon.danger, .chat-attachments .attachment button.icon.danger {
  position: absolute;
  right: 0;
  top: 4px;
  width: 30px;
  height: 30px;
  margin: 0 0.25rem 0 0;
}

.chat-file-input {
  display: none;
}

.chat-container-group-users {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--bg-element);
  border-radius: var(--radius);
  padding: 3px 0 3px 3px;
  margin-left: 1em;
  cursor: pointer;
}
.chat-container-group-users .user-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  width: 32px;
  height: 32px;
  background: var(--fg-button);
  color: var(--fg-primary);
  border: 1px solid var(--fg-primary);
  border-radius: var(--radius);
  margin-right: -4px;
}
.chat-container-group-users .user-avatar:nth-child(1) {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
.chat-container-group-users .user-avatar:nth-child(2) {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
.chat-container-group-users .users-length {
  font-size: 13px;
  line-height: 22px;
  padding: 0 8px 0 12px;
  color: var(--fg-soft);
}

.content-schedule {
  margin: var(--form-element-margin) 0;
}
.content-schedule > :first-child {
  margin-top: 0;
}
.content-schedule > :last-child {
  margin-bottom: 0;
}
.content-schedule > span {
  font-weight: 600;
  font-size: var(--fs-button);
  color: var(--fg-primary);
  text-transform: uppercase;
  margin: 12px 0 0 var(--radius);
}
.content-schedule > button {
  margin-top: 1rem;
}
.content-schedule > .date-time-picker .input-wrapper {
  margin-top: 0;
  width: 100%;
}
.content-schedule > .date-time-picker .input-wrapper .input-set {
  grid-template-columns: 1.15fr 1fr;
}
.content-schedule > .date-time-picker .input-wrapper .input-set input {
  font-size: 0.9rem;
}

/**
 * course-carousel.scss
 *
 * carousels, grids and lectures on course pages.
 */
:is(.course-carousels, .course-grids) {
  --card-shadow: 1px 1px 10px 0px rgba(0,0,0,0.15);
  --poster-width: 200px;
  --card-margin: 16px;
  --card-padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 245px;
  padding-bottom: var(--lh-body);
  column-gap: 0;
}
@media screen and (max-width: 1366px) {
  :is(.course-carousels, .course-grids) {
    grid-template-columns: 1fr 1fr;
  }
  :is(.course-carousels, .course-grids) .course-carousel, :is(.course-carousels, .course-grids) .course-grid {
    grid-column: span 2;
  }
}
@media screen and (max-width: 767px) {
  :is(.course-carousels, .course-grids) {
    display: block;
  }
}

:is(.course-carousel, .course-grid) {
  grid-column: span 3;
}
:is(.course-carousel, .course-grid).disabled {
  filter: grayscale(100%) brightness(94%) opacity(31%) contrast(110%);
}
:is(.course-carousel, .course-grid).disabled, :is(.course-carousel, .course-grid).disabled * {
  pointer-events: none;
}

:is(.course-grid, .course-lecture-summary) > h2 {
  /* structurally this is h2, but stylistically it's h3 ... */
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  color: transparent;
  --fade-in-text-color: var(--fg-primary);
  animation: fade-in-text var(--anim-step) ease forwards;
  animation-delay: var(--anim-step);
  position: relative;
}
:is(.course-grid, .course-lecture-summary) > h2::after {
  content: " ";
  position: absolute;
  animation: section-title-underline calc(2 * var(--anim-step)) ease forwards;
  bottom: -4px;
  left: 0;
  width: var(--underline-width);
  height: 1px;
  background: var(--bg-element);
}
@media screen and (max-width: 1366px) {
  :is(.course-grid, .course-lecture-summary) > h2 {
    margin-left: 15px;
  }
}
:is(.course-grid, .course-lecture-summary).disabled {
  filter: grayscale(100%) brightness(94%) opacity(31%) contrast(110%);
}
:is(.course-grid, .course-lecture-summary).disabled, :is(.course-grid, .course-lecture-summary).disabled * {
  pointer-events: none;
}

.course-lecture-summary {
  --poster-height: calc(var(--poster-width) * 1.5);
}
.course-lecture-summary:nth-of-type(2n) {
  grid-column: 2;
}
.course-lecture-summary:nth-of-type(2n+1), .course-lecture-summary:nth-of-type(1) {
  grid-column: 1;
}
.course-lecture-summary .meta {
  display: grid;
  grid-template-columns: var(--poster-width) auto;
  grid-template-rows: 1fr auto;
  flex-direction: row;
  column-gap: var(--card-margin);
  row-gap: 0;
  align-items: center;
  padding: var(--card-padding);
  margin: var(--card-margin);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  flex-shrink: 0;
  flex-grow: 0;
}
@media screen and (max-width: 767px) {
  .course-lecture-summary .meta {
    margin-right: 8px;
  }
}
.course-lecture-summary .meta .poster {
  grid-row: span 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  flex-grow: 0;
  width: var(--poster-width);
  height: var(--poster-height);
  border-radius: var(--radius);
  background-position: center;
  background-size: cover;
  color: transparent;
  position: relative;
}
.course-lecture-summary .meta .poster .quick-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: background-color 0.3s ease;
}
.course-lecture-summary .meta .poster .quick-view button {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.course-lecture-summary .meta .poster:hover .quick-view:not(.no-hover) {
  background-color: rgba(255, 255, 255, 0.5);
}
.course-lecture-summary .meta .poster:hover .quick-view:not(.no-hover) button {
  opacity: 1;
}
.course-lecture-summary .meta .description {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--fg-soft);
  align-self: flex-start;
  height: calc(var(--poster-height) - 44px);
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
.course-lecture-summary .meta .description p:first-of-type {
  margin-top: 0;
}
.course-lecture-summary .meta .description:not(.poster + .description) {
  grid-column: span 2;
}
.course-lecture-summary .meta a.button {
  width: 90px;
  height: 40px;
  align-self: flex-end;
  margin: 0 auto;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}
.course-lecture-summary .meta a.button:not(.poster + .description + .button) {
  grid-column: span 2;
  margin: 0 auto;
}

.cutout {
  border-radius: var(--radius);
  width: var(--tab-width);
  display: flex;
  flex-basis: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  border: 1px dashed var(--fg-primary);
  padding: 0.5em;
}

/**
 * Special modal handling for dashboard layouts.
 */
@media screen and (max-width: 1366px) {
  body.dashboard.modal-open #modal {
    padding-left: 0;
  }
}

.date-time-picker {
  display: flex;
  justify-content: stretch;
  width: 100%;
  max-width: var(--form-element-width);
  margin: var(--form-element-margin) 0;
}
.date-time-picker div[role=group] {
  margin: 0;
  width: 100%;
}
.date-time-picker div[role=group] label {
  width: 100%;
  display: none;
}
.date-time-picker div[role=group] .input-set {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-column-gap: 12px;
  margin: 0;
}
.date-time-picker div[role=group] input {
  width: 100%;
  position: relative;
  margin: 0;
}
.date-time-picker div[role=group] input::-webkit-calendar-picker-indicator {
  position: absolute;
  margin: 0;
  right: 8px;
  top: 11px;
}

/**
 * file-picker.scss
 *
 * Styles for the file-picker component: `ui/components/form-validated/file-picker`
 */
.file-picker {
  width: var(--form-element-width);
}
.file-picker .tab-container {
  --tab-width: var(--form-element-width);
}
.file-picker .cutout {
  height: 150px;
  min-width: var(--form-element-width);
}
.file-picker .cutout div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.file-picker .cutout div > button, .file-picker .cutout div > label {
  margin: 6px 0;
}
.file-picker .cutout div > label {
  width: var(--form-element-width);
  height: 45px;
  border-radius: var(--radius);
  flex-shrink: 0;
  flex-grow: 0;
  /* generally buttons should be fixed-size */
  width: auto;
  display: flex;
  flex-direction: row;
  flex-shrink: 1;
  flex-wrap: nowrap;
  margin: var(--form-element-margin) auto;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-body);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  text-transform: uppercase;
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
  /* faux buttons are elements that look like buttons but aren't interactable */
  display: flex;
}
.file-picker .cutout div > label > span, .file-picker .cutout div > label label span {
  display: inline-flex;
  font-family: var(--font-stack-spaced);
  flex-shrink: 1;
  flex-grow: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: inherit;
  user-select: none;
}
.file-picker .cutout div > label i:is(.fa, .fas, .far) {
  display: flex;
  justify-content: center;
  width: 1rem;
  font-size: var(--fs-body-sm);
  margin: 0 0.55rem -1px;
}
.file-picker .cutout div > label i:is(.fa, .fas, .far):first-child {
  margin-left: 0;
}
.file-picker .cutout div > label i:is(.fa, .fas, .far):last-child {
  margin-right: 0;
}
.file-picker .cutout div > label.main {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  height: 50px;
}
.file-picker .cutout div > label.ok {
  background: var(--fg-secondary);
}
.file-picker .cutout div > label.warn {
  background: var(--fg-accent);
}
.file-picker .cutout div > label.danger {
  background: var(--fg-danger);
}
.file-picker .cutout div > label.secondary {
  background: var(--fg-secondary);
}
.file-picker .cutout div > label.alternate {
  background: var(--fg-alternate);
}
.file-picker .cutout div > label:is(:hover, :active, :focus) {
  opacity: 0.8;
  outline: 0;
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.file-picker .cutout div > label:is(:hover, :active, :focus).ok {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.file-picker .cutout div > label:is(:hover, :active, :focus).warn {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.file-picker .cutout div > label:is(:hover, :active, :focus).danger {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.file-picker .cutout div > label:is(:hover, :active, :focus).secondary {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.file-picker .cutout div > label:is(:hover, :active, :focus).alternate {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.file-picker .cutout div > label.icon {
  width: calc(var(--form-element-height) - 2px);
  height: calc(var(--form-element-height) - 2px);
}
.file-picker .cutout div > label.icon i:is(.fa, .fas, .far) {
  margin: 0 0 -3px;
}
.file-picker .cutout div > label.stand-in {
  background: var(--bg-body);
  border: 2px dashed var(--fg-primary);
  color: var(--fg-primary);
  height: var(--form-element-height);
  width: fit-content;
}
.file-picker .cutout div > label.stand-in.secondary {
  color: var(--fg-secondary);
  border-color: var(--fg-secondary);
}
.file-picker .cutout div > label.stand-in.alternate {
  color: var(--fg-alternate);
  border-color: var(--fg-alternate);
}
.file-picker .cutout div > label.stand-in:is(.accent, .warn) {
  color: var(--fg-accent);
  border-color: var(--fg-accent);
}
.file-picker .cutout div > label.stand-in:is(.danger, .error) {
  color: var(--fg-danger);
  border-color: var(--fg-danger);
}
.file-picker .cutout div > label.inverse {
  background: var(--bg-body);
  border: 1px solid var(--fg-primary);
  color: var(--fg-primary);
}
.file-picker .cutout div > label.inverse:focus {
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.file-picker .cutout div > label.inverse:is(.ok, .secondary) {
  border-color: var(--fg-secondary);
  color: var(--fg-secondary);
}
.file-picker .cutout div > label.inverse:is(.ok, .secondary):focus {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.file-picker .cutout div > label.inverse.warn {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
.file-picker .cutout div > label.inverse.warn:focus {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.file-picker .cutout div > label.inverse.danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
.file-picker .cutout div > label.inverse.danger:focus {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.file-picker .cutout div > label.inverse.alternate {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
.file-picker .cutout div > label.inverse.alternate:focus {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.file-picker .cutout div > label.inline {
  width: 50px;
}
.file-picker .cutout div > label.subtle {
  border-radius: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: transparent;
  border: none;
  vertical-align: center;
  width: auto;
  height: auto;
  margin: 0.5rem auto;
  text-transform: none;
  font-weight: normal;
  color: var(--fg-primary);
}
.file-picker .cutout div > label.subtle span {
  font-family: var(--font-stack-default);
}
.file-picker .cutout div > label.subtle:is(.forward, .back) i.fa {
  margin: 2px 0 0 0;
}
.file-picker .cutout div > label.subtle:is(:focus, :hover, :active) {
  outline: 0;
  box-shadow: unset;
  border: none;
  text-decoration: underline;
}
.file-picker .cutout div > label.subtle.primary {
  color: var(--fg-primary);
}
.file-picker .cutout div > label.subtle.secondary, .file-picker .cutout div > label.subtle.ok {
  color: var(--fg-secondary);
}
.file-picker .cutout div > label.subtle.alternate {
  color: var(--fg-accent);
}
.file-picker .cutout div > label.subtle.accent, .file-picker .cutout div > label.subtle.warning {
  color: var(--fg-accent);
}
.file-picker .cutout div > label.subtle.danger {
  color: var(--fg-danger);
}
.file-picker .cutout div > label:is(:disabled, .disabled) {
  color: var(--bg-element);
  background: var(--bg-main);
}
.file-picker .cutout div > label:is(:disabled, .disabled):is(.inverse, .stand-in) {
  opacity: 1;
  border-color: var(--bg-main);
  color: var(--bg-main);
  background: none;
}
.file-picker .cutout div > label:is(:disabled, .disabled).subtle {
  color: var(--bg-main);
  background: none;
  text-decoration: none;
}
.file-picker .cutout div > label:is(.disabled, :disabled, .faux) {
  cursor: default;
  pointer-events: none;
}
.file-picker .cutout div > label:is(.disabled, :disabled, .faux):is(:hover, :active, :focus) {
  opacity: 1;
  outline: 0;
  box-shadow: unset;
}
.file-picker .cutout div > label:is(.disabled, :disabled, .faux):is(.inverse, .stand-in):is(:focus, :active, :hover) {
  outline: 0;
  box-shadow: unset;
}
.file-picker .cutout div > span:not(.cameo) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.file-picker .cutout .cameo-file {
  text-transform: uppercase;
  font-weight: 600;
  width: calc(var(--form-element-width) - 2em);
  /* size of button margin +1 px (because stand-in has 2px border) */
  margin: 13px auto;
}
.file-picker .cutout .cameo-file.ok {
  border-color: var(--fg-primary);
  color: var(--fg-primary);
}
.file-picker .cutout .cameo-file.danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
.file-picker .cutout .cameo-file .label {
  text-align: center;
}
.file-picker .cutout .file-keep .cameo-file .label {
  margin-right: 2rem;
}
.file-picker .cutout .file-name {
  display: flex;
  align-items: center;
}
.file-picker .cutout .file-name i {
  margin-left: 0.5em;
}
.file-picker .cutout input[type=file] {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 1px;
  height: 1px;
  border: 0;
  outline: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}
.file-picker .tabs {
  height: 150px;
}

.file-upload-button {
  display: flex;
  flex-direction: column;
  width: var(--form-element-width);
  height: 45px;
  border-radius: var(--radius);
  flex-shrink: 0;
  flex-grow: 0;
  /* generally buttons should be fixed-size */
  width: auto;
  display: flex;
  flex-direction: row;
  flex-shrink: 1;
  flex-wrap: nowrap;
  margin: var(--form-element-margin) auto;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-body);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  text-transform: uppercase;
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
  /* faux buttons are elements that look like buttons but aren't interactable */
}
.file-upload-button > span, .file-upload-button label span {
  display: inline-flex;
  font-family: var(--font-stack-spaced);
  flex-shrink: 1;
  flex-grow: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: inherit;
  user-select: none;
}
.file-upload-button i:is(.fa, .fas, .far) {
  display: flex;
  justify-content: center;
  width: 1rem;
  font-size: var(--fs-body-sm);
  margin: 0 0.55rem -1px;
}
.file-upload-button i:is(.fa, .fas, .far):first-child {
  margin-left: 0;
}
.file-upload-button i:is(.fa, .fas, .far):last-child {
  margin-right: 0;
}
.file-upload-button.main {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  height: 50px;
}
.file-upload-button.ok {
  background: var(--fg-secondary);
}
.file-upload-button.warn {
  background: var(--fg-accent);
}
.file-upload-button.danger {
  background: var(--fg-danger);
}
.file-upload-button.secondary {
  background: var(--fg-secondary);
}
.file-upload-button.alternate {
  background: var(--fg-alternate);
}
.file-upload-button:is(:hover, :active, :focus) {
  opacity: 0.8;
  outline: 0;
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.file-upload-button:is(:hover, :active, :focus).ok {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.file-upload-button:is(:hover, :active, :focus).warn {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.file-upload-button:is(:hover, :active, :focus).danger {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.file-upload-button:is(:hover, :active, :focus).secondary {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.file-upload-button:is(:hover, :active, :focus).alternate {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.file-upload-button.icon {
  width: calc(var(--form-element-height) - 2px);
  height: calc(var(--form-element-height) - 2px);
}
.file-upload-button.icon i:is(.fa, .fas, .far) {
  margin: 0 0 -3px;
}
.file-upload-button.stand-in {
  background: var(--bg-body);
  border: 2px dashed var(--fg-primary);
  color: var(--fg-primary);
  height: var(--form-element-height);
  width: fit-content;
}
.file-upload-button.stand-in.secondary {
  color: var(--fg-secondary);
  border-color: var(--fg-secondary);
}
.file-upload-button.stand-in.alternate {
  color: var(--fg-alternate);
  border-color: var(--fg-alternate);
}
.file-upload-button.stand-in:is(.accent, .warn) {
  color: var(--fg-accent);
  border-color: var(--fg-accent);
}
.file-upload-button.stand-in:is(.danger, .error) {
  color: var(--fg-danger);
  border-color: var(--fg-danger);
}
.file-upload-button.inverse {
  background: var(--bg-body);
  border: 1px solid var(--fg-primary);
  color: var(--fg-primary);
}
.file-upload-button.inverse:focus {
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.file-upload-button.inverse:is(.ok, .secondary) {
  border-color: var(--fg-secondary);
  color: var(--fg-secondary);
}
.file-upload-button.inverse:is(.ok, .secondary):focus {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.file-upload-button.inverse.warn {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
.file-upload-button.inverse.warn:focus {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.file-upload-button.inverse.danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
.file-upload-button.inverse.danger:focus {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.file-upload-button.inverse.alternate {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
.file-upload-button.inverse.alternate:focus {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.file-upload-button.inline {
  width: 50px;
}
.file-upload-button.subtle {
  border-radius: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: transparent;
  border: none;
  vertical-align: center;
  width: auto;
  height: auto;
  margin: 0.5rem auto;
  text-transform: none;
  font-weight: normal;
  color: var(--fg-primary);
}
.file-upload-button.subtle span {
  font-family: var(--font-stack-default);
}
.file-upload-button.subtle:is(.forward, .back) i.fa {
  margin: 2px 0 0 0;
}
.file-upload-button.subtle:is(:focus, :hover, :active) {
  outline: 0;
  box-shadow: unset;
  border: none;
  text-decoration: underline;
}
.file-upload-button.subtle.primary {
  color: var(--fg-primary);
}
.file-upload-button.subtle.secondary, .file-upload-button.subtle.ok {
  color: var(--fg-secondary);
}
.file-upload-button.subtle.alternate {
  color: var(--fg-accent);
}
.file-upload-button.subtle.accent, .file-upload-button.subtle.warning {
  color: var(--fg-accent);
}
.file-upload-button.subtle.danger {
  color: var(--fg-danger);
}
.file-upload-button:is(:disabled, .disabled) {
  color: var(--bg-element);
  background: var(--bg-main);
}
.file-upload-button:is(:disabled, .disabled):is(.inverse, .stand-in) {
  opacity: 1;
  border-color: var(--bg-main);
  color: var(--bg-main);
  background: none;
}
.file-upload-button:is(:disabled, .disabled).subtle {
  color: var(--bg-main);
  background: none;
  text-decoration: none;
}
.file-upload-button:is(.disabled, :disabled, .faux) {
  cursor: default;
  pointer-events: none;
}
.file-upload-button:is(.disabled, :disabled, .faux):is(:hover, :active, :focus) {
  opacity: 1;
  outline: 0;
  box-shadow: unset;
}
.file-upload-button:is(.disabled, :disabled, .faux):is(.inverse, .stand-in):is(:focus, :active, :hover) {
  outline: 0;
  box-shadow: unset;
}
.file-upload-button i:is(.fa, .fas, .far) {
  margin-left: 0;
}
.file-upload-button .file-upload-input {
  display: none;
}

/**
 * Header is a row-wise flex layout with several possible children:
 * - nav: the navigation sidebar (left-justified)
 *   - button.sidebar-toggle: toggles the sidebar open/closed
 *   - .sidebar: the fly-out navigation sidebar
 * - h1: the page title (admin area only, center justified)
 * - figure.logo: the centered logo (right-justified in admin area)
 * - form#search: the search form (not present in admin area)
 * - button#search-toggle: a button toggling the fly-out search bar (mobile only)
 */
body {
  --header-height: 70px;
  --header-padding: 2rem;
  --sidebar-width: 20rem;
  --horizontal-menu-height: 50px;
}

header {
  position: sticky;
  top: 0;
  z-index: 1000;
  max-height: var(--header-height);
  width: 100%;
  max-width: 100vw;
  padding: 0 var(--header-padding);
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow-x: visible; /* override general body > * overflow-x */
  background: var(--bg-body);
  border-bottom: 1px solid var(--bg-element);
  animation: fade-in-opacity var(--anim-step) ease;
  /** included in header element rule: header/index.scss **/
  /* the page title */
  /**
   * Target iOS devices only.
   */
  /**
   * Target non-iOS devices.
   */
  /**
   * rounded corners
   */
  /** things that shouldn't resize to flex containers */
  /**
   * values greater than the variables below will set breaksizes for corresponding
   * screen sizes. This is screen-width, not height.
   */
  /* above HD */
  /* HD desktop */
  /* Mid-sized desktop/laptop */
  /* Mid-sized desktop/laptop */
  /* tablet/phablet */
  /* phone */
  /**
   * Mixin for responsive breaksizes. Possible $size values:
   * - large: HD+ desktops
   * - medium: Mid-size desktop/laptop
   * - small: tablet/phablet
   * - tiny: mobile phone
   * - <px>: specific size in pixel units, e.g. 256px
   */
  /**
   Navigation Menu

   This file is included directly inside the `header` element rule. The default
   layout is a vertical fly-out menu, with sub-menus that fly out from under the
   parent menu.

   In dashboards, the top-level menu is always open and sub-menus use the fly-out
   behavior.

   In horizontal layout the top-level menu is a horizontal bar and sub-menus
   are displayed in nested dropdowns.

   &.dashboard [...] - stuff specific to dashboard layouts
   &.horizontal [...] - stuff specific to horizontal layouts

   Element hierarchy and links:

   #Nav                  | nav                              - main nav container
   #Sidebar_Toggle       | > .sidebar-toggle                - toggles main sidebar open in modal view
   #Sidebar              | > .sidebar                       - container for a menu and elements that are displayed with it
   #List                 |   > .list                        - contains list of menu entries
   #Pad                  |     > .pad                       - padding element to adjust vertical position of menus in vertical layout
   #HR                   |     > hr                         - keyline separators in vertical & dashboard menus
   #List_Item            |     > .item                      - wrappers for entries in a menu list
                         |     | > a, span,                 - normal list item link
   #Sub_Menu_Handle      |     | > .sub-menu-handle         - container for icon, label and other accessories of a list item with a sub-menu
   #List_Item_Icon       |     | | > i.fa                   - icon for display with the entry
                         |     | | > span                   - text label
   #Sub_Menu_Open_Button |     | | > .sub-menu-open-button  - opens the sub-menu in touch interfaces
   #Sub_Menu             |     | > &.sub-menu               - a list item entry with its own sub-menu
   #Sub_Menu_Sidebar     |     | | > .sidebar               - same hierarchy as nav > .sidebar
   #Menu_Hamburger       |     > .menu-hamburger            - container for overflow items in horizontal layout
   #Menu_Close           |     > .close                     - close button for exiting the menu in touch interfaces
  **/
  /** included in header element rule: header/index.scss **/
  /**
   * Target iOS devices only.
   */
  /**
   * Target non-iOS devices.
   */
  /**
   * rounded corners
   */
  /** things that shouldn't resize to flex containers */
  /**
   * values greater than the variables below will set breaksizes for corresponding
   * screen sizes. This is screen-width, not height.
   */
  /* above HD */
  /* HD desktop */
  /* Mid-sized desktop/laptop */
  /* Mid-sized desktop/laptop */
  /* tablet/phablet */
  /* phone */
  /**
   * Mixin for responsive breaksizes. Possible $size values:
   * - large: HD+ desktops
   * - medium: Mid-size desktop/laptop
   * - small: tablet/phablet
   * - tiny: mobile phone
   * - <px>: specific size in pixel units, e.g. 256px
   */
  /* /avatar-container */
}
header button { /* applies to both search form buttons and sidebar-toggle button */
  border: 0;
  background: transparent;
  color: var(--color-secondary);
}
header button:focus, header button:active, header button:hover {
  outline: 0;
  color: var(--color-secondary-hi);
}
header .header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 42vw;
}
header .with-back-button-container + .header-right {
  width: auto;
}
header h1 {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: bold;
  align-self: center;
  animation: fade-in-opacity var(--anim-step) ease forwards;
  animation-delay: var(--anim-step);
  white-space: nowrap;
}
header.dashboard h1 {
  font-weight: 500;
  text-align: left;
  font-size: var(--fs-sh);
  opacity: 1;
  animation: none;
}
@keyframes sidebar-list {
  0% {
    opacity: 0;
    display: none;
  }
  1% {
    opacity: 0;
    display: block;
  }
  99% {
    opacity: 1;
    display: block;
  }
  100% {
    opacity: 1;
    display: block;
  }
}
@keyframes sidebar-greet {
  0% {
    opacity: 0;
    display: none;
  }
  1% {
    opacity: 0;
    display: flex;
  }
  99% {
    opacity: 1;
    display: flex;
  }
  100% {
    opacity: 1;
    display: flex;
  }
}
@keyframes submenu-sidebar {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes sidebar-fly-out {
  0% {
    transform: translateX(calc(-1 * var(--total-width) - var(--left-margin)));
    opacity: 0;
    box-shadow: none;
  }
  100% {
    transform: translateX(calc(-1 * var(--left-margin)));
    opacity: 1;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.15);
  }
}
header nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 42vw;
  opacity: 0;
  animation: fade-in-opacity var(--anim-step) ease forwards;
  z-index: 10;
}
@media screen and (min-width: 768px) {
  header.horizontal nav {
    position: absolute;
    width: 100%;
    left: 0;
    top: var(--header-height);
  }
}
header.dashboard nav {
  align-self: flex-start;
  opacity: 1;
  animation: none;
  width: auto;
}
header.dashboard .sidebar-toggle {
  display: none;
}
@media screen and (min-width: 768px) {
  header.horizontal .sidebar-toggle {
    display: none;
  }
}
header nav.active .sidebar-toggle i.on {
  display: none;
}
header nav.active .sidebar-toggle i.off {
  display: block;
}
header nav.active .sidebar-toggle .list {
  animation: sidebar-list var(--anim-step) ease forwards;
  opacity: 1;
}
header .sidebar {
  --left-margin: calc(calc(100vw - var(--body-width)) / 2);
  --total-width: calc(var(--sidebar-width) + var(--left-margin));
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  position: absolute;
  width: var(--total-width);
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1000;
  padding-top: var(--header-height);
  transform: translateX(calc(-1 * var(--total-width) - var(--left-margin)));
  background: var(--bg-body);
  color: var(--fg-primary);
  border: 0;
}
@media screen and (max-width: 767px) {
  header .sidebar {
    border-right: 0;
  }
}
header:not(.horizontal) nav.active > .sidebar {
  display: flex;
  animation: sidebar-fly-out var(--anim-step) ease forwards;
}
@media screen and (max-width: 767px) {
  header.horizontal nav.active > .sidebar {
    display: flex;
    animation: sidebar-fly-out var(--anim-step) ease forwards;
  }
}
header.dashboard > nav > .sidebar {
  display: flex;
  position: fixed;
  top: var(--header-height);
  border-right: 1px solid var(--bg-element);
  transform: none;
  padding-top: 1em;
  width: var(--sidebar-width);
  height: calc(100vh - var(--header-height));
}
header.dashboard > nav > .sidebar .sidebar {
  display: none;
}
@media screen and (min-width: 768px) {
  header.horizontal > nav > .sidebar {
    display: flex;
    width: 100%;
    height: var(--horizontal-menu-height);
    transform: unset;
    box-shadow: unset;
    flex-direction: row;
    justify-content: unset;
    align-items: unset;
    animation: unset;
    padding: 0;
    border-bottom: 1px solid var(--bg-element);
  }
}
@media screen and (min-width: 768px) {
  header.horizontal .sub-menu .sidebar {
    position: absolute;
    display: none;
    max-height: 300px;
    height: auto;
    width: var(--sidebar-width);
    top: var(--horizontal-menu-height);
    left: calc(var(--sidebar-width) / -2 + 4rem);
    transform: unset !important;
    padding-top: 0;
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.15);
    border-radius: var(--radius);
    transition: none;
  }
  header.horizontal .sub-menu .sidebar .sub-menu .sidebar {
    position: absolute;
    top: 0;
    left: 100%;
  }
  header.horizontal .sub-menu .sidebar .sub-menu .sidebar.to-left {
    left: -100%;
  }
}
@media screen and (min-width: 768px) {
  header.horizontal .sub-menu:is(.active, :hover, :focus, :active) > .sidebar {
    display: flex;
  }
}
@media screen and (min-width: 768px) {
  header.horizontal .sidebar .menu-hamburger.hidden {
    display: none;
  }
  header.horizontal .sidebar .menu-hamburger > .sidebar > .list {
    display: block !important;
  }
  header.horizontal .sidebar .menu-hamburger > .sidebar > .list .sub-menu.item-hamburger.opened .sidebar {
    display: flex;
    opacity: 1;
    animation: unset;
  }
  header.horizontal .sidebar .menu-hamburger > .sidebar > .list .sub-menu.item-hamburger span:active, header.horizontal .sidebar .menu-hamburger > .sidebar > .list .sub-menu.item-hamburger span:focus {
    background: unset;
    color: var(--fg-primary);
  }
  header.horizontal .sidebar .menu-hamburger > .sub-menu-handle i {
    display: flex !important;
    transform: none;
  }
}
header .list {
  font-size: var(--fs-sidebar);
  font-weight: normal;
  text-transform: uppercase;
  animation: sidebar-list var(--anim-step) ease both;
  overflow-y: auto;
  flex-grow: 1;
}
header .list .list {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-top: 0;
  width: auto;
}
header.dashboard .list {
  opacity: 1;
  display: block;
  width: 100%;
  overflow-y: unset;
}
header.dashboard .list hr:first-of-type {
  display: none;
}
@media screen and (max-width: 1366px) {
  header.dashboard .list {
    padding-left: 0;
  }
}
@media screen and (min-width: 768px) {
  header.horizontal .list {
    width: 100%;
    opacity: 1;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    overflow: unset;
  }
  header.horizontal .list.space-evenly {
    justify-content: space-evenly;
  }
  header.horizontal .list .list {
    justify-content: center;
    margin-top: 0;
  }
  header.horizontal .list .list .pad {
    display: none;
  }
}
header .list > .pad {
  flex-shrink: 1;
  flex-grow: 0;
}
@media screen and (min-width: 768px) {
  header.horizontal .list > .pad {
    display: none;
  }
}
header .list > .item {
  --item-height: calc(1rem + var(--lh-body));
  height: var(--item-height);
  /* /.list .item a */
}
header .list > .item > :is(a, span.sub-menu-handle, span.no-link) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%; /* must use calc here to derive a pixel width or ellipsis breaks */
  height: var(--item-height);
  overflow: hidden;
  padding: 0.5rem 1rem 0.5rem 4.5rem;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--fg-primary);
  transition: all var(--anim-step) ease;
}
header .list > .item > :is(a, span.sub-menu-handle, span.no-link) > span {
  flex-grow: 1;
}
header .list > .item > :is(a, span.sub-menu-handle, span.no-link) i {
  width: var(--fs-sidebar);
  /** point below is to center these with the user icon */
  transform: translateX(calc(var(--fs-sidebar) * -1 - 0.5 * var(--fs-body)));
}
@media screen and (max-width: 767px) {
  header .list > .item > :is(a, span.sub-menu-handle, span.no-link) {
    width: 100vw;
    margin: 0;
    padding-left: 70px;
    font-size: 1.25rem;
    text-transform: uppercase;
  }
}
header .list > .item:is(.active, :hover, :focus, :active) > a,
header .list > .item > a:is(.active, :hover, :focus, :active) {
  color: var(--bg-element);
  background: var(--fg-primary);
  outline: 0;
  border: 0;
}
header .list > .item:is(.active, :hover, :focus, :active) > .no-link,
header .list > .item > .no-link:is(.active, :hover, :focus, :active) {
  color: var(--bg-body);
  background: var(--bg-main);
}
header.dashboard .list > .item > :is(a, span.sub-menu-handle, span.no-link) {
  padding-left: 3.25rem;
}
@media screen and (max-width: 767px) {
  header.dashboard .list > .item > :is(a, span.sub-menu-handle, span.no-link) {
    font-size: var(--fs-sidebar);
  }
}
@media screen and (min-width: 768px) {
  header.horizontal .list > .item {
    --item-height: var(--horizontal-menu-height);
    position: relative;
    white-space: nowrap;
  }
  header.horizontal .list > .item > :is(a, span.sub-menu-handle, span.no-link) {
    --half-pad: calc(calc(var(--item-height) - var(--lh-body)) / 2);
    padding: var(--half-pad) 10px;
  }
  header.horizontal .list > .item > :is(a, span.sub-menu-handle, span.no-link) > .fa {
    display: none;
  }
  header.horizontal .list > .item .list > .item > :is(a, span.sub-menu-handle, span.no-link) {
    width: var(--sidebar-width);
  }
  header.horizontal .list > .item a, header.horizontal .list > .item span {
    font-weight: 600;
  }
}
@media screen and (min-width: 768px) {
  header.horizontal .sub-menu-handle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 50px;
    padding: 0 10px !important;
  }
  header.horizontal .sub-menu-handle > span {
    flex-grow: 1;
  }
  header.horizontal .sub-menu-handle > .fa {
    transform: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 767px) {
  header.horizontal .sub-menu-handle {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  header.horizontal .sub-menu-handle .sub-menu .sub-menu-handle {
    padding: 0;
  }
}
header .sub-menu-open-button {
  display: none;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  width: calc(var(--item-height) / 2);
  height: calc(var(--item-height) / 2);
  flex-grow: 0;
  flex-shrink: 1;
  border-radius: 100%;
  text-align: center;
}
header .sub-menu-open-button:hover {
  color: var(--bg-body);
  background: var(--bg-element);
}
header .sub-menu-open-button i {
  transform: none !important;
  font-size: inherit;
}
@media screen and (max-width: 767px) {
  header .sub-menu-open-button {
    display: flex;
  }
}
@media screen and (min-width: 768px) {
  header.horizontal .sub-menu-open-button {
    display: flex;
    font-size: var(--fs-sidebar);
  }
  header.horizontal .sub-menu-open-button i {
    display: inline;
  }
}
@media screen and (min-width: 768px) {
  header.horizontal .list:not(.list .list) > .item > :is(a, span.sub-menu-handle, span.no-link) > .sub-menu-open-button {
    display: none;
  }
}
@media screen and (max-width: 1366px) {
  header:not(.horizontal) .list .list > .item > :is(a, span.sub-menu-handle, span.no-link) {
    padding-left: 3.5rem;
    padding-right: 2.5rem;
  }
}
header .list hr {
  width: calc(var(--sidebar-width) - 3rem - var(--fs-sidebar));
  height: 1px;
  margin: 1rem 2rem calc(1rem - 1px) calc(var(--fs-sidebar) + 1rem);
  background-color: var(--bg-element);
}
@media screen and (min-width: 768px) {
  header.horizontal .list hr {
    display: none;
  }
}
header .sub-menu .sidebar {
  width: auto;
  justify-content: flex-start;
  cursor: pointer;
  padding-top: 0;
  left: 100%;
  transform: none;
  opacity: 0;
  box-shadow: 25px 0 25px 0px rgba(0, 0, 0, 0.15), inset 10px 0 10px 0 rgba(0, 0, 0, 0.05);
}
header .sub-menu .sidebar .sub-menu-close {
  display: none;
}
@media screen and (max-width: 767px) {
  header .sub-menu .sidebar {
    width: 100vw;
    height: 100vh;
  }
}
@media screen and (min-width: 768px) {
  header .list > .sub-menu:is(.active, :hover, :focus, :active) > .sidebar {
    display: flex;
    animation: submenu-sidebar var(--anim-step) both;
  }
}
@media screen and (max-width: 767px) {
  header .list > .sub-menu.active > .sidebar {
    display: flex;
    width: 100%;
    opacity: 1;
    margin-top: var(--header-height);
    animation: none;
    box-shadow: none;
    left: 0;
  }
  header .list > .sub-menu.active > .sidebar .pad {
    display: none;
  }
  header .list > .sub-menu.active > .sidebar .sub-menu-close {
    display: block;
  }
  header .list > .sub-menu.active > .sidebar .sub-menu-open-button {
    margin-right: 0;
  }
  header .list > .sub-menu.active > .sidebar .list {
    transform: none;
    animation: none;
  }
  header .list > .sub-menu.active > .sidebar .list .sidebar {
    margin-top: 0;
  }
}
header.dashboard .list > .sub-menu:is(.active, :hover, :focus, :active) .sidebar {
  display: flex;
  width: auto;
  box-shadow: inset 10px 0 10px 0 rgba(0, 0, 0, 0.05);
  animation: submenu-sidebar var(--anim-step) both;
  border-right: 1px solid var(--bg-element);
  padding-top: 0;
  height: calc(100vh - var(--header-height));
}
header.dashboard .list > .sub-menu:is(.active, :hover, :focus, :active) .list {
  margin-top: 0;
  flex-shrink: 1;
  width: auto;
}
header.dashboard .list > .sub-menu:is(.active, :hover, :focus, :active) .list > .item a {
  padding-right: 2.5rem;
}
header .close { /* large close button at bottom of nav, mobile only */
  margin: 2rem auto;
  display: none;
  justify-self: flex-end;
  font-weight: bold;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
  background: var(--color-background);
}
@media screen and (max-width: 767px) {
  header .close {
    display: block;
  }
}
header .with-back-button-container {
  display: contents;
}
header .back-button {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 15px 2px 15px 16px;
  border-radius: 100%;
  border: 0 none;
  color: var(--fg-button);
  background-color: var(--fg-accent);
}
@media screen and (max-width: 767px) {
  header .back-button {
    margin-left: 0;
  }
}
header #main-menu-v2 .main-menu-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  height: calc(100vh - var(--header-height));
  left: 0;
  top: var(--header-height);
  z-index: 1000;
  border-right: 1px solid var(--bg-element);
  background: var(--bg-body);
  padding-top: 1em;
}
header #main-menu-v2 .main-menu-container .collapsible {
  margin-top: 0;
  padding-bottom: 0;
}
header #main-menu-v2 .item.static, header #main-menu-v2 .item.function {
  height: var(--item-height);
}
header #main-menu-v2 .item.collapsible {
  max-height: var(--item-height);
}
header #main-menu-v2 .item.collapsible:hover.open .collapse-title {
  color: var(--fg-primary);
  background: var(--bg-body);
}
header #main-menu-v2 .item.collapsible[data-collapse-level="0"] .item a, header #main-menu-v2 .item.collapsible[data-collapse-level="0"] .item .collapse-label {
  padding-left: 4.5rem;
}
header #main-menu-v2 .item.collapsible[data-collapse-level="1"] .item a, header #main-menu-v2 .item.collapsible[data-collapse-level="1"] .item .collapse-label {
  padding-left: 6rem;
}
header #main-menu-v2 .item.static, header #main-menu-v2 .item.function, header #main-menu-v2 .item.collapsible {
  --item-height: calc(1rem + var(--lh-body));
}
header #main-menu-v2 .item.static .collapse-title, header #main-menu-v2 .item.function .collapse-title, header #main-menu-v2 .item.collapsible .collapse-title {
  border: 0;
  margin: 0;
}
header #main-menu-v2 .item.static a, header #main-menu-v2 .item.static .collapse-label, header #main-menu-v2 .item.function a, header #main-menu-v2 .item.function .collapse-label, header #main-menu-v2 .item.collapsible a, header #main-menu-v2 .item.collapsible .collapse-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: var(--item-height);
  overflow: hidden;
  padding: 0.5rem 1rem 0.5rem 3.25rem;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--fg-primary);
  transition: all var(--anim-step) ease;
  font-size: var(--fs-sidebar) !important;
  text-transform: uppercase;
  margin-bottom: 0;
}
header #main-menu-v2 .item.static a i, header #main-menu-v2 .item.static .collapse-label i, header #main-menu-v2 .item.function a i, header #main-menu-v2 .item.function .collapse-label i, header #main-menu-v2 .item.collapsible a i, header #main-menu-v2 .item.collapsible .collapse-label i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--fs-sidebar);
  font-size: 14px;
  transform: translateX(-10px);
}
header #main-menu-v2 .item.static:hover:not(.open) > a, header #main-menu-v2 .item.static:hover:not(.open) .collapse-title, header #main-menu-v2 .item.function:hover:not(.open) > a, header #main-menu-v2 .item.function:hover:not(.open) .collapse-title, header #main-menu-v2 .item.collapsible:hover:not(.open) > a, header #main-menu-v2 .item.collapsible:hover:not(.open) .collapse-title {
  color: var(--fg-button);
  background: var(--fg-primary);
  outline: 0;
  border: 0;
}
header #main-menu-v2 .item.static:hover:not(.open) > a .collapse-label, header #main-menu-v2 .item.static:hover:not(.open) .collapse-title .collapse-label, header #main-menu-v2 .item.function:hover:not(.open) > a .collapse-label, header #main-menu-v2 .item.function:hover:not(.open) .collapse-title .collapse-label, header #main-menu-v2 .item.collapsible:hover:not(.open) > a .collapse-label, header #main-menu-v2 .item.collapsible:hover:not(.open) .collapse-title .collapse-label {
  color: var(--fg-button);
}
header #main-menu-v2 .entry hr {
  width: calc(var(--sidebar-width) - 3rem - var(--fs-sidebar));
  height: 1px;
  margin: 1rem 2rem calc(1rem - 1px) calc(var(--fs-sidebar) + 1rem);
  background-color: var(--bg-element);
}
header #main-menu-v2 .entry:last-child hr {
  display: none;
}
header figure.logo { /* the smartedge logo */
  margin: 0;
  padding: 0;
  width: 16vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  animation: fade-in-opacity var(--anim-step) ease both;
  animation-delay: var(--anim-step);
  z-index: -1;
}
header figure.logo a {
  height: var(--header-height);
  width: calc(var(--header-height) * 10 / 6);
  overflow: hidden;
}
header figure.logo a :is(:hover, :focus, :active) {
  border: 0;
}
header figure.logo img {
  height: var(--header-height);
  margin: 0;
  border: 0;
  width: auto;
}
header.dashboard figure.logo {
  width: auto;
}
header .logo-title {
  opacity: 0;
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  justify-content: center;
  overflow: hidden;
  max-width: 100%;
  height: calc(var(--header-height) - 1px);
  animation: fade-in-opacity var(--anim-step) ease both;
  animation-delay: var(--anim-step);
}
header .logo-title figure.logo {
  animation: none;
}
header .logo-title h1 {
  text-overflow: ellipsis;
  max-width: 100%;
  overflow: hidden;
  margin: 0;
  font-weight: 600;
  font-size: var(--fs-h3);
  animation: none;
}
@media screen and (max-width: 1366px) {
  header .logo-title {
    margin-left: 0;
  }
}
header .with-back-button-container .logo-title {
  margin-left: calc(60px + 1rem);
  margin-right: 1rem;
}
@media screen and (max-width: 767px) {
  header .with-back-button-container .logo-title {
    margin: 0;
    width: 100%;
  }
}
header.horizontal figure.logo {
  justify-content: flex-start;
  margin-top: 7px;
}
header button.sidebar-toggle { /* hamburger/X button, hidden in mobile */
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--fg-accent);
  transition: transform var(--anim-step) ease;
  z-index: 1001;
  width: 100%;
  justify-content: left;
}
header button.sidebar-toggle:hover, header button.sidebar-toggle:focus {
  opacity: 0.5;
  box-shadow: 0 0 0 0 transparent;
}
header button.sidebar-toggle > i {
  font-size: 40px;
  margin: 0;
}
header button.sidebar-toggle > i.off {
  display: none;
}
header #search {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  opacity: 0;
  animation: fade-in-opacity var(--anim-step) ease forwards;
  animation-delay: calc(2 * var(--anim-step));
  /* 1px here is the bottom border */
  height: calc(var(--header-height) - 1px);
  background: var(--bg-body);
  overflow: hidden;
  --search-width: 277px;
}
@media screen and (max-width: 767px) {
  header #search {
    /* magic number below corresponds to width - menu & avatar button */
    --search-width: calc(100vw - 165px);
  }
}
header #search #search-toggle {
  font-size: 1.5rem;
  margin-right: 1.5rem;
  z-index: 500;
  display: none;
  text-align: right;
  width: 42vw;
  transition: all var(--anim-step) ease;
}
header #search #search-toggle:not(.active) i.close {
  display: none;
}
header #search #search-toggle.active i.open {
  display: none;
}
header #search #search-toggle:is(:focus, :active, :hover) {
  opacity: 0.5;
  box-shadow: 0 0 0 0 transparent;
}
header #search input {
  width: 3rem;
  opacity: 0;
  background: var(--bg-element);
  border-width: 0px;
  padding-left: 3rem;
  margin-right: -50px;
  transition: all var(--anim-step) ease;
}
@media screen and (max-width: 767px) {
  header #search input {
    width: 100%;
    max-width: initial;
  }
}
header #search button.search, header #search button.clear {
  width: 35px;
  height: 35px;
  position: relative;
  /* scoot it over the left side of the search input */
  right: -15px;
  color: var(--fg-accent);
  transition: all var(--anim-step) ease;
}
header #search button.search:is(:focus, :active, :hover), header #search button.clear:is(:focus, :active, :hover) {
  opacity: 0.5;
  box-shadow: 0 0 0 0 transparent;
}
header #search button.search .fa, header #search button.clear .fa {
  transition: font-size var(--anim-step) ease;
  font-size: 30px;
}
header #search button.clear {
  width: 20px;
  height: 20px;
  opacity: 0;
  right: 1em;
  transform: translateX(100vw);
}
header #search button.clear .fa {
  font-size: 20px;
}
@media screen and (hover: hover) and (pointer: fine) and (max-width: 767px) {
  header #search:hover {
    position: absolute;
    right: 0;
    width: 100vw;
  }
}
@media (hover: hover) and (pointer: fine) {
  header #search:hover input {
    width: var(--search-width);
    opacity: 1;
  }
}
@media screen and (hover: hover) and (pointer: fine) and (max-width: 767px) {
  header #search:hover input {
    margin: 0;
    padding-left: 1rem;
  }
}
@media (hover: hover) and (pointer: fine) {
  header #search:hover button.search {
    color: var(--bg-main);
    right: calc(var(--search-width) - 1rem - 40px);
    width: 20px;
    height: 20px;
  }
}
@media screen and (hover: hover) and (pointer: fine) and (max-width: 767px) {
  header #search:hover button.search {
    right: 0;
    left: calc(-1 * var(--search-width) - 40px);
  }
}
@media (hover: hover) and (pointer: fine) {
  header #search:hover button.search .fa {
    font-size: var(--fs-body);
  }
  header #search:hover button.clear {
    transform: translateX(0);
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  header #search:is(:focus, :focus-within) {
    position: absolute;
    right: 55px;
    width: calc(100vw - 110px);
  }
}
header #search:is(:focus, :focus-within) input {
  width: var(--search-width);
  opacity: 1;
}
@media screen and (max-width: 767px) {
  header #search:is(:focus, :focus-within) input {
    margin: 0;
    padding-left: 1rem;
  }
}
header #search:is(:focus, :focus-within) button.search {
  color: var(--bg-main);
  right: calc(var(--search-width) - 1rem - 40px);
}
@media screen and (max-width: 767px) {
  header #search:is(:focus, :focus-within) button.search {
    display: none;
    right: 0;
    left: calc(-1 * var(--search-width) - 40px);
  }
}
header #search:is(:focus, :focus-within) button.search .fa {
  font-size: var(--fs-body);
}
header #search:is(:focus, :focus-within) button.clear {
  transform: translateX(0);
  opacity: 1;
  width: 15px;
}
header #search:is(:focus, :focus-within) button.search:focus, header #search:is(:focus, :focus-within) button.search:active, header #search:is(:focus, :focus-within) button.search:hover, header #search:is(:focus, :focus-within) button.clear:focus, header #search:is(:focus, :focus-within) button.clear:active, header #search:is(:focus, :focus-within) button.clear:hover {
  opacity: 0.5;
  box-shadow: 0 0 0 0 transparent;
}
header #avatar-container .fa {
  transition: font-size var(--anim-step) ease;
  font-size: 30px;
}
header #avatar-container .dropdown-toggle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 15px;
  border-radius: 100%;
  background-color: var(--fg-primary);
  color: var(--fg-button);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 22px;
  transition: all var(--anim-step) ease;
  cursor: pointer;
}
header #avatar-container .notification-counter, header #avatar-container .counter {
  position: absolute;
  background-color: var(--fg-danger);
  color: var(--bg-body);
  font-size: 10px;
  font-weight: 700;
  top: -6px;
  right: -10px;
  padding: 5px 8px;
  border-radius: 50%;
  text-align: center;
  line-height: 12px;
}
header #avatar-container .notification-counter.hidden, header #avatar-container .counter.hidden {
  display: none;
}
header #avatar-container .counter {
  position: unset;
  margin-left: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 0;
  width: unset;
  height: 24px;
  min-width: 24px;
  color: var(--bg-body);
}
header #avatar-container .avatar-dropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  overflow: auto;
  width: 280px;
  max-height: 400px;
  top: calc(var(--header-height) - 1px);
  right: 0;
  z-index: 1000;
  box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.15);
  transition: all var(--anim-step) ease;
  background: var(--bg-body);
  color: var(--fg-body);
  border: 0;
}
@media screen and (max-width: 767px) {
  header #avatar-container .avatar-dropdown {
    right: 0;
    width: 100%;
    top: var(--header-height);
  }
}
header #avatar-container .avatar-dropdown .item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}
header #avatar-container .avatar-dropdown .item a, header #avatar-container .avatar-dropdown .item span:not(.counter) {
  display: flex;
  align-items: center;
  padding: 0 10px;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: var(--fg-primary);
  transition: all var(--anim-step) ease;
}
header #avatar-container .avatar-dropdown .item span:not(.counter) {
  padding-left: 0;
}
header #avatar-container .avatar-dropdown .item:hover {
  background: var(--fg-primary);
}
header #avatar-container .avatar-dropdown .item:hover a, header #avatar-container .avatar-dropdown .item:hover span:not(.counter) {
  color: var(--bg-element);
  outline: 0;
  border: 0;
}
header #avatar-container .avatar-dropdown .item i {
  font-size: var(--fs-sidebar);
  width: var(--fs-sidebar);
  margin-right: 1rem;
}
header #avatar-container .avatar-dropdown .item i:before {
  display: flex;
  width: var(--fs-sidebar);
}
header #avatar-container.active .avatar-dropdown {
  display: flex;
}
header.dashboard .avatar {
  justify-self: flex-end;
}
header .login-button {
  margin: 0 0 0 0.5rem;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
}
header .login-button:is(:hover, :active, :focus) {
  outline: 0;
  color: var(--fg-button);
}
@media screen and (max-width: 1366px) {
  header {
    width: 100%;
    margin: 0;
  }
}
@media screen and (max-width: 767px) {
  header {
    --header-padding: 15px;
    --header-height: 75px;
    --sidebar-width: 100vw;
    position: fixed;
    margin-left: 0;
  }
  header .header-right {
    margin-left: auto;
  }
}

header.dashboard {
  --header-height: var(--dashboard-header-height);
  --sidebar-width: var(--dashboard-sidebar-width);
  --header-padding: 1em;
  width: 100%;
  margin: 0 auto;
}
header.dashboard #notification-list .notification-toggle {
  margin-top: 15px;
  margin-right: 15px;
}
header.dashboard > :is(span, figure.logo) {
  width: auto;
}
header.dashboard .back {
  width: 40px;
  height: 40px;
  margin: 10px 2px;
  border-radius: 100%;
  border: 0 none;
  color: var(--fg-button);
  background-color: var(--fg-accent);
}
header.dashboard .back i {
  font-size: 24px;
  margin: 0;
}

header.horizontal {
  --header-height: 60px;
  padding-right: 0;
  margin-bottom: calc(var(--horizontal-menu-height) + 1.5rem);
  padding-left: 0;
}

header.horizontal ~ :is(div, section) {
  --header-height: calc(60px + var(--horizontal-menu-height) + 1.5rem);
}

section.hero-slider {
  --hero-width: var(--body-width);
  --hero-height: 500px;
  --speed: 1s;
  position: relative;
  display: flex;
  flex-direction: row;
  width: var(--hero-width);
  height: 38vw;
  max-height: var(--hero-height);
  overflow: hidden;
  margin: 30px 0;
}
section.hero-slider.short {
  --hero-height: 134px;
}
section.hero-slider.short nav a {
  border: 4px solid var(--bg-element);
}
section.hero-slider img, section.hero-slider .text-block {
  position: absolute;
  width: var(--hero-width);
  transform: translateX(calc(-1 * var(--hero-width)));
  transition: transform var(--anim-step) ease;
  opacity: 0;
}
section.hero-slider img.current ~ img, section.hero-slider .text-block.current ~ img {
  transform: translateX(var(--hero-width));
}
section.hero-slider img.current ~ .text-block, section.hero-slider .text-block.current ~ .text-block {
  transform: translateX(var(--hero-width));
}
section.hero-slider img.current, section.hero-slider .text-block.current {
  transform: translateX(0px);
}
section.hero-slider .text-block {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
section.hero-slider .text-block h1 {
  text-align: center;
}
section.hero-slider .text-block.current {
  opacity: 1;
}
section.hero-slider nav {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  bottom: 20px;
  right: 40px;
  height: 6px;
  width: 100%;
  z-index: 100;
}
section.hero-slider nav a {
  width: 0;
  height: 0;
  margin: 0 6px;
  border: 6px solid var(--bg-element);
  border-radius: 100%;
  transition: border-color var(--speed) ease;
}
section.hero-slider nav a.current {
  border-color: var(--bg-accent);
}
section.hero-slider nav a:hover, section.hero-slider nav a:active, section.hero-slider nav a:focus {
  transition: border-color var(--anim-step) ease;
  border-color: var(--fg-primary);
}

.group-icon.fa-user-crown {
  color: var(--fg-danger);
}
.group-icon.fa-users-crown {
  color: var(--fg-danger);
}
.group-icon.fa-users {
  color: var(--fg-accent);
}
.group-icon.fa-file-upload {
  color: var(--fg-primary);
}
.group-icon.fa-photo-video {
  color: var(--fg-alternate);
}
.group-icon.fa-user-unlock {
  color: var(--fg-secondary);
}

.metadata-icon {
  margin: 0 0.5rem;
}
.metadata-icon.fa-album-collection {
  color: var(--fg-secondary);
}
.metadata-icon.fa-file-pdf {
  color: var(--fg-primary);
}
.metadata-icon.fa-video {
  color: var(--fg-alternate);
}
.metadata-icon.fa-image {
  color: var(--fg-accent);
}

.section-icon {
  color: var(--fg-danger);
}
.section-icon.fa-search, .section-icon.fa-border-none {
  color: var(--fg-accent);
}
.section-icon.fa-paragraph, .section-icon.fa-text {
  color: var(--fg-alternate);
}
.section-icon.fa-film, .section-icon.fa-border-all, .section-icon.fa-images {
  color: var(--fg-secondary);
}
.section-icon.fa-book, .section-icon.fa-books {
  color: var(--fg-primary);
}

@keyframes pulse {
  0% {
    filter: brightness(50%);
  }
  15% {
    filter: brightness(125%);
  }
  60% {
    filter: brightness(100%);
  }
  100% {
    filter: brightness(50%);
  }
}
.indicator {
  display: inline-block;
  width: var(--fs-body);
  height: var(--fs-body);
  border-radius: 100%;
  background: var(--fg-soft);
  animation: pulse calc(10 * var(--anim-step)) ease infinite;
  filter: brightness(50%);
  flex-shrink: 0;
  flex-grow: 0;
}
.indicator.primary {
  background: var(--fg-primary);
}
.indicator:is(.secondary, .ok) {
  background: var(--fg-secondary);
}
.indicator:is(.error, .danger) {
  background: var(--fg-danger);
}
.indicator:is(.accent, .warning) {
  background: var(--fg-accent);
}
.indicator:is(.alternate) {
  background: var(--fg-alternate);
}

.label-collection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--form-element-width);
  height: var(--form-element-height);
  padding: var(--form-element-padding);
  border: 1px solid var(--bg-element);
  outline: none;
  font-size: var(--fs-body);
  background: var(--bg-body);
  color: var(--fg-body);
  transition: border-color var(--anim-step) ease;
  border-radius: var(--radius);
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  gap: var(--form-element-margin);
  height: auto;
  min-height: var(--form-element-height);
  padding: 0.5rem;
  margin: var(--form-element-margin) 0;
  user-select: none;
}
.label-collection.warn, .label-collection.invalid, .label-collection.danger {
  border-color: var(--fg-danger);
}
.label-collection::placeholder {
  color: var(--bg-main);
}
.label-collection:focus, .label-collection:focus-within, .label-collection:hover, .label-collection:active {
  outline: none;
  border-color: var(--bg-main);
}
.label-collection:disabled, .label-collection.disabled {
  border-color: var(--bg-main);
  background: var(--bg-element);
  color: var(--bg-main);
}
.label-collection:empty {
  display: none;
}
.label-collection .label {
  border-radius: calc(var(--radius) * 0.5);
  position: relative;
  display: flex;
  flex-shrink: 1;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  width: auto;
  height: var(--lh-body);
  margin: 0;
  user-select: none;
}
.label-collection .label i {
  position: absolute;
  right: 8px;
  display: block;
  font-size: 0.8em;
  margin-top: 1px;
  height: 1em;
  width: 1em;
  text-align: right;
}
.label-collection .label i.fa-tag {
  display: block;
}
.label-collection .label i.fa-times {
  display: none;
}
.label-collection:not(.disabled) .label {
  background-color: var(--fg-accent);
  color: var(--bg-body);
  cursor: pointer;
  transition: background-color var(--anim-step) ease, opacity var(--anim-step) ease;
}
.label-collection:not(.disabled) .label:nth-child(4n+1) {
  background-color: var(--fg-secondary);
}
.label-collection:not(.disabled) .label:nth-child(4n+2) {
  background-color: var(--fg-primary);
}
.label-collection:not(.disabled) .label:nth-child(4n+3) {
  background-color: var(--fg-alternate);
}
.label-collection:not(.disabled) .label:hover {
  background-color: var(--fg-danger);
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.label-collection:not(.disabled) .label:is(:hover, :active, :focus) i.fa-tag {
  display: none;
}
.label-collection:not(.disabled) .label:is(:hover, :active, :focus) i.fa-times {
  display: inline-block;
}
.label-collection.disabled .label {
  background-color: var(--bg-zebra);
  color: var(--fg-soft);
}
.label-collection.disabled .label:nth-child(odd) {
  background-color: var(--bg-dashboard);
}

/**
 * messages.scss
 *
 * Message box component, used mainly in forms
 */
@keyframes message-temporary {
  0% {
    opacity: 1;
    padding: 1em 1em 1em 2.5em;
    margin: 1em 0;
  }
  85% {
    opacity: 1;
    height: auto;
  }
  95% {
    opacity: 0;
    height: auto;
    padding: 1em 1em 1em 2.5em;
    margin: 1em 0;
    display: block;
  }
  99% {
    opacity: 0;
    height: 0px;
    margin: 0px;
    padding: 0px;
    display: block;
  }
  100% {
    opacity: 0;
    height: 0px;
    margin: 0px;
    padding: 0px;
    display: none;
  }
}
.messages {
  max-width: var(--form-element-width);
}

p.message {
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  padding: 0 1rem 0 1rem;
  margin: 1rem 0;
  text-align: left;
  animation: fade-in-opacity var(--anim-step) ease forwards;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
p.message.info {
  color: var(--fg-secondary);
}
p.message.warn {
  color: var(--fg-accent);
}
p.message.alternate {
  color: var(--fg-alternate);
}
p.message.error {
  color: var(--fg-danger);
}
p.message.temporary {
  animation: message-temporary calc(var(--anim-step) * 10) ease forwards;
}
p.message i.icon {
  font-size: 0.8em;
  line-height: 2.2em;
  margin-top: -2px;
  margin-right: 0.5rem;
}

/** metadata item list (playlist editor) */
.meta-list ol {
  padding: 0;
}
.meta-list ol li {
  width: var(--form-element-width);
  margin: 0;
  padding: 0;
}
.meta-list ol li:nth-child(odd) .cameo {
  background-color: var(--bg-zebra);
}
.meta-list ol li:first-child {
  margin-top: 0;
}
.meta-list ol li:last-child {
  margin-bottom: 0;
}

/* /.meta-list */
.open-help-fab {
  position: absolute;
  bottom: 1.8rem;
  right: -2rem;
  cursor: pointer;
  color: var(--fg-primary);
}

.paginator button {
  border-color: var(--bg-element);
}
.paginator button:not(.inverse) {
  color: var(--fg-primary);
  background-color: var(--bg-element);
}
.paginator button:disabled {
  border-color: var(--bg-element);
}

@keyframes placeholder-pulse {
  0% {
    background-color: var(--bg-element);
  }
  50% {
    background-color: var(--bg-zebra);
  }
  100% {
    background-color: var(--bg-element);
  }
}
.placeholder {
  animation: placeholder-pulse 3s ease infinite;
  color: var(--fg-primary);
  flex-grow: 1;
  min-width: var(--form-element-width);
  border-radius: var(--radius);
  font-size: var(--fs-sub);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

img.preloader {
  width: 1px;
  height: 1px;
  opacity: 0;
}

[data-image-loaded=loaded] {
  animation: fade-in-opacity var(--anim-step) ease forwards;
}
[data-image-loaded=loaded] .preloader {
  display: none;
}

progress.progress-bar {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  height: var(--radius);
  background-color: var(--bg-main);
  border: 0;
  justify-self: start;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}
progress.progress-bar::-webkit-progress-value {
  background-color: var(--fg-primary);
  filter: brightness(125%);
}
progress.progress-bar::-webkit-progress-bar {
  background-color: transparent;
}
progress.progress-bar.ok::-webkit-progress-value {
  background-color: var(--fg-secondary);
}
progress.progress-bar.warning::-webkit-progress-value {
  background-color: var(--fg-accent);
}
progress.progress-bar.danger::-webkit-progress-value {
  background-color: var(--fg-danger);
}
progress.progress-bar::-moz-progress-bar {
  background-color: var(--fg-primary);
}
progress.progress-bar.ok::-moz-progress-bar {
  background: var(--fg-secondary);
}
progress.progress-bar.warning::-moz-progress-bar {
  background: var(--fg-accent);
}
progress.progress-bar.danger::-moz-progress-bar {
  background: var(--fg-danger);
}

/**
 * Styles for both the rich text editor and the rich text display
 * on dynamic pages.
 */
.rte-container .rte-controls {
  border-radius: var(--radius);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  background: var(--bg-element);
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 0;
  padding: 0.5rem 0.5rem 0 0.5rem;
}
.rte-container .rte-controls .button-group {
  margin: 0 0.5rem 0.5rem 0;
}
.rte-container .rte-controls .button-group:last-of-type {
  margin-right: 0;
}
.rte-container .rte-controls .button-group button {
  --radius: 3px;
  --size: calc(var(--form-element-height) - 1em);
  width: var(--size);
  height: var(--size);
}
.rte-container .rte-controls .button-group button span.palette {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 1px 0 0 0;
}
.rte-container .rte-controls .button-group button span.palette.primary {
  background-color: var(--fg-primary);
}
.rte-container .rte-controls .button-group button span.palette.secondary {
  background-color: var(--fg-secondary);
}
.rte-container .rte-controls .button-group button span.palette.tertiary {
  background-color: var(--fg-alternate);
}
.rte-container .rte-controls .button-group button span.palette.warning {
  background-color: var(--fg-danger);
}
.rte-container .rte-controls .button-group button span.palette.accent {
  background-color: var(--fg-accent);
}
.rte-container .rte-controls .button-group button span.palette.null {
  background-color: var(--fg-body);
}
.rte-container .rte-controls .spacer {
  flex-grow: 1;
}
.rte-container .ProseMirror {
  border: 1px solid var(--bg-element);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 1rem;
}
.rte-container .ProseMirror:hover, .rte-container .ProseMirror:focus {
  border: 1px solid var(--bg-main);
  border-radius: 0 0 var(--radius) var(--radius);
  outline: 0 !important;
}

/** badge for displaying current availability of scheduled content */
.badge.schedule-availability {
  font-size: calc(var(--fs-body-sm) - 2px);
}
.badge.schedule-availability .date {
  cursor: help;
}

.scrub-bar {
  display: flex;
  align-items: center;
  border: 1px solid var(--bg-element);
  border-radius: var(--radius);
  height: var(--form-element-height);
}
.scrub-bar input {
  padding: 0;
  margin-left: 1rem;
  /* Input Track */
}
.scrub-bar input[type=range] {
  -webkit-appearance: none;
  margin-right: 15px;
  width: 150px;
  height: 7px;
  border-radius: 5px;
  background: var(--bg-element) linear-gradient(var(--fg-soft), var(--fg-soft)) no-repeat;
  background-size: 50% 100%;
}
.scrub-bar input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--fg-primary);
  box-shadow: 0 0 2px 0 #555;
  transition: background 0.3s ease-in-out;
  cursor: pointer;
  outline: 0;
  border: 0;
}
.scrub-bar input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--fg-primary);
  box-shadow: 0 0 2px 0 #555;
  transition: background 0.3s ease-in-out;
  cursor: pointer;
  outline: 0;
  border: 0;
}
.scrub-bar input[type=range]::-ms-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--fg-primary);
  box-shadow: 0 0 2px 0 #555;
  transition: background 0.3s ease-in-out;
  cursor: pointer;
  outline: 0;
  border: 0;
}
.scrub-bar input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}
.scrub-bar input[type=range]::-moz-range-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}
.scrub-bar input[type=range]::-ms-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.slider-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.slider-container .slider-component {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .slider-container .slider-component .header {
    text-align: center;
    padding-right: 0;
  }
}
.slider-container .slider-component .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  opacity: 0;
}
.slider-container .slider-component .slide.current {
  opacity: 1;
  z-index: 999;
}
.slider-container nav {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: center;
  bottom: 12px;
  height: 6px;
  width: 100%;
  z-index: 100;
}
.slider-container nav a {
  width: 0;
  height: 0;
  margin: 0 6px;
  border: 6px solid var(--bg-element);
  border-radius: 100%;
  transition: border-color var(--speed) ease;
}
.slider-container nav a.current {
  border-color: var(--bg-accent);
}
.slider-container .buttons-navigation-container {
  display: flex;
  flex-direction: column;
}
.slider-container .buttons-navigation-container .divider {
  display: block;
  width: 100%;
  height: 1px;
  background-color: rgba(16, 44, 128, 0.1);
}
.slider-container .buttons-navigation-container .control-buttons {
  display: flex;
  justify-content: center;
  gap: 11px;
  margin-top: 2rem;
}
.slider-container .buttons-navigation-container .control-buttons button {
  margin: 0;
}
.slider-container .buttons-navigation-container nav {
  position: unset;
  height: unset;
  margin-top: 27px;
}

@keyframes icon-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
i.spinner {
  animation: icon-spin calc(2 * var(--anim-step)) ease infinite;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
table thead {
  color: var(--bg-main);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  text-transform: uppercase;
}
table thead tr th {
  padding: 0 15px 10px;
  border-bottom: 1px solid var(--bg-element);
}
table tbody tr:nth-child(2n+2) {
  background-color: var(--bg-zebra);
}
table tbody tr td {
  word-break: break-all;
  padding: 13px 15px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 500;
}
table tbody tr td:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
}
table tbody tr td:first-child a {
  font-family: var(--font-stack-default);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
table tbody tr td:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}

table.dynamic {
  table-layout: fixed;
}
table.dynamic thead th {
  white-space: nowrap;
  text-align: left;
}
table.dynamic thead th i.icon:is(.fa-caret-down, .fa-caret-up) {
  position: relative;
  margin-left: 0.35em;
  font-size: 1.1em;
}
table.dynamic tbody tr {
  opacity: 0;
  animation: fade-in-opacity var(--anim-step) ease both;
  animation-delay: var(--anim-step);
}
table.dynamic tbody td {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  height: var(--lh-body);
}
table.dynamic tbody td.empty-placeholder {
  color: var(--fg-soft);
  font-size: var(--fs-h4);
  text-align: center;
  border-radius: var(--radius);
}
table.dynamic tbody td.empty-placeholder span {
  min-height: var(--lh-body);
  min-width: 1em;
}

.table-pageable .button-group {
  margin-top: 2em;
  justify-content: center;
}
.table-pageable.loading {
  opacity: 0.6;
  pointer-events: none;
  transition: 0.5s ease-in-out;
}

.tab-container {
  --tab-count: 1;
  --head-pad: 5px;
  --tab-width: 100%;
  --head-width: calc(
    calc(var(--head-pad) * -1 * var(--tab-count) + var(--tab-width))
    / var(--tab-count)
  );
  margin: 6px 0;
  /* this should be extendable to more tabs if needed - just add entries above
     and new entries down below for data-selected-tab and the position of each
     new tab in the other data-selected-tab spaces */
}
.tab-container.disabled {
  pointer-events: none;
  opacity: 0.6;
}
.tab-container[data-tab-count="2"] {
  --tab-count: 2;
}
.tab-container[data-tab-count="3"] {
  --tab-count: 3;
}
.tab-container[data-tab-count="4"] {
  --tab-count: 4;
}
.tab-container > .notches {
  display: grid;
  grid-template-columns: repeat(var(--tab-count), 1fr);
  position: relative;
  height: 40px;
  width: var(--tab-width);
  padding: var(--head-pad);
  margin: 0 0 6px;
  border-radius: var(--radius);
  background-color: var(--bg-hover);
}
.tab-container > .notches:after {
  border-radius: var(--radius);
  content: "";
  background-color: var(--bg-body);
  position: absolute;
  top: var(--head-pad);
  left: var(--head-pad);
  width: var(--head-width);
  height: 30px;
  box-shadow: var(--fab-shadow);
  transition: left var(--anim-step) ease;
}
.tab-container > .notches > .notch {
  border-radius: var(--radius);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  z-index: 10;
  color: var(--fg-primary);
  text-align: center;
  background: transparent;
  transition: color var(--anim-step) ease;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}
.tab-container > .tabs {
  width: var(--tab-width);
  overflow-x: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  position: relative;
}
.tab-container > .tabs > .tab {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform var(--anim-step) ease;
}
.tab-container[data-selected-tab="0"] > .tabs > .tab[data-tab-id="1"], .tab-container:not([data-selected-tab]) > .tabs > .tab[data-tab-id="1"] {
  transform: translateX(100%);
}
.tab-container[data-selected-tab="0"] > .tabs > .tab[data-tab-id="2"], .tab-container:not([data-selected-tab]) > .tabs > .tab[data-tab-id="2"] {
  transform: translateX(200%);
}
.tab-container[data-selected-tab="0"] > .notches:after, .tab-container:not([data-selected-tab]) > .notches:after {
  left: var(--head-pad);
}
.tab-container[data-selected-tab="0"] > .notches > .notch[data-tab-id="0"], .tab-container:not([data-selected-tab]) > .notches > .notch[data-tab-id="0"] {
  color: var(--fg-accent);
  font-weight: 600;
}
.tab-container[data-selected-tab="1"] > .tabs > .tab[data-tab-id="0"] {
  transform: translateX(-100%);
}
.tab-container[data-selected-tab="1"] > .tabs > .tab[data-tab-id="1"] {
  transform: translateX(0%);
}
.tab-container[data-selected-tab="1"] > .tabs > .tab[data-tab-id="2"] {
  transform: translateX(100%);
}
.tab-container[data-selected-tab="1"] > .notches:after {
  left: calc(var(--head-pad) + var(--head-width));
}
.tab-container[data-selected-tab="1"] > .notches > .notch[data-tab-id="1"] {
  color: var(--fg-accent);
  font-weight: 600;
}
.tab-container[data-selected-tab="2"] > .tabs > .tab[data-tab-id="0"] {
  transform: translateX(-200%);
}
.tab-container[data-selected-tab="2"] > .tabs > .tab[data-tab-id="1"] {
  transform: translateX(-100%);
}
.tab-container[data-selected-tab="2"] > .notches:after {
  left: calc(var(--head-pad) + var(--head-width) * 2);
}
.tab-container[data-selected-tab="2"] > .notches > .notch[data-tab-id="2"] {
  color: var(--fg-accent);
  font-weight: 600;
}

/* /.tab-container */
.tab-container.multi-toggle > .notches-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tab-container.multi-toggle > .notches-wrapper .radio-notches-wrapper {
  display: none;
}
.tab-container.multi-toggle > .notches-wrapper > p + .notches {
  width: calc(var(--tab-width) - 20%);
}
.tab-container.multi-toggle > .notches-wrapper > .notches {
  display: grid;
  grid-template-columns: repeat(var(--tab-count), 1fr);
  position: relative;
  height: 40px;
  width: var(--tab-width);
  padding: var(--head-pad);
  border-radius: var(--radius);
  background-color: var(--bg-hover);
}
.tab-container.multi-toggle > .notches-wrapper > .notches:after {
  border-radius: var(--radius);
  content: "";
  background-color: var(--bg-body);
  position: absolute;
  top: var(--head-pad);
  left: var(--head-pad);
  width: var(--head-width);
  height: 30px;
  box-shadow: var(--fab-shadow);
  transition: left var(--anim-step) ease;
}
.tab-container.multi-toggle > .notches-wrapper > .notches > .notch {
  border-radius: var(--radius);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  z-index: 10;
  color: var(--fg-primary);
  text-align: center;
  background: transparent;
  transition: color var(--anim-step) ease;
}
.tab-container.multi-toggle[data-selected-tab="0"] > .notches-wrapper > .notches:after, .tab-container.multi-toggle:not([data-selected-tab]) > .notches-wrapper > .notches:after {
  left: var(--head-pad);
}
.tab-container.multi-toggle[data-selected-tab="0"] > .notches-wrapper > .notches > .notch[data-tab-id="0"], .tab-container.multi-toggle:not([data-selected-tab]) > .notches-wrapper > .notches > .notch[data-tab-id="0"] {
  color: var(--fg-accent);
  font-weight: bold;
}
.tab-container.multi-toggle[data-selected-tab="1"] > .notches-wrapper > .notches:after {
  left: calc(var(--head-pad) + var(--head-width));
}
.tab-container.multi-toggle[data-selected-tab="1"] > .notches-wrapper > .notches > .notch[data-tab-id="1"] {
  color: var(--fg-accent);
  font-weight: bold;
}
.tab-container.multi-toggle[data-selected-tab="2"] > .notches-wrapper > .notches:after {
  left: calc(var(--head-pad) + var(--head-width) * 2);
}
.tab-container.multi-toggle[data-selected-tab="2"] > .notches-wrapper > .notches > .notch[data-tab-id="2"] {
  color: var(--fg-accent);
  font-weight: bold;
}
.tab-container.multi-toggle[data-selected-tab="3"] > .notches-wrapper > .notches:after {
  left: calc(var(--head-pad) + var(--head-width) * 3);
}
.tab-container.multi-toggle[data-selected-tab="3"] > .notches-wrapper > .notches > .notch[data-tab-id="3"] {
  color: var(--fg-accent);
  font-weight: bold;
}

/* /.tab-container */
.tag-list {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.tag-list .tag {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  max-width: calc(100% - 0.5em);
  padding: 0 0.5em;
  margin: 0 0.25em;
  font-size: 0.8rem;
  text-transform: capitalize;
  text-decoration: none;
  color: var(--fg-soft);
  background-color: var(--bg-element);
  border-radius: calc(var(--radius) * 0.5);
  transition: all var(--anim-step) ease;
}
.tag-list .tag:hover, .tag-list .tag:focus, .tag-list .tag:active {
  color: var(--fg-primary);
  background-color: var(--bg-chip-hover);
}
.tag-list .tag span {
  margin: 1px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag-list .tag i {
  font-size: 0.8em;
  text-decoration: none;
  margin-right: 0.25rem;
}

.toggle-box {
  width: var(--form-element-width);
  height: 45px;
  border-radius: var(--radius);
  flex-shrink: 0;
  flex-grow: 0;
  /* generally buttons should be fixed-size */
  width: auto;
  display: flex;
  flex-direction: row;
  flex-shrink: 1;
  flex-wrap: nowrap;
  margin: var(--form-element-margin) auto;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-body);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  text-transform: uppercase;
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
  /* faux buttons are elements that look like buttons but aren't interactable */
  padding: 0;
  margin: 0;
}
.toggle-box > span, .toggle-box label span {
  display: inline-flex;
  font-family: var(--font-stack-spaced);
  flex-shrink: 1;
  flex-grow: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: inherit;
  user-select: none;
}
.toggle-box i:is(.fa, .fas, .far) {
  display: flex;
  justify-content: center;
  width: 1rem;
  font-size: var(--fs-body-sm);
  margin: 0 0.55rem -1px;
}
.toggle-box i:is(.fa, .fas, .far):first-child {
  margin-left: 0;
}
.toggle-box i:is(.fa, .fas, .far):last-child {
  margin-right: 0;
}
.toggle-box.main {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  height: 50px;
}
.toggle-box.ok {
  background: var(--fg-secondary);
}
.toggle-box.warn {
  background: var(--fg-accent);
}
.toggle-box.danger {
  background: var(--fg-danger);
}
.toggle-box.secondary {
  background: var(--fg-secondary);
}
.toggle-box.alternate {
  background: var(--fg-alternate);
}
.toggle-box:is(:hover, :active, :focus) {
  opacity: 0.8;
  outline: 0;
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.toggle-box:is(:hover, :active, :focus).ok {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.toggle-box:is(:hover, :active, :focus).warn {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.toggle-box:is(:hover, :active, :focus).danger {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.toggle-box:is(:hover, :active, :focus).secondary {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.toggle-box:is(:hover, :active, :focus).alternate {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.toggle-box.icon {
  width: calc(var(--form-element-height) - 2px);
  height: calc(var(--form-element-height) - 2px);
}
.toggle-box.icon i:is(.fa, .fas, .far) {
  margin: 0 0 -3px;
}
.toggle-box.stand-in {
  background: var(--bg-body);
  border: 2px dashed var(--fg-primary);
  color: var(--fg-primary);
  height: var(--form-element-height);
  width: fit-content;
}
.toggle-box.stand-in.secondary {
  color: var(--fg-secondary);
  border-color: var(--fg-secondary);
}
.toggle-box.stand-in.alternate {
  color: var(--fg-alternate);
  border-color: var(--fg-alternate);
}
.toggle-box.stand-in:is(.accent, .warn) {
  color: var(--fg-accent);
  border-color: var(--fg-accent);
}
.toggle-box.stand-in:is(.danger, .error) {
  color: var(--fg-danger);
  border-color: var(--fg-danger);
}
.toggle-box.inverse {
  background: var(--bg-body);
  border: 1px solid var(--fg-primary);
  color: var(--fg-primary);
}
.toggle-box.inverse:focus {
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.toggle-box.inverse:is(.ok, .secondary) {
  border-color: var(--fg-secondary);
  color: var(--fg-secondary);
}
.toggle-box.inverse:is(.ok, .secondary):focus {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.toggle-box.inverse.warn {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
.toggle-box.inverse.warn:focus {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.toggle-box.inverse.danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
.toggle-box.inverse.danger:focus {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.toggle-box.inverse.alternate {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
.toggle-box.inverse.alternate:focus {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.toggle-box.inline {
  width: 50px;
}
.toggle-box.subtle {
  border-radius: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: transparent;
  border: none;
  vertical-align: center;
  width: auto;
  height: auto;
  margin: 0.5rem auto;
  text-transform: none;
  font-weight: normal;
  color: var(--fg-primary);
}
.toggle-box.subtle span {
  font-family: var(--font-stack-default);
}
.toggle-box.subtle:is(.forward, .back) i.fa {
  margin: 2px 0 0 0;
}
.toggle-box.subtle:is(:focus, :hover, :active) {
  outline: 0;
  box-shadow: unset;
  border: none;
  text-decoration: underline;
}
.toggle-box.subtle.primary {
  color: var(--fg-primary);
}
.toggle-box.subtle.secondary, .toggle-box.subtle.ok {
  color: var(--fg-secondary);
}
.toggle-box.subtle.alternate {
  color: var(--fg-accent);
}
.toggle-box.subtle.accent, .toggle-box.subtle.warning {
  color: var(--fg-accent);
}
.toggle-box.subtle.danger {
  color: var(--fg-danger);
}
.toggle-box:is(:disabled, .disabled) {
  color: var(--bg-element);
  background: var(--bg-main);
}
.toggle-box:is(:disabled, .disabled):is(.inverse, .stand-in) {
  opacity: 1;
  border-color: var(--bg-main);
  color: var(--bg-main);
  background: none;
}
.toggle-box:is(:disabled, .disabled).subtle {
  color: var(--bg-main);
  background: none;
  text-decoration: none;
}
.toggle-box:is(.disabled, :disabled, .faux) {
  cursor: default;
  pointer-events: none;
}
.toggle-box:is(.disabled, :disabled, .faux):is(:hover, :active, :focus) {
  opacity: 1;
  outline: 0;
  box-shadow: unset;
}
.toggle-box:is(.disabled, :disabled, .faux):is(.inverse, .stand-in):is(:focus, :active, :hover) {
  outline: 0;
  box-shadow: unset;
}
.toggle-box.inverse {
  border-color: var(--fg-soft);
}
.toggle-box .toggle {
  align-items: center;
  height: 100%;
  margin-top: 0;
  padding: var(--button-padding);
}
.toggle-box .toggle label {
  margin-right: 1em;
  margin-top: 4px;
  user-select: none;
}
.toggle-box.disabled .toggle label {
  color: var(--bg-main);
}

.tooltip-wrapper {
  position: relative;
  margin: 0;
  padding: 0;
}

.tooltip {
  position: absolute;
  width: max-content;
  text-transform: none;
  top: 0;
  left: 0;
  display: none;
  flex-direction: column;
  z-index: 99999;
  background-color: var(--fg-primary);
  border-radius: var(--radius);
  color: var(--fg-button);
  padding: 12px 18px;
  font-size: var(--fs-h4);
  font-weight: 400;
  transition: opacity 0.3s ease-in-out;
}
.tooltip.visible {
  display: flex;
}
.tooltip:before {
  content: "";
  position: absolute;
  border-style: solid;
  display: flex;
}
.tooltip.LEFT:before {
  border-color: transparent transparent transparent var(--fg-primary);
  right: -9px;
  border-width: 10px 0 10px 10px;
  top: calc(50% - 10px);
}
.tooltip.RIGHT:before {
  border-color: transparent var(--fg-primary) transparent transparent;
  left: -19px;
  border-width: 10px 10px 10px 10px;
  top: calc(50% - 10px);
}
.tooltip.TOP:before {
  border-color: var(--fg-primary) transparent transparent transparent;
  bottom: -19px;
  border-width: 10px 10px 10px 10px;
  left: calc(50% - 10px);
}
.tooltip.BOTTOM:before {
  border-color: transparent transparent var(--fg-primary) transparent;
  top: -19px;
  border-width: 10px 10px 10px 10px;
  left: calc(50% - 10px);
}

.user-group-membership-container {
  width: var(--form-element-width);
}
.user-group-membership-container span.cameo {
  margin: var(--form-element-margin) 0;
}
.user-group-membership-container span.cameo:first-child {
  margin-top: 0;
}
.user-group-membership-container button.stand-in {
  margin-top: 1rem;
}

.user-group-name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.user-group-name i {
  margin-right: 0.5rem;
  margin-bottom: 2px;
}

/** universal modal styles */
/* note that lib/ui/view/modal-view does some more fiddling with
 * body styles while modals are open - this is unavoidable for now */
.dialog {
  --modal-width: 600px;
  --modal-margin: 22px;
  --footer-padding: 16px;
  --modal-pane-width: calc(var(--modal-width) * 0.5);
  --modal-side-padding: 41px;
  --modal-body-padding-lg: 0 var(--modal-side-padding);
  --modal-body-height: calc(var(--modal-pane-width) * 1.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  max-width: var(--modal-width);
  min-height: calc(var(--modal-width) / 2 - var(--modal-margin) * 2);
  max-height: 100vh;
  padding: 0;
  line-height: 1.5rem;
  border: 0;
  color: var(--fg-primary);
  /** with-header is set by the base dialog component when a header is present */
  /** with-footer is set by the base dialog component when a footer is present */
}
@media screen and (max-width: 767px) {
  .dialog {
    --modal-width: 100vw;
    --modal-body-height: 100vh;
    height: var(--modal-body-height) !important;
    width: var(--modal-width) !important;
    max-height: initial;
    max-width: initial;
  }
}
.dialog .header {
  width: 100%;
  overflow: hidden;
  padding: 40px 1rem 1rem;
  background-color: var(--bg-body);
  border-radius: var(--radius) var(--radius) 0 0;
  text-overflow: ellipsis;
}
.dialog .header .list-select-title {
  display: block;
  text-align: center;
  margin-bottom: 1rem;
}
.dialog .header h1, .dialog .header h2, .dialog .header h3, .dialog .header h4 {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  padding-top: 0.1rem; /* fixes misalignment clipping issue with font */
  text-align: center;
  margin: 0;
}
.dialog .header h3 {
  color: var(--fg-primary);
  font-size: 32px;
  line-height: 161.5%;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .dialog {
    --fab-header-spacing: 75px;
  }
  .dialog:not(.no-close) .header {
    padding-right: var(--fab-header-spacing);
  }
}
.dialog > .body, .dialog .content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  overflow: hidden;
  max-height: var(--modal-body-height);
  padding: 0;
  border-radius: 0;
  background: var(--bg-body);
  /* base dialog wraps body with .content so scrollbar doesn't clip border radius */
}
@media screen and (max-width: 767px) {
  .dialog > .body, .dialog .content {
    min-height: initial;
    height: auto;
    align-items: stretch;
    justify-content: center;
  }
}
.dialog > .body.body, .dialog .content.body {
  padding: 1rem;
}
.dialog > .body .body, .dialog .content .body {
  overflow: auto;
  overflow: overlay;
  padding: 0 1rem;
}
@media screen and (max-width: 767px) {
  .dialog > .body .body, .dialog .content .body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
  }
}
.dialog .spacer {
  position: relative;
  display: flex;
  width: 100%;
  height: 1px;
  background: var(--bg-body);
}
.dialog .spacer .divider {
  width: 100%;
  height: 100%;
  background: rgba(16, 44, 128, 0.1);
  margin: 0 41px;
}
.dialog .footer {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  width: 100%;
  padding: 26px var(--modal-margin) var(--footer-padding);
  min-height: var(--fs-body);
  background: var(--bg-body);
  border-radius: 0 0 var(--radius) var(--radius);
}
.dialog .footer a {
  width: var(--form-element-width);
  height: 45px;
  border-radius: var(--radius);
  flex-shrink: 0;
  flex-grow: 0;
  /* generally buttons should be fixed-size */
  width: auto;
  display: flex;
  flex-direction: row;
  flex-shrink: 1;
  flex-wrap: nowrap;
  margin: var(--form-element-margin) auto;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-body);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  text-transform: uppercase;
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
  /* faux buttons are elements that look like buttons but aren't interactable */
  width: 90px;
  height: 40px;
  font-weight: normal;
  margin: 0 var(--modal-margin);
}
.dialog .footer a > span, .dialog .footer a label span {
  display: inline-flex;
  font-family: var(--font-stack-spaced);
  flex-shrink: 1;
  flex-grow: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: inherit;
  user-select: none;
}
.dialog .footer a i:is(.fa, .fas, .far) {
  display: flex;
  justify-content: center;
  width: 1rem;
  font-size: var(--fs-body-sm);
  margin: 0 0.55rem -1px;
}
.dialog .footer a i:is(.fa, .fas, .far):first-child {
  margin-left: 0;
}
.dialog .footer a i:is(.fa, .fas, .far):last-child {
  margin-right: 0;
}
.dialog .footer a.main {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  height: 50px;
}
.dialog .footer a.ok {
  background: var(--fg-secondary);
}
.dialog .footer a.warn {
  background: var(--fg-accent);
}
.dialog .footer a.danger {
  background: var(--fg-danger);
}
.dialog .footer a.secondary {
  background: var(--fg-secondary);
}
.dialog .footer a.alternate {
  background: var(--fg-alternate);
}
.dialog .footer a:is(:hover, :active, :focus) {
  opacity: 0.8;
  outline: 0;
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.dialog .footer a:is(:hover, :active, :focus).ok {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.dialog .footer a:is(:hover, :active, :focus).warn {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.dialog .footer a:is(:hover, :active, :focus).danger {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.dialog .footer a:is(:hover, :active, :focus).secondary {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.dialog .footer a:is(:hover, :active, :focus).alternate {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.dialog .footer a.icon {
  width: calc(var(--form-element-height) - 2px);
  height: calc(var(--form-element-height) - 2px);
}
.dialog .footer a.icon i:is(.fa, .fas, .far) {
  margin: 0 0 -3px;
}
.dialog .footer a.stand-in {
  background: var(--bg-body);
  border: 2px dashed var(--fg-primary);
  color: var(--fg-primary);
  height: var(--form-element-height);
  width: fit-content;
}
.dialog .footer a.stand-in.secondary {
  color: var(--fg-secondary);
  border-color: var(--fg-secondary);
}
.dialog .footer a.stand-in.alternate {
  color: var(--fg-alternate);
  border-color: var(--fg-alternate);
}
.dialog .footer a.stand-in:is(.accent, .warn) {
  color: var(--fg-accent);
  border-color: var(--fg-accent);
}
.dialog .footer a.stand-in:is(.danger, .error) {
  color: var(--fg-danger);
  border-color: var(--fg-danger);
}
.dialog .footer a.inverse {
  background: var(--bg-body);
  border: 1px solid var(--fg-primary);
  color: var(--fg-primary);
}
.dialog .footer a.inverse:focus {
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.dialog .footer a.inverse:is(.ok, .secondary) {
  border-color: var(--fg-secondary);
  color: var(--fg-secondary);
}
.dialog .footer a.inverse:is(.ok, .secondary):focus {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.dialog .footer a.inverse.warn {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
.dialog .footer a.inverse.warn:focus {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.dialog .footer a.inverse.danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
.dialog .footer a.inverse.danger:focus {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.dialog .footer a.inverse.alternate {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
.dialog .footer a.inverse.alternate:focus {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.dialog .footer a.inline {
  width: 50px;
}
.dialog .footer a.subtle {
  border-radius: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: transparent;
  border: none;
  vertical-align: center;
  width: auto;
  height: auto;
  margin: 0.5rem auto;
  text-transform: none;
  font-weight: normal;
  color: var(--fg-primary);
}
.dialog .footer a.subtle span {
  font-family: var(--font-stack-default);
}
.dialog .footer a.subtle:is(.forward, .back) i.fa {
  margin: 2px 0 0 0;
}
.dialog .footer a.subtle:is(:focus, :hover, :active) {
  outline: 0;
  box-shadow: unset;
  border: none;
  text-decoration: underline;
}
.dialog .footer a.subtle.primary {
  color: var(--fg-primary);
}
.dialog .footer a.subtle.secondary, .dialog .footer a.subtle.ok {
  color: var(--fg-secondary);
}
.dialog .footer a.subtle.alternate {
  color: var(--fg-accent);
}
.dialog .footer a.subtle.accent, .dialog .footer a.subtle.warning {
  color: var(--fg-accent);
}
.dialog .footer a.subtle.danger {
  color: var(--fg-danger);
}
.dialog .footer a:is(:disabled, .disabled) {
  color: var(--bg-element);
  background: var(--bg-main);
}
.dialog .footer a:is(:disabled, .disabled):is(.inverse, .stand-in) {
  opacity: 1;
  border-color: var(--bg-main);
  color: var(--bg-main);
  background: none;
}
.dialog .footer a:is(:disabled, .disabled).subtle {
  color: var(--bg-main);
  background: none;
  text-decoration: none;
}
.dialog .footer a:is(.disabled, :disabled, .faux) {
  cursor: default;
  pointer-events: none;
}
.dialog .footer a:is(.disabled, :disabled, .faux):is(:hover, :active, :focus) {
  opacity: 1;
  outline: 0;
  box-shadow: unset;
}
.dialog .footer a:is(.disabled, :disabled, .faux):is(.inverse, .stand-in):is(:focus, :active, :hover) {
  outline: 0;
  box-shadow: unset;
}
.dialog.with-header .content {
  border-radius: 0 0 var(--radius) var(--radius);
}
.dialog.with-footer .content {
  border-radius: var(--radius) var(--radius) 0 0;
  max-height: calc(var(--modal-body-height) + 1rem);
}
.dialog.with-header.with-footer .content {
  border-radius: 0;
}
.dialog:not(.with-header):not(.with-footer) .content {
  padding: 1rem 0;
  border-radius: var(--radius);
  max-height: var(--modal-body-height);
}
@media screen and (max-width: 767px) {
  .dialog:not(.with-header):not(.with-footer) .content {
    border-radius: 0;
  }
}
.dialog:not(.with-header).with-footer .content {
  padding-top: 1rem;
}
.dialog:not(.with-footer).with-header .content {
  padding-bottom: 1rem;
}
.dialog.no-body.with-header.with-footer .header {
  padding-bottom: 0;
}
@media screen and (max-width: 767px) {
  .dialog .header, .dialog .footer {
    flex-grow: 1;
  }
  .dialog .header {
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .dialog .content, .dialog .body {
    flex-grow: 1;
  }
  .dialog .footer {
    align-items: flex-start;
  }
}
@media screen and (max-width: 767px) {
  .dialog .header, .dialog .content, .dialog .body, .dialog .footer {
    border-radius: 0;
  }
}
.dialog.warn .header, .dialog.warn .body {
  color: var(--fg-warn);
}
.dialog.danger .header, .dialog.danger .body {
  color: var(--fg-danger);
}

/** styles for all list-type modals */
/** list select type dialog base styles */
#modal > .dialog.list {
  /* constrain width and let inner elements flex */
  width: calc(var(--form-element-width) + 2em);
}
#modal > .dialog.list .content {
  max-height: calc(8px + var(--modal-body-height));
}
#modal > .dialog.list .body {
  height: var(--modal-body-height);
}
@media screen and (max-width: 767px) {
  #modal > .dialog.list .body {
    padding-bottom: 1em;
    max-height: none;
    min-height: auto;
    height: var(--modal-body-height);
    justify-content: flex-start;
  }
}
#modal > .dialog.list .body #modal-file-url-save {
  width: auto;
  padding: 0 1em;
}
#modal > .dialog.list .entries {
  /* these will usually be cameos, but any direct child should get these styles */
}
#modal > .dialog.list .entries > * {
  cursor: pointer;
  width: 100%;
  margin-bottom: var(--form-element-margin);
  border-radius: var(--radius);
  background-color: var(--bg-zebra);
}
#modal > .dialog.list .entries > *:nth-child(even) {
  background-color: var(--bg-element);
}
#modal > .dialog.list .entries > *:first-child {
  margin-top: 0;
}
#modal > .dialog.list .entries > *:last-child {
  margin-bottom: 0;
}
#modal > .dialog.list .entries > *:hover {
  background-color: var(--bg-hover);
}
@media screen and (max-width: 767px) {
  #modal > .dialog.list.with-header .fab {
    /* align close fab with search bar in header when present */
    top: 18px;
  }
}
#modal > .dialog.list.with-header .header {
  flex-wrap: wrap;
  padding-top: 3rem;
}
#modal > .dialog.list.with-header .header .search button {
  margin: 0;
}
#modal > .dialog.list.with-header .header .multi-toggle {
  margin-right: calc(-1 * var(--fab-header-spacing) + 1rem);
  width: calc(100% + var(--fab-header-spacing) - 1rem);
}

/** styles for all single-column form modals */
/** form modals are single column and contain form elements */
#modal > .dialog.form {
  /* constrain width and let inner elements flex */
  width: calc(var(--form-element-width) + 2em);
}

/** components used exclusively by modal dialogs */
#modal > .dialog .search, #modal > .dialog .add {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--form-element-margin);
}
#modal > .dialog .search input, #modal > .dialog .add input {
  width: 100%;
  flex-shrink: 1;
  flex-grow: 1;
}
@media screen and (max-width: 767px) {
  #modal > .dialog .search input, #modal > .dialog .add input {
    min-width: 0;
  }
}
#modal > .dialog .search div[role=group], #modal > .dialog .add div[role=group] {
  width: 100%;
}
#modal > .dialog .search button, #modal > .dialog .add button {
  width: var(--form-element-height);
  height: var(--form-element-height);
  flex-shrink: 0;
  flex-grow: 0;
}

#modal > .dialog span.fab {
  right: 0;
  top: 0;
  z-index: 999;
}
#modal > .dialog span.fab:not(.back) i.fa {
  color: var(--fg-soft);
  background: transparent;
  border-radius: unset;
  box-shadow: unset;
  font-size: var(--fs-modal-body);
  width: 46px;
  height: 46px;
}
#modal > .dialog span.fab.back {
  right: auto;
  left: -58px;
}
#modal > .dialog span.fab.back i.fa {
  color: var(--bg-body);
  background: var(--fg-accent);
}

/** individual modals */
/** manage grants dialog */
#modal > .dialog.manage-grants {
  --modal-width: 900px;
  width: var(--modal-width);
}
#modal > .dialog.manage-grants.no-select {
  max-width: calc(var(--form-element-width) + 2rem);
}
#modal > .dialog.manage-grants.no-select .panes .pane.with-divider {
  display: none;
}
#modal > .dialog.manage-grants .toggle > span {
  width: 100%;
  justify-content: space-between;
}
#modal > .dialog.manage-grants .content .body {
  padding: 0 var(--modal-side-padding);
}
#modal > .dialog.manage-grants .panes {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 30px;
}
#modal > .dialog.manage-grants .panes h3 {
  margin: 1rem 0 0.5rem;
  font-weight: inherit;
}
#modal > .dialog.manage-grants .panes h3:first-child {
  margin-top: 0;
}
#modal > .dialog.manage-grants .panes .pane.grow {
  flex: 1;
}
#modal > .dialog.manage-grants .panes .pane:empty {
  display: none;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.manage-grants .panes .pane {
    width: 100%;
  }
}
#modal > .dialog.manage-grants .panes .pane.with-divider {
  padding: 35px 0;
}
@media screen and (min-width: 768px) {
  #modal > .dialog.manage-grants .panes .pane.with-divider .divider {
    display: block;
    width: 1px;
    height: 100%;
    background: rgba(16, 44, 128, 0.1);
  }
}
#modal > .dialog.manage-grants .panes .pane .toggle-box, #modal > .dialog.manage-grants .panes .pane > button, #modal > .dialog.manage-grants .panes .pane .cameo {
  margin: 6px auto;
  height: var(--form-element-height);
}
#modal > .dialog.manage-grants .panes .messages {
  grid-column: span 2;
  margin: 0 auto;
  max-width: initial;
}
#modal > .dialog.manage-grants .panes .buttons {
  display: none;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.manage-grants {
    width: 100%;
    --panes: 1;
  }
}
#modal > .dialog.manage-grants .info-messages {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0;
}
#modal > .dialog.manage-grants .info-messages .info-message:not(:first-child) {
  margin-top: 6px;
}
#modal > .dialog.manage-grants .info-messages .info-message.fail {
  color: var(--fg-danger);
}
#modal > .dialog.manage-grants .info-messages .info-message.success {
  color: var(--fg-secondary);
}

#modal > .dialog.message-list {
  width: 768px;
}

.advanced-message-search .header {
  padding-bottom: 0.5rem !important;
}
.advanced-message-search h3 {
  font-size: 22px !important;
}
.advanced-message-search p {
  margin-bottom: 0.5rem;
}
.advanced-message-search .date-time input::-webkit-calendar-picker-indicator {
  filter: invert(48%) sepia(32%) saturate(419%) hue-rotate(190deg) brightness(95%) contrast(96%);
}
.advanced-message-search .content button, .advanced-message-search .content .toggle, .advanced-message-search .content .cameo {
  margin-top: 1rem;
}
.advanced-message-search .cameo button {
  margin-top: 0;
}
.advanced-message-search .content button.stand-in {
  width: auto;
}

@media screen and (max-width: 767px) {
  #modal > .dialog.advanced-search .header {
    width: 100vw;
    border-radius: 0;
    /* make room for close button */
    padding-right: 75px;
  }
}
#modal > .dialog.advanced-search .header h3 {
  font-size: var(--fs-sh);
  line-height: var(--fs-sh);
  text-transform: uppercase;
  color: var(--fg-primary);
}
#modal > .dialog.advanced-search form > .buttons {
  margin-top: 1rem;
}
#modal > .dialog.advanced-search .content .body {
  margin-bottom: calc(-1 * var(--form-element-margin));
}

@media screen and (max-width: 767px) {
  #modal > .dialog.advanced-search.advanced-content-search .body #advanced-form input[type=text] {
    width: 100%;
    /* adjust to make room for close fab */
  }
  #modal > .dialog.advanced-search.advanced-content-search .body #advanced-form input[type=text][name=id] {
    width: calc(100% - 60px);
    margin-top: -3px;
  }
}
#modal > .dialog.advanced-search.advanced-content-search .body #advanced-form .select-wrapper {
  display: flex;
  justify-content: space-between;
  background-color: var(--bg-element);
  width: var(--form-element-width);
  border: 1px solid var(--bg-element);
  border-radius: var(--radius);
  margin-bottom: 6px;
}
#modal > .dialog.advanced-search.advanced-content-search .body #advanced-form .select-wrapper input {
  flex-shrink: unset;
  border: none;
  background-color: var(--bg-element);
}
#modal > .dialog.advanced-search.advanced-content-search .body #advanced-form .select-wrapper button i {
  font-size: var(--lh-button);
  margin: 0;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.advanced-search.advanced-content-search .body #advanced-form .select-wrapper input {
    flex-grow: 1;
  }
  #modal > .dialog.advanced-search.advanced-content-search .body #advanced-form .select-wrapper button {
    flex-grow: 0;
    flex-shrink: 1;
  }
}
#modal > .dialog.advanced-search.advanced-content-search .footer .buttons {
  margin: calc(-1 * var(--form-element-margin)) 0;
}

#modal > .dialog.advanced-evaluation-search .show-help {
  margin-left: 0.8em;
}
#modal > .dialog.advanced-evaluation-search div[role=group] {
  position: relative;
}
#modal > .dialog.advanced-evaluation-search .help-container {
  display: flex;
  align-items: center;
}
#modal > .dialog.advanced-evaluation-search .help-container .toggle-box {
  width: 100%;
}

#modal > .dialog.advanced-search.advanced-search-users {
  width: calc(var(--form-element-width) * 2 + 3rem);
  max-width: initial;
}
#modal > .dialog.advanced-search.advanced-search-users form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 1rem;
}
#modal > .dialog.advanced-search.advanced-search-users .list-entry {
  padding-left: 0;
  padding-right: 0;
}
#modal > .dialog.advanced-search.advanced-search-users .list-entry .user {
  width: 100%;
}
#modal > .dialog.advanced-search.advanced-search-users .multi-toggle .notches-wrapper p {
  width: 25%;
}
#modal > .dialog.advanced-search.advanced-search-users .multi-toggle .notches-wrapper .notches {
  width: 75%;
}

.dialog.chat-user-list-dialog .header {
  padding-bottom: 0.5rem !important;
}
.dialog.chat-user-list-dialog .search {
  min-width: var(--form-element-width);
  margin-bottom: 0.5rem;
}

/** help/faq modal dialogs */
#modal > .dialog.common-faq {
  --modal-top-padding: 50px;
  --modal-bottom-padding: 36px;
  max-width: var(--modal-width);
  width: unset;
  min-width: calc(var(--modal-width) - 200px);
}
@media screen and (min-width: 768px) {
  #modal > .dialog.common-faq {
    --modal-width: 1000px;
    --modal-body-height: 500px;
    --modal-side-padding: 41px;
  }
}
@media screen and (max-width: 767px) {
  #modal > .dialog.common-faq {
    --modal-width: 100%;
    --modal-body-height: 100% !important;
    --modal-side-padding: 1rem;
  }
}
#modal > .dialog.common-faq.help-modal-admin-welcome {
  --modal-body-height: 360px;
}
#modal > .dialog.common-faq.help-modal-add-content-bulk {
  --modal-body-height: 460px;
}
#modal > .dialog.common-faq.help-modal-add-content {
  --modal-body-height: 428px;
}
#modal > .dialog.common-faq.help-modal-add-user-bulk {
  --modal-body-height: 460px;
}
#modal > .dialog.common-faq.help-modal-course-welcome {
  --modal-body-height: 435px;
}
#modal > .dialog.common-faq.help-modal-pwa-ios {
  --modal-body-height: 469px;
}
#modal > .dialog.common-faq.help-modal-pwa-android {
  --modal-body-height: 444px;
}
#modal > .dialog.common-faq.help-modal-ftp {
  --modal-body-height: 510px;
}
#modal > .dialog.common-faq.help-modal-add-new-page {
  --modal-body-height: 472px;
}
#modal > .dialog.common-faq.help-modal-edit-menu {
  --modal-body-height: 482px;
}
#modal > .dialog.common-faq.help-modal-evaluation-advanced-search {
  --modal-body-height: 376px;
}
#modal > .dialog.common-faq.help-modal-question-grading {
  --modal-body-height: 594px;
}
#modal > .dialog.common-faq.help-modal-question-text {
  --modal-body-height: 429px;
}
#modal > .dialog.common-faq.help-modal-system-privilege {
  --modal-body-height: 408px;
}
#modal > .dialog.common-faq.help-modal-home {
  --modal-body-height: 545px;
}
#modal > .dialog.common-faq .spaced-top {
  margin-top: 10px;
}
#modal > .dialog.common-faq .content {
  padding: var(--modal-top-padding) var(--modal-side-padding) var(--modal-bottom-padding) var(--modal-side-padding) !important;
  height: calc(var(--modal-body-height) + var(--modal-top-padding) + var(--modal-bottom-padding));
  max-height: calc(var(--modal-body-height) + var(--modal-top-padding) + var(--modal-bottom-padding)) !important;
}
#modal > .dialog.common-faq .header {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--bg-body);
  padding: 0.5em 1em;
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: var(--fs-h3);
}
@media screen and (max-width: 767px) {
  #modal > .dialog.common-faq .header {
    border-radius: 0;
    /* make room for close button */
  }
}
#modal > .dialog.common-faq .header h3 {
  font-size: var(--fs-sh);
  line-height: var(--fs-sh);
  text-transform: uppercase;
  color: var(--fg-primary);
}
#modal > .dialog.common-faq .body {
  display: flex;
  flex-direction: column;
  border-radius: 0;
  overflow: auto;
  height: 100%;
  padding: 0;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.common-faq .body {
    min-height: initial;
    height: 100%;
  }
}
#modal > .dialog.common-faq .body .modal-content-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#modal > .dialog.common-faq .body .modal-content-container img {
  width: 110px;
  height: 110px;
}
#modal > .dialog.common-faq .body .modal-content-container img.img-md {
  width: 173px;
  height: 173px;
}
#modal > .dialog.common-faq .body .modal-content-container img.img-lg {
  width: 333px;
  height: 288px;
  object-fit: cover;
}
#modal > .dialog.common-faq .body .modal-content-container img.share {
  width: 16px;
  height: 16px;
  margin: 0 8px;
}
#modal > .dialog.common-faq .body .modal-content-container .text-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}
#modal > .dialog.common-faq .body .modal-content-container .text-align-left {
  text-align: left;
}
#modal > .dialog.common-faq .body .modal-content-container.centered {
  align-items: center;
}
#modal > .dialog.common-faq .body .modal-content-container .spaced-bottom {
  margin-bottom: 34px;
}
#modal > .dialog.common-faq .body .modal-content-container .spaced-bottom-sm {
  margin-bottom: 12px;
}
#modal > .dialog.common-faq .body .modal-content-container .spaced-left-sm {
  margin-left: 12px;
}
#modal > .dialog.common-faq .body .modal-content-container p {
  font-size: var(--fs-modal-body);
  font-weight: 500;
  line-height: var(--lh-modal-body);
  margin: 0;
  text-align: center;
}
#modal > .dialog.common-faq .body .modal-content-container p.title {
  font-weight: 700;
  font-size: var(--fs-modal-title);
}
#modal > .dialog.common-faq .body .modal-content-container p.title.spaced-bottom {
  margin-bottom: 18px;
}
#modal > .dialog.common-faq .body .modal-content-container p.spaced-bottom {
  margin-bottom: 15px;
}
#modal > .dialog.common-faq .body ol, #modal > .dialog.common-faq .body ul {
  margin: 0;
}
#modal > .dialog.common-faq .body ol > li, #modal > .dialog.common-faq .body ul > li {
  font-size: var(--fs-modal-body);
  line-height: var(--lh-modal-body);
}
#modal > .dialog.common-faq .body ol > li.lh-md, #modal > .dialog.common-faq .body ul > li.lh-md {
  line-height: var(--lh-modal-body-md);
}
#modal > .dialog.common-faq .body ul {
  list-style-type: none;
}

/** alert & confirmation dialogs */
#modal > .dialog.confirm {
  width: min-content;
  min-width: calc(var(--form-element-width) + 2 * var(--fs-body));
}
@media screen and (max-width: 767px) {
  #modal > .dialog.confirm {
    width: inherit;
    min-width: inherit;
  }
}
#modal > .dialog.confirm .header {
  font-weight: 600;
  font-size: var(--fs-sh);
  line-height: var(--lh-sh);
  text-align: center;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.confirm .header {
    padding-right: 1rem;
  }
}
#modal > .dialog.confirm:not(.danger) .header {
  color: var(--fg-primary);
}
#modal > .dialog.confirm .content {
  text-align: center;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.confirm .content {
    flex-grow: 0;
  }
}
#modal > .dialog.confirm .content .body p {
  margin: 0.5rem 0;
  font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.confirm:not(.with-header) .content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-end;
  }
  #modal > .dialog.confirm:not(.with-header) .content .body {
    flex-grow: 0;
  }
}
#modal > .dialog.confirm .footer {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
#modal > .dialog.confirm .footer button, #modal > .dialog.confirm .footer a {
  margin: var(--form-element-margin) 0.25em;
}

#modal > .dialog.content-schedule-dialog {
  width: calc(2rem + var(--form-element-width));
}
#modal > .dialog.content-schedule-dialog .body {
  display: block;
  height: auto;
  width: 100%;
  padding: 1rem;
  border-radius: var(--radius);
}
#modal > .dialog.content-schedule-dialog .body .content-schedule {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0;
}
#modal > .dialog.content-schedule-dialog .body > :last-child {
  margin-bottom: 0;
}

/** content-select dialog **/
#modal > .dialog.content-select .body {
  height: var(--modal-body-height);
}
@media screen and (max-width: 767px) {
  #modal > .dialog.content-select .body {
    max-height: none;
    min-height: auto;
  }
}
#modal > .dialog.content-select .footer {
  height: auto;
}

@media screen and (min-width: 768px) {
  #modal > .dialog.course-lecture {
    --modal-width: 838px;
    width: var(--modal-width);
  }
}
@media screen and (max-width: 767px) {
  #modal > .dialog.course-lecture {
    --modal-width: 100vw;
    --modal-body-height: 100%;
  }
}
#modal > .dialog.course-lecture .breadcrumbs {
  display: block;
  text-align: center;
  padding: 0.5rem;
  color: var(--fg-accent);
}
#modal > .dialog.course-lecture .body {
  display: flex;
  flex-direction: column;
  width: 100%;
}
#modal > .dialog.course-lecture .body form#course-lecture {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 29px;
}
@media screen and (min-width: 768px) {
  #modal > .dialog.course-lecture .body form#course-lecture {
    padding-left: calc(69px - 1rem);
    padding-right: calc(69px - 1rem);
  }
}
#modal > .dialog.course-lecture .body form#course-lecture .cameo {
  width: 100%;
}
#modal > .dialog.course-lecture .body form#course-lecture .field.multi-toggle {
  margin-bottom: 29px;
}
#modal > .dialog.course-lecture .body form#course-lecture .field.multi-toggle p {
  display: none;
}
#modal > .dialog.course-lecture .body form#course-lecture .field.multi-toggle .notches-wrapper {
  justify-content: center;
}
#modal > .dialog.course-lecture .body form#course-lecture .field.multi-toggle .notches-wrapper .notches {
  width: 100%;
}
#modal > .dialog.course-lecture .body form#course-lecture .field.text-input input {
  width: 100%;
}
#modal > .dialog.course-lecture .body form#course-lecture .field.date-time {
  max-width: 100%;
}
#modal > .dialog.course-lecture .body form#course-lecture .content-schedule button {
  margin-top: 15px;
}
#modal > .dialog.course-lecture .body form#course-lecture textarea {
  max-width: 100%;
  min-width: 100%;
  min-height: 195px;
}
#modal > .dialog.course-lecture .body form#course-lecture .pane {
  display: none;
}
#modal > .dialog.course-lecture .body form#course-lecture .pane.visible {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 768px) {
  #modal > .dialog.course-module {
    --modal-width: 838px;
    width: var(--modal-width);
  }
}
#modal > .dialog.course-module .body {
  display: flex;
  flex-direction: column;
  width: 100%;
}
#modal > .dialog.course-module .body form#course-module {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 29px;
}
@media screen and (min-width: 768px) {
  #modal > .dialog.course-module .body form#course-module {
    padding-left: calc(69px - 1rem);
    padding-right: calc(69px - 1rem);
  }
}
#modal > .dialog.course-module .body form#course-module .cameo {
  width: 100%;
}
#modal > .dialog.course-module .body form#course-module .field.multi-toggle {
  margin-bottom: 29px;
}
#modal > .dialog.course-module .body form#course-module .field.multi-toggle p {
  display: none;
}
#modal > .dialog.course-module .body form#course-module .field.multi-toggle .notches-wrapper {
  justify-content: center;
}
#modal > .dialog.course-module .body form#course-module .field.text-input input {
  width: 100%;
}
#modal > .dialog.course-module .body form#course-module .field.date-time {
  max-width: 100%;
}
#modal > .dialog.course-module .body form#course-module .content-schedule button {
  margin-top: 15px;
}
#modal > .dialog.course-module .body form#course-module textarea {
  max-width: 100%;
  min-width: 100%;
  min-height: 195px;
}
#modal > .dialog.course-module .body form#course-module .no-assessments-title {
  font-size: var(--fs-modal-body);
  text-align: center;
}
#modal > .dialog.course-module .body form#course-module .pane {
  display: none;
}
#modal > .dialog.course-module .body form#course-module .pane.visible {
  display: flex;
  flex-direction: column;
}

.dm-thread-select button.primary {
  margin-top: 1em;
}

/** modal for editing a submitted answer in an evaluation */
#modal > .dialog.edit-answer {
  --modal-width: 504px;
  width: var(--modal-width);
}
#modal > .dialog.edit-answer .toggle-box {
  width: max-content;
  margin: 1em auto 0;
}
#modal > .dialog.edit-answer textarea {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  height: 195px;
}
#modal > .dialog.edit-answer .toggle {
  width: fit-content;
  margin: auto;
}
#modal > .dialog.edit-answer .toggle .inner {
  font-size: var(--fs-modal-body);
  margin-bottom: 17px;
}
#modal > .dialog.edit-answer .toggle .inner label {
  margin-right: 12px;
}
#modal > .dialog.edit-answer .content {
  padding-top: calc(35px - 1rem);
}
#modal > .dialog.edit-answer .content .body {
  padding: 0 50px;
}

#modal > .dialog.edit-text-block-form .content .body {
  margin-bottom: 29px;
}

@media screen and (max-width: 767px) {
  #modal > .dialog.evaluation-manual-grading .body {
    display: block;
  }
}
@media screen and (min-width: 768px) {
  #modal > .dialog.evaluation-manual-grading {
    --modal-width: 1230px;
    width: var(--modal-width);
  }
  #modal > .dialog.evaluation-manual-grading .body {
    padding: 0 41px;
  }
}
#modal > .dialog.evaluation-manual-grading #evaluation-manual-grading {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 30px;
}
#modal > .dialog.evaluation-manual-grading .pane.grow {
  flex-grow: 1;
  flex-shrink: 0;
}
#modal > .dialog.evaluation-manual-grading .pane.with-divider {
  padding: 35px 0;
}
@media screen and (min-width: 768px) {
  #modal > .dialog.evaluation-manual-grading .pane.with-divider .divider {
    display: block;
    width: 1px;
    height: 100%;
    background: rgba(16, 44, 128, 0.1);
  }
}
#modal > .dialog.evaluation-manual-grading .pane h4 {
  font-size: 22px;
  font-weight: 700;
  line-height: 161.5%;
  text-transform: uppercase;
  text-align: center;
  color: var(--fg-primary);
}
#modal > .dialog.evaluation-manual-grading .pane h4:first-child {
  margin-top: 0;
}
#modal > .dialog.evaluation-manual-grading .pane h4:not(:first-child) {
  margin-top: 40px;
  margin-bottom: 19px;
}
#modal > .dialog.evaluation-manual-grading .pane:first-child h4 {
  margin-top: 40px;
  margin-bottom: 15px;
}
#modal > .dialog.evaluation-manual-grading .field.textarea {
  width: 100%;
}
#modal > .dialog.evaluation-manual-grading .field.textarea textarea {
  max-width: 100%;
  min-width: 100%;
}
#modal > .dialog.evaluation-manual-grading .field.textarea textarea[name=text] {
  height: 150px;
}
#modal > .dialog.evaluation-manual-grading .field.textarea textarea[name=description] {
  height: 235px;
}
#modal > .dialog.evaluation-manual-grading .field.text-input input, #modal > .dialog.evaluation-manual-grading .field.number input {
  width: 100%;
}
#modal > .dialog.evaluation-manual-grading .cameo {
  width: 100%;
}
#modal > .dialog.evaluation-manual-grading .highlighted {
  font-weight: 700;
  border-color: var(--fg-primary);
}
#modal > .dialog.evaluation-manual-grading .container-help {
  display: flex;
  align-items: center;
}
#modal > .dialog.evaluation-manual-grading .container-help .icon {
  margin-left: 10px;
  cursor: pointer;
}
#modal > .dialog.evaluation-manual-grading .used-points {
  text-align: end;
  font-size: 13px;
  color: var(--fg-soft);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#modal > .dialog.file-select .body {
  height: var(--modal-body-height);
}
#modal > .dialog.file-select div.tab-container {
  width: 100%;
}
#modal > .dialog.file-select div.notches {
  width: var(--tab-width);
}

@media screen and (min-width: 768px) {
  #modal > .dialog.file-url {
    --modal-width: 504px;
    width: var(--modal-width);
  }
  #modal > .dialog.file-url .body {
    padding: 0 49px;
  }
}
#modal > .dialog.file-url .body .icon {
  display: flex;
  width: 110px;
  height: 110px;
  font-size: 110px;
  justify-content: center;
  align-items: center;
  margin: 34px auto 0;
}
#modal > .dialog.file-url .body input[name=file_url_modal_value] {
  margin-top: 17px;
  margin-bottom: 35px;
  width: 100%;
}
#modal > .dialog.file-url .body p {
  margin: 35px 0 0;
  font-size: var(--fs-h4);
  letter-spacing: -0.1px;
}

/** modal for selecting a grading scheme */
@media screen and (min-width: 768px) {
  #modal > .dialog.grading-scheme-select {
    --modal-width: 838px;
    width: var(--modal-width);
  }
  #modal > .dialog.grading-scheme-select .body {
    padding: 0 69px;
  }
}
#modal > .dialog.grading-scheme-select .field.toggle {
  width: fit-content;
  margin: 0 auto;
}
#modal > .dialog.grading-scheme-select .field.toggle > span {
  margin: 0;
  padding: 0;
  height: fit-content;
  font-size: var(--fs-modal-body);
}
#modal > .dialog.grading-scheme-select .field.toggle > span label {
  margin-right: 10px;
}
#modal > .dialog.grading-scheme-select .field.radio {
  margin: 35px 0;
}
#modal > .dialog.grading-scheme-select .field.radio .inner-radio {
  justify-content: center;
}
#modal > .dialog.grading-scheme-select .field.radio .inner-radio > span {
  width: 220px;
  height: 181px;
}
#modal > .dialog.grading-scheme-select .field.radio .inner-radio > span input {
  display: none;
}
#modal > .dialog.grading-scheme-select .field.radio .inner-radio > span .entry-content .icon {
  width: 80px !important;
  height: 80px;
  font-size: 48px;
}
#modal > .dialog.grading-scheme-select .field.radio .inner-radio > span .entry-content .title {
  text-transform: initial;
}
#modal > .dialog.grading-scheme-select .footer button {
  margin: 0;
}

#modal > .dialog.group {
  width: calc(var(--form-element-width) + 2em);
}
#modal > .dialog.group .body {
  display: flex;
  height: auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  border-radius: var(--radius);
  padding: 1rem;
}
#modal > .dialog.group .body .members {
  /* 8px = 6px margin + 2px borders */
  --cam-height: calc(var(--form-element-height) + 8px);
  max-height: calc(var(--cam-height) * 5);
  overflow-y: auto;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.group .body .members {
    max-height: initial;
    width: 100%;
  }
}
#modal > .dialog.group h2 {
  font-size: var(--fs-sh);
  line-height: var(--lh-sh);
}

#modal > .dialog.label-select {
  --modal-width: 600px;
  width: var(--modal-width);
}
#modal > .dialog.label-select .header {
  padding-top: 50px;
}
#modal > .dialog.label-select .body {
  min-height: auto;
  max-height: var(--modal-body-height);
}
#modal > .dialog.label-select .header, #modal > .dialog.label-select .body, #modal > .dialog.label-select .footer {
  padding-left: var(--modal-side-padding);
  padding-right: var(--modal-side-padding);
}
#modal > .dialog.label-select .entries {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  margin: 0;
  justify-content: stretch;
  align-items: center;
  margin-right: -0.5rem;
}
#modal > .dialog.label-select .footer {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-body);
  height: auto;
}
#modal > .dialog.label-select .footer .add button {
  margin-top: 0;
}
#modal > .dialog.label-select .label {
  border-radius: calc(var(--radius) * 0.5);
  margin: 0 0.5rem 0.5rem 0;
  color: var(--bg-body);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  width: auto;
  flex-shrink: 1;
  flex-grow: 1;
  text-align: center;
  transition: all var(--anim-step) ease;
  /** base colors */
  background-color: var(--fg-accent);
  filter: brightness(1) grayscale(0) opacity(1);
}
#modal > .dialog.label-select .label:is(:hover, :active, :focus) {
  filter: brightness(1.3) grayscale(0) opacity(1);
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
#modal > .dialog.label-select .label:nth-child(4n+1) {
  background-color: var(--fg-secondary);
}
#modal > .dialog.label-select .label:nth-child(4n+1):is(:hover, :active, :focus) {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
#modal > .dialog.label-select .label:nth-child(4n+2) {
  background-color: var(--fg-primary);
}
#modal > .dialog.label-select .label:nth-child(4n+2):is(:hover, :active, :focus) {
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
#modal > .dialog.label-select .label:nth-child(4n+3) {
  background-color: var(--fg-alternate);
}
#modal > .dialog.label-select .label:nth-child(4n+3):is(:hover, :active, :focus) {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
#modal > .dialog.label-select.multi .label:not(.selected, :hover, :active, :focus) {
  filter: brightness(1) grayscale(1) opacity(0.5);
}
@media screen and (max-width: 767px) {
  #modal > .dialog.label-select {
    background-color: var(--bg-body);
    height: 100%;
  }
  #modal > .dialog.label-select .body {
    flex-grow: 1;
  }
}

/** modal for adding links in rich text editor */
#modal > .dialog.link-select {
  width: calc(var(--form-element-width) + 2rem);
}
#modal > .dialog.link-select .body form {
  display: flex;
  flex-direction: column;
}
#modal > .dialog.link-select .body form .buttons {
  display: none;
}
#modal > .dialog.link-select .body form .messages p {
  margin: 1rem 0 0;
}
#modal > .dialog.link-select .body .tab-container {
  margin: 0;
}
#modal > .dialog.link-select .body .tab-container .notches-wrapper {
  margin-bottom: 6px;
}
#modal > .dialog.link-select .body .tab-container .notches-wrapper p {
  display: none;
}
#modal > .dialog.link-select .body .tab-container .notches-wrapper .notches {
  width: 100%;
}
#modal > .dialog.link-select .body .cameo {
  margin: 6px 0;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.link-select .body {
    justify-content: flex-end;
  }
}

#modal > .dialog.login-information-dialog .sign-in-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
}
#modal > .dialog.login-information-dialog .sign-in-container button {
  margin: 0;
  padding-left: 10px;
}

#modal > .dialog.login-form .content {
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 40px !important;
}
#modal > .dialog.login-form #submit-login {
  margin-top: 22px;
  margin-bottom: 22px;
}

/** modal for editing page sections */
@keyframes to-child {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(-100vw);
  }
  51% {
    transform: translate(100vw);
  }
  100% {
    transform: translate(0);
  }
}
#modal > .dialog.menu-entry-edit {
  --modal-width: 950px;
  width: var(--modal-width);
  animation-fill-mode: forwards;
  animation-timing-function: ease;
  animation-duration: calc(2 * var(--anim-step));
}
#modal > .dialog.menu-entry-edit.to-parent {
  animation-name: to-child;
  animation-direction: reverse;
}
#modal > .dialog.menu-entry-edit.to-child {
  animation-name: to-child;
  animation-direction: normal;
}
#modal > .dialog.menu-entry-edit.from-parent {
  animation-name: to-child;
  animation-direction: normal;
  animation-delay: calc(-1 * var(--anim-step));
}
#modal > .dialog.menu-entry-edit .header .breadcrumbs {
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 22px;
}
#modal > .dialog.menu-entry-edit .header .spacer {
  background: var(--bg-element);
  margin: 1rem calc(41px - 1rem);
  width: auto;
}
#modal > .dialog.menu-entry-edit .body {
  height: auto;
  overflow-y: auto;
  max-height: unset;
  border-radius: 0;
  padding: var(--modal-body-padding-lg);
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}
#modal > .dialog.menu-entry-edit .body h3 {
  text-align: center;
  font-size: 22px;
  margin: 0;
  color: var(--fg-primary);
  font-weight: 600;
}
#modal > .dialog.menu-entry-edit .body hr {
  margin-top: var(--fs-body);
}
#modal > .dialog.menu-entry-edit .body #menu-entry-edit, #modal > .dialog.menu-entry-edit .body #menu-entry-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-basis: var(--form-element-width);
  flex-grow: 1;
  flex-shrink: 0;
}
#modal > .dialog.menu-entry-edit .body .pane.with-divider {
  padding: 35px 0;
}
#modal > .dialog.menu-entry-edit .body .pane.with-divider .divider {
  display: block;
  width: 1px;
  height: 100%;
  background: var(--bg-element);
}
#modal > .dialog.menu-entry-edit .body .tab-container {
  width: var(--form-element-width);
}
#modal > .dialog.menu-entry-edit .footer .buttons {
  flex-direction: row;
}
#modal > .dialog.menu-entry-edit .footer .buttons button.icon {
  width: 45px;
  height: 45px;
  margin-right: 10px;
}
#modal > .dialog.menu-entry-edit .metadata-entry, #modal > .dialog.menu-entry-edit .selected-page {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-element);
  height: var(--form-element-height);
  border-radius: var(--radius);
  padding: 0 1rem;
}
#modal > .dialog.menu-entry-edit .metadata-entry i, #modal > .dialog.menu-entry-edit .selected-page i {
  margin-bottom: 2px;
}
#modal > .dialog.menu-entry-edit .image-entry {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--form-element-width);
  height: var(--form-element-height);
  padding: var(--form-element-padding);
  border: 1px solid var(--bg-element);
  outline: none;
  font-size: var(--fs-body);
  background: var(--bg-body);
  color: var(--fg-body);
  transition: border-color var(--anim-step) ease;
  border-radius: var(--radius);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
#modal > .dialog.menu-entry-edit .image-entry.warn, #modal > .dialog.menu-entry-edit .image-entry.invalid, #modal > .dialog.menu-entry-edit .image-entry.danger {
  border-color: var(--fg-danger);
}
#modal > .dialog.menu-entry-edit .image-entry::placeholder {
  color: var(--bg-main);
}
#modal > .dialog.menu-entry-edit .image-entry:focus, #modal > .dialog.menu-entry-edit .image-entry:focus-within, #modal > .dialog.menu-entry-edit .image-entry:hover, #modal > .dialog.menu-entry-edit .image-entry:active {
  outline: none;
  border-color: var(--bg-main);
}
#modal > .dialog.menu-entry-edit .image-entry:disabled, #modal > .dialog.menu-entry-edit .image-entry.disabled {
  border-color: var(--bg-main);
  background: var(--bg-element);
  color: var(--bg-main);
}
#modal > .dialog.menu-entry-edit .image-entry > i {
  font-size: 20px;
  margin-right: 0.5rem;
  margin-bottom: 3px;
  color: var(--fg-primary);
}
#modal > .dialog.menu-entry-edit .image-entry > i.danger {
  color: var(--fg-danger);
}
#modal > .dialog.menu-entry-edit .image-entry span {
  flex-grow: 1;
  flex-shrink: 0;
}
#modal > .dialog.menu-entry-edit .image-entry button {
  margin: 5px 0.5rem 5px 0;
  height: 30px;
  width: 30px;
  flex-shrink: 1;
  flex-grow: 0;
}
#modal > .dialog.menu-entry-edit .image-entry button:last-child {
  margin-right: 0;
}
#modal > .dialog.menu-entry-edit .sub-menu-add-link {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
#modal > .dialog.menu-entry-edit .sub-menu-add-link > button {
  width: auto;
  margin: 0 0.5rem;
}
#modal > .dialog.menu-entry-edit .sub-menu-add-link > button > i {
  margin: 0 0.25rem;
}

.message-profile-dialog .title .label {
  display: flex;
  align-items: center;
  font-size: var(--fs-sub);
}
.message-profile-dialog .title .username {
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.message-profile-dialog .title .delimiter {
  margin: 0 0.5em;
}
.message-profile-dialog .title i {
  margin-right: 0.5em;
}
.message-profile-dialog .container-justified {
  width: var(--form-element-width);
  margin-top: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.message-profile-dialog .created span:last-child {
  color: var(--fg-body);
}
.message-profile-dialog .status {
  font-size: var(--fs-sub);
}
.message-profile-dialog .status span:last-child {
  color: var(--fg-accent);
}
.message-profile-dialog .message-body {
  color: var(--fg-body);
  margin-top: 1em;
  position: relative;
  width: inherit;
  display: flex;
  flex-direction: column;
  background: var(--bg-body-alt);
  border: 1px solid var(--bg-element);
  border-radius: var(--radius);
  padding: 10px 16px;
}
.message-profile-dialog .controls {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  margin-top: 1em;
}
.message-profile-dialog .controls button {
  width: 100%;
}

#modal > .dialog.notifications {
  --modal-width: 500px;
  width: var(--modal-width);
}
#modal > .dialog.notifications .header {
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 22px;
}
#modal > .dialog.notifications.empty .body {
  border-radius: var(--radius) var(--radius) 0 0;
}
#modal > .dialog.notifications .body {
  height: unset;
  max-height: 300px;
}
#modal > .dialog.notifications .spacer .divider {
  margin: 0 1rem;
}
#modal > .dialog.notifications .footer button {
  width: auto;
}
#modal > .dialog.notifications .notification-dropdown {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  transition: all var(--anim-step) ease;
  background: var(--bg-body);
  color: var(--fg-body);
  border: 0;
  padding: 10px 0;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.notifications .notification-dropdown {
    right: 0;
    width: 100%;
    top: var(--header-height);
  }
}
#modal > .dialog.notifications .notification-dropdown .label-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 16px;
  margin-top: 44px;
  text-transform: capitalize;
}
#modal > .dialog.notifications .notification-dropdown button {
  align-self: center;
}
#modal > .dialog.notifications .notification-dropdown .notification-item {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-bottom: 1px solid rgba(16, 44, 128, 0.1);
}
#modal > .dialog.notifications .notification-dropdown .notification-item:last-of-type {
  border-bottom: 0;
}
#modal > .dialog.notifications .notification-dropdown .notification-item .created-at {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-alternate);
}
#modal > .dialog.notifications .notification-dropdown .notification-item .message {
  color: var(--fg-primary);
  overflow-wrap: break-word;
  font-size: 17px;
}

/** styles specific to content dialogs */
#modal > .dialog.preview-content {
  --modal-body-height: 560px;
  --poster-width: calc(var(--modal-body-height) * 15 / 22);
  --list-width: calc(var(--poster-width) / 1.61);
  --info-width: var(--poster-width);
  --modal-width: calc(var(--poster-width) + var(--info-width) + 1em);
  width: var(--modal-width);
  height: var(--modal-body-height);
}
#modal > .dialog.preview-content:is([data-meta-type=DYNAMIC_LIST_METADATA], [data-meta-type=LIST_METADATA], [data-meta-type=COURSE_METADATA], [data-meta-type=MODULE_METADATA]) {
  --modal-width: calc(var(--poster-width) + var(--list-width) + var(--info-width) + 2em);
}
#modal > .dialog.preview-content:is([data-meta-type=COURSE_METADATA], [data-meta-type=MODULE_METADATA]) {
  --list-width: auto;
}
#modal > .dialog.preview-content:is([data-meta-type=COURSE_METADATA], [data-meta-type=MODULE_METADATA]) .poster {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
#modal > .dialog.preview-content:is([data-meta-type=COURSE_METADATA], [data-meta-type=MODULE_METADATA]) .poster .icon {
  font-size: 400px;
}
#modal > .dialog.preview-content .content {
  width: 100%;
  height: 100%;
  max-height: initial;
}
#modal > .dialog.preview-content .body {
  display: flex;
  flex-direction: row;
  height: 100%;
}
#modal > .dialog.preview-content .body .entry-count {
  color: var(--fg-soft);
  text-align: center;
}
#modal > .dialog.preview-content h3 {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  font-weight: 600;
  margin: 0;
  width: 100%;
  text-align: center;
  color: var(--fg-primary);
  overflow: hidden;
  word-wrap: break-word;
}
#modal > .dialog.preview-content .pane {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  flex-shrink: 1;
  flex-grow: 1;
}
#modal > .dialog.preview-content .poster-pane { /* poster pane */
  position: relative;
  flex-shrink: 0;
  padding: 0;
  overflow: hidden;
  width: var(--poster-width);
  margin-right: 1em;
}
#modal > .dialog.preview-content .poster-pane img.poster {
  border-radius: var(--radius);
  width: var(--poster-width);
  max-height: 100%;
  object-fit: cover;
}
#modal > .dialog.preview-content .list-pane {
  display: flex;
  flex-direction: column;
  width: var(--list-width);
  flex-shrink: 0;
  height: 100%;
  overflow: hidden;
  padding: 0.5rem 0 0.5rem 1rem;
  margin-left: 1rem;
  border-left: 1px solid var(--bg-element);
  --item-height: 41px;
}
#modal > .dialog.preview-content .list-pane .items {
  max-height: calc((var(--item-height) + 6px) * 10);
  margin-top: 1rem;
  justify-self: flex-end;
  overflow: auto;
}
#modal > .dialog.preview-content .list-pane .list-item {
  width: 100%;
  overflow: hidden;
  padding: 0 1rem;
  margin: 6px 0;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: var(--item-height);
  height: var(--item-height);
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: all var(--anim-step) ease;
  border: 1px solid var(--bg-element);
  border-radius: var(--radius);
}
#modal > .dialog.preview-content .list-pane .list-item:first-child {
  margin-top: 0;
}
#modal > .dialog.preview-content .list-pane .list-item:last-child {
  margin-bottom: 0;
}
#modal > .dialog.preview-content .list-pane .list-item:hover, #modal > .dialog.preview-content .list-pane .list-item:focus, #modal > .dialog.preview-content .list-pane .list-item:active {
  border-color: var(--fg-primary);
  background: var(--bg-hover);
}
#modal > .dialog.preview-content progress {
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: var(--radius);
  background-color: rgba(255, 255, 255, 0.3);
  border: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  justify-self: start;
  width: 100%;
  overflow: hidden;
}
#modal > .dialog.preview-content progress::-webkit-progress-value {
  background: var(--fg-accent);
}
#modal > .dialog.preview-content progress::-webkit-progress-bar {
  background-color: transparent;
}
#modal > .dialog.preview-content progress::-moz-progress-bar {
  background-color: var(--fg-accent);
}
#modal > .dialog.preview-content .info-pane {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: var(--info-width);
  padding: 0.5em 0;
}
#modal > .dialog.preview-content .info-pane .info-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
#modal > .dialog.preview-content .info-pane .description {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  height: 100%;
  margin: 1em 0 0;
  word-wrap: break-word;
}
#modal > .dialog.preview-content .info-pane .description .full, #modal > .dialog.preview-content .info-pane .description .excerpt {
  overflow: auto;
}
#modal > .dialog.preview-content .info-pane .description .full {
  display: none;
}
#modal > .dialog.preview-content .info-pane .description p:first-of-type {
  margin-top: 0;
}
#modal > .dialog.preview-content .info-pane .description p:last-of-type {
  margin-bottom: 0;
}
#modal > .dialog.preview-content .info-pane .description .excerpt p:last-of-type:after {
  content: "…";
}
#modal > .dialog.preview-content .info-pane .description a:is(.more, .less) {
  display: block;
  margin-top: 1em;
}
#modal > .dialog.preview-content .info-pane .description a.less {
  display: none;
}
#modal > .dialog.preview-content .info-pane .description.expanded .excerpt, #modal > .dialog.preview-content .info-pane .description.expanded .more {
  display: none;
}
#modal > .dialog.preview-content .info-pane .description.expanded .full, #modal > .dialog.preview-content .info-pane .description.expanded .less {
  display: block;
}
#modal > .dialog.preview-content .info-pane .labels {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1em;
}
#modal > .dialog.preview-content .info-pane .labels a {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: auto;
  max-width: calc(100% - 0.5em);
  padding: 0 0.5em;
  margin: 0 0.25em 0.5em;
  font-size: 0.8rem;
  text-transform: capitalize;
  text-decoration: none;
  color: var(--fg-soft);
  background-color: var(--bg-element);
  border-radius: calc(var(--radius) * 0.5);
  transition: all var(--anim-step) ease;
}
#modal > .dialog.preview-content .info-pane .labels a:hover, #modal > .dialog.preview-content .info-pane .labels a:focus, #modal > .dialog.preview-content .info-pane .labels a:active {
  color: var(--fg-primary);
  background-color: var(--bg-chip-hover);
}
#modal > .dialog.preview-content .info-pane .labels a span {
  margin: 1px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#modal > .dialog.preview-content .info-pane .labels a i {
  font-size: 0.8em;
  text-decoration: none;
  margin-right: 0.25rem;
}
#modal > .dialog.preview-content .info-pane .info-footer {
  padding-top: 1em;
}
#modal > .dialog.preview-content .info-pane .info-footer .buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#modal > .dialog.preview-content .info-pane .info-footer .buttons button {
  margin: 0 0.5rem 0 0;
}
#modal > .dialog.preview-content .info-pane .info-footer .buttons button.back {
  background-color: var(--fg-accent);
  width: 45px;
  border-radius: 100%;
  flex-shrink: 0;
  flex-grow: 0;
}

@media screen and (max-width: 1150px) and (min-width: 768px) {
  #modal > .dialog.preview-content:is([data-meta-type=DYNAMIC_LIST_METADATA], [data-meta-type=LIST_METADATA], [data-meta-type=COURSE_METADATA], [data-meta-type=MODULE_METADATA]) {
    --modal-width: 100%;
    --poster-width: 100%;
  }
  #modal > .dialog.preview-content:is([data-meta-type=DYNAMIC_LIST_METADATA], [data-meta-type=LIST_METADATA], [data-meta-type=COURSE_METADATA], [data-meta-type=MODULE_METADATA]) span.fab {
    right: 1rem;
    top: 1rem;
    z-index: 100;
  }
  #modal > .dialog.preview-content:is([data-meta-type=DYNAMIC_LIST_METADATA], [data-meta-type=LIST_METADATA], [data-meta-type=COURSE_METADATA], [data-meta-type=MODULE_METADATA]) .poster-pane {
    max-width: 33%;
  }
  #modal > .dialog.preview-content:is([data-meta-type=DYNAMIC_LIST_METADATA], [data-meta-type=LIST_METADATA], [data-meta-type=COURSE_METADATA], [data-meta-type=MODULE_METADATA]) .poster-pane .icon {
    font-size: 370px;
  }
  #modal > .dialog.preview-content:is([data-meta-type=DYNAMIC_LIST_METADATA], [data-meta-type=LIST_METADATA], [data-meta-type=COURSE_METADATA], [data-meta-type=MODULE_METADATA]) .list-pane {
    width: 205px;
    min-width: initial;
    max-width: initial;
  }
  #modal > .dialog.preview-content:is([data-meta-type=DYNAMIC_LIST_METADATA], [data-meta-type=LIST_METADATA], [data-meta-type=COURSE_METADATA], [data-meta-type=MODULE_METADATA]) .list-pane h3 {
    margin-top: 4px;
    text-align: left;
  }
  #modal > .dialog.preview-content:is([data-meta-type=COURSE_METADATA], [data-meta-type=MODULE_METADATA]) .list-pane {
    width: auto;
  }
  #modal > .dialog.preview-content:is([data-meta-type=COURSE_METADATA], [data-meta-type=MODULE_METADATA]) .list-pane h3 {
    margin-top: 0;
    text-align: center;
  }
}
@media screen and (max-width: 890px) and (min-width: 768px) {
  #modal > .dialog.preview-content:not([data-meta-type=DYNAMIC_LIST_METADATA], [data-meta-type=LIST_METADATA], [data-meta-type=COURSE_METADATA], [data-meta-type=MODULE_METADATA]) {
    --modal-width: 100%;
  }
  #modal > .dialog.preview-content:not([data-meta-type=DYNAMIC_LIST_METADATA], [data-meta-type=LIST_METADATA], [data-meta-type=COURSE_METADATA], [data-meta-type=MODULE_METADATA]) span.fab {
    right: 1rem;
    top: 1rem;
    z-index: 100;
  }
  #modal > .dialog.preview-content:not([data-meta-type=DYNAMIC_LIST_METADATA], [data-meta-type=LIST_METADATA], [data-meta-type=COURSE_METADATA], [data-meta-type=MODULE_METADATA]) .info-pane h3 {
    margin-top: 4px;
    text-align: left;
  }
}
@media screen and (max-width: 767px) {
  #modal > .dialog.preview-content {
    --modal-width: 100vw !important;
    --modal-body-height: 100vh;
  }
  #modal > .dialog.preview-content span.fab {
    right: 1rem;
    top: 1rem;
    z-index: 100;
  }
  #modal > .dialog.preview-content .info-pane h3 {
    margin-top: 12px;
    text-align: left;
  }
  #modal > .dialog.preview-content .body {
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
  }
  #modal > .dialog.preview-content .info-pane .description a:is(.more, .less) {
    display: none;
  }
  #modal > .dialog.preview-content .info-pane .description .excerpt {
    display: none;
  }
  #modal > .dialog.preview-content .info-pane .description .full {
    display: block;
  }
  #modal > .dialog.preview-content :is(.pane, .poster-pane, .info-pane, .list-pane) {
    width: 100%;
    max-width: initial;
    min-width: initial;
    height: auto;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
  }
  #modal > .dialog.preview-content .poster-pane {
    grid-row: span 2;
  }
  #modal > .dialog.preview-content .poster-pane img.poster {
    width: 100%;
  }
}
@media screen and (max-width: 600px) {
  #modal > .dialog.preview-content .body {
    display: block;
    padding-bottom: calc(50px + 2em);
  }
  #modal > .dialog.preview-content :is(.pane, .list-pane, .info-pane, .poster-pane) {
    display: block;
    height: auto;
  }
  #modal > .dialog.preview-content :is(.pane, .list-pane, .info-pane, .poster-pane) h3 {
    text-align: left;
  }
  #modal > .dialog.preview-content .list-pane {
    margin-top: 1rem;
  }
  #modal > .dialog.preview-content .list-pane .items {
    max-height: initial;
  }
  #modal > .dialog.preview-content .poster-pane {
    max-height: initial;
  }
  #modal > .dialog.preview-content .poster-pane .poster {
    display: block;
  }
  #modal > .dialog.preview-content .info-pane {
    margin-top: 1rem;
  }
  #modal > .dialog.preview-content .info-pane .labels {
    justify-content: flex-start;
  }
  #modal > .dialog.preview-content .info-pane .description {
    display: block;
    margin: 0;
  }
  #modal > .dialog.preview-content .info-pane .entry-count {
    text-align: left;
  }
  #modal > .dialog.preview-content .info-footer {
    position: fixed;
    bottom: 0;
    background-color: var(--bg-body);
    padding: 1em;
    width: calc(100% - 2em);
  }
}
/** content full description preview dialog */
#modal > .dialog.content-description .body {
  padding: 1em;
  border-radius: var(--radius);
  height: auto;
}
#modal > .dialog.content-description h3 {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  color: var(--fg-primary);
  margin: 0;
  width: 100%;
  text-align: center;
}
#modal > .dialog.content-description p {
  margin-top: 1em;
}

#modal > .dialog.principal-select .body {
  height: var(--modal-body-height);
}
#modal > .dialog.principal-select div.tab-container {
  width: 100%;
}
#modal > .dialog.principal-select div.notches {
  width: var(--tab-width);
}

#modal > .dialog.pwa-prompt {
  align-self: flex-end;
  margin-bottom: 2em;
  min-height: auto;
  min-width: auto;
  max-width: 90vw;
  width: max-content;
}
#modal > .dialog.pwa-prompt .body p {
  margin: 0;
  text-align: center;
}
#modal > .dialog.pwa-prompt .body p button {
  display: inline;
  margin-left: 0.5em;
  height: 2em;
  padding: 0 0.5em;
}
#modal > .dialog.pwa-prompt .body p button span {
  margin-bottom: 2px;
}
#modal > .dialog.pwa-prompt .body p img {
  height: 1em;
  margin: 0.25em 0.25em 0;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.pwa-prompt {
    max-width: 100%;
    height: initial !important;
    position: absolute;
    bottom: 0;
  }
  #modal > .dialog.pwa-prompt.pwa-android-prompt {
    margin-bottom: 0;
  }
  #modal > .dialog.pwa-prompt.pwa-ios-prompt {
    width: 90vw !important;
    margin-left: 5vw;
    bottom: 2.5em;
    margin-bottom: -0.5em;
  }
  #modal > .dialog.pwa-prompt.pwa-ios-prompt .content {
    border-radius: var(--radius);
  }
  #modal > .dialog.pwa-prompt .body p {
    text-align: center;
  }
}
#modal > .dialog.pwa-prompt.pwa-ios-prompt .content {
  padding: 0;
}
#modal > .dialog.pwa-prompt.pwa-ios-prompt .body {
  position: static;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  padding: 1rem;
}
#modal > .dialog.pwa-prompt.pwa-ios-prompt .body .text {
  width: calc(100% - var(--lh-body));
  padding: 0;
}
#modal > .dialog.pwa-prompt.pwa-ios-prompt i.fa-caret-down {
  font-size: 3em;
  position: absolute;
  left: calc(50% - 1rem);
  bottom: -0.55em;
  color: var(--bg-body);
}
#modal > .dialog.pwa-prompt.pwa-ios-prompt .fab {
  position: relative;
  margin-top: calc(-0.25 * var(--lh-body));
  right: auto;
  top: 1rem;
  margin-left: 1rem;
}
#modal > .dialog.pwa-prompt.pwa-ios-prompt .fab i.icon {
  width: var(--lh-body);
  height: var(--lh-body);
  background: var(--fg-primary);
  box-shadow: none;
}

#modal > .dialog.session-expired-modal p {
  margin: 0;
}
#modal > .dialog.session-expired-modal .no-login-container {
  margin-top: 14px;
}

#modal > .dialog.section-type-modal {
  width: 500px;
}
#modal > .dialog.section-type-modal .header {
  padding-left: var(--modal-side-padding);
  padding-right: var(--modal-side-padding);
}
#modal > .dialog.section-type-modal .content {
  padding-bottom: 2.5rem;
}
#modal > .dialog.section-type-modal .content .body {
  padding: 0 var(--modal-side-padding);
}
#modal > .dialog.section-type-modal .content .body .field.multi-toggle .notches-wrapper > p {
  display: none;
}
#modal > .dialog.section-type-modal .content .body .field.multi-toggle .notches-wrapper > .notches {
  width: 100%;
}
#modal > .dialog.section-type-modal .content .body .entries {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px dashed var(--fg-primary);
  padding: 1rem;
  margin-top: 1.5rem;
}
#modal > .dialog.section-type-modal .content .body .entries .cameo:last-child {
  margin-bottom: 0;
}

#modal > .dialog.start-end-date-picker .body {
  padding: 0 2rem;
}
#modal > .dialog.start-end-date-picker .body .button-group {
  margin-top: 2rem;
  gap: 1rem;
}
#modal > .dialog.start-end-date-picker .body .button-group button {
  border-radius: var(--radius);
  height: 45px;
}

/**
 * Shared styles for all reported message action dialogs.
 */
#modal > .dialog.reported-message-dialog .reported-message-body .users {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#modal > .dialog.reported-message-dialog .reported-message-body .users .user-left, #modal > .dialog.reported-message-dialog .reported-message-body .users .user-right {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#modal > .dialog.reported-message-dialog .reported-message-body .users .user-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  background: var(--fg-primary);
  color: var(--fg-button);
  flex-shrink: 0;
  border-radius: var(--radius);
  margin-top: 6px;
}
#modal > .dialog.reported-message-dialog .reported-message-body .users .username {
  color: var(--fg-body);
  text-transform: uppercase;
  white-space: nowrap;
  width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  margin-top: 4px;
}
#modal > .dialog.reported-message-dialog .reported-message-body .users .thread-name {
  margin: 0 auto;
  font-size: var(--fs-sub);
  text-transform: uppercase;
}
#modal > .dialog.reported-message-dialog .reported-message-body .container-status-and-date {
  display: flex;
  justify-content: space-around;
  margin-top: 1em;
}
#modal > .dialog.reported-message-dialog .label-status {
  color: var(--fg-body);
  text-transform: uppercase;
}
#modal > .dialog.reported-message-dialog .report-reason {
  margin-top: 1em;
}
#modal > .dialog.reported-message-dialog .additional-information {
  margin-top: 1em;
}

/**
 * Shared styles for all assessment question editor dialogs.
 */
#modal > .dialog.assessment-question .container-help {
  display: flex;
  align-items: center;
  height: var(--form-element-height);
  margin: 6px 0 0.5rem;
}
#modal > .dialog.assessment-question .container-help h4 {
  margin: 0 0.25rem;
}
#modal > .dialog.assessment-question .container-help .show-help {
  margin-left: 0.5rem;
}
#modal > .dialog.assessment-question .tab-container {
  flex: 1;
}
#modal > .dialog.assessment-question .file-types {
  font-size: 14px;
  color: var(--fg-soft);
}
#modal > .dialog.assessment-question .file-types .file-types-value {
  font-weight: 600;
}
#modal > .dialog.assessment-question .header {
  flex-grow: 0;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.assessment-question .header h3 {
    margin-top: 14px;
  }
}
#modal > .dialog.assessment-question .toggle-box {
  height: var(--form-element-height);
  width: 100%;
}
#modal > .dialog.assessment-question .used-points {
  text-align: end;
  font-size: 13px;
  color: var(--fg-soft);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: var(--form-element-width);
}
@media screen and (min-width: 768px) {
  #modal > .dialog.assessment-question.file-dropbox {
    --modal-width: 838px;
    --modal-body-height: 621px;
    width: var(--modal-width);
    min-height: var(--modal-body-height);
  }
}
@media screen and (min-width: 768px) {
  #modal > .dialog.assessment-question.file-dropbox .content {
    padding-top: 19px;
    padding-left: calc(69px - 1rem);
    padding-right: calc(69px - 1rem);
  }
}
#modal > .dialog.assessment-question.file-dropbox .content form > h4 {
  margin: 0;
  line-height: 42px;
}
#modal > .dialog.assessment-question.file-dropbox .container-help {
  height: auto;
}
#modal > .dialog.assessment-question.file-dropbox .textarea textarea {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  min-height: 195px;
}
#modal > .dialog.assessment-question.file-dropbox .number {
  margin-bottom: 35px;
}
#modal > .dialog.assessment-question.file-dropbox .number input {
  width: 100%;
}
#modal > .dialog.assessment-question.file-dropbox .justified {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}

/** question-type-select dialog */
#modal > .dialog.question-type-select {
  --modal-width: 806px;
  width: var(--modal-width);
}
#modal > .dialog.question-type-select .body {
  height: auto;
  justify-content: center;
}
#modal > .dialog.question-type-select .entries {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 19px;
  margin-bottom: 43px;
}
#modal > .dialog.question-type-select .entries .cameo {
  background: #E5EDFD;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 220px;
  height: 194px;
  padding: 0;
  margin: 0;
  border: 0;
}
#modal > .dialog.question-type-select .entries .cameo i {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(16, 44, 128, 0.15);
  color: var(--fg-primary);
  margin: 0;
  font-size: 62px;
  width: 106px;
  height: 106px;
  border-radius: 100%;
}
#modal > .dialog.question-type-select .entries .cameo .label {
  margin-top: 21px;
  margin-right: 0;
  flex-grow: 0;
  letter-spacing: -0.1px;
  font-weight: 700;
}

#modal > .dialog.question-multiple-choice {
  --modal-width: 838px;
  --modal-body-height: 732px;
  width: var(--modal-width);
  max-width: initial;
  min-height: var(--modal-body-height);
}
#modal > .dialog.question-multiple-choice .content {
  padding-top: 19px;
  padding-left: calc(69px - 1rem);
  padding-right: calc(69px - 1rem);
}
#modal > .dialog.question-multiple-choice .body form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex-direction: column;
}
#modal > .dialog.question-multiple-choice .body form .textarea {
  grid-column: span 2;
}
#modal > .dialog.question-multiple-choice .body form > button {
  grid-column: span 2;
  margin-bottom: 29px;
  margin-top: 26px;
}
#modal > .dialog.question-multiple-choice .body form textarea {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  height: 195px;
  min-height: initial;
}
#modal > .dialog.question-multiple-choice .body form .toggle {
  grid-column: span 1;
  width: fit-content;
}
#modal > .dialog.question-multiple-choice .body form .toggle.randomize {
  margin-left: auto;
}
#modal > .dialog.question-multiple-choice .body form .toggle.multi {
  margin-left: 1rem;
}
#modal > .dialog.question-multiple-choice .body form .number input {
  width: 100%;
}
#modal > .dialog.question-multiple-choice .body form .container-help {
  grid-column: span 1;
  height: fit-content;
}
#modal > .dialog.question-multiple-choice .body form .container-help h4 {
  font-size: 22px;
  letter-spacing: -0.1px;
}
#modal > .dialog.question-multiple-choice .body form .used-points {
  grid-column: span 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
#modal > .dialog.question-multiple-choice .body form .text-input {
  grid-column: span 2;
}
#modal > .dialog.question-multiple-choice .body form .cameo-answer {
  width: 100%;
  grid-column: span 2;
}
#modal > .dialog.question-multiple-choice .cameo {
  margin: 6px 0;
}

#modal > .dialog.question-text-entry .multi-toggle p {
  white-space: nowrap;
}
#modal > .dialog.question-text-entry .multi-toggle .notches {
  width: 100%;
  margin-left: 0.5rem;
}

/** modal for editing page sections */
#modal > .dialog.section-edit {
  width: calc(var(--form-element-width) + 2rem);
  max-width: initial;
  /** rich text sections get a nearly full-screen display */
}
#modal > .dialog.section-edit [role=group]:not(.toggle) label {
  display: inline-block;
  width: 100%;
  text-transform: uppercase;
  color: var(--fg-primary);
  font-weight: 600;
  margin-left: 1rem;
  display: block;
  margin-left: 0;
}
#modal > .dialog.section-edit [role=group]:not(.toggle) label .required {
  color: var(--fg-warn);
}
#modal > .dialog.section-edit .header {
  padding-left: var(--modal-side-padding);
  padding-right: var(--modal-side-padding);
}
#modal > .dialog.section-edit .header h3 {
  font-size: var(--fs-modal-title);
  border-bottom: 1px solid var(--bg-element);
  padding-bottom: 0.5rem;
}
#modal > .dialog.section-edit form .buttons {
  display: none;
}
#modal > .dialog.section-edit form > .message {
  margin-bottom: 0;
}
#modal > .dialog.section-edit footer button {
  margin: 0;
}
#modal > .dialog.section-edit[data-section-type=COURSE_MODULE_CAROUSEL], #modal > .dialog.section-edit[data-section-type=COURSE_MODULE_GRID] {
  max-width: calc(var(--form-element-width) + 2rem);
}
#modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_CAROUSEL], #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_GRID] {
  width: 1000px;
}
#modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_CAROUSEL] .content .body, #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_GRID] .content .body {
  padding: 0 var(--modal-side-padding);
}
#modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_CAROUSEL] .pane.disabled, #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_GRID] .pane.disabled {
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
}
#modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_CAROUSEL] .pane.with-divider, #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_GRID] .pane.with-divider {
  padding: 35px 0;
}
#modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_CAROUSEL] .pane.with-divider .divider, #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_GRID] .pane.with-divider .divider {
  display: block;
  width: 1px;
  height: 100%;
  background: var(--bg-element);
}
#modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_CAROUSEL] form, #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_GRID] form {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  grid-column-gap: 1rem;
}
#modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_CAROUSEL] form .field.text-input:not(.hidden), #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_CAROUSEL] form .field.field-select, #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_GRID] form .field.text-input:not(.hidden), #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_GRID] form .field.field-select {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
#modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_CAROUSEL] form .field.text-input:not(.hidden) label, #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_CAROUSEL] form .field.field-select label, #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_GRID] form .field.text-input:not(.hidden) label, #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_GRID] form .field.field-select label {
  flex-shrink: 0;
  width: 100px;
  margin-right: 1rem;
}
#modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_CAROUSEL] form .field.text-input:not(.hidden) input, #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_CAROUSEL] form .field.text-input:not(.hidden) > span, #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_CAROUSEL] form .field.field-select input, #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_CAROUSEL] form .field.field-select > span, #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_GRID] form .field.text-input:not(.hidden) input, #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_GRID] form .field.text-input:not(.hidden) > span, #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_GRID] form .field.field-select input, #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_GRID] form .field.field-select > span {
  width: unset;
  flex-grow: 1;
}
#modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_CAROUSEL] form .field.multi-toggle label, #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_GRID] form .field.multi-toggle label {
  display: none;
}
#modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_CAROUSEL] form .field.multi-toggle .notches-wrapper > p, #modal > .dialog.section-edit[data-section-type=DYNAMIC_LIST_GRID] form .field.multi-toggle .notches-wrapper > p {
  width: 100px;
  margin-right: 1rem;
  flex-shrink: 0;
}
#modal > .dialog.section-edit[data-section-type=TEXT] .content, #modal > .dialog.section-edit[data-section-type=RICH_TEXT] .content {
  max-height: initial;
}
#modal > .dialog.section-edit[data-section-type=TEXT] {
  width: 950px;
}
#modal > .dialog.section-edit[data-section-type=TEXT] .content .body {
  padding: 0 var(--modal-side-padding);
}
#modal > .dialog.section-edit[data-section-type=TEXT] form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}
#modal > .dialog.section-edit[data-section-type=TEXT] form .field.title {
  grid-column: span 3;
  display: flex;
  align-items: center;
}
#modal > .dialog.section-edit[data-section-type=TEXT] form .field.title label {
  width: unset;
  margin-right: 1rem;
}
#modal > .dialog.section-edit[data-section-type=TEXT] form .field.title input {
  width: unset;
  flex-grow: 1;
}
#modal > .dialog.section-edit[data-section-type=TEXT] form .field.textarea {
  grid-column: span 1;
}
#modal > .dialog.section-edit[data-section-type=TEXT] form .field.toggle {
  grid-column: span 3;
  margin-bottom: 1rem;
}
#modal > .dialog.section-edit[data-section-type=TEXT] textarea {
  width: 100% !important;
  max-width: 100%;
  min-width: 100%;
}
#modal > .dialog.section-edit[data-section-type=TEXT] input {
  margin: 0 auto;
}
#modal > .dialog.section-edit[data-section-type=TEXT_HEADER] {
  width: 500px;
}
#modal > .dialog.section-edit[data-section-type=TEXT_HEADER] .content .body {
  padding: 0 var(--modal-side-padding) 1rem;
}
#modal > .dialog.section-edit[data-section-type=TEXT_HEADER] form .field.title {
  display: flex;
  align-items: center;
}
#modal > .dialog.section-edit[data-section-type=TEXT_HEADER] form .field.title label {
  width: unset;
  margin-right: 1rem;
}
#modal > .dialog.section-edit[data-section-type=TEXT_HEADER] form .field.title input {
  width: unset;
  flex-grow: 1;
}
#modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] {
  width: 950px;
}
#modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] .content .body {
  padding: 0 var(--modal-side-padding) 1rem;
}
#modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
}
#modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] form .buttons-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
  grid-column: span 2;
}
#modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] form .buttons-container > * {
  margin: 0;
}
#modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] form .field.title {
  grid-column: span 2;
  display: flex;
  align-items: center;
}
#modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] form .field.title label {
  width: unset;
  margin-right: 1rem;
}
#modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] form .field.title input {
  width: unset;
  flex-grow: 1;
}
#modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] form .field.textarea {
  grid-column: span 1;
}
#modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] form .toggles-container {
  grid-column: span 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}
#modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] form .toggles-container .field.toggle {
  margin: 0;
}
#modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] form .toggles-container .field.toggle span {
  margin: 0;
}
#modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] form > button, #modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] form > .cameo {
  grid-column: span 2;
  margin: 0 auto;
}
#modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] form > .cameo {
  width: 100%;
}
#modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] textarea {
  width: 100% !important;
  max-width: 100%;
  min-width: 100%;
}
#modal > .dialog.section-edit[data-section-type=FAQ] {
  width: 500px;
}
#modal > .dialog.section-edit[data-section-type=FAQ] .content .body {
  padding: 0 var(--modal-side-padding) 1rem;
}
#modal > .dialog.section-edit[data-section-type=FAQ] form .field.title {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
#modal > .dialog.section-edit[data-section-type=FAQ] form .field.title label {
  width: unset;
  margin-right: 1rem;
}
#modal > .dialog.section-edit[data-section-type=FAQ] form .field.title input {
  width: unset;
  flex-grow: 1;
}
#modal > .dialog.section-edit[data-section-type=FAQ] form > button {
  margin: 1rem auto;
}
#modal > .dialog.section-edit[data-section-type=FAQ] form > .cameo {
  width: 100%;
}
#modal > .dialog.section-edit[data-section-type=EDIT_FAQ_ENTRY] {
  width: 500px;
}
#modal > .dialog.section-edit[data-section-type=EDIT_FAQ_ENTRY] .content .body {
  padding: 1rem var(--modal-side-padding);
}
#modal > .dialog.section-edit[data-section-type=EDIT_FAQ_ENTRY] form label {
  display: none !important;
}
#modal > .dialog.section-edit[data-section-type=EDIT_FAQ_ENTRY] form input, #modal > .dialog.section-edit[data-section-type=EDIT_FAQ_ENTRY] form textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
#modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] {
  width: 750px;
}
#modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] .content .body {
  padding: 1rem var(--modal-side-padding);
}
#modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
}
#modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form .buttons-container {
  grid-column: span 2;
  display: flex;
  justify-content: center;
  gap: 1rem;
}
#modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form .buttons-container > * {
  margin-left: 0;
  margin-right: 0;
}
#modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form .field.title {
  grid-column: span 2;
  display: flex;
  align-items: center;
}
#modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form .field.title label {
  width: unset;
  margin-right: 1rem;
}
#modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form .field.title input {
  width: unset;
  flex-grow: 1;
}
#modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form .field.textarea {
  grid-column: span 1;
}
#modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form .field.toggle {
  grid-column: span 2;
}
#modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form > button {
  grid-column: span 1;
  margin: 0 0 0 auto;
}
#modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form > button + button {
  margin: 0 auto 0 0;
}
#modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form > .message {
  grid-column: span 2;
}
#modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form > .cameo {
  grid-column: span 2;
  margin: 0 auto;
  width: 100%;
}
#modal > .dialog.section-edit[data-section-type=PLAYLIST_CAROUSEL], #modal > .dialog.section-edit[data-section-type=PLAYLIST_GRID] {
  width: 550px;
}
#modal > .dialog.section-edit[data-section-type=PLAYLIST_CAROUSEL] .content .body, #modal > .dialog.section-edit[data-section-type=PLAYLIST_GRID] .content .body {
  padding: 1rem var(--modal-side-padding);
}
#modal > .dialog.section-edit[data-section-type=PLAYLIST_CAROUSEL] form .field.text-input, #modal > .dialog.section-edit[data-section-type=PLAYLIST_GRID] form .field.text-input {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
#modal > .dialog.section-edit[data-section-type=PLAYLIST_CAROUSEL] form .field.text-input label, #modal > .dialog.section-edit[data-section-type=PLAYLIST_GRID] form .field.text-input label {
  width: 100px;
  margin-right: 1rem;
}
#modal > .dialog.section-edit[data-section-type=PLAYLIST_CAROUSEL] form .field.text-input input, #modal > .dialog.section-edit[data-section-type=PLAYLIST_GRID] form .field.text-input input {
  width: unset;
  flex-grow: 1;
}
#modal > .dialog.section-edit[data-section-type=PLAYLIST_CAROUSEL] form > .cameo, #modal > .dialog.section-edit[data-section-type=PLAYLIST_GRID] form > .cameo {
  margin: 0 auto;
  width: 100%;
}
#modal > .dialog.section-edit[data-section-type=RICH_TEXT] {
  width: 100%;
  height: calc(100vh - 150px);
  max-width: calc(100vw - var(--dashboard-sidebar-width) - 150px);
  max-height: 90vh;
}
#modal > .dialog.section-edit[data-section-type=RICH_TEXT] label {
  width: auto;
}
#modal > .dialog.section-edit[data-section-type=RICH_TEXT] label:not(:first-child) {
  margin-top: 1rem;
}
#modal > .dialog.section-edit[data-section-type=RICH_TEXT] div[role=group] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#modal > .dialog.section-edit[data-section-type=RICH_TEXT] div[role=group] input {
  width: 100%;
  flex-grow: 1;
}
#modal > .dialog.section-edit[data-section-type=RICH_TEXT] .content {
  max-height: initial;
}
#modal > .dialog.section-edit[data-section-type=RICH_TEXT] .ProseMirror {
  height: calc(100vh - 150px - 24em);
  overflow: auto;
  color: var(--fg-body);
}

#modal > .dialog.confirm.menu-confirm .footer a {
  width: var(--form-element-width);
  height: 45px;
  width: auto;
  font-weight: 600;
}
#modal > .dialog.confirm.menu-confirm .footer a:last-of-type {
  border-width: 0;
  background-color: var(--fg-accent);
  color: var(--fg-button);
  box-shadow: 0 0 3px 0 var(--fg-accent);
}

#modal > .dialog.user {
  --modal-width: calc(2 * var(--form-element-width) + 5em);
}
#modal > .dialog.user.anonymous {
  --modal-width: var(--form-element-width);
}
#modal > .dialog.user.anonymous .body {
  grid-template-columns: 1fr;
}
#modal > .dialog.user .body {
  display: grid;
  grid-template-columns: auto auto var(--form-element-width);
  grid-auto-rows: auto;
  grid-gap: 1em;
  padding: 0.5rem 1.5rem;
  height: auto;
  border-radius: var(--radius);
}
#modal > .dialog.user .body .label {
  grid-column: 1;
  width: auto;
  min-width: calc(var(--form-element-width) * 0.3333);
}
#modal > .dialog.user .body .property {
  min-width: calc(var(--form-element-width) * 0.666665);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  grid-column: 2;
}
#modal > .dialog.user .body .profile-link {
  grid-column: span 2;
}
#modal > .dialog.user .body h2 {
  grid-row: 1;
  grid-column: 3;
  font-size: var(--fs-sh);
  line-height: var(--lh-sh);
  margin: 0;
}
#modal > .dialog.user .body h2.profile {
  grid-column: 1/span 2;
}
#modal > .dialog.user .body .groups {
  width: var(--form-element-width);
  grid-row: 2/span 7;
  grid-column: 3;
  overflow: hidden;
  max-height: calc((var(--form-element-height) + var(--form-element-margin)) * 7);
}
#modal > .dialog.user .body .groups .groups-inner {
  height: 100%;
  overflow: auto;
}
#modal > .dialog.user .body .groups .groups-inner .cameo {
  width: auto;
  max-width: var(--form-element-width);
  margin-bottom: var(--form-element-margin);
}
#modal > .dialog.user .body .groups .groups-inner .cameo:last-of-type {
  margin-bottom: 0;
}

@media screen and (min-width: 768px) {
  #modal > .dialog.user-chat-report {
    --modal-width: 838px;
    width: var(--modal-width);
  }
  #modal > .dialog.user-chat-report .body {
    padding: 0 69px;
  }
}
#modal > .dialog.user-chat-report .field.radio {
  margin-top: 19px;
}
#modal > .dialog.user-chat-report .field.radio .inner-radio {
  justify-content: center;
}
#modal > .dialog.user-chat-report .field.textarea {
  width: 100%;
  margin-top: 15px;
  margin-bottom: 35px;
}
#modal > .dialog.user-chat-report .field.textarea textarea {
  min-width: 100%;
  max-width: 100%;
  min-height: 195px;
  max-height: 210px;
}

/** TODO refactor into a shared class */
#modal > .dialog.edit-answer:not(.question-type-select, .edit-answer), #modal > .dialog.advanced-evaluation-search:not(.question-type-select, .edit-answer) {
  width: calc(var(--form-element-width) + 2rem);
}
#modal > .dialog.edit-answer .container-help, #modal > .dialog.advanced-evaluation-search .container-help {
  display: flex;
  align-items: center;
}
#modal > .dialog.edit-answer .container-help .icon, #modal > .dialog.advanced-evaluation-search .container-help .icon {
  margin-left: 10px;
  cursor: pointer;
}
#modal > .dialog.edit-answer .used-points, #modal > .dialog.advanced-evaluation-search .used-points {
  text-align: end;
  font-size: 13px;
  color: var(--fg-soft);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: var(--form-element-width);
}
#modal > .dialog .group-container-help {
  position: relative;
  display: flex;
  align-items: center;
}
#modal > .dialog .group-container-help .open-help-fab {
  position: unset;
  margin-left: 1rem;
}
#modal > .dialog.image-preview {
  --modal-body-height: 800px;
  --modal-width: auto;
}
#modal > .dialog.image-preview .content, #modal > .dialog.image-preview .body {
  padding: 0;
}
#modal > .dialog.image-preview .content {
  max-height: var(--modal-body-height);
}
#modal > .dialog.image-preview .body {
  max-height: inherit;
  overflow: hidden;
}
#modal > .dialog.image-preview .body img {
  max-height: inherit;
  object-fit: contain;
}

/**
 * account.scss
 *
 * Styles for user account settings page.
 */
#app-account main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1rem;
}
#app-account p {
  width: 100%;
}
#app-account #user-account {
  width: 100%;
  margin-top: 3rem;
  max-width: var(--form-element-width);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
#app-account #user-account div[role=group], #app-account #user-account .password-confirmed-pair {
  width: 100%;
}
#app-account #user-account input {
  max-width: 100%;
}
#app-account h2 {
  font-size: var(--fs-h3);
  text-align: center;
}
#app-account .buttons {
  margin-top: 2em;
}

#app-admin {
  /* /.block */
}
#app-admin .dashboard-widget {
  min-width: calc(var(--form-element-width) - 2rem);
}
@media screen and (max-width: 1025px) {
  #app-admin {
    --dashboard-columns: 1;
  }
}
#app-admin .dashboard section {
  width: 100%;
  max-width: var(--form-element-width);
}
#app-admin .block {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  margin: var(--fs-sh) 0;
  /* /span */
}
#app-admin .block#users, #app-admin .block#content {
  grid-template-columns: 67% 33%;
}
#app-admin .block:first-of-type {
  margin-top: 0;
}
#app-admin .block h3 {
  grid-column: span 2;
  color: var(--fg-primary);
  margin-top: 0;
}
#app-admin .block > span {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 0.5em;
}
#app-admin .block > span.label {
  line-height: 1em;
}
#app-admin .block > span.value {
  justify-content: flex-end;
}
#app-admin .block > span:nth-child(4n-1), #app-admin .block > span:nth-child(4n-2) {
  background: var(--bg-zebra);
}
#app-admin .block > span:nth-child(4n-1) {
  border-radius: 0 var(--radius) var(--radius) 0;
}
#app-admin .block > span:nth-child(4n-2) {
  border-radius: var(--radius) 0 0 var(--radius);
}
#app-admin .block > span:nth-child(2n-1) {
  color: var(--fg-primary);
}
#app-admin .block > span:nth-child(2n) {
  color: var(--fg-accent);
}
#app-admin .block.open {
  max-height: 100%;
}
#app-admin .block.open h2 i {
  transform: rotateX(0deg);
}
#app-admin .block#settings {
  grid-template-columns: 70% 30%;
}
#app-admin .block#settings > span.badge {
  width: 100%;
}
#app-admin .block#server :is(.spinner, .indicator) {
  margin-left: 0.5rem;
}
#app-admin .block#resources {
  grid-template-columns: 60% 40%;
}
#app-admin .block#resources .label.storage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
#app-admin .block#resources .label.storage .detail {
  margin-top: 0.1rem;
  font-size: calc(0.9 * var(--fs-button-sm));
}
@media screen and (max-width: 1366px) {
  #app-admin .dashboard-widget.statistics {
    grid-column: span 2;
  }
  #app-admin .dashboard-widget.statistics #statistics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 3rem;
    max-width: calc(2 * var(--form-element-width) + 3rem);
  }
  #app-admin .dashboard-widget.statistics #statistics .block {
    grid-template-rows: auto;
  }
}
@media screen and (max-width: 1025px) {
  #app-admin .dashboard-widget.statistics {
    grid-column: span 1;
  }
  #app-admin .dashboard-widget.statistics #statistics {
    grid-template-columns: 1fr;
    grid-gap: 1rem;
    margin: 0;
    max-width: var(--form-element-width);
  }
}

.user-access-container .users {
  max-height: 400px;
  overflow: auto;
}

#app-add-content main {
  grid-template-rows: min-content;
}
#app-add-content form#add-content {
  margin: 0 auto;
  width: var(--form-element-width);
}
#app-add-content .list-picker {
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100% - 12px);
  /* below magic number is derived from file picker height */
  min-height: calc(166px + var(--lh-body));
  width: 100%;
  color: var(--fg-primary);
  border: 1px dashed var(--fg-primary);
  margin: 6px 0;
}
#app-add-content .list-picker button {
  width: auto;
}
#app-add-content .file-picker .tab-container {
  padding-top: 0;
}
#app-add-content .collapsible {
  margin-top: var(--fs-body);
  padding-bottom: var(--fs-body);
  max-height: calc(var(--lh-sh) + 1px);
}
#app-add-content .collapsible .collapse-title {
  margin-bottom: 1rem;
}
#app-add-content .collapsible h2 {
  color: var(--fg-primary);
  border-bottom: 1px solid var(--bg-element);
}
#app-add-content .collapsible .collapsible h2 {
  color: var(--fg-accent);
  font-size: var(--fs-sidebar);
  line-height: var(--lh-sh);
}
#app-add-content .collapsible .collapsible h2 i {
  font-size: var(--fs-sh);
}
#app-add-content .collapsible .collapsible:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
#app-add-content .collapsible.disabled h2, .collapsible #app-add-content .collapsible.disabled h2 {
  color: var(--bg-element);
}
#app-add-content .type-tabs > .notches {
  margin-bottom: 0;
}
#app-add-content .type-tabs > .notches .notch {
  text-transform: uppercase;
}
#app-add-content .type-tabs > .tabs > .tab.cutout {
  border: 0;
  padding: 0;
}
#app-add-content .type-tabs > .tabs > .tab.cutout .file-upload, #app-add-content .type-tabs > .tabs > .tab.cutout .file-select {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#app-add-content .type-tabs > .tabs > .tab.cutout .stand-in {
  width: fit-content;
}
#app-add-content .dashboard-widget h2 {
  text-align: left;
  margin-bottom: 0.5rem;
}
#app-add-content .dashboard-widget.actions {
  grid-row: span 1;
  justify-content: center;
}
#app-add-content .label-collection {
  margin-top: 1rem;
}
#app-add-content .key-value-container {
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
#app-add-content .key-value-container .label-collection {
  margin-top: 0;
}
#app-add-content .key-value-container .value {
  margin-left: 0;
  text-align: end;
}
#app-add-content .key-value-container .label, #app-add-content .key-value-container .value {
  font-size: var(--fs-body);
}
#app-add-content .type-section {
  position: relative;
}
#app-add-content .show-help {
  position: absolute;
  right: 8px;
  top: 0.45rem;
  cursor: pointer;
  color: var(--fg-primary);
}
#app-add-content .dashboard-widget #actions {
  justify-content: flex-end;
}
#app-add-content .spaced-top {
  margin-top: 1rem;
}

#app-mass-content-create #bulk-upload-widget {
  overflow-x: auto;
}
#app-mass-content-create #help {
  color: var(--fg-primary);
  margin: var(--lh-body) auto;
}
#app-mass-content-create #help button {
  margin: 0 auto 2rem;
}
#app-mass-content-create #help a i {
  margin: 0 0.5rem;
}
#app-mass-content-create #help .collapsible {
  margin: 10px 0;
}
#app-mass-content-create #help .collapsible .collapse-title {
  text-transform: initial;
  color: var(--fg-accent);
}
#app-mass-content-create #help .collapsible .collapse-title .collapse-label {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
}
#app-mass-content-create #help .collapsible p {
  color: var(--fg-primary);
}
#app-mass-content-create #help .collapsible .collapsible .collapse-title {
  color: var(--fg-secondary);
}
#app-mass-content-create #bulk-content-form {
  --grid-columns: 9;
  grid-template-columns: 120px 1fr calc(0.75 * var(--form-element-width)) 2fr 1fr 1fr auto auto auto;
  width: 100%;
}
#app-mass-content-create #bulk-content-form .field-select label {
  display: none;
}
#app-mass-content-create #bulk-content-form .field-select .cameo-list-select-item {
  width: auto;
}
#app-mass-content-create #bulk-content-form textarea {
  min-width: calc(0.75 * var(--form-element-width));
  max-width: calc(0.75 * var(--form-element-width));
  min-height: 50px;
  height: 50px;
  padding: 13px 1rem;
  line-height: var(--lh-body);
}
#app-mass-content-create #bulk-content-form .label-column {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  height: 50px;
}
#app-mass-content-create #bulk-content-form .label-column .label-collection {
  height: 50px;
  overflow-y: auto;
  width: auto;
  flex-grow: 1;
  padding: 0 0.25em;
  margin: 0;
}
#app-mass-content-create #bulk-content-form .label-column .label-collection:empty {
  display: initial;
}
#app-mass-content-create #bulk-content-form .label-column .label-collection .label {
  margin: 8px 0.25em 8px 0;
}
#app-mass-content-create #bulk-content-form .label-column button {
  width: 50px;
  height: 50px;
  margin: 0 0 0 0.25em;
}
#app-mass-content-create #bulk-content-form .file-column {
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: flex-start;
}
#app-mass-content-create #bulk-content-form .file-column span {
  width: var(--form-element-width);
  height: 45px;
  border-radius: var(--radius);
  flex-shrink: 0;
  flex-grow: 0;
  /* generally buttons should be fixed-size */
  width: auto;
  display: flex;
  flex-direction: row;
  flex-shrink: 1;
  flex-wrap: nowrap;
  margin: var(--form-element-margin) auto;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-body);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  text-transform: uppercase;
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
  /* faux buttons are elements that look like buttons but aren't interactable */
  margin: 0;
  width: auto;
  flex-grow: 1;
  height: 50px;
}
#app-mass-content-create #bulk-content-form .file-column span > span, #app-mass-content-create #bulk-content-form .file-column span label span {
  display: inline-flex;
  font-family: var(--font-stack-spaced);
  flex-shrink: 1;
  flex-grow: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: inherit;
  user-select: none;
}
#app-mass-content-create #bulk-content-form .file-column span i:is(.fa, .fas, .far) {
  display: flex;
  justify-content: center;
  width: 1rem;
  font-size: var(--fs-body-sm);
  margin: 0 0.55rem -1px;
}
#app-mass-content-create #bulk-content-form .file-column span i:is(.fa, .fas, .far):first-child {
  margin-left: 0;
}
#app-mass-content-create #bulk-content-form .file-column span i:is(.fa, .fas, .far):last-child {
  margin-right: 0;
}
#app-mass-content-create #bulk-content-form .file-column span.main {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  height: 50px;
}
#app-mass-content-create #bulk-content-form .file-column span.ok {
  background: var(--fg-secondary);
}
#app-mass-content-create #bulk-content-form .file-column span.warn {
  background: var(--fg-accent);
}
#app-mass-content-create #bulk-content-form .file-column span.danger {
  background: var(--fg-danger);
}
#app-mass-content-create #bulk-content-form .file-column span.secondary {
  background: var(--fg-secondary);
}
#app-mass-content-create #bulk-content-form .file-column span.alternate {
  background: var(--fg-alternate);
}
#app-mass-content-create #bulk-content-form .file-column span:is(:hover, :active, :focus) {
  opacity: 0.8;
  outline: 0;
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
#app-mass-content-create #bulk-content-form .file-column span:is(:hover, :active, :focus).ok {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
#app-mass-content-create #bulk-content-form .file-column span:is(:hover, :active, :focus).warn {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
#app-mass-content-create #bulk-content-form .file-column span:is(:hover, :active, :focus).danger {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
#app-mass-content-create #bulk-content-form .file-column span:is(:hover, :active, :focus).secondary {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
#app-mass-content-create #bulk-content-form .file-column span:is(:hover, :active, :focus).alternate {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
#app-mass-content-create #bulk-content-form .file-column span.icon {
  width: calc(var(--form-element-height) - 2px);
  height: calc(var(--form-element-height) - 2px);
}
#app-mass-content-create #bulk-content-form .file-column span.icon i:is(.fa, .fas, .far) {
  margin: 0 0 -3px;
}
#app-mass-content-create #bulk-content-form .file-column span.stand-in {
  background: var(--bg-body);
  border: 2px dashed var(--fg-primary);
  color: var(--fg-primary);
  height: var(--form-element-height);
  width: fit-content;
}
#app-mass-content-create #bulk-content-form .file-column span.stand-in.secondary {
  color: var(--fg-secondary);
  border-color: var(--fg-secondary);
}
#app-mass-content-create #bulk-content-form .file-column span.stand-in.alternate {
  color: var(--fg-alternate);
  border-color: var(--fg-alternate);
}
#app-mass-content-create #bulk-content-form .file-column span.stand-in:is(.accent, .warn) {
  color: var(--fg-accent);
  border-color: var(--fg-accent);
}
#app-mass-content-create #bulk-content-form .file-column span.stand-in:is(.danger, .error) {
  color: var(--fg-danger);
  border-color: var(--fg-danger);
}
#app-mass-content-create #bulk-content-form .file-column span.inverse {
  background: var(--bg-body);
  border: 1px solid var(--fg-primary);
  color: var(--fg-primary);
}
#app-mass-content-create #bulk-content-form .file-column span.inverse:focus {
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
#app-mass-content-create #bulk-content-form .file-column span.inverse:is(.ok, .secondary) {
  border-color: var(--fg-secondary);
  color: var(--fg-secondary);
}
#app-mass-content-create #bulk-content-form .file-column span.inverse:is(.ok, .secondary):focus {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
#app-mass-content-create #bulk-content-form .file-column span.inverse.warn {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
#app-mass-content-create #bulk-content-form .file-column span.inverse.warn:focus {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
#app-mass-content-create #bulk-content-form .file-column span.inverse.danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
#app-mass-content-create #bulk-content-form .file-column span.inverse.danger:focus {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
#app-mass-content-create #bulk-content-form .file-column span.inverse.alternate {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
#app-mass-content-create #bulk-content-form .file-column span.inverse.alternate:focus {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
#app-mass-content-create #bulk-content-form .file-column span.inline {
  width: 50px;
}
#app-mass-content-create #bulk-content-form .file-column span.subtle {
  border-radius: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: transparent;
  border: none;
  vertical-align: center;
  width: auto;
  height: auto;
  margin: 0.5rem auto;
  text-transform: none;
  font-weight: normal;
  color: var(--fg-primary);
}
#app-mass-content-create #bulk-content-form .file-column span.subtle span {
  font-family: var(--font-stack-default);
}
#app-mass-content-create #bulk-content-form .file-column span.subtle:is(.forward, .back) i.fa {
  margin: 2px 0 0 0;
}
#app-mass-content-create #bulk-content-form .file-column span.subtle:is(:focus, :hover, :active) {
  outline: 0;
  box-shadow: unset;
  border: none;
  text-decoration: underline;
}
#app-mass-content-create #bulk-content-form .file-column span.subtle.primary {
  color: var(--fg-primary);
}
#app-mass-content-create #bulk-content-form .file-column span.subtle.secondary, #app-mass-content-create #bulk-content-form .file-column span.subtle.ok {
  color: var(--fg-secondary);
}
#app-mass-content-create #bulk-content-form .file-column span.subtle.alternate {
  color: var(--fg-accent);
}
#app-mass-content-create #bulk-content-form .file-column span.subtle.accent, #app-mass-content-create #bulk-content-form .file-column span.subtle.warning {
  color: var(--fg-accent);
}
#app-mass-content-create #bulk-content-form .file-column span.subtle.danger {
  color: var(--fg-danger);
}
#app-mass-content-create #bulk-content-form .file-column span:is(:disabled, .disabled) {
  color: var(--bg-element);
  background: var(--bg-main);
}
#app-mass-content-create #bulk-content-form .file-column span:is(:disabled, .disabled):is(.inverse, .stand-in) {
  opacity: 1;
  border-color: var(--bg-main);
  color: var(--bg-main);
  background: none;
}
#app-mass-content-create #bulk-content-form .file-column span:is(:disabled, .disabled).subtle {
  color: var(--bg-main);
  background: none;
  text-decoration: none;
}
#app-mass-content-create #bulk-content-form .file-column span:is(.disabled, :disabled, .faux) {
  cursor: default;
  pointer-events: none;
}
#app-mass-content-create #bulk-content-form .file-column span:is(.disabled, :disabled, .faux):is(:hover, :active, :focus) {
  opacity: 1;
  outline: 0;
  box-shadow: unset;
}
#app-mass-content-create #bulk-content-form .file-column span:is(.disabled, :disabled, .faux):is(.inverse, .stand-in):is(:focus, :active, :hover) {
  outline: 0;
  box-shadow: unset;
}
#app-mass-content-create #bulk-content-form .file-column span i.fa, #app-mass-content-create #bulk-content-form .file-column span .fas {
  margin-right: 0;
}
#app-mass-content-create #bulk-content-form .file-column button {
  min-width: 50px;
  height: 50px;
  margin: 0 0 0 0.25rem;
  flex-grow: 0;
}
#app-mass-content-create #bulk-content-form .file-column button i {
  margin-right: 0;
  margin-left: 0;
}
#app-mass-content-create #bulk-content-form .schedule-column {
  width: auto;
  margin: 0;
}
#app-mass-content-create #bulk-content-form span.icon-label, #app-mass-content-create #bulk-content-form button.schedule-column {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
#app-mass-content-create #bulk-content-form span.icon-label {
  width: 100%;
  min-width: var(--form-element-height);
  color: var(--fg-primary);
}
#app-mass-content-create #bulk-content-form span.icon-label.status-column {
  color: var(--fg-secondary);
}
#app-mass-content-create #bulk-content-form span.icon-label.remove-column {
  color: var(--fg-danger);
}
#app-mass-content-create #bulk-content-form button.schedule-column {
  width: var(--form-element-height);
  height: var(--form-element-height);
  padding: 0;
}
#app-mass-content-create #bulk-content-form button.schedule-column i {
  margin-bottom: 0;
}
#app-mass-content-create #bulk-content-form span.status {
  width: 100%;
  text-align: center;
  margin: 0;
}
#app-mass-content-create #bulk-content-form .delete-row {
  justify-self: center;
  width: 50px;
  height: 50px;
  margin: 0;
  flex-grow: 0;
}
#app-mass-content-create #modal a i {
  margin-left: 0.5rem;
}
#app-mass-content-create .hidden {
  display: none;
}
#app-mass-content-create #actions #import, #app-mass-content-create #actions .secondary {
  justify-self: flex-start;
}

#app-add-page main, #app-page-profile main {
  grid-template-rows: min-content;
}
#app-add-page main .help.dashboard-widget, #app-page-profile main .help.dashboard-widget {
  display: none;
}
#app-add-page main .help.dashboard-widget .container-help p, #app-add-page main .help.dashboard-widget .container-help ul, #app-add-page main .help.dashboard-widget .container-help ol, #app-page-profile main .help.dashboard-widget .container-help p, #app-page-profile main .help.dashboard-widget .container-help ul, #app-page-profile main .help.dashboard-widget .container-help ol {
  color: var(--fg-primary);
}
#app-add-page main .help.dashboard-widget .container-help li:not(:first-child), #app-page-profile main .help.dashboard-widget .container-help li:not(:first-child) {
  margin-top: 0.5rem;
}
#app-add-page main .help.dashboard-widget .container-help ol ol, #app-page-profile main .help.dashboard-widget .container-help ol ol {
  margin: 1rem 0;
}
#app-add-page main.show-help .page-profile, #app-add-page main.show-help .analytics, #app-add-page main.show-help .access, #app-add-page main.show-help .side-menu, #app-page-profile main.show-help .page-profile, #app-page-profile main.show-help .analytics, #app-page-profile main.show-help .access, #app-page-profile main.show-help .side-menu {
  display: none;
}
#app-add-page main.show-help .help.dashboard-widget, #app-page-profile main.show-help .help.dashboard-widget {
  display: flex;
  grid-column: span 2;
}
#app-add-page .dashboard-widget #actions, #app-page-profile .dashboard-widget #actions {
  justify-content: flex-end;
}
#app-add-page .dashboard-widget.analytics, #app-page-profile .dashboard-widget.analytics {
  grid-column: span var(--dashboard-columns);
}
#app-add-page .add-section, #app-page-profile .add-section {
  display: block;
  position: relative;
  width: var(--form-element-width);
}
#app-add-page .add-section .open-help-fab, #app-page-profile .add-section .open-help-fab {
  bottom: 15px;
}
#app-add-page #sections, #app-page-profile #sections {
  width: calc(var(--form-element-width));
  margin: 0 auto;
}
@media screen and (max-width: 1366px) {
  #app-add-page #sections, #app-page-profile #sections {
    width: auto;
  }
}
@media screen and (max-width: 1565px) {
  #app-add-page, #app-page-profile {
    --dashboard-columns: 2;
  }
  #app-add-page table.dynamic, #app-page-profile table.dynamic {
    width: inherit;
  }
  #app-add-page .dashboard-widget.analytics, #app-page-profile .dashboard-widget.analytics {
    display: flex;
  }
  #app-add-page .dashboard-widget.actions, #app-page-profile .dashboard-widget.actions {
    grid-column: span var(--dashboard-columns);
  }
}
@media screen and (max-width: 1140px) {
  #app-add-page, #app-page-profile {
    --dashboard-columns: 1;
  }
}
#app-add-page #page-profile-form, #app-add-page #add-page-form, #app-page-profile #page-profile-form, #app-page-profile #add-page-form {
  width: var(--form-element-width);
  margin: 0 auto;
}
@media screen and (max-width: 1366px) {
  #app-add-page #page-profile-form, #app-add-page #add-page-form, #app-page-profile #page-profile-form, #app-page-profile #add-page-form {
    width: auto;
  }
}
#app-add-page #page-profile-form .slug-row, #app-add-page #add-page-form .slug-row, #app-page-profile #page-profile-form .slug-row, #app-page-profile #add-page-form .slug-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  max-width: var(--form-element-width);
  margin-top: 6px;
}
#app-add-page #page-profile-form .slug-row > [role=group], #app-add-page #add-page-form .slug-row > [role=group], #app-page-profile #page-profile-form .slug-row > [role=group], #app-page-profile #add-page-form .slug-row > [role=group] {
  flex-grow: 1;
  margin: 0 0.5rem 0 0;
}
#app-add-page #page-profile-form .slug-row > [role=group] input, #app-add-page #add-page-form .slug-row > [role=group] input, #app-page-profile #page-profile-form .slug-row > [role=group] input, #app-page-profile #add-page-form .slug-row > [role=group] input {
  width: 100%;
  flex-shrink: 1;
  flex-grow: 1;
}
#app-add-page #page-profile-form .slug-row button, #app-add-page #add-page-form .slug-row button, #app-page-profile #page-profile-form .slug-row button, #app-page-profile #add-page-form .slug-row button {
  height: 50px;
  margin: 0;
  flex-shrink: 1;
  flex-grow: 0;
}
#app-add-page #page-profile-form .slug-row button i, #app-add-page #add-page-form .slug-row button i, #app-page-profile #page-profile-form .slug-row button i, #app-page-profile #add-page-form .slug-row button i {
  margin: 0 0.25rem 2px;
}
#app-add-page #access-rights, #app-add-page .user-access-container, #app-add-page #access-control, #app-page-profile #access-rights, #app-page-profile .user-access-container, #app-page-profile #access-control {
  height: 100%;
}

#app-add-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
}
#app-add-user main {
  grid-template-rows: min-content;
}
#app-add-user .dashboard-widget h2 {
  text-align: left;
}
#app-add-user .dashboard-widget.actions {
  grid-row: span 1;
  justify-content: center;
}
#app-add-user .dashboard-widget #actions {
  justify-content: flex-end;
}
#app-add-user .dashboard-widget.action-bar {
  height: min-content;
}

#app-mass-user-create .add-user-bulk, #app-mass-user-group-create .add-user-bulk {
  overflow-x: auto;
}
#app-mass-user-create .buttons, #app-mass-user-group-create .buttons {
  grid-row: span 1;
}
#app-mass-user-create .toggle-box, #app-mass-user-group-create .toggle-box {
  margin-left: 1rem;
}
#app-mass-user-create .groups-cameo, #app-mass-user-group-create .groups-cameo {
  width: auto;
  margin-bottom: 0;
}
#app-mass-user-create .action-bar .toggle.field, #app-mass-user-group-create .action-bar .toggle.field {
  margin-left: 1rem;
  margin-top: 0;
  margin-bottom: 0;
}
#app-mass-user-create .action-bar .toggle.field .inner, #app-mass-user-group-create .action-bar .toggle.field .inner {
  margin: 0;
}
#app-mass-user-create #help, #app-mass-user-group-create #help {
  color: var(--fg-primary);
}
#app-mass-user-create #help button, #app-mass-user-group-create #help button {
  margin: 0 auto 2rem;
}
#app-mass-user-create #help a i, #app-mass-user-group-create #help a i {
  margin: 0 0.5rem;
}
#app-mass-user-create #help h2, #app-mass-user-group-create #help h2 {
  color: var(--fg-primary);
}
#app-mass-user-create #help h3, #app-mass-user-group-create #help h3 {
  line-height: 1.5em;
}
#app-mass-user-create #help h3:first-of-type, #app-mass-user-group-create #help h3:first-of-type {
  margin-top: 0;
}
#app-mass-user-create #help .collapsible, #app-mass-user-group-create #help .collapsible {
  margin: 10px 0;
}
#app-mass-user-create #help .collapsible .collapse-title, #app-mass-user-group-create #help .collapsible .collapse-title {
  text-transform: initial;
  color: var(--fg-accent);
}
#app-mass-user-create #help .collapsible .collapse-title .collapse-label, #app-mass-user-group-create #help .collapsible .collapse-title .collapse-label {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
}
#app-mass-user-create #help .collapsible p, #app-mass-user-group-create #help .collapsible p {
  color: var(--fg-primary);
}
#app-mass-user-create #help .collapsible .collapsible .collapse-title, #app-mass-user-group-create #help .collapsible .collapsible .collapse-title {
  color: var(--fg-secondary);
}
#app-mass-user-create #help .create-groups-notice, #app-mass-user-group-create #help .create-groups-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
#app-mass-user-create #help .create-groups-notice span, #app-mass-user-group-create #help .create-groups-notice span {
  margin: 1rem 0;
  text-transform: uppercase;
  font-weight: 500;
}
#app-mass-user-create #help .create-groups-notice span i, #app-mass-user-group-create #help .create-groups-notice span i {
  margin-right: 0.5rem;
}
#app-mass-user-create form.bulk button i, #app-mass-user-group-create form.bulk button i {
  margin: 0;
}
#app-mass-user-create form.bulk span.icon-label, #app-mass-user-group-create form.bulk span.icon-label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
#app-mass-user-create form.bulk span.icon-label, #app-mass-user-group-create form.bulk span.icon-label {
  width: 100%;
  min-width: var(--form-element-height);
  color: var(--fg-primary);
}
#app-mass-user-create form.bulk span.icon-label.status-column, #app-mass-user-group-create form.bulk span.icon-label.status-column {
  color: var(--fg-secondary);
}
#app-mass-user-create form.bulk span.icon-label.remove-column, #app-mass-user-group-create form.bulk span.icon-label.remove-column {
  color: var(--fg-danger);
}
#app-mass-user-create form.bulk .delete-row, #app-mass-user-group-create form.bulk .delete-row {
  justify-self: flex-end;
  width: 50px;
  height: 50px;
  margin: 0;
  flex-grow: 0;
}
#app-mass-user-create form.bulk .field.toggle, #app-mass-user-group-create form.bulk .field.toggle {
  justify-content: center;
  margin: 0;
  width: 100%;
}
#app-mass-user-create form.bulk .field.toggle .inner, #app-mass-user-group-create form.bulk .field.toggle .inner {
  margin: 0;
}
#app-mass-user-create form.bulk .field label, #app-mass-user-group-create form.bulk .field label {
  display: none;
}
#app-mass-user-create form.bulk .status, #app-mass-user-group-create form.bulk .status {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0;
}
#app-mass-user-create form.bulk .verified-header .toggle, #app-mass-user-group-create form.bulk .verified-header .toggle {
  margin: 0;
  padding: 0;
  height: auto;
}
#app-mass-user-create form.bulk .verified-header .toggle label, #app-mass-user-group-create form.bulk .verified-header .toggle label {
  width: auto;
}
#app-mass-user-create #add-user-bulk-form, #app-mass-user-group-create #add-user-bulk-form {
  --grid-columns: 9;
  width: 100%;
}
#app-mass-user-create #add-user-group-bulk-form, #app-mass-user-group-create #add-user-group-bulk-form {
  --grid-columns: 10;
  width: 100%;
}

body.dashboard #actions #import, body.dashboard #actions .secondary {
  justify-self: flex-start;
}
body.dashboard #actions .field .inner {
  margin-bottom: 0;
}

#app-assessment-profile main {
  --dashboard-rows: 2;
  --dashboard-columns: 2;
  grid-template-rows: min-content;
}
#app-assessment-profile main.new-assessment .acl, #app-assessment-profile main.new-assessment .analytics {
  display: none;
}
#app-assessment-profile main.new-assessment .assessment-profile, #app-assessment-profile main.new-assessment .questions {
  grid-row: span 4;
}
#app-assessment-profile main table.dynamic td:nth-child(2), #app-assessment-profile main table.dynamic th:nth-child(2) {
  text-align: center;
}
#app-assessment-profile main .help.dashboard-widget {
  display: none;
}
#app-assessment-profile main .help.dashboard-widget .container-help p, #app-assessment-profile main .help.dashboard-widget .container-help ul, #app-assessment-profile main .help.dashboard-widget .container-help ol {
  color: var(--fg-primary);
}
#app-assessment-profile main .help.dashboard-widget .container-help li:not(:first-child) {
  margin-top: 0.5rem;
}
#app-assessment-profile main.show-help .assessment-profile, #app-assessment-profile main.show-help .analytics, #app-assessment-profile main.show-help .questions {
  display: none;
}
#app-assessment-profile main.show-help .help.dashboard-widget {
  display: flex;
  grid-column: span 2;
}
#app-assessment-profile .user-evaluation-status-no-entries {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: var(--fs-h4);
  color: var(--fg-soft);
}
#app-assessment-profile .action-bar {
  height: min-content;
}
#app-assessment-profile .action-bar #actions {
  justify-content: flex-end;
}
@media screen and (max-width: 1366px) {
  #app-assessment-profile .action-bar {
    width: auto;
  }
}
#app-assessment-profile .dashboard-widget:not(.action-bar) {
  height: 100%;
}
#app-assessment-profile .dashboard-widget.actions {
  border: 0;
  grid-row: span 1;
  justify-content: center;
}
#app-assessment-profile #user-evaluation-status {
  max-height: 378px;
  overflow: auto;
}
@media screen and (max-width: 1565px) {
  #app-assessment-profile main {
    --dashboard-columns: 2;
  }
  #app-assessment-profile .dashboard-widget.analytics {
    display: flex;
  }
  #app-assessment-profile .dashboard-widget.actions {
    grid-column: span var(--dashboard-columns);
  }
}
@media screen and (max-width: 1140px) {
  #app-assessment-profile main {
    --dashboard-columns: 1;
  }
  #app-assessment-profile .acl .placeholder {
    min-height: 350px;
  }
  #app-assessment-profile .dashboard-widget.actions {
    grid-column: span 1 !important;
  }
  #app-assessment-profile #user-evaluation-status {
    max-height: unset;
  }
}
#app-assessment-profile .slug-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: var(--form-element-width);
}
#app-assessment-profile .slug-row > div {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
#app-assessment-profile .slug-row [role=group] {
  flex-grow: 1;
  margin-right: 0.5rem;
}
#app-assessment-profile .slug-row [role=group] input {
  width: 100%;
  flex-shrink: 1;
  flex-grow: 1;
}
#app-assessment-profile .slug-row button {
  height: 50px;
  margin: 0;
  flex-shrink: 1;
  flex-grow: 0;
}
#app-assessment-profile .slug-row button i {
  margin: 0 0.25rem 2px;
}
#app-assessment-profile .dashboard-widget.assessment-profile {
  grid-row: span 4;
}
#app-assessment-profile .dashboard-widget.acl {
  grid-row: span 2;
}
#app-assessment-profile .dashboard-widget.questions {
  grid-row: span 2;
}
#app-assessment-profile .dashboard-widget.analytics {
  grid-row: span 2;
}
#app-assessment-profile .dashboard-widget.actions {
  grid-row: span 1;
  grid-column: span 2;
  justify-content: center;
}
#app-assessment-profile .list-entry {
  padding: 0 !important;
}
#app-assessment-profile .list-entry .user.blurb {
  width: 100% !important;
}
#app-assessment-profile .container-questions {
  width: var(--form-element-width);
  max-height: 450px;
  overflow-y: auto;
  overflow-x: hidden;
}
#app-assessment-profile .container-questions .toggle-box {
  margin: 10px auto 1.5rem;
  width: max-content;
}
#app-assessment-profile .label-course-module {
  font-size: var(--fs-body-sm);
  color: var(--fg-primary);
  text-transform: uppercase;
  margin: 12px 0 0 var(--radius);
  margin-right: 1.4rem;
}
#app-assessment-profile button.button-course-module {
  display: inline-block;
}
#app-assessment-profile .button-course-module:not(.disabled) .cameo {
  cursor: pointer;
  margin-bottom: 0.7rem;
}
#app-assessment-profile .button-course-module:not(.disabled) .cameo:hover {
  background-color: var(--bg-hover);
}
#app-assessment-profile .questions #add-question {
  width: unset;
  margin-top: 1.5em;
}
#app-assessment-profile #assessment-profile-form .toggle-box {
  width: max-content;
  margin: 1.5em auto;
}
#app-assessment-profile .badge {
  width: 120px;
  margin: 0 auto;
}

#app-content-profile main {
  grid-template-rows: min-content;
}
#app-content-profile .dashboard-widget.profile .collapsible:first-child {
  margin-top: 0;
}
#app-content-profile .dashboard-widget.analytics {
  display: flex;
}
#app-content-profile .dashboard-widget.analytics .sm-chart {
  height: unset;
}
@media screen and (max-width: 1565px) {
  #app-content-profile {
    --dashboard-columns: 2;
  }
  #app-content-profile table.dynamic {
    width: inherit;
  }
  #app-content-profile .dashboard-widget.actions {
    grid-column: span var(--dashboard-columns);
  }
}
@media screen and (max-width: 1140px) {
  #app-content-profile {
    --dashboard-columns: 1;
  }
}
#app-content-profile form#add-content {
  margin: 0 auto;
  width: var(--form-element-width);
}
#app-content-profile .list-picker {
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  /* below magic number is derived from file picker height */
  min-height: calc(178px + var(--lh-body));
  width: 100%;
  color: var(--fg-primary);
  border: 1px dashed var(--fg-primary);
}
#app-content-profile .list-picker button {
  width: calc(var(--form-element-width) - 2em - 2px);
}
#app-content-profile .collapsible {
  margin-top: var(--fs-body);
  padding-bottom: var(--fs-body);
  max-height: calc(var(--lh-sh) + 1px);
}
#app-content-profile .collapsible h2 {
  color: var(--fg-primary);
  border-bottom: 1px solid var(--bg-element);
}
#app-content-profile .collapsible .collapse-title {
  margin-bottom: 1rem;
}
#app-content-profile .collapsible .collapsible h2 {
  color: var(--fg-accent);
  font-size: var(--fs-sidebar);
  line-height: var(--lh-sh);
}
#app-content-profile .collapsible .collapsible h2 i {
  font-size: var(--fs-sh);
}
#app-content-profile .collapsible .collapsible:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
#app-content-profile .collapsible.disabled h2, .collapsible #app-content-profile .collapsible.disabled h2 {
  color: var(--bg-element);
}
#app-content-profile .collapsible .back {
  margin: 1rem auto;
  transform: none;
}
#app-content-profile .type-tabs > .notches .notch {
  text-transform: uppercase;
}
#app-content-profile .list-picker .tab > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#app-content-profile .list-picker label, #app-content-profile .list-picker button {
  width: auto;
  margin-bottom: 0;
  padding-left: 1em;
  padding-right: 1em;
}
#app-content-profile .list-picker label:first-child, #app-content-profile .list-picker button:first-child {
  margin-top: 0;
}
#app-content-profile .dashboard-widget h2 {
  text-align: left;
}
#app-content-profile .dashboard-widget.analytics {
  grid-row: span var(--dashboard-rows);
}
#app-content-profile .dashboard-widget.page-reference {
  grid-row: span 2;
}
#app-content-profile .dashboard-widget.access-rights {
  grid-row: span 2;
}
#app-content-profile .dashboard-widget #actions {
  justify-content: flex-end;
}
#app-content-profile .dashboard-widget.action-bar {
  height: min-content;
}
#app-content-profile .fake-input .label {
  display: block;
  width: 60%;
}
#app-content-profile .fake-input .value {
  width: 40%;
}
#app-content-profile #access-rights, #app-content-profile .user-access-container, #app-content-profile #access-control {
  height: 100%;
}
#app-content-profile .label-collection {
  margin-top: 1rem;
}
#app-content-profile .key-value-container {
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
#app-content-profile .key-value-container .label-collection {
  margin-top: 0;
}
#app-content-profile .key-value-container .value {
  margin-left: 0;
  text-align: end;
}
#app-content-profile .key-value-container .label, #app-content-profile .key-value-container .value {
  font-size: var(--fs-body);
}

#app-course-profile main {
  --dashboard-rows: 3;
  --dashboard-columns: 2;
  grid-template-rows: min-content;
}
#app-course-profile main.new-course {
  --dashboard-rows: 2;
  --dashboard-columns: 2;
}
#app-course-profile main.new-course .dashboard-widget.acl, #app-course-profile main.new-course .dashboard-widget.evaluations, #app-course-profile main.new-course .dashboard-widget.page-reference {
  display: none;
}
#app-course-profile main.new-course .dashboard-widget.course-profile, #app-course-profile main.new-course .dashboard-widget.modules {
  grid-row: span 1;
  grid-column: span 1;
  height: 100%;
}
#app-course-profile main .evaluations {
  align-items: flex-start;
  grid-column: span var(--dashboard-columns);
  padding-left: calc((50% - var(--dashboard-widget-margin) / 2 - var(--form-element-width)) / 2);
  padding-right: calc((50% - var(--dashboard-widget-margin) / 2 - var(--form-element-width)) / 2);
}
#app-course-profile main .evaluations .user-evaluation-status-no-entries {
  margin: 0 auto;
  padding: 20px 0;
  font-size: var(--fs-h4);
  color: var(--fg-soft);
}
#app-course-profile main .evaluations .placeholder {
  width: 100%;
  min-height: var(--form-element-height);
}
#app-course-profile main .course-profile .first-name {
  margin-top: 0;
}
#app-course-profile .action-bar {
  height: min-content;
}
#app-course-profile .action-bar #actions {
  justify-content: flex-end;
}
@media screen and (max-width: 1366px) {
  #app-course-profile .action-bar {
    width: auto;
  }
}
#app-course-profile .dashboard-widget:not(.action-bar) {
  grid-row: span 1;
  height: 100%;
}
#app-course-profile .dashboard-widget.actions {
  grid-row: span 1;
  justify-content: center;
}
#app-course-profile .entries {
  width: var(--form-element-width);
}
#app-course-profile .dialog.confirm {
  width: 500px;
}
#app-course-profile .dashboard-widget.evaluations {
  grid-column: span var(--dashboard-columns);
}
#app-course-profile .list-entry {
  padding: 0 !important;
}
#app-course-profile .list-entry .user.blurb {
  width: 100% !important;
}
#app-course-profile .cameo {
  cursor: pointer;
}
#app-course-profile .cameo:hover {
  background-color: var(--bg-hover);
}
#app-course-profile #evaluation-status-table {
  width: 100%;
  overflow: auto;
}
#app-course-profile #evaluation-status-table tr th:first-child {
  width: 200px;
}
#app-course-profile #evaluation-status-table tr th:not(:first-child) {
  text-align: center;
  min-width: 130px;
  width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
#app-course-profile .eval-status {
  position: relative;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  border-radius: var(--radius);
}
#app-course-profile .eval-status.assigned {
  background-color: var(--fg-soft);
}
#app-course-profile .eval-status.enrolled {
  background-color: var(--fg-alternate);
}
#app-course-profile .eval-status.incomplete {
  background-color: var(--fg-danger);
}
#app-course-profile .eval-status.in_progress {
  background-color: var(--fg-primary);
}
#app-course-profile .eval-status.complete {
  background-color: var(--fg-accent);
}
#app-course-profile .eval-status:is(.grade, .scored) {
  background-color: var(--fg-secondary);
}
#app-course-profile .eval-status.scored, #app-course-profile .eval-status.complete {
  cursor: pointer;
}
#app-course-profile .eval-status.scored:after, #app-course-profile .eval-status.complete:after {
  content: " ";
  height: 2px;
  width: 32px;
  background-color: var(--fg-accent);
  display: block;
  position: absolute;
  bottom: -5px;
  border-radius: 100%;
}
@media screen and (max-width: 1565px) {
  #app-course-profile main {
    --dashboard-columns: 2;
  }
  #app-course-profile main table.dynamic {
    width: inherit;
  }
  #app-course-profile main .dashboard-widget.course-profile {
    grid-row: span 2;
  }
  #app-course-profile main .dashboard-widget.page-reference {
    grid-row: span 2;
  }
  #app-course-profile main .dashboard-widget.modules {
    grid-row: span 2;
  }
  #app-course-profile main .dashboard-widget.acl {
    grid-row: span 2;
  }
  #app-course-profile main .dashboard-widget.evaluations {
    grid-column: span 2;
  }
}
@media screen and (max-width: 1140px) {
  #app-course-profile main {
    --dashboard-columns: 1;
  }
  #app-course-profile main.new-course {
    --dashboard-columns: 1;
  }
  #app-course-profile main .dashboard-widget:is(.course-profile, .acl, .modules, .evaluations, .actions) {
    grid-row: span 1;
    grid-column: span 1;
  }
  #app-course-profile main .acl .placeholder {
    min-height: 350px;
  }
}
#app-course-profile #course-modules {
  min-height: 176px;
}

#app-edit-menu {
  --dashboard-columns: 2;
}
#app-edit-menu main {
  grid-template-rows: min-content;
}
#app-edit-menu .dashboard-widget #actions {
  justify-content: flex-end;
}
@media screen and (max-width: 1366px) {
  #app-edit-menu {
    --dashboard-columns: 2;
  }
  #app-edit-menu .dashboard-widget#edit-menu {
    grid-row: span 4;
  }
  #app-edit-menu .dashboard-widget.actions {
    grid-column: span var(--dashboard-columns);
  }
}
@media screen and (max-width: 1140px) {
  #app-edit-menu {
    --dashboard-columns: 1;
  }
}
#app-edit-menu .toggle-box {
  margin-top: 6px;
  height: var(--form-element-height);
  width: var(--form-element-width);
}
#app-edit-menu .cameo.menu-entry > i {
  color: var(--fg-primary);
}
#app-edit-menu #menu-editor-form {
  width: var(--form-element-width);
}
#app-edit-menu .hidden-items-tip {
  margin: 6px 0;
}
#app-edit-menu .hidden-items-tip div {
  font-size: var(--fs-body-sm);
  color: var(--fg-soft);
  text-align: center;
}

#app-evaluation-profile main {
  grid-template-rows: min-content;
}
#app-evaluation-profile .dashboard-widget #actions {
  justify-content: space-between;
  align-items: center;
}
#app-evaluation-profile .dashboard-widget #actions .title h3 {
  margin: 0;
  font-size: 22px;
}
#app-evaluation-profile .dashboard-widget #actions .buttons {
  display: flex;
}
#app-evaluation-profile .dashboard-widget.action-bar {
  height: min-content;
}
#app-evaluation-profile .dashboard-widget.user-profile {
  grid-row: span calc(2 * var(--dashboard-rows));
}
#app-evaluation-profile .dashboard-widget.assessment-sections {
  grid-row: span calc(2 * var(--dashboard-rows));
}
#app-evaluation-profile .dashboard-widget.evaluations-profile {
  grid-row: span var(--dashboard-rows);
}
#app-evaluation-profile .dashboard-widget.evaluations {
  grid-row: span var(--dashboard-rows);
}
#app-evaluation-profile #evaluation-profile-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--form-element-width);
}
#app-evaluation-profile h4 {
  margin: 8px 0;
  font-weight: 600;
}
#app-evaluation-profile .username {
  text-align: center;
  color: var(--fg-primary);
  font-weight: 600;
  margin: 0;
  word-break: break-word;
  font-size: 20px;
}
#app-evaluation-profile .profile-link-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#app-evaluation-profile .total-points-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#app-evaluation-profile .total-points-container span:first-child {
  margin-right: 4px;
}
#app-evaluation-profile .total-points-container span:last-child {
  font-weight: 600;
}
#app-evaluation-profile .evaluation-profile-container {
  width: var(--form-element-width);
}
#app-evaluation-profile .module-entry {
  margin-top: 6px;
}
@media screen and (max-width: 1565px) {
  #app-evaluation-profile main {
    --dashboard-columns: 2;
  }
  #app-evaluation-profile .dashboard-widget.user-profile, #app-evaluation-profile .dashboard-widget.assessment-sections, #app-evaluation-profile .dashboard-widget.evaluations-profile, #app-evaluation-profile .dashboard-widget.evaluations {
    grid-row: span var(--dashboard-rows);
  }
  #app-evaluation-profile .dashboard-widget.assessment-sections {
    order: 3;
  }
  #app-evaluation-profile .dashboard-widget.evaluations {
    order: 4;
  }
}
@media screen and (max-width: 1140px) {
  #app-evaluation-profile main {
    --dashboard-columns: 1;
  }
  #app-evaluation-profile .dashboard-widget.actions {
    grid-column: span 1 !important;
  }
}
#app-evaluation-profile .solutions-container .cameo-container {
  width: var(--form-element-width);
}
#app-evaluation-profile .solutions-container .cameo-container .cameo-row {
  display: flex;
  align-items: center;
}
#app-evaluation-profile .solutions-container .cameo-container .cameo-row .awarded-points {
  color: var(--fg-secondary);
  margin-left: 10px;
  font-weight: 600;
}
#app-evaluation-profile #user-evaluation-status {
  overflow: auto;
}
#app-evaluation-profile #user-evaluation-status table.dynamic td:nth-child(2), #app-evaluation-profile #user-evaluation-status table.dynamic th:nth-child(2) {
  text-align: center;
}
#app-evaluation-profile .badge {
  width: 120px;
  margin: 0 auto;
}
#app-evaluation-profile .badge.assigned {
  background-color: var(--fg-soft);
}
#app-evaluation-profile .badge.enrolled {
  background-color: var(--fg-alternate);
}
#app-evaluation-profile .badge.incomplete {
  background-color: var(--fg-primary);
}
#app-evaluation-profile .badge.pending {
  background-color: var(--fg-accent);
}
#app-evaluation-profile .badge.completed {
  background-color: var(--fg-secondary);
}

#app-group-profile main {
  grid-template-rows: min-content;
}
#app-group-profile .dashboard-widget #actions {
  justify-content: flex-end;
}
#app-group-profile .dashboard-widget.action-bar {
  height: min-content;
}
#app-group-profile #group-form, #app-group-profile #group-profile {
  width: var(--form-element-width);
  margin: 0 auto;
}
#app-group-profile #group-form h1, #app-group-profile #group-profile h1 {
  text-align: center;
}
#app-group-profile #group-form .title-users, #app-group-profile #group-profile .title-users {
  font-size: 22px;
  color: var(--fg-primary);
  text-align: center;
}
#app-group-profile #group-form .user, #app-group-profile #group-profile .user {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--form-element-width);
  height: var(--form-element-height);
  padding: var(--form-element-padding);
  border: 1px solid var(--bg-element);
  outline: none;
  font-size: var(--fs-body);
  background: var(--bg-body);
  color: var(--fg-body);
  transition: border-color var(--anim-step) ease;
  border-radius: var(--radius);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: var(--form-element-height);
  margin: 6px 0;
}
#app-group-profile #group-form .user.warn, #app-group-profile #group-form .user.invalid, #app-group-profile #group-form .user.danger, #app-group-profile #group-profile .user.warn, #app-group-profile #group-profile .user.invalid, #app-group-profile #group-profile .user.danger {
  border-color: var(--fg-danger);
}
#app-group-profile #group-form .user::placeholder, #app-group-profile #group-profile .user::placeholder {
  color: var(--bg-main);
}
#app-group-profile #group-form .user:focus, #app-group-profile #group-form .user:focus-within, #app-group-profile #group-form .user:hover, #app-group-profile #group-form .user:active, #app-group-profile #group-profile .user:focus, #app-group-profile #group-profile .user:focus-within, #app-group-profile #group-profile .user:hover, #app-group-profile #group-profile .user:active {
  outline: none;
  border-color: var(--bg-main);
}
#app-group-profile #group-form .user:disabled, #app-group-profile #group-form .user.disabled, #app-group-profile #group-profile .user:disabled, #app-group-profile #group-profile .user.disabled {
  border-color: var(--bg-main);
  background: var(--bg-element);
  color: var(--bg-main);
}
#app-group-profile #group-form .user > i, #app-group-profile #group-profile .user > i {
  font-size: 20px;
  margin-right: 0.5rem;
  margin-bottom: 3px;
  color: var(--fg-primary);
}
#app-group-profile #group-form .user > i.danger, #app-group-profile #group-profile .user > i.danger {
  color: var(--fg-danger);
}
#app-group-profile #group-form .user span, #app-group-profile #group-profile .user span {
  flex-grow: 1;
  flex-shrink: 0;
}
#app-group-profile #group-form .user button, #app-group-profile #group-profile .user button {
  margin: 5px 0.5rem 5px 0;
  height: 30px;
  width: 30px;
  flex-shrink: 1;
  flex-grow: 0;
}
#app-group-profile #group-form .user button:last-child, #app-group-profile #group-profile .user button:last-child {
  margin-right: 0;
}
#app-group-profile #group-form .slug-row, #app-group-profile #group-profile .slug-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
}
#app-group-profile #group-form .slug-row [role=group], #app-group-profile #group-profile .slug-row [role=group] {
  flex-grow: 1;
  margin-right: 0.5rem;
}
#app-group-profile #group-form .slug-row [role=group] input, #app-group-profile #group-profile .slug-row [role=group] input {
  width: 100%;
  flex-shrink: 1;
  flex-grow: 1;
}
#app-group-profile #group-form .slug-row button, #app-group-profile #group-profile .slug-row button {
  height: 50px;
  margin: 0;
  width: auto;
  flex-shrink: 1;
  flex-grow: 0;
}
#app-group-profile #group-form .slug-row button i, #app-group-profile #group-profile .slug-row button i {
  margin: 0 0.25rem 2px;
}

#app-manage-assessments #manage-assessments {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: calc(100vh - 20em);
}
#app-manage-assessments #manage-assessments p {
  max-width: var(--form-element-width);
}
#app-manage-assessments #manage-assessments label {
  display: block;
}
#app-manage-assessments #manage-assessments h1 {
  position: relative;
  margin-bottom: 40px;
  width: 100%;
  text-align: center;
}
#app-manage-assessments #manage-assessments h1:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--bg-element);
  left: 0;
  top: 96px;
}
#app-manage-assessments table.dynamic tr td, #app-manage-assessments table.dynamic tr th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#app-manage-assessments table.dynamic tr td:first-child, #app-manage-assessments table.dynamic tr th:first-child {
  min-width: 25rem;
}
#app-manage-assessments table.dynamic tr td:first-child .icon, #app-manage-assessments table.dynamic tr th:first-child .icon {
  margin-right: 0.25em;
}
#app-manage-assessments table.dynamic tr td:nth-child(2), #app-manage-assessments table.dynamic tr th:nth-child(2) {
  min-width: 8rem;
  text-align: center;
}
#app-manage-assessments table.dynamic tr td:nth-child(3), #app-manage-assessments table.dynamic tr th:nth-child(3) {
  min-width: 8rem;
  text-align: center;
}
#app-manage-assessments table.dynamic tr td:nth-child(4), #app-manage-assessments table.dynamic tr th:nth-child(4) {
  width: 17rem;
  text-align: center;
}
@media screen and (max-width: 1366px) {
  #app-manage-assessments table.dynamic tr td:first-child, #app-manage-assessments table.dynamic tr th:first-child {
    width: auto;
  }
}
#app-manage-assessments table.dynamic thead th:nth-child(4) {
  text-align: center;
}
#app-manage-assessments #advanced-form {
  display: flex;
  flex-direction: column;
}

#app-manage-evaluations .dashboard-widget > .tab-container {
  width: 100%;
}
#app-manage-evaluations .dashboard-widget > .tab-container .notches {
  width: max-content;
  margin: 0 auto 6px;
}
#app-manage-evaluations .dashboard-widget > .tab-container .notches .notch {
  font-size: var(--fs-button);
  text-transform: uppercase;
  white-space: nowrap;
  padding-left: 1rem;
  padding-right: 1rem;
}
#app-manage-evaluations .dashboard-widget > .tab-container section {
  margin-top: 1rem;
}
#app-manage-evaluations #manage-evaluations {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
#app-manage-evaluations #manage-evaluations p {
  max-width: var(--form-element-width);
}
#app-manage-evaluations #manage-evaluations label {
  display: block;
}
#app-manage-evaluations #manage-evaluations table {
  width: 100%;
}
#app-manage-evaluations .tab-container .tabs .tab {
  border: 0;
}
#app-manage-evaluations table.dynamic tr td, #app-manage-evaluations table.dynamic tr th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#app-manage-evaluations table.dynamic tr td:first-child, #app-manage-evaluations table.dynamic tr th:first-child {
  min-width: 25rem;
}
#app-manage-evaluations table.dynamic tr td:first-child .icon, #app-manage-evaluations table.dynamic tr th:first-child .icon {
  margin-right: 0.25em;
}
#app-manage-evaluations table.dynamic tr td:nth-child(2), #app-manage-evaluations table.dynamic tr th:nth-child(2) {
  min-width: 8rem;
  text-align: center;
}
#app-manage-evaluations table.dynamic tr td:nth-child(3), #app-manage-evaluations table.dynamic tr th:nth-child(3) {
  min-width: 8rem;
  text-align: center;
}
#app-manage-evaluations table.dynamic tr td:nth-child(4), #app-manage-evaluations table.dynamic tr th:nth-child(4) {
  width: 10rem;
  text-align: center;
}
@media screen and (max-width: 1366px) {
  #app-manage-evaluations table.dynamic tr td:first-child, #app-manage-evaluations table.dynamic tr th:first-child {
    width: auto;
  }
}
#app-manage-evaluations table.dynamic thead th:nth-child(4) {
  text-align: center;
}

#app-manage-content #manage-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: calc(100vh - 20em);
}
#app-manage-content #manage-content p {
  max-width: var(--form-element-width);
}
#app-manage-content #manage-content label {
  display: block;
}
#app-manage-content #manage-content h1 {
  position: relative;
  margin-bottom: 40px;
  width: 100%;
  text-align: center;
}
#app-manage-content #manage-content h1:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--bg-element);
  left: 0;
  top: 96px;
}
#app-manage-content .action-bar .search-block .toggle {
  margin: 0 0 0 0.5em;
  height: var(--form-element-height);
}
#app-manage-content .action-bar .search-block .toggle > span {
  margin: 0;
  height: 100%;
}
#app-manage-content table.dynamic tr td, #app-manage-content table.dynamic tr th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#app-manage-content table.dynamic tr td:nth-child(1), #app-manage-content table.dynamic tr th:nth-child(1) {
  width: 10rem;
}
#app-manage-content table.dynamic tr td:nth-child(2), #app-manage-content table.dynamic tr th:nth-child(2) {
  width: 27rem;
}
#app-manage-content table.dynamic tr td:nth-child(2) .icon, #app-manage-content table.dynamic tr th:nth-child(2) .icon {
  margin-right: 0.25em;
}
#app-manage-content table.dynamic tr td:nth-child(3), #app-manage-content table.dynamic tr th:nth-child(3) {
  min-width: 25rem;
}
#app-manage-content table.dynamic tr td:nth-child(3) a, #app-manage-content table.dynamic tr th:nth-child(3) a {
  color: var(--fg-primary);
}
#app-manage-content table.dynamic tr td:nth-child(3) .icon, #app-manage-content table.dynamic tr th:nth-child(3) .icon {
  margin-right: 0.25em;
}
#app-manage-content table.dynamic tr td:nth-child(4), #app-manage-content table.dynamic tr th:nth-child(4) {
  width: 7rem;
}
@media screen and (max-width: 1366px) {
  #app-manage-content table.dynamic tr td:first-child, #app-manage-content table.dynamic tr th:first-child {
    width: auto;
  }
}
#app-manage-content table.dynamic thead th:nth-child(4) {
  text-align: center;
}
#app-manage-content .view-mode-visibility table.dynamic tr td:nth-child(1), #app-manage-content .view-mode-visibility table.dynamic tr th:nth-child(1) {
  width: 4.5rem;
  text-align: center;
}
#app-manage-content .view-mode-visibility table.dynamic tr td:nth-child(2), #app-manage-content .view-mode-visibility table.dynamic tr th:nth-child(2) {
  width: auto;
}
#app-manage-content .view-mode-visibility table.dynamic tr td:nth-child(3), #app-manage-content .view-mode-visibility table.dynamic tr td:nth-child(4), #app-manage-content .view-mode-visibility table.dynamic tr th:nth-child(3), #app-manage-content .view-mode-visibility table.dynamic tr th:nth-child(4) {
  width: 10rem;
  text-align: center;
}
#app-manage-content .view-mode-visibility table.dynamic tr td:nth-child(3) .toggle, #app-manage-content .view-mode-visibility table.dynamic tr td:nth-child(4) .toggle, #app-manage-content .view-mode-visibility table.dynamic tr th:nth-child(3) .toggle, #app-manage-content .view-mode-visibility table.dynamic tr th:nth-child(4) .toggle {
  margin: 0;
  padding: 0;
}
#app-manage-content .view-mode-visibility table.dynamic tr td:nth-child(3) .toggle .inner, #app-manage-content .view-mode-visibility table.dynamic tr td:nth-child(4) .toggle .inner, #app-manage-content .view-mode-visibility table.dynamic tr th:nth-child(3) .toggle .inner, #app-manage-content .view-mode-visibility table.dynamic tr th:nth-child(4) .toggle .inner {
  justify-content: center;
  height: unset;
  padding: 0;
  margin: 0;
}
#app-manage-content .view-mode-visibility table.dynamic tr td:nth-child(5), #app-manage-content .view-mode-visibility table.dynamic tr th:nth-child(5) {
  width: 5rem;
  text-align: center;
}
#app-manage-content .view-mode-visibility span.status {
  display: block;
}
#app-manage-content .view-mode-visibility span.status.saving {
  color: var(--fg-primary);
  animation: spinner 1s linear;
  animation-iteration-count: infinite;
}
#app-manage-content #advanced-form .custom-select ol li:first-child {
  display: none;
}
#app-manage-content .subtle {
  text-decoration: unset;
}
#app-manage-content #help {
  color: var(--fg-primary);
}
#app-manage-content #help .collapsible {
  margin: 10px 0;
}
#app-manage-content #help .collapsible .collapse-title {
  text-transform: initial;
  color: var(--fg-accent);
}
#app-manage-content #help .collapsible .collapse-title .collapse-label {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
}
#app-manage-content #help .collapsible p {
  color: var(--fg-primary);
}
#app-manage-content #help .collapsible .collapsible .collapse-title {
  color: var(--fg-secondary);
}

#app-manage-courses #manage-courses {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: calc(100vh - 20em);
}
#app-manage-courses #manage-courses p {
  max-width: var(--form-element-width);
}
#app-manage-courses #manage-courses label {
  display: block;
}
#app-manage-courses #manage-courses h1 {
  position: relative;
  margin-bottom: 40px;
  width: 100%;
  text-align: center;
}
#app-manage-courses #manage-courses h1:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--bg-element);
  left: 0;
  top: 96px;
}
#app-manage-courses table.dynamic tr td, #app-manage-courses table.dynamic tr th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#app-manage-courses table.dynamic tr td:nth-child(1), #app-manage-courses table.dynamic tr th:nth-child(1) {
  width: 8rem;
}
#app-manage-courses table.dynamic tr td:nth-child(1) a, #app-manage-courses table.dynamic tr th:nth-child(1) a {
  color: var(--fg-primary);
}
#app-manage-courses table.dynamic tr td:nth-child(1) .icon, #app-manage-courses table.dynamic tr th:nth-child(1) .icon {
  margin-right: 0.25em;
}
#app-manage-courses table.dynamic tr td:nth-child(2), #app-manage-courses table.dynamic tr th:nth-child(2) {
  width: 27rem;
}
#app-manage-courses table.dynamic tr td:nth-child(2) .icon, #app-manage-courses table.dynamic tr th:nth-child(2) .icon {
  margin-right: 0.25em;
}
#app-manage-courses table.dynamic tr td:nth-child(3), #app-manage-courses table.dynamic tr th:nth-child(3) {
  min-width: 25rem;
}
#app-manage-courses table.dynamic tr td:nth-child(3) a, #app-manage-courses table.dynamic tr th:nth-child(3) a {
  color: var(--fg-primary);
}
#app-manage-courses table.dynamic tr td:nth-child(3) .icon, #app-manage-courses table.dynamic tr th:nth-child(3) .icon {
  margin-right: 0.25em;
}
#app-manage-courses table.dynamic tr td:nth-child(4), #app-manage-courses table.dynamic tr th:nth-child(4) {
  width: 7rem;
  text-align: center;
}
@media screen and (max-width: 1366px) {
  #app-manage-courses table.dynamic tr td:nth-child(2), #app-manage-courses table.dynamic tr th:nth-child(2) {
    width: auto;
  }
}
#app-manage-courses table.dynamic thead th:nth-child(4) {
  text-align: center;
}

#app-manage-groups .dashboard-widget {
  grid-column: span 3;
}
#app-manage-groups #manage-groups {
  width: 100%;
}
#app-manage-groups #manage-groups table.dynamic tr th:nth-child(3), #app-manage-groups #manage-groups table.dynamic tr td:nth-child(3) {
  width: 7rem;
  text-align: center;
}
#app-manage-groups #manage-groups table.dynamic tr th .user-group-name, #app-manage-groups #manage-groups table.dynamic tr td .user-group-name {
  display: inline;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app-manage-groups .dialog.advanced-search .footer {
  height: auto;
}

#app-manage-messages main {
  --dashboard-columns: 2;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content;
}
#app-manage-messages .stats, #app-manage-messages .reported {
  grid-row: span 2;
}
#app-manage-messages .stats h3 {
  margin: 0 0 1rem;
  font-size: var(--fs-sh);
}
#app-manage-messages .stats .block {
  display: grid;
  grid-template-columns: 67% 33%;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
}
#app-manage-messages .stats .block h3 {
  grid-column: span 2;
}
#app-manage-messages .stats .block span {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 0.5em;
}
#app-manage-messages .stats .block span .label {
  line-height: 1em;
}
#app-manage-messages .stats .block span.value {
  justify-content: flex-end;
}
#app-manage-messages .stats .block span:nth-child(2n) {
  color: var(--fg-accent);
}
#app-manage-messages .stats .block span:nth-child(2n-1) {
  color: var(--fg-primary);
}
#app-manage-messages .stats .block span:nth-child(4n-2) {
  background: var(--bg-zebra);
  border-radius: var(--radius) 0 0 var(--radius);
}
#app-manage-messages .stats .block span:nth-child(4n-1) {
  background: var(--bg-zebra);
  border-radius: 0 var(--radius) var(--radius) 0;
}
#app-manage-messages .recent, #app-manage-messages .reported {
  overflow: auto;
}
#app-manage-messages .recent h3, #app-manage-messages .reported h3 {
  margin: 0 0 2px;
  font-size: var(--fs-sh);
}
#app-manage-messages .recent .recent-messages, #app-manage-messages .reported .recent-messages {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#app-manage-messages .recent .recent-messages .recent-messages-scrollable-container, #app-manage-messages .reported .recent-messages .recent-messages-scrollable-container {
  flex-grow: 1;
  overflow: auto;
  max-height: 70vh;
}
#app-manage-messages .recent .reported-messages, #app-manage-messages .reported .reported-messages {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#app-manage-messages .recent .reported-messages .reported-messages-scrollable-container, #app-manage-messages .reported .reported-messages .reported-messages-scrollable-container {
  flex-grow: 1;
  overflow: auto;
  max-height: 36vh;
}
#app-manage-messages .recent .recent-messages, #app-manage-messages .recent .reported-messages, #app-manage-messages .reported .recent-messages, #app-manage-messages .reported .reported-messages {
  width: 100%;
}

#app-manage-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  color: var(--fg-soft);
}
#app-manage-pages #manage-pages {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
#app-manage-pages #manage-pages p {
  max-width: var(--form-element-width);
}
#app-manage-pages #manage-pages label {
  display: block;
}
#app-manage-pages #manage-pages h1 {
  position: relative;
  margin-bottom: 40px;
  width: 100%;
  text-align: center;
}
#app-manage-pages #manage-pages h1:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--bg-element);
  left: 0;
  top: 96px;
}
#app-manage-pages #manage-pages .results {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
@media screen and (max-width: 767px) {
  #app-manage-pages #manage-pages .results {
    flex-wrap: wrap;
    padding: 0 15px;
  }
}
#app-manage-pages #manage-pages .results .count-results {
  color: var(--fg-accent);
  font-size: var(--fs-sh);
  line-height: var(--lh-sh);
  text-transform: uppercase;
}
@media screen and (max-width: 767px) {
  #app-manage-pages #manage-pages .results .count-results {
    margin-bottom: 0;
  }
}
#app-manage-pages #manage-pages .results .add-links {
  display: flex;
  flex-direction: row;
}
#app-manage-pages #manage-pages .results .add-link {
  width: auto;
  padding: 0 1em;
  margin-left: 0.5rem;
}
#app-manage-pages #manage-pages .results .add-link i {
  margin-right: 0.5rem;
  margin-left: 0rem;
}
#app-manage-pages #manage-pages .results .inner-wrapper-results {
  display: flex;
  align-items: center;
  color: var(--fg-danger);
}
#app-manage-pages #manage-pages .results .inner-wrapper-results .clear-results {
  text-transform: uppercase;
  margin-left: 24px;
  cursor: pointer;
}
#app-manage-pages #manage-pages .sort-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
}
#app-manage-pages #manage-pages .sort-block i {
  margin-left: 0.5em;
}
#app-manage-pages .inner-description-wrapper {
  cursor: pointer;
  max-height: 48px;
  overflow: hidden;
  transition: max-height 0.7s linear;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#app-manage-pages .inner-description-wrapper--show {
  max-height: 1000px;
  -webkit-line-clamp: unset;
}
#app-manage-pages .searchBlock {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  padding-top: 34px;
}
@media screen and (max-width: 767px) {
  #app-manage-pages .searchBlock {
    flex-wrap: wrap;
  }
}
#app-manage-pages .searchBlock input, #app-manage-pages .searchBlock button {
  margin: 0 0.5rem;
  flex-shrink: 1;
}
#app-manage-pages .searchBlock input {
  flex-grow: 1;
}
#app-manage-pages .searchBlock button {
  flex-grow: 0;
  padding-left: 1em;
  padding-right: 1em;
}
@media screen and (max-width: 767px) {
  #app-manage-pages .searchBlock button {
    margin-top: var(--fs-body);
  }
}
#app-manage-pages .contentListBlock {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#app-manage-pages .contentItem {
  display: flex;
  flex-direction: column;
  max-width: 370px;
  width: 100%;
  margin: 0 14px 14px 0;
  border: 1px solid grey;
}
#app-manage-pages .contentItem:nth-child(3n+3) {
  margin: 0 0 14px 0;
}
#app-manage-pages .contentItem p {
  margin: 0;
}
#app-manage-pages table tr td:first-child, #app-manage-pages table tr th:first-child {
  width: 27rem;
}
#app-manage-pages table tr td:nth-child(4), #app-manage-pages table tr th:nth-child(4) {
  display: none;
}
@media screen and (max-width: 767px) {
  #app-manage-pages #modal .body {
    padding-top: 50px;
  }
}

#app-manage-users .dashboard-widget > .tab-container {
  width: 100%;
}
#app-manage-users .dashboard-widget > .tab-container .notches {
  width: min-content;
  margin: 0 auto 6px;
  grid-gap: 10px;
}
#app-manage-users .dashboard-widget > .tab-container .notches .notch {
  font-size: var(--fs-button);
  text-transform: uppercase;
  white-space: nowrap;
  padding-left: 1rem;
  padding-right: 1rem;
}
#app-manage-users .dashboard-widget > .tab-container .tab.cutout {
  border: 0;
}
#app-manage-users .dashboard-widget > .tab-container section {
  margin-top: 1rem;
}
#app-manage-users #manage-users {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
#app-manage-users #manage-users p {
  max-width: var(--form-element-width);
}
#app-manage-users #manage-users label {
  display: block;
}
#app-manage-users #manage-users table {
  width: 100%;
}
#app-manage-users #manage-users table tr td:nth-child(3), #app-manage-users #manage-users table th:nth-child(3) {
  width: 10rem;
}
#app-manage-users #manage-users table tr td:nth-child(5), #app-manage-users #manage-users table tr td:nth-child(6), #app-manage-users #manage-users table tr td:nth-child(7), #app-manage-users #manage-users table th:nth-child(5), #app-manage-users #manage-users table th:nth-child(6), #app-manage-users #manage-users table th:nth-child(7) {
  width: 7rem;
  text-align: center;
}
#app-manage-users #manage-users table tr td:nth-child(7), #app-manage-users #manage-users table th:nth-child(7) {
  width: 11rem;
}
@media screen and (max-width: 1366px) {
  #app-manage-users #manage-users table tr td:nth-child(2), #app-manage-users #manage-users table tr td:nth-child(3), #app-manage-users #manage-users table tr td:nth-child(4), #app-manage-users #manage-users table th:nth-child(2), #app-manage-users #manage-users table th:nth-child(3), #app-manage-users #manage-users table th:nth-child(4) {
    display: none;
  }
}
#app-manage-users #manage-users table td i {
  margin: 0 0.7rem;
  font-size: var(--fs-h4);
}
#app-manage-users #manage-users table td i.danger {
  color: var(--fg-danger);
}
#app-manage-users #manage-users table td i.ok {
  color: var(--fg-secondary);
}
@media screen and (max-width: 767px) {
  #app-manage-users #manage-users table tr td:nth-child(1) a, #app-manage-users #manage-users table tr th:nth-child(1) a {
    display: inline-block;
    max-width: calc(75vw - 3em);
    margin-right: 1em;
    overflow: hidden;
    white-space: nowrap;
  }
  #app-manage-users #manage-users table tr td:nth-child(5), #app-manage-users #manage-users table tr th:nth-child(5) {
    text-align: center;
  }
  #app-manage-users #manage-users table tr td:nth-child(5) .sort-block, #app-manage-users #manage-users table tr th:nth-child(5) .sort-block {
    justify-content: center;
  }
  #app-manage-users #manage-users table tr td:nth-child(2), #app-manage-users #manage-users table tr td:nth-child(3), #app-manage-users #manage-users table tr td:nth-child(4), #app-manage-users #manage-users table tr td:nth-child(6), #app-manage-users #manage-users table tr td:nth-child(7), #app-manage-users #manage-users table tr th:nth-child(2), #app-manage-users #manage-users table tr th:nth-child(3), #app-manage-users #manage-users table tr th:nth-child(4), #app-manage-users #manage-users table tr th:nth-child(6), #app-manage-users #manage-users table tr th:nth-child(7) {
    display: none;
  }
}
#app-manage-users #approve-users {
  width: 100%;
}
#app-manage-users #approve-users div.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-body);
  color: var(--fg-primary);
  width: 100%;
  line-height: 55px;
  margin-top: var(--lh-body-sm);
  border-top: 1px solid var(--bg-element);
}
#app-manage-users #approve-users table tr td:nth-child(5), #app-manage-users #approve-users table tr th:nth-child(5) {
  width: 22rem;
}
#app-manage-users #approve-users table tr td:nth-child(5) > span, #app-manage-users #approve-users table tr th:nth-child(5) > span {
  display: flex;
  justify-content: center;
  white-space: nowrap;
}
#app-manage-users #approve-users table tr td:nth-child(5) > span {
  font-size: var(--fs-button-sm);
  text-transform: uppercase;
  align-items: center;
}
#app-manage-users #approve-users table tr td:nth-child(5) > span > i {
  margin: 0 1rem 2px 0;
}
#app-manage-users #approve-users table tr td:nth-child(5) > span button {
  font-size: var(--fs-button-sm);
  height: 26px;
  width: auto;
  margin: 0;
}
#app-manage-users #approve-users table tr td:nth-child(5) > span button.danger {
  color: var(--fg-danger);
}
#app-manage-users #approve-users table tr i.spinner {
  animation: spinner 1s linear;
  animation-iteration-count: infinite;
}
@media screen and (max-width: 767px) {
  #app-manage-users #approve-users table tr td:nth-child(2), #app-manage-users #approve-users table tr td:nth-child(3), #app-manage-users #approve-users table tr td:nth-child(4), #app-manage-users #approve-users table tr th:nth-child(2), #app-manage-users #approve-users table tr th:nth-child(3), #app-manage-users #approve-users table tr th:nth-child(4) {
    display: none;
  }
}

#app-send-announcement main {
  grid-template-rows: min-content;
}
#app-send-announcement #send-announcement-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#app-send-announcement #send-announcement-form h2 {
  margin-bottom: 0;
}
#app-send-announcement #send-announcement-form .title-users {
  font-size: 27px;
  line-height: 27px;
  margin-top: 1.5em;
  color: var(--fg-primary);
}
#app-send-announcement #send-announcement-form .users {
  width: var(--form-element-width);
}
#app-send-announcement .dashboard-widget.actions {
  grid-row: span 1;
  justify-content: center;
}
#app-send-announcement .dashboard-widget #actions {
  justify-content: flex-end;
}
#app-send-announcement .dashboard-widget.action-bar {
  height: min-content;
}
#app-send-announcement p.message {
  animation: unset;
}

#app-test main {
  grid-auto-flow: row;
}
@media screen and (max-width: 1516px) {
  #app-test main {
    --dashboard-columns: 2;
  }
}
@media screen and (max-width: 1127px) {
  #app-test main {
    --dashboard-columns: 1;
  }
}
#app-test main .dashboard-widget {
  grid-column: span 1;
  grid-row: span 1;
  height: 100%;
}
#app-test main .dashboard-widget.rich-text-editor {
  grid-column: span var(--dashboard-columns);
}
#app-test main .dashboard-widget.bar-chart {
  grid-column: span var(--dashboard-columns);
  width: 100%;
  height: 600px;
}
#app-test main .dashboard-widget.line-chart {
  grid-column: span var(--dashboard-columns);
  width: 100%;
  height: 600px;
}
#app-test main .dashboard-widget.bar-chart-with-toggles, #app-test main .dashboard-widget.chart-with-calendar {
  grid-column: span var(--dashboard-columns);
  width: 100%;
  min-height: 600px;
}
#app-test main .dashboard-widget.modals {
  grid-row: span 2;
}
@media screen and (max-width: 1516px) {
  #app-test main .dashboard-widget.modals {
    grid-row: span 1;
  }
}
#app-test main .dashboard-widget.typography {
  grid-column: span 2;
}
@media screen and (max-width: 1516px) {
  #app-test main .dashboard-widget.typography {
    grid-column: span 1;
  }
}
#app-test main .dashboard-widget #charts, #app-test main .dashboard-widget #bar-chart, #app-test main .dashboard-widget #line-chart {
  width: 100%;
}
#app-test main header {
  flex-basis: 100%;
}
#app-test main form#test {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#app-test main .collapsible {
  width: 100%;
  min-width: var(--form-element-width);
  margin-bottom: 0.5rem;
}
#app-test main .collapsible.underlines h1, #app-test main .collapsible.underlines h2:not(.collapse-title), #app-test main .collapsible.underlines h3, #app-test main .collapsible.underlines h4 {
  position: relative;
}
#app-test main .collapsible.underlines h1::after, #app-test main .collapsible.underlines h2:not(.collapse-title)::after, #app-test main .collapsible.underlines h3::after, #app-test main .collapsible.underlines h4::after {
  content: " ";
  position: absolute;
  animation: section-title-underline calc(2 * var(--anim-step)) ease forwards;
  bottom: -4px;
  left: 0;
  width: var(--underline-width);
  height: 1px;
  background: var(--bg-element);
}
#app-test main .collapsible button.subtle {
  margin-left: 0;
}
#app-test main .buttons {
  display: flex;
  justify-content: stretch;
  align-items: center;
  margin: var(--form-element-margin) 0 1rem;
  gap: var(--form-element-margin);
  width: var(--form-element-width);
  flex-wrap: wrap;
}
#app-test main .buttons button, #app-test main .buttons .toggle {
  display: flex;
  width: auto;
  flex-shrink: 1;
  flex-grow: 1;
  margin: 0;
}
#app-test main .buttons button:last-child, #app-test main .buttons .toggle:last-child {
  margin-right: 0;
}
#app-test main .buttons button.stand-in, #app-test main .buttons .toggle.stand-in {
  height: 45px;
}
#app-test main .buttons .toggle .inner {
  flex-grow: 1;
  min-width: fit-content;
  margin: 0;
}
#app-test main .buttons p.help {
  margin: 0;
}
#app-test main .floating-message {
  max-width: var(--form-element-width);
}
#app-test main #components .inline {
  margin: 1rem 0 0;
  width: fit-content;
  display: inline-block;
}

#app-thread-profile {
  --dashboard-columns: 2;
}
#app-thread-profile main {
  grid-template-rows: min-content;
  height: calc(100vh - var(--dashboard-header-height) - var(--dashboard-footer-height) - var(--dashboard-widget-margin) * 2);
}
@media screen and (max-width: 1565px) {
  #app-thread-profile {
    --dashboard-columns: 2;
  }
  #app-thread-profile .dashboard-widget.analytics {
    display: flex;
  }
  #app-thread-profile .dashboard-widget.actions {
    grid-column: span var(--dashboard-columns);
  }
}
@media screen and (max-width: 1140px) {
  #app-thread-profile {
    --dashboard-columns: 1;
  }
}
#app-thread-profile .dashboard-widget h2 {
  text-align: left;
}
#app-thread-profile .dashboard-widget.analytics {
  grid-row: span var(--dashboard-rows);
}
#app-thread-profile .dashboard-widget.thread {
  grid-row: span var(--dashboard-rows);
  overflow: hidden;
}
#app-thread-profile .dashboard-widget.thread .thread-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: auto;
}
#app-thread-profile .dashboard-widget.thread .thread-container .thread-scrollable-container {
  display: flex;
  flex-direction: column-reverse;
  overflow: auto;
}
#app-thread-profile .dashboard-widget.thread .thread-container .thread-scrollable-container .no-messages {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: var(--fs-sh);
  padding: 2rem 0;
}
#app-thread-profile .dashboard-widget.thread .reply-container {
  margin-top: 1em;
}
#app-thread-profile .dashboard-widget #actions {
  justify-content: space-between;
  align-items: center;
}
#app-thread-profile .dashboard-widget #actions .thread-title {
  flex-shrink: 1;
  flex-grow: 0;
  overflow: hidden;
  margin-right: 1rem;
}
#app-thread-profile .dashboard-widget #actions .thread-title .label {
  display: flex;
  align-items: center;
  font-size: var(--fs-sub);
}
#app-thread-profile .dashboard-widget #actions .thread-title .username {
  text-transform: uppercase;
}
#app-thread-profile .dashboard-widget #actions .thread-title .delimiter {
  margin: 0 0.5em;
}
#app-thread-profile .dashboard-widget #actions .thread-title i {
  margin-right: 0.5em;
}
#app-thread-profile .dashboard-widget #actions .controls {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}
#app-thread-profile .dashboard-widget #actions .controls .thread-status {
  display: flex;
  align-items: center;
  font-size: var(--fs-sub);
}
#app-thread-profile .dashboard-widget #actions .controls .thread-status .status-label {
  color: var(--fg-soft);
}
#app-thread-profile .dashboard-widget #actions .controls .thread-status .status-value {
  color: var(--fg-primary);
  margin-left: 5px;
  text-transform: uppercase;
}
#app-thread-profile .dashboard-widget.action-bar {
  height: min-content;
}
#app-thread-profile .chat-input, #app-thread-profile .chat-attachments {
  padding: 0;
}

#app-user-profile main {
  grid-template-rows: min-content;
}
#app-user-profile .page-views {
  grid-column: span 2;
  padding-left: calc((50% - var(--dashboard-widget-margin) / 2 - var(--form-element-width)) / 2);
  padding-right: calc((50% - var(--dashboard-widget-margin) / 2 - var(--form-element-width)) / 2);
}
#app-user-profile .page-views.dashboard-widget h2 {
  width: 100%;
}
@media screen and (max-width: 1565px) {
  #app-user-profile {
    --dashboard-columns: 2;
  }
  #app-user-profile table.dynamic {
    width: inherit;
  }
  #app-user-profile .dashboard-widget:is(.analytics, .messaging) {
    grid-row: span var(--dashboard-rows);
  }
  #app-user-profile .page-views {
    grid-column: span 2;
    order: 5;
  }
}
@media screen and (max-width: 1366px) {
  #app-user-profile .dashboard-widget.analytics {
    display: flex;
  }
}
@media screen and (max-width: 1140px) {
  #app-user-profile {
    --dashboard-columns: 1;
  }
  #app-user-profile .dashboard-widget:is(.analytics, .messaging, .page-views, .profile, .group-membership) {
    grid-column: span var(--dashboard-columns);
  }
  #app-user-profile .dashboard-widget.page-views {
    padding: 1rem;
  }
  #app-user-profile .dashboard-widget.page-views h2 {
    width: unset;
  }
}
#app-user-profile #analytics {
  width: 100%;
}
#app-user-profile #analytics.empty-placeholder {
  color: var(--fg-soft);
  font-size: var(--fs-h4);
  text-align: center;
}
#app-user-profile #analytics table {
  table-layout: initial;
}
#app-user-profile #analytics table :is(td, th):nth-child(1) span a {
  margin-left: 0.25em;
}
#app-user-profile #analytics table td:nth-child(1) {
  white-space: initial;
}
#app-user-profile #analytics table td:is(:nth-child(2), :nth-child(3)), #app-user-profile #analytics table th:is(:nth-child(2), :nth-child(3)) {
  text-align: center;
}
#app-user-profile .toggle-wrapper {
  display: flex;
  justify-content: stretch;
  gap: var(--form-element-margin);
  width: 100%;
  margin: 0;
}
#app-user-profile .toggle-wrapper .field {
  margin: 0;
  width: 100%;
}
#app-user-profile .toggle-wrapper .inner {
  width: 100%;
  margin: 0;
}
#app-user-profile #messaging h4 {
  height: var(--lh-body);
  margin: 0;
}
#app-user-profile #messaging .placeholder {
  padding: 1rem;
  width: 100%;
}
#app-user-profile #messaging table {
  table-layout: initial;
  width: var(--form-element-width);
  margin-bottom: var(--lh-body);
}
#app-user-profile #messaging table :is(td, th):is(:nth-child(2), :nth-child(3)) {
  width: 32px;
}
#app-user-profile #messaging table :is(td, th):first-child i {
  margin-right: 0.5rem;
}
#app-user-profile #messaging table button.icon {
  width: 30px;
  height: 30px;
  margin: 0;
}
#app-user-profile #messaging table button.icon .fa-spinner-third {
  animation: icon-spin calc(2 * var(--anim-step)) ease infinite;
}
#app-user-profile .dashboard-widget h2 {
  text-align: left;
}
#app-user-profile .dashboard-widget.actions {
  grid-row: span 1;
  justify-content: flex-end;
}
#app-user-profile .dashboard-widget #actions {
  justify-content: flex-end;
}
#app-user-profile .dashboard-widget.action-bar {
  height: min-content;
}

#app-ui-customization .dashboard-widget:nth-child(5) {
  grid-column: span var(--dashboard-columns);
}
@media screen and (max-width: 1565px) {
  #app-ui-customization {
    --dashboard-columns: 2;
  }
  #app-ui-customization .dashboard-widget:nth-child(5) {
    grid-column: initial;
  }
}
@media screen and (max-width: 1140px) {
  #app-ui-customization {
    --dashboard-columns: 1;
  }
}
#app-ui-customization main {
  --dashboard-rows: 2;
  grid-template-rows: min-content;
}
#app-ui-customization .underlines h1, #app-ui-customization .underlines h2:not(.collapse-title), #app-ui-customization .underlines h3 {
  position: relative;
}
#app-ui-customization .underlines h1::after, #app-ui-customization .underlines h2:not(.collapse-title)::after, #app-ui-customization .underlines h3::after {
  content: " ";
  position: absolute;
  animation: section-title-underline calc(2 * var(--anim-step)) ease forwards;
  bottom: -4px;
  left: 0;
  width: var(--underline-width);
  height: 1px;
  background: var(--bg-element);
}
#app-ui-customization table.dynamic {
  margin-top: 1em;
  width: 100%;
}
#app-ui-customization #ui-customization-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#app-ui-customization #ui-customization-form .tab-container {
  width: 100%;
  white-space: nowrap;
}
#app-ui-customization #ui-customization-form .tab-container p {
  flex-grow: 0;
  flex-shrink: 1;
  margin-right: 1em;
  width: auto;
}
#app-ui-customization #ui-customization-form .tab-container .notches {
  width: 100%;
  flex-grow: 1;
}
#app-ui-customization #configurations-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#app-ui-customization #theme-form .field:is(.text, .color, .css-unit) label {
  display: block;
}
#app-ui-customization #theme-form input[type=file] {
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 0;
}
#app-ui-customization .branding h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 12px 0;
}
#app-ui-customization .action-bar {
  height: min-content;
}
#app-ui-customization .action-bar #actions {
  justify-content: flex-end;
}
#app-ui-customization .dashboard-widget:not(.action-bar) {
  grid-row: span 1;
  height: 100%;
}
#app-ui-customization .buttons {
  display: flex;
  justify-content: stretch;
  align-items: center;
}
#app-ui-customization .buttons button {
  width: auto;
  flex-shrink: 1;
  flex-grow: 1;
  margin-right: 0.5em;
}
#app-ui-customization .buttons button:last-child {
  margin-right: 0;
}
#app-ui-customization .tab-container {
  padding-top: 0;
}
#app-ui-customization .dashboard-widget.actions {
  grid-row: span 1;
  justify-content: center;
}
#app-ui-customization .collapsible {
  max-width: var(--form-element-width);
}
@media screen and (max-width: 1565px) {
  #app-ui-customization .collapsible {
    max-width: initial;
    width: 100%;
  }
}

#app-assessment {
  --question-margin: 55px;
  /* let the modals be a little wider than usual so the start confirm modal is not so long */
}
#app-assessment header > h1 {
  font-size: var(--fs-h2);
}
#app-assessment #status {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#app-assessment #status span {
  transition: color var(--anim-step) ease;
}
#app-assessment #status p {
  margin-top: 5rem;
}
#app-assessment #status i {
  margin-right: 1rem;
}
#app-assessment #assessment {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#app-assessment .meta {
  width: 100%;
  position: absolute;
  background: var(--bg-body);
  z-index: 100;
  top: 0;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#app-assessment .meta.started {
  display: none;
}
#app-assessment .questions-wrap {
  width: calc(var(--body-width) - 2 * var(--question-margin));
  max-width: calc(100vw - 2 * var(--question-margin));
  position: relative;
  overflow: hidden;
  margin: 0 var(--question-margin);
  z-index: 10;
}
#app-assessment .questions {
  width: calc(var(--body-width) - 2 * var(--question-margin));
  max-width: calc(100vw - 2 * var(--question-margin));
  height: auto;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: auto;
  grid-auto-flow: column;
  transition: transform var(--anim-step) ease;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scrollbar-width: none;
}
#app-assessment .questions::-webkit-scrollbar {
  display: none;
}
#app-assessment .questions .question {
  width: calc(var(--body-width) - 2 * var(--question-margin));
  max-width: calc(100vw - 2 * var(--question-margin));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  scroll-snap-align: center;
  position: relative;
}
#app-assessment .questions .question > p {
  margin: 1rem 2rem;
  font-size: 20px;
  color: var(--fg-primary);
}
#app-assessment .questions .question > p:first-of-type {
  margin-top: 0;
}
#app-assessment .questions .question ol li::marker {
  color: var(--fg-primary);
}
#app-assessment .questions .question ol li div {
  margin-left: 0.5rem;
}
#app-assessment .questions .question ol li span {
  color: var(--fg-soft);
}
#app-assessment #assessment > .controls {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#app-assessment #assessment > .controls .prev, #app-assessment #assessment > .controls .next {
  top: calc(50% + 25px);
  z-index: 100;
}
#app-assessment #assessment > .controls .prev.disabled, #app-assessment #assessment > .controls .next.disabled {
  visibility: hidden;
}
@media screen and (max-width: 1366px) {
  #app-assessment #assessment > .controls .prev {
    left: 0.5rem;
  }
}
#app-assessment #assessment > .controls .next {
  right: 0;
}
@media screen and (max-width: 1366px) {
  #app-assessment #assessment > .controls .next {
    right: 0.5rem;
  }
}
#app-assessment #assessment > .controls .footer {
  position: absolute;
  bottom: -5.5rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#app-assessment #assessment > .controls .footer button {
  margin: 0;
}
#app-assessment #assessment > .controls .footer button:not(:first-child) {
  margin-left: 1rem;
}
#app-assessment .answer {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: center;
}
#app-assessment .form-managed:is(.checklist, .radio) {
  counter-reset: answer-option;
}
#app-assessment .form-managed:is(.checklist, .radio) .inner {
  min-width: 16em;
  max-width: var(--form-element-width);
}
#app-assessment .form-managed:is(.checklist, .radio) .inner::before {
  content: counters(answer-option, "", upper-alpha) ".";
  counter-increment: answer-option;
  margin-right: 0.25rem;
}
#app-assessment #modal .dialog.confirm {
  width: auto;
  max-width: calc(var(--body-width) / 2.2);
}
#app-assessment #modal .dialog.confirm .body p {
  color: var(--fg-soft);
}
#app-assessment #modal .dialog.confirm.full-width {
  max-width: unset;
}

#app-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#app-feedback #send-feedback {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#app-privacy {
  width: var(--body-width);
}
#app-privacy header figure.logo {
  margin: 0 auto;
}
#app-privacy #privacy {
  max-width: 7in;
  margin: 0 auto;
  padding: 0 1rem;
}
#app-privacy #privacy h1 {
  text-align: center;
}
#app-privacy #privacy h1, #app-privacy #privacy h2, #app-privacy #privacy h3, #app-privacy #privacy h4 {
  color: var(--fg-primary);
}
#app-privacy #privacy ul {
  padding-left: 1rem;
}
#app-privacy #privacy ul li {
  margin-bottom: 1rem;
}

/**
 * search.scss
 *
 * Styles specific to the user search page.
 */
#app-search #search-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid var(--bg-element);
  margin-bottom: 1.2rem;
  padding: 0.5rem 0;
}
@media screen and (max-width: 1366px) {
  #app-search #search-controls {
    padding: 0.5rem 2rem;
  }
}
@media screen and (max-width: 767px) {
  #app-search #search-controls {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 0 0 1rem 0;
    padding: 1rem 0;
  }
}
#app-search #search-controls h2 {
  /* structurally this is h2, but stylistically it's h3 ... */
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  text-transform: uppercase;
  position: relative;
  color: transparent;
  --fade-in-text-color: var(--fg-primary);
  animation: fade-in-text var(--anim-step) ease forwards;
  animation-delay: var(--anim-step);
  white-space: nowrap;
  margin: 0 var(--fs-body) 0 0;
}
#app-search #search-controls p {
  text-transform: uppercase;
  justify-self: flex-start;
  text-align: left;
}
@media screen and (max-width: 767px) {
  #app-search #search-controls p {
    width: 100%;
  }
}
#app-search #search-controls .field-select {
  display: flex;
  justify-content: center;
  align-items: center;
}
#app-search #search-controls .field-select > label {
  display: block;
  margin-right: 0.5rem;
  color: var(--fg-primary);
}
#app-search #search-controls .field-select .cameo-list-select-item {
  font-size: var(--fs-body-sm);
  width: 10em;
  height: 35px;
  margin-bottom: 0;
}
#app-search #search-controls .search-criteria-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#app-search #search-controls .search-criteria-container .field-select {
  margin-bottom: 0;
}
#app-search #search-controls .search-criteria-container .toggle-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#app-search #search-controls .search-criteria-container .toggle-container p {
  margin: 0 1.5em 0 0;
  padding-top: 4px;
}
#app-search #search-controls .search-criteria-container .toggle-container p a {
  font-size: 20px;
}
@media screen and (max-width: 767px) {
  #app-search #search-controls .search-criteria-container .toggle-container p {
    margin-bottom: 1em;
  }
}
#app-search #search-controls .search-criteria-container .custom-select .selected {
  height: 35px;
}
#app-search #search-controls .title-bar {
  display: flex;
  align-items: center;
}
#app-search #search-controls .title-bar button {
  width: 2rem;
  height: 2rem;
}
#app-search #search-controls .title-bar button .icon {
  margin: 0 0 -1px;
}
#app-search .search-dashboard {
  display: flex;
  --card-margin: 1rem;
}
#app-search .search-dashboard .dashboard {
  flex-basis: 25%;
  flex-shrink: 0;
  border-right: 1px solid var(--bg-element);
  padding-right: 1.2rem;
  margin-right: 1.2rem;
}
@media screen and (max-width: 767px) {
  #app-search .search-dashboard .dashboard {
    flex-basis: 100%;
    padding-left: 1.2rem;
  }
}
#app-search .search-dashboard .dashboard .search-input-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--bg-element);
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
}
#app-search .search-dashboard .dashboard .search-input-container .text-input {
  width: 100%;
  margin: 0;
}
#app-search .search-dashboard .dashboard .search-input-container .text-input input {
  width: inherit;
}
#app-search .search-dashboard .dashboard .search-input-container button {
  margin: 0 0 0 4px;
  flex-shrink: 0;
  height: 50px;
}
#app-search .search-dashboard .dashboard #toggle-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#app-search .search-dashboard .dashboard #toggle-wrapper .toggle {
  margin: 0;
}
#app-search .search-dashboard .dashboard #toggle-wrapper .toggle > span {
  justify-content: space-between;
  margin: 0;
  width: 100%;
}
#app-search .search-dashboard .content-card-grid {
  width: 100%;
  --per-page: 3;
  --card-margin: 1rem;
  --card-width: calc(
          calc(calc(var(--body-width) * .75) - 1.2rem)
          / var(--per-page)
          - calc(var(--card-margin) * 2 * (var(--per-page) - 1) / var(--per-page))
  );
}
@media screen and (max-width: 767px) {
  #app-search .search-dashboard .content-card-grid {
    --card-width: calc(100vw - 2.4rem);
    margin-top: 2rem;
    padding-bottom: 2rem;
  }
  #app-search .search-dashboard .content-card-grid .content-card {
    margin: 0 auto;
  }
}
#app-search .search-dashboard .content-card-grid .cards {
  margin: 0;
}
@media screen and (max-width: 767px) {
  #app-search .search-dashboard {
    flex-wrap: wrap;
  }
  #app-search .search-dashboard .content-card-grid {
    --per-page: 1;
  }
}

/**
 * sign-in-pages.scss
 *
 * Login Form specific tweaks
 */
#sign-in-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  color: var(--fg-soft);
}
#sign-in-page header {
  justify-content: center;
}
#sign-in-page header p {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: auto 1em;
}
#sign-in-page header p a {
  margin-left: 0.5em;
}
#sign-in-page main h1 {
  font-size: var(--fs-h3);
  position: relative;
  text-transform: uppercase;
  color: transparent;
  --fade-in-text-color: var(--fg-primary);
  animation: fade-in-text var(--anim-step) ease forwards;
}
#sign-in-page main form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
#sign-in-page main form > div:not(.field.checkbox) {
  opacity: 0;
  animation: fade-in-opacity var(--anim-step) ease forwards;
  animation-delay: calc(var(--anim-step) * 1);
}
#sign-in-page main form > div:nth-child(2) {
  animation-delay: calc(var(--anim-step) * 1.5);
}
#sign-in-page main form > div:nth-child(4) {
  animation-delay: calc(var(--anim-step) * 2);
}
#sign-in-page main form > div:nth-child(5) {
  animation-delay: calc(var(--anim-step) * 2.5);
}
#sign-in-page main #submit-login, #sign-in-page main #register-button, #sign-in-page main #continue-button, #sign-in-page main #save-password-button {
  margin-top: 32px;
}
#sign-in-page main .buttons #forgot-password {
  margin-top: 12px;
}
#sign-in-page main .buttons #sign-up {
  margin-top: 8px;
}
#sign-in-page main .buttons #forgot-password,
#sign-in-page main .buttons #sign-up {
  text-transform: initial;
  font-weight: 500;
}
#sign-in-page footer {
  display: flex;
  flex-grow: 1;
  align-items: flex-end;
  text-align: center;
  margin: auto 1em;
  opacity: 0;
  animation: fade-in-opacity var(--anim-step) ease forwards;
  animation-delay: calc(var(--anim-step) * 3);
}
#sign-in-page #modal .verification .header {
  color: var(--fg-secondary);
}
#sign-in-page #modal .verification .body p {
  color: var(--fg-secondary);
}
#sign-in-page #modal .verification .footer button {
  background-color: var(--fg-secondary);
}

#terms-and-conditions {
  width: var(--body-width);
}
#terms-and-conditions header figure.logo {
  margin: 0 auto;
}
#terms-and-conditions #terms {
  max-width: 7in;
  margin: 0 auto;
  padding: 0 1rem;
}
#terms-and-conditions #terms h1 {
  text-align: center;
}
#terms-and-conditions #terms h1, #terms-and-conditions #terms h2, #terms-and-conditions #terms h3, #terms-and-conditions #terms h4 {
  color: var(--fg-primary);
}
#terms-and-conditions #terms ul {
  padding-left: 1.5rem;
}
#terms-and-conditions #terms ul li {
  margin-bottom: 1rem;
}

#app-404, #app-403 {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/**
 * dynamic.scss
 *
 * Styles for dynamic pages.
 */
#app-dynamic {
  min-width: var(--body-width);
  /*
  .cards {
    opacity: 0;
    animation: fade-in-opacity var(--anim-step) ease forwards;
  }
  */
}
#app-dynamic #main-menu-v2 .main-menu-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  height: calc(100vh - var(--header-height));
  left: 0;
  top: var(--header-height);
  z-index: 1000;
  border-right: 1px solid var(--bg-element);
  background: var(--bg-body);
  padding-top: 1em;
}
#app-dynamic #main-menu-v2 .main-menu-container .collapsible {
  margin-top: 0;
  padding-bottom: 0;
}
#app-dynamic #main-menu-v2 .item.static, #app-dynamic #main-menu-v2 .item.function {
  height: var(--item-height);
}
#app-dynamic #main-menu-v2 .item.collapsible {
  max-height: var(--item-height);
}
#app-dynamic #main-menu-v2 .item.collapsible:hover.open .collapse-title {
  color: var(--fg-primary);
  background: var(--bg-body);
}
#app-dynamic #main-menu-v2 .item.collapsible[data-collapse-level="0"] .item a, #app-dynamic #main-menu-v2 .item.collapsible[data-collapse-level="0"] .item .collapse-label {
  padding-left: 4.5rem;
}
#app-dynamic #main-menu-v2 .item.collapsible[data-collapse-level="1"] .item a, #app-dynamic #main-menu-v2 .item.collapsible[data-collapse-level="1"] .item .collapse-label {
  padding-left: 6rem;
}
#app-dynamic #main-menu-v2 .item.static, #app-dynamic #main-menu-v2 .item.function, #app-dynamic #main-menu-v2 .item.collapsible {
  --item-height: calc(1rem + var(--lh-body));
}
#app-dynamic #main-menu-v2 .item.static .collapse-title, #app-dynamic #main-menu-v2 .item.function .collapse-title, #app-dynamic #main-menu-v2 .item.collapsible .collapse-title {
  border: 0;
  margin: 0;
}
#app-dynamic #main-menu-v2 .item.static a, #app-dynamic #main-menu-v2 .item.static .collapse-label, #app-dynamic #main-menu-v2 .item.function a, #app-dynamic #main-menu-v2 .item.function .collapse-label, #app-dynamic #main-menu-v2 .item.collapsible a, #app-dynamic #main-menu-v2 .item.collapsible .collapse-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: var(--item-height);
  overflow: hidden;
  padding: 0.5rem 1rem 0.5rem 3.25rem;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--fg-primary);
  transition: all var(--anim-step) ease;
  font-size: var(--fs-sidebar) !important;
  text-transform: uppercase;
  margin-bottom: 0;
}
#app-dynamic #main-menu-v2 .item.static a i, #app-dynamic #main-menu-v2 .item.static .collapse-label i, #app-dynamic #main-menu-v2 .item.function a i, #app-dynamic #main-menu-v2 .item.function .collapse-label i, #app-dynamic #main-menu-v2 .item.collapsible a i, #app-dynamic #main-menu-v2 .item.collapsible .collapse-label i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--fs-sidebar);
  font-size: 14px;
  transform: translateX(-10px);
}
#app-dynamic #main-menu-v2 .item.static:hover:not(.open) > a, #app-dynamic #main-menu-v2 .item.static:hover:not(.open) .collapse-title, #app-dynamic #main-menu-v2 .item.function:hover:not(.open) > a, #app-dynamic #main-menu-v2 .item.function:hover:not(.open) .collapse-title, #app-dynamic #main-menu-v2 .item.collapsible:hover:not(.open) > a, #app-dynamic #main-menu-v2 .item.collapsible:hover:not(.open) .collapse-title {
  color: var(--fg-button);
  background: var(--fg-primary);
  outline: 0;
  border: 0;
}
#app-dynamic #main-menu-v2 .item.static:hover:not(.open) > a .collapse-label, #app-dynamic #main-menu-v2 .item.static:hover:not(.open) .collapse-title .collapse-label, #app-dynamic #main-menu-v2 .item.function:hover:not(.open) > a .collapse-label, #app-dynamic #main-menu-v2 .item.function:hover:not(.open) .collapse-title .collapse-label, #app-dynamic #main-menu-v2 .item.collapsible:hover:not(.open) > a .collapse-label, #app-dynamic #main-menu-v2 .item.collapsible:hover:not(.open) .collapse-title .collapse-label {
  color: var(--fg-button);
}
#app-dynamic #main-menu-v2 .entry hr {
  width: calc(var(--sidebar-width) - 3rem - var(--fs-sidebar));
  height: 1px;
  margin: 1rem 2rem calc(1rem - 1px) calc(var(--fs-sidebar) + 1rem);
  background-color: var(--bg-element);
}
#app-dynamic #main-menu-v2 .entry:last-child hr {
  display: none;
}
@media screen and (max-width: 1366px) {
  #app-dynamic {
    min-width: 100%;
  }
}
#app-dynamic #page.with-submenu {
  --submenu-gap: 1.6rem;
  --sidebar-width: 18rem;
  position: relative;
  display: flex;
  gap: var(--submenu-gap);
}
#app-dynamic #page.with-submenu #main-menu-v2 {
  width: var(--sidebar-width);
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  #app-dynamic #page.with-submenu #main-menu-v2 {
    display: none;
  }
}
#app-dynamic #page.with-submenu #main-menu-v2 .main-menu-container {
  left: unset;
  top: calc(var(--header-height) + var(--horizontal-menu-height));
  z-index: 900;
}
#app-dynamic #page.with-submenu .content {
  width: calc(var(--body-width) - var(--sidebar-width) - var(--submenu-gap));
}
#app-dynamic #page.with-submenu .content .content-card-grid {
  --per-page: 3;
  --card-width: calc(
          (calc(var(
                  --body-width) - var(--sidebar-width) - var(--total-margins))
          / var(--per-page)) - 1.5rem
  );
}
#app-dynamic :is(section, .section):not(.rich-text, section section) h2 {
  /* structurally this is h2, but stylistically it's h3 ... */
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  position: relative;
}
#app-dynamic :is(section, .section):not(.rich-text, section section) h2::after {
  content: " ";
  position: absolute;
  animation: section-title-underline calc(2 * var(--anim-step)) ease forwards;
  bottom: -4px;
  left: 0;
  width: var(--underline-width);
  height: 1px;
  background: var(--bg-element);
}
@media screen and (max-width: 1366px) {
  #app-dynamic :is(section, .section):not(.rich-text, section section) h2 {
    margin-left: 0.5rem;
  }
}
#app-dynamic :is(section, .section):not(.rich-text, section section):not(.enrolled, .enabled) {
  animation: fade-in-opacity var(--anim-step) ease both;
  animation-delay: var(--anim-step);
  margin-top: 1.5rem;
}
#app-dynamic :is(section, .section):not(.rich-text, section section) > h2 {
  color: var(--fg-primary);
}
@media screen and (max-width: 1366px) {
  #app-dynamic section:is(.text, .rich-text) {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
}
#app-dynamic section:is(.text) .text-container {
  display: flex;
  gap: 2rem;
}
@media screen and (max-width: 767px) {
  #app-dynamic section:is(.text) .text-container {
    flex-wrap: wrap;
  }
}
#app-dynamic section:is(.text) .text-container .text-section {
  flex: 1 1 100%;
}
#app-dynamic section:is(.text) .text-container .text-section p {
  color: var(--fg-primary);
}
#app-dynamic section:is(.text) .text-container .text-section p:first-child {
  margin-top: 0;
}
#app-dynamic p.no-content {
  text-align: center;
  height: calc(100vh - 150px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  color: var(--fg-primary);
  font-weight: 600;
}
#app-dynamic div.course-meta {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 1rem;
  justify-content: flex-start;
  align-items: stretch;
}
@media screen and (max-width: 767px) {
  #app-dynamic div.course-meta {
    justify-content: center;
    flex-direction: column;
  }
}
#app-dynamic div.course-meta .enrollment .date {
  text-align: center;
}
#app-dynamic div.course-meta div.course-meta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 6rem;
  padding: 0;
  margin-right: 1rem;
  padding-right: 1rem;
  border-right: 1px solid var(--bg-element);
}
#app-dynamic div.course-meta div.course-meta-block:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: 0;
}
#app-dynamic div.course-meta div.course-meta-block.enrollment button {
  margin: 0;
}
#app-dynamic div.course-meta div.course-meta-block .label {
  font-size: 1rem;
  line-height: calc(var(--lh-body) * 0.8);
  color: var(--fg-primary);
  font-weight: 600;
  text-transform: uppercase;
}
#app-dynamic div.course-meta div.course-meta-block .value {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 12em;
  font-size: 0.8em;
  line-height: calc(var(--lh-body) * 0.8);
  text-align: center;
}
#app-dynamic div.course-meta div.course-meta-block .value span {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#app-dynamic div.course-meta div.course-meta-block .value button {
  transform: scale(0.8);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled {
  width: var(--form-element-width);
  height: 45px;
  border-radius: var(--radius);
  flex-shrink: 0;
  flex-grow: 0;
  /* generally buttons should be fixed-size */
  width: auto;
  display: flex;
  flex-direction: row;
  flex-shrink: 1;
  flex-wrap: nowrap;
  margin: var(--form-element-margin) auto;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-body);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  text-transform: uppercase;
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
  /* faux buttons are elements that look like buttons but aren't interactable */
}
#app-dynamic div.course-meta div.course-meta-block .enrolled > span, #app-dynamic div.course-meta div.course-meta-block .enrolled label span {
  display: inline-flex;
  font-family: var(--font-stack-spaced);
  flex-shrink: 1;
  flex-grow: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: inherit;
  user-select: none;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled i:is(.fa, .fas, .far) {
  display: flex;
  justify-content: center;
  width: 1rem;
  font-size: var(--fs-body-sm);
  margin: 0 0.55rem -1px;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled i:is(.fa, .fas, .far):first-child {
  margin-left: 0;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled i:is(.fa, .fas, .far):last-child {
  margin-right: 0;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.main {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  height: 50px;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.ok {
  background: var(--fg-secondary);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.warn {
  background: var(--fg-accent);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.danger {
  background: var(--fg-danger);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.secondary {
  background: var(--fg-secondary);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.alternate {
  background: var(--fg-alternate);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled:is(:hover, :active, :focus) {
  opacity: 0.8;
  outline: 0;
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled:is(:hover, :active, :focus).ok {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled:is(:hover, :active, :focus).warn {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled:is(:hover, :active, :focus).danger {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled:is(:hover, :active, :focus).secondary {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled:is(:hover, :active, :focus).alternate {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.icon {
  width: calc(var(--form-element-height) - 2px);
  height: calc(var(--form-element-height) - 2px);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.icon i:is(.fa, .fas, .far) {
  margin: 0 0 -3px;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.stand-in {
  background: var(--bg-body);
  border: 2px dashed var(--fg-primary);
  color: var(--fg-primary);
  height: var(--form-element-height);
  width: fit-content;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.stand-in.secondary {
  color: var(--fg-secondary);
  border-color: var(--fg-secondary);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.stand-in.alternate {
  color: var(--fg-alternate);
  border-color: var(--fg-alternate);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.stand-in:is(.accent, .warn) {
  color: var(--fg-accent);
  border-color: var(--fg-accent);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.stand-in:is(.danger, .error) {
  color: var(--fg-danger);
  border-color: var(--fg-danger);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.inverse {
  background: var(--bg-body);
  border: 1px solid var(--fg-primary);
  color: var(--fg-primary);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.inverse:focus {
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.inverse:is(.ok, .secondary) {
  border-color: var(--fg-secondary);
  color: var(--fg-secondary);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.inverse:is(.ok, .secondary):focus {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.inverse.warn {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.inverse.warn:focus {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.inverse.danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.inverse.danger:focus {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.inverse.alternate {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.inverse.alternate:focus {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.inline {
  width: 50px;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.subtle {
  border-radius: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: transparent;
  border: none;
  vertical-align: center;
  width: auto;
  height: auto;
  margin: 0.5rem auto;
  text-transform: none;
  font-weight: normal;
  color: var(--fg-primary);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.subtle span {
  font-family: var(--font-stack-default);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.subtle:is(.forward, .back) i.fa {
  margin: 2px 0 0 0;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.subtle:is(:focus, :hover, :active) {
  outline: 0;
  box-shadow: unset;
  border: none;
  text-decoration: underline;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.subtle.primary {
  color: var(--fg-primary);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.subtle.secondary, #app-dynamic div.course-meta div.course-meta-block .enrolled.subtle.ok {
  color: var(--fg-secondary);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.subtle.alternate {
  color: var(--fg-accent);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.subtle.accent, #app-dynamic div.course-meta div.course-meta-block .enrolled.subtle.warning {
  color: var(--fg-accent);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.subtle.danger {
  color: var(--fg-danger);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled:is(:disabled, .disabled) {
  color: var(--bg-element);
  background: var(--bg-main);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled:is(:disabled, .disabled):is(.inverse, .stand-in) {
  opacity: 1;
  border-color: var(--bg-main);
  color: var(--bg-main);
  background: none;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled:is(:disabled, .disabled).subtle {
  color: var(--bg-main);
  background: none;
  text-decoration: none;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled:is(.disabled, :disabled, .faux) {
  cursor: default;
  pointer-events: none;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled:is(.disabled, :disabled, .faux):is(:hover, :active, :focus) {
  opacity: 1;
  outline: 0;
  box-shadow: unset;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled:is(.disabled, :disabled, .faux):is(.inverse, .stand-in):is(:focus, :active, :hover) {
  outline: 0;
  box-shadow: unset;
}
@media screen and (max-width: 767px) {
  #app-dynamic div.course-meta div.course-meta-block {
    flex-direction: row;
    padding: 0;
    margin: 0;
    border-right: 0;
  }
  #app-dynamic div.course-meta div.course-meta-block .label {
    text-align: right;
    width: calc(50% - 0.5rem);
  }
  #app-dynamic div.course-meta div.course-meta-block .value {
    align-items: flex-start;
    text-align: left;
    width: calc(50% - 0.5rem);
    margin-left: 1rem;
  }
}
#app-dynamic .course-overview {
  min-height: 240px;
}
#app-dynamic .course-overview .course-title {
  color: var(--fg-primary);
}
#app-dynamic .course-overview .course-description {
  color: var(--fg-secondary);
  font-size: var(--fs-sub);
}
@media screen and (max-width: 767px) {
  #app-dynamic .course-overview .course-description {
    width: calc(100vw - 2rem);
    margin: 0 1rem;
  }
}
#app-dynamic .text-header {
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--bg-element);
}
#app-dynamic .text-header h1 {
  margin: 1rem 0;
  text-align: center;
}
#app-dynamic .placeholder {
  min-width: initial;
  width: 100%;
}
#app-dynamic .placeholder:not(.placeholder .placeholder) {
  animation: fade-in-opacity var(--anim-step) ease;
  animation-delay: var(--anim-step);
}
#app-dynamic h1 .placeholder {
  height: var(--lh-h1);
}
#app-dynamic h2 .placeholder {
  height: var(--lh-h2);
}
#app-dynamic h3 .placeholder {
  height: var(--lh-h3);
}
#app-dynamic .content-card-carousel h2 .placeholder {
  height: var(--lh-h3);
}
#app-dynamic h4 .placeholder {
  height: var(--lh-h3);
}
#app-dynamic .course-meta-block .placeholder {
  height: 80px;
}
#app-dynamic p .placeholder {
  height: var(--lh-body);
}
#app-dynamic .section-faq .collapsible {
  margin: 10px 0;
}
#app-dynamic .section-faq .collapsible h2.collapse-title {
  text-transform: initial;
  margin: 0;
}
#app-dynamic .section-faq .collapsible h2.collapse-title .collapse-label {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
}
#app-dynamic .section-faq .collapsible h2.collapse-title:after {
  display: none;
}
#app-dynamic .section-faq .collapsible p {
  color: var(--fg-primary);
}
#app-dynamic .section-faq .bold {
  font-weight: 600;
}
#app-dynamic #app-end-user-faq {
  padding: 0 1rem;
}
#app-dynamic .section-embedded-item {
  --card-shadow: 1px 1px 10px 0px rgba(0,0,0,0.15);
  --card-padding: 20px;
}
#app-dynamic .section-embedded-item.hidden {
  display: none;
}
#app-dynamic .section-embedded-item .embed-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
#app-dynamic .section-embedded-item .embed-wrapper .text {
  height: fit-content;
  flex-basis: 16.6665%;
  font-size: var(--fs-body);
  color: var(--fg-primary);
  white-space: pre-wrap;
}
#app-dynamic .section-embedded-item .embed-wrapper .embedded-item {
  height: fit-content;
  flex-basis: 66.667%;
  flex-shrink: 0;
  overflow: hidden;
}
#app-dynamic .section-embedded-item .embed-wrapper .embedded-item img {
  width: 100%;
  height: fit-content;
  max-height: 600px;
  object-fit: contain;
}
@media screen and (max-width: 767px) {
  #app-dynamic .section-embedded-item .embed-wrapper {
    flex-wrap: wrap;
  }
  #app-dynamic .section-embedded-item .embed-wrapper .text, #app-dynamic .section-embedded-item .embed-wrapper .embedded-item {
    flex-basis: 100% !important;
    margin: 0 6px;
  }
}
#app-dynamic .section-embedded-item:not(.with-left-side) .text, #app-dynamic .section-embedded-item:not(.with-right-side) .text {
  flex-basis: 40%;
}
#app-dynamic .section-embedded-item:not(.with-left-side) .embedded-item, #app-dynamic .section-embedded-item:not(.with-right-side) .embedded-item {
  flex-basis: 60%;
}
#app-dynamic .section-embedded-item:not(.with-left-side):not(.with-right-side) .embedded-item {
  flex-basis: 100%;
}
#app-dynamic .section-embedded-item.small.with-left-side:not(.with-right-side) .text, #app-dynamic .section-embedded-item.small.with-right-side:not(.with-left-side) .text {
  flex-basis: 60%;
}
#app-dynamic .section-embedded-item.small.with-left-side:not(.with-right-side) .embedded-item, #app-dynamic .section-embedded-item.small.with-right-side:not(.with-left-side) .embedded-item {
  flex-basis: 40%;
}
#app-dynamic .section-embedded-item.small.with-left-side.with-right-side .text {
  flex-basis: 35%;
}
#app-dynamic .section-embedded-item.small.with-left-side.with-right-side .embedded-item {
  flex-basis: 30%;
}
#app-dynamic .section-embedded-item.with-content-card .text, #app-dynamic .section-embedded-item.with-content-card .embedded-item {
  flex-basis: unset !important;
}
#app-dynamic .section-embedded-item.with-content-card .embedded-item {
  padding: 0;
  margin: 0;
  box-shadow: unset;
}
#app-dynamic .section-embedded-item .video-player {
  height: calc(0.56 * (var(--body-width) - var(--form-element-width) - 1rem));
}
@media screen and (max-width: 767px) {
  #app-dynamic .section-embedded-item .video-player {
    height: calc(0.56 * var(--body-width));
    width: var(--body-width);
    margin: 0 -1rem;
  }
}
#app-dynamic .section-embedded-item .video-player :is(#player, #viewer) {
  width: 100%;
  height: 100%;
  border: none;
  background: black;
}
#app-dynamic .section-embedded-item .document-viewer {
  height: calc(0.56 * (var(--body-width) - var(--form-element-width) - 1rem));
  margin: 0 0 1rem;
}
@media screen and (max-width: 767px) {
  #app-dynamic .section-embedded-item .document-viewer {
    height: calc(0.56 * var(--body-width));
    width: var(--body-width);
    margin: 0 -1rem;
  }
}
#app-dynamic .section-embedded-item .document-viewer :is(#player, #viewer) {
  width: 100%;
  height: 100%;
  border: none;
  background: black;
}
#app-dynamic .section-embedded-item .document-viewer #viewer {
  height: calc(100% - var(--form-element-height) - 6px);
}

#app-faq a, #app-admin-faq a {
  -webkit-tap-highlight-color: transparent;
}
#app-faq h3, #app-admin-faq h3 {
  font-weight: 600;
}
#app-faq .questions, #app-admin-faq .questions {
  max-width: 100%;
}
#app-faq .questions .full-width, #app-admin-faq .questions .full-width {
  width: 100%;
}
#app-faq .collapsible, #app-admin-faq .collapsible {
  margin: 10px 0;
}
#app-faq .collapsible h2.collapse-title, #app-admin-faq .collapsible h2.collapse-title {
  text-transform: initial;
}
#app-faq .collapsible h2.collapse-title .collapse-label, #app-admin-faq .collapsible h2.collapse-title .collapse-label {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
}
#app-faq .collapsible p, #app-faq .collapsible ul, #app-faq .collapsible ol, #app-admin-faq .collapsible p, #app-admin-faq .collapsible ul, #app-admin-faq .collapsible ol {
  color: var(--fg-primary);
}
#app-faq .bold, #app-admin-faq .bold {
  font-weight: 600;
}
@media screen and (max-width: 767px) {
  #app-faq .questions, #app-admin-faq .questions {
    padding: 0 1rem;
  }
  #app-faq .questions h3, #app-admin-faq .questions h3 {
    text-align: center;
  }
  #app-faq .questions h3 a, #app-admin-faq .questions h3 a {
    position: absolute;
    left: 1rem;
  }
  #app-faq .questions > a, #app-admin-faq .questions > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
  }
  #app-faq .questions > a h3, #app-admin-faq .questions > a h3 {
    text-decoration: underline;
    text-decoration-color: var(--fg-accent);
    color: var(--fg-primary);
  }
  #app-faq .questions > a .plus, #app-admin-faq .questions > a .plus {
    font-size: var(--fs-h3);
    color: var(--fg-primary);
  }
}

#app-end-user-faq {
  padding: 0 1rem;
}

/**
 * lecture.scss
 *
 * Styles for lecture pages.
 */
#app-lecture {
  min-width: var(--body-width);
}
@media screen and (max-width: 1366px) {
  #app-lecture {
    min-width: 100%;
  }
}
#app-lecture #lecture-content {
  display: grid;
  grid-template-columns: auto calc(var(--form-element-width) - 70px);
  grid-gap: 2rem;
  width: var(--body-width);
}
@media screen and (max-width: 1366px) {
  #app-lecture #lecture-content {
    width: calc(var(--body-width) - 2rem);
    margin: 0 1rem;
    grid-gap: 1rem;
  }
}
@media screen and (max-width: 767px) {
  #app-lecture #lecture-content {
    display: block;
  }
}
#app-lecture #lecture-content h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 600;
  text-transform: uppercase;
  position: relative;
  color: transparent;
  --fade-in-text-color: var(--fg-primary);
  animation: fade-in-text var(--anim-step) ease forwards;
  animation-delay: var(--anim-step);
  margin-top: 2rem;
  position: relative;
}
#app-lecture #lecture-content h3::after {
  content: " ";
  position: absolute;
  animation: section-title-underline calc(2 * var(--anim-step)) ease forwards;
  bottom: -4px;
  left: 0;
  width: var(--underline-width);
  height: 1px;
  background: var(--bg-element);
}
#app-lecture #lecture-content h3:first-of-type {
  margin-top: 0;
}
@media screen and (max-width: 767px) {
  #app-lecture #lecture-content h3:first-of-type {
    margin-top: 2rem;
  }
}
#app-lecture #lecture-content :is(.lecture-player, .lecture-document-viewer) {
  height: calc(0.56 * (var(--body-width) - var(--form-element-width) - 1rem));
  margin: 0 0 1rem;
}
@media screen and (max-width: 767px) {
  #app-lecture #lecture-content :is(.lecture-player, .lecture-document-viewer) {
    height: calc(0.56 * var(--body-width));
    width: var(--body-width);
    margin: 0 -1rem;
  }
}
#app-lecture #lecture-content :is(.lecture-player, .lecture-document-viewer) :is(#player, #viewer) {
  width: 100%;
  height: 100%;
  border: none;
  background: black;
}
#app-lecture #lecture-content .lecture-document-viewer #viewer {
  height: calc(100% - var(--form-element-height) - 6px);
}
#app-lecture #lecture-content .lecture-main h3 {
  margin-top: 1rem 0;
}
#app-lecture #lecture-content .lecture-main .lecture-description {
  display: flex;
  flex-direction: column;
}
#app-lecture #lecture-content .lecture-main .lecture-description :first-child {
  margin-top: 0;
}
#app-lecture #lecture-content .lecture-main .lecture-description :last-child {
  margin-bottom: 0;
}
#app-lecture #lecture-content .lecture-main .lecture-meta {
  display: grid;
  grid-template-columns: min-content auto;
  grid-column-gap: 1rem;
  margin-top: 1rem;
}
#app-lecture #lecture-content .lecture-main .lecture-meta .label {
  font-weight: bold;
  color: var(--fg-primary);
}
#app-lecture #lecture-content .lecture-sidebar .cameo {
  width: calc(var(--form-element-width) - 70px);
  color: var(--fg-primary);
  border-color: var(--fg-primary);
}
#app-lecture #lecture-content .lecture-sidebar .cameo button {
  width: 26px;
  height: 26px;
  padding: 0;
}
#app-lecture #lecture-content .lecture-sidebar .cameo button i {
  font-size: 12px;
  margin: 0;
}
#app-lecture #lecture-content .lecture-playlist .cameo-course-entry {
  margin-bottom: 6px;
  color: var(--fg-primary);
  border-color: var(--fg-primary);
}
#app-lecture #lecture-content .lecture-playlist .cameo-course-entry.current {
  color: var(--fg-accent);
  border-color: var(--fg-accent);
}
#app-lecture #lecture-content .modules {
  grid-column: span 2;
}
@media screen and (max-width: 767px) {
  #app-lecture #lecture-content .modules {
    margin: 0 -1rem;
  }
}
#app-lecture #lecture-content .module-carousel .content-card-carousel {
  --per-page: 9.5;
  --card-padding: 1rem;
  --card-margin: 0.5rem;
}
@media screen and (max-width: 1366px) {
  #app-lecture #lecture-content .module-carousel .content-card-carousel {
    --per-page: 8.5;
  }
}
@media screen and (max-width: 1200px) {
  #app-lecture #lecture-content .module-carousel .content-card-carousel {
    --per-page: 7.5;
    --card-margin: 0.5rem;
    --card-padding: 0.5rem;
  }
}
@media screen and (max-width: 767px) {
  #app-lecture #lecture-content .module-carousel .content-card-carousel {
    margin-top: 2rem;
    --per-page: 6.5;
  }
}
@media screen and (max-width: 650px) {
  #app-lecture #lecture-content .module-carousel .content-card-carousel {
    --per-page: 5.5;
  }
}
@media screen and (max-width: 550px) {
  #app-lecture #lecture-content .module-carousel .content-card-carousel {
    --per-page: 4.5;
  }
}
@media screen and (max-width: 450px) {
  #app-lecture #lecture-content .module-carousel .content-card-carousel {
    --per-page: 3.5;
  }
}
#app-lecture #lecture-content .module-carousel .content-card-carousel .cards {
  padding: 0 10px;
}
#app-lecture #lecture-content .module-carousel .content-card-carousel h2 {
  font-weight: 600;
}
@media screen and (max-width: 1366px) {
  #app-lecture #lecture-content .module-carousel .content-card-carousel h2 {
    margin-left: 0;
  }
}
@media screen and (max-width: 767px) {
  #app-lecture #lecture-content .module-carousel .content-card-carousel h2 {
    margin-left: 1rem;
  }
}
#app-lecture #lecture-content .module-carousel .content-card-carousel .lecture-card h3 {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  margin: 6px auto;
}
#app-lecture #lecture-content .module-carousel .content-card-carousel .lecture-card .description {
  display: none;
}
#app-lecture #lecture-content .module-carousel .content-card-carousel .lecture-card .button {
  transform: scale(80%);
  margin: -4px 0;
}
#app-lecture .breadcrumbs {
  margin-bottom: 1rem;
}
@media screen and (max-width: 1366px) {
  #app-lecture .breadcrumbs {
    width: calc(var(--body-width) - 2rem);
    margin: 0 1rem 1rem 1rem;
  }
}
#app-lecture .breadcrumbs .breadcrumb {
  color: var(--fg-secondary);
  font-size: var(--fs-sub);
}
#app-lecture .breadcrumbs span {
  font-size: var(--fs-sub);
}
#app-lecture .placeholder {
  min-width: initial;
  width: 100%;
}
#app-lecture .placeholder:not(.placeholder .placeholder) {
  animation-delay: var(--anim-step);
}

#app-pdf {
  display: flex;
  flex-direction: column;
}
#app-pdf main#doc-viewer {
  position: relative;
  display: flex;
  height: auto;
  flex-grow: 1;
  flex-shrink: 0;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  #app-pdf main#doc-viewer {
    flex-wrap: wrap;
  }
}
#app-pdf main#doc-viewer iframe {
  position: relative;
  display: flex;
  flex-grow: 1;
  width: 100%;
  min-height: calc(100vh - var(--header-height));
  border: 0;
  z-index: 1;
}
#app-pdf main#doc-viewer #doc-direct-link {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--body-width);
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  z-index: 0;
  background: var(--body-bg);
}
@media screen and (max-width: 1366px) {
  #app-pdf main#doc-viewer #doc-direct-link {
    padding: 0 2.5rem;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  #app-pdf main#doc-viewer #doc-direct-link {
    padding: 0 1.5rem;
  }
  #app-pdf main#doc-viewer #doc-direct-link p {
    text-align: center;
  }
  #app-pdf main#doc-viewer #doc-direct-link button {
    max-width: 100%;
  }
}
#app-pdf main#doc-viewer #doc-direct-link > h1 {
  position: relative;
}
#app-pdf main#doc-viewer #doc-direct-link > h1::after {
  content: " ";
  position: absolute;
  animation: section-title-underline calc(2 * var(--anim-step)) ease forwards;
  bottom: -4px;
  left: 0;
  width: var(--underline-width);
  height: 1px;
  background: var(--bg-element);
}
#app-pdf main#doc-viewer #doc-direct-link > button {
  margin-left: 0;
}
#app-pdf main#doc-viewer .iframe-container {
  position: relative;
  flex-grow: 1;
  margin-top: 2rem;
  flex-basis: 70%;
}
@media screen and (max-width: 767px) {
  #app-pdf main#doc-viewer .iframe-container {
    flex-basis: 100%;
  }
}
#app-pdf main#doc-viewer .content-metadata {
  --card-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.15);
  --poster-width: 300px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  flex-basis: 30%;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1rem;
}
@media screen and (max-width: 767px) {
  #app-pdf main#doc-viewer .content-metadata {
    flex-wrap: wrap;
    flex-basis: 100%;
  }
}
#app-pdf main#doc-viewer .content-metadata .poster {
  width: var(--poster-width);
  height: calc(var(--poster-width) * 1.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  flex-grow: 0;
  border-radius: var(--radius);
  background-position: center;
  background-size: cover;
  color: transparent;
  position: relative;
}
#app-pdf main#doc-viewer .content-metadata .title {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  font-weight: 600;
  margin: 0;
  width: 100%;
  text-align: center;
  color: var(--fg-primary);
  overflow: hidden;
  word-wrap: break-word;
}
#app-pdf main#doc-viewer .content-metadata .description {
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: column;
  overflow: hidden;
  word-wrap: break-word;
  color: var(--fg-primary);
}
#app-pdf main#doc-viewer .content-metadata .labels {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1em;
}
#app-pdf main#doc-viewer .content-metadata .labels a {
  width: auto;
  max-width: calc(100% - 0.5em);
  padding: 0 0.5em;
  margin: 0 0.25em 0.5em;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 0.8rem;
  text-transform: capitalize;
  text-decoration: none;
  color: var(--fg-soft);
  background-color: var(--bg-element);
  border-radius: calc(var(--radius) * 0.5);
  transition: all var(--anim-step) ease;
}
#app-pdf main#doc-viewer .content-metadata .labels a i {
  font-size: 0.8em;
  text-decoration: none;
  margin-right: 0.25rem;
}

#app-score :is(h1, h2):not(.collapse-title) {
  position: relative;
}
#app-score :is(h1, h2):not(.collapse-title)::after {
  content: " ";
  position: absolute;
  animation: section-title-underline calc(2 * var(--anim-step)) ease forwards;
  bottom: -4px;
  left: 0;
  width: var(--underline-width);
  height: 1px;
  background: var(--bg-element);
}
#app-score .container-overview {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2em;
  gap: 2em;
}
#app-score .container-overview .profile, #app-score .container-overview .info {
  flex-basis: 50%;
}
#app-score .container-overview .profile h2, #app-score .container-overview .info h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
}
#app-score .container-overview .profile h2::after, #app-score .container-overview .info h2::after {
  display: none;
}
@media screen and (max-width: 767px) {
  #app-score .container-overview {
    flex-wrap: wrap;
    gap: 1rem;
  }
  #app-score .container-overview .profile, #app-score .container-overview .info {
    flex-basis: 100%;
  }
}
#app-score h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-primary);
  margin: 0;
}
#app-score .username {
  display: block;
  text-align: left;
  color: var(--fg-primary);
  margin: 0 0 0.5em 0;
  word-break: break-word;
  font-size: 20px;
}
#app-score .profile h1 {
  margin: 0;
}
#app-score .date-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#app-score .date-container .date-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--fg-primary);
}
#app-score .date-container .date-value {
  font-weight: 600;
  color: var(--fg-alternate);
}
#app-score #score {
  padding-top: 2.5rem;
}
@media screen and (max-width: 767px) {
  #app-score #score {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
#app-score #score > .collapsible {
  max-height: calc(var(--lh-h1) + 0.25rem);
}
#app-score #score > .collapsible > .collapse-title {
  font-size: var(--fs-h1);
  line-height: var(--fs-h1);
}
#app-score #score > .collapsible > .collapse-title i {
  color: var(--fg-primary);
}
#app-score #score > .collapsible > .collapse-title .collapse-label {
  width: 100%;
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: var(--lh-h1);
  text-decoration: underline;
  color: var(--fg-primary);
}
#app-score .answers .collapsible {
  margin-bottom: 1.5rem;
}
#app-score .answers .collapse-label {
  width: 100%;
}
#app-score .answers .question-title {
  display: grid;
  grid-template-columns: 53% 47%;
  font-size: 28px;
}
#app-score .answers .question-title .question-text {
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 1rem;
}
#app-score .answers .question-score {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg-secondary);
}
#app-score .answers .question-score:before {
  content: "Score: ";
  color: var(--fg-accent);
}
#app-score .answer-content {
  display: flex;
  justify-content: space-between;
  gap: 2em;
  margin-bottom: 2em;
}
#app-score .answer-content .container-question, #app-score .answer-content .container-answer {
  flex-basis: 50%;
}
#app-score .answer-content h2 {
  color: var(--fg-secondary);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
#app-score .answer-content h2::after {
  display: none;
}
#app-score .answer-content h3 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
}
@media screen and (max-width: 767px) {
  #app-score .answer-content {
    flex-wrap: wrap;
    gap: 1rem;
  }
  #app-score .answer-content .container-question, #app-score .answer-content .container-answer {
    flex-basis: 100%;
  }
}
#app-score .description {
  margin-bottom: var(--fs-body);
  word-break: break-word;
}
#app-score .feedback {
  color: var(--fg-alternate);
}
#app-score .feedback i.fa {
  float: left;
  margin-top: 5px;
  font-size: var(--fs-body-sm);
  margin-right: 0.5rem;
}
#app-score .key-value-container {
  flex-direction: column;
  align-items: flex-start;
}
#app-score .key-value-container .value {
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--form-element-width);
  height: var(--form-element-height);
  padding: var(--form-element-padding);
  border: 1px solid var(--bg-element);
  outline: none;
  font-size: var(--fs-body);
  background: var(--bg-body);
  color: var(--fg-body);
  transition: border-color var(--anim-step) ease;
  width: 100%;
  min-height: var(--form-element-height);
  height: auto;
  margin-left: 0;
  margin-top: 6px;
}
#app-score .key-value-container .value.warn, #app-score .key-value-container .value.invalid, #app-score .key-value-container .value.danger {
  border-color: var(--fg-danger);
}
#app-score .key-value-container .value::placeholder {
  color: var(--bg-main);
}
#app-score .key-value-container .value:focus, #app-score .key-value-container .value:focus-within, #app-score .key-value-container .value:hover, #app-score .key-value-container .value:active {
  outline: none;
  border-color: var(--bg-main);
}
#app-score .key-value-container .value:disabled, #app-score .key-value-container .value.disabled {
  border-color: var(--bg-main);
  background: var(--bg-element);
  color: var(--bg-main);
}
#app-score .key-value-container .value.points {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
#app-score .key-value-container.grade .value {
  color: var(--fg-secondary);
  font-weight: 700;
}
#app-score .key-value-container .cameo {
  margin-top: 0.5rem;
  width: 100%;
}
#app-score .details {
  margin-top: 2rem;
}
#app-score .divider-container {
  padding-top: 6rem;
}
@media screen and (max-width: 767px) {
  #app-score .divider-container {
    display: none;
  }
}
#app-score .divider-container .divider {
  display: block;
  width: 1px;
  height: 100%;
  background: var(--bg-element);
}

header {
  padding: 0 1rem;
}
header.standard figure.logo {
  display: block;
  width: unset;
  flex-basis: 30%;
}
header.standard .logo-title {
  flex-basis: 40%;
  flex-grow: 1;
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  header.standard .logo-title {
    display: none;
  }
}
header.standard .logo-title h1 {
  font-weight: 600;
}
header.standard .controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-basis: 30%;
}
header.standard .controls > * {
  width: var(--form-element-width);
  height: 45px;
  border-radius: var(--radius);
  flex-shrink: 0;
  flex-grow: 0;
  /* generally buttons should be fixed-size */
  width: auto;
  display: flex;
  flex-direction: row;
  flex-shrink: 1;
  flex-wrap: nowrap;
  margin: var(--form-element-margin) auto;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-body);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  text-transform: uppercase;
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
  /* faux buttons are elements that look like buttons but aren't interactable */
  margin: 0;
}
header.standard .controls > * > span, header.standard .controls > * label span {
  display: inline-flex;
  font-family: var(--font-stack-spaced);
  flex-shrink: 1;
  flex-grow: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: inherit;
  user-select: none;
}
header.standard .controls > * i:is(.fa, .fas, .far) {
  display: flex;
  justify-content: center;
  width: 1rem;
  font-size: var(--fs-body-sm);
  margin: 0 0.55rem -1px;
}
header.standard .controls > * i:is(.fa, .fas, .far):first-child {
  margin-left: 0;
}
header.standard .controls > * i:is(.fa, .fas, .far):last-child {
  margin-right: 0;
}
header.standard .controls > *.main {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  height: 50px;
}
header.standard .controls > *.ok {
  background: var(--fg-secondary);
}
header.standard .controls > *.warn {
  background: var(--fg-accent);
}
header.standard .controls > *.danger {
  background: var(--fg-danger);
}
header.standard .controls > *.secondary {
  background: var(--fg-secondary);
}
header.standard .controls > *.alternate {
  background: var(--fg-alternate);
}
header.standard .controls > *:is(:hover, :active, :focus) {
  opacity: 0.8;
  outline: 0;
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
header.standard .controls > *:is(:hover, :active, :focus).ok {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
header.standard .controls > *:is(:hover, :active, :focus).warn {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
header.standard .controls > *:is(:hover, :active, :focus).danger {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
header.standard .controls > *:is(:hover, :active, :focus).secondary {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
header.standard .controls > *:is(:hover, :active, :focus).alternate {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
header.standard .controls > *.icon {
  width: calc(var(--form-element-height) - 2px);
  height: calc(var(--form-element-height) - 2px);
}
header.standard .controls > *.icon i:is(.fa, .fas, .far) {
  margin: 0 0 -3px;
}
header.standard .controls > *.stand-in {
  background: var(--bg-body);
  border: 2px dashed var(--fg-primary);
  color: var(--fg-primary);
  height: var(--form-element-height);
  width: fit-content;
}
header.standard .controls > *.stand-in.secondary {
  color: var(--fg-secondary);
  border-color: var(--fg-secondary);
}
header.standard .controls > *.stand-in.alternate {
  color: var(--fg-alternate);
  border-color: var(--fg-alternate);
}
header.standard .controls > *.stand-in:is(.accent, .warn) {
  color: var(--fg-accent);
  border-color: var(--fg-accent);
}
header.standard .controls > *.stand-in:is(.danger, .error) {
  color: var(--fg-danger);
  border-color: var(--fg-danger);
}
header.standard .controls > *.inverse {
  background: var(--bg-body);
  border: 1px solid var(--fg-primary);
  color: var(--fg-primary);
}
header.standard .controls > *.inverse:focus {
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
header.standard .controls > *.inverse:is(.ok, .secondary) {
  border-color: var(--fg-secondary);
  color: var(--fg-secondary);
}
header.standard .controls > *.inverse:is(.ok, .secondary):focus {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
header.standard .controls > *.inverse.warn {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
header.standard .controls > *.inverse.warn:focus {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
header.standard .controls > *.inverse.danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
header.standard .controls > *.inverse.danger:focus {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
header.standard .controls > *.inverse.alternate {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
header.standard .controls > *.inverse.alternate:focus {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
header.standard .controls > *.inline {
  width: 50px;
}
header.standard .controls > *.subtle {
  border-radius: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: transparent;
  border: none;
  vertical-align: center;
  width: auto;
  height: auto;
  margin: 0.5rem auto;
  text-transform: none;
  font-weight: normal;
  color: var(--fg-primary);
}
header.standard .controls > *.subtle span {
  font-family: var(--font-stack-default);
}
header.standard .controls > *.subtle:is(.forward, .back) i.fa {
  margin: 2px 0 0 0;
}
header.standard .controls > *.subtle:is(:focus, :hover, :active) {
  outline: 0;
  box-shadow: unset;
  border: none;
  text-decoration: underline;
}
header.standard .controls > *.subtle.primary {
  color: var(--fg-primary);
}
header.standard .controls > *.subtle.secondary, header.standard .controls > *.subtle.ok {
  color: var(--fg-secondary);
}
header.standard .controls > *.subtle.alternate {
  color: var(--fg-accent);
}
header.standard .controls > *.subtle.accent, header.standard .controls > *.subtle.warning {
  color: var(--fg-accent);
}
header.standard .controls > *.subtle.danger {
  color: var(--fg-danger);
}
header.standard .controls > *:is(:disabled, .disabled) {
  color: var(--bg-element);
  background: var(--bg-main);
}
header.standard .controls > *:is(:disabled, .disabled):is(.inverse, .stand-in) {
  opacity: 1;
  border-color: var(--bg-main);
  color: var(--bg-main);
  background: none;
}
header.standard .controls > *:is(:disabled, .disabled).subtle {
  color: var(--bg-main);
  background: none;
  text-decoration: none;
}
header.standard .controls > *:is(.disabled, :disabled, .faux) {
  cursor: default;
  pointer-events: none;
}
header.standard .controls > *:is(.disabled, :disabled, .faux):is(:hover, :active, :focus) {
  opacity: 1;
  outline: 0;
  box-shadow: unset;
}
header.standard .controls > *:is(.disabled, :disabled, .faux):is(.inverse, .stand-in):is(:focus, :active, :hover) {
  outline: 0;
  box-shadow: unset;
}

.help-container {
  position: relative;
}
.help-container .help-toggle {
  position: absolute;
  cursor: pointer;
  top: 10px;
  right: 0;
  z-index: 10;
  color: var(--fg-primary);
}

#modal > .dialog.common-faq .header {
  flex-grow: 0;
  height: 70px;
}
#modal > .dialog.common-faq .content {
  padding: 12px;
}
#modal > .dialog.common-faq.domain-help-dialog .content {
  height: 400px;
}
#modal > .dialog.common-faq.domain-help-dialog .content .body p {
  font-size: 20px;
}
#modal > .dialog.common-faq.domain-help-dialog .content .body p:first-child {
  margin: 0;
}

.stepper-container {
  overflow: hidden;
  position: relative;
}
.stepper-container .stepper {
  display: flex;
  flex-wrap: nowrap;
  transition: transform 0.3s ease-in-out;
}
.stepper-container .stepper .step {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100%;
}
.stepper-container .stepper .step .footer {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
}
.stepper-container .stepper .step .footer button {
  margin: 0;
}

.column-layout {
  display: flex;
  flex-wrap: nowrap;
  gap: 2rem;
}
@media screen and (max-width: 767px) {
  .column-layout {
    flex-wrap: wrap;
  }
}
.column-layout .centered {
  justify-content: center;
}
.column-layout .pane {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.column-layout .pane h2 {
  position: relative;
  font-size: 25px;
  margin-bottom: 2.5rem;
}
.column-layout .pane h2::after {
  content: " ";
  position: absolute;
  animation: section-title-underline ease forwards;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--bg-element);
}
.column-layout .with-divider {
  padding: 2rem 0;
  position: relative;
  width: 1px;
  height: auto;
}
@media screen and (max-width: 767px) {
  .column-layout .with-divider {
    display: none;
  }
}
.column-layout .with-divider .divider {
  width: 100%;
  height: 100%;
  background: var(--bg-element);
}

#company-details-form .cameo-list-select-item {
  margin: 0;
}

#tier-form .field.radio {
  width: 100%;
  margin-bottom: var(--form-element-margin);
}
#tier-form .field.radio .inner-radio.CONTENT_BOX > span {
  height: auto;
  align-items: flex-start;
}
#tier-form .field.radio .inner-radio.CONTENT_BOX > span.content-box.disabled {
  opacity: 0.6;
  user-select: none;
  pointer-events: none;
}
#tier-form .field.radio .inner-radio.CONTENT_BOX > span .entry-content {
  padding-bottom: 1rem;
}
#tier-form .field.radio .inner-radio.CONTENT_BOX > span .entry-content .title {
  margin-top: 17px;
  letter-spacing: -0.1px;
  text-transform: uppercase;
  font-weight: 700;
  background: rgba(16, 44, 128, 0.15);
  border-radius: 100%;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}
#tier-form .field.radio .inner-radio.CONTENT_BOX > span .entry-content .subtitle-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#tier-form .field.radio .inner-radio.CONTENT_BOX > span .entry-content .subtitle-container .subtitle {
  display: flex;
  justify-content: center;
  letter-spacing: -0.1px;
  opacity: 0.7;
  text-align: center;
  margin: 3px;
  font-size: 14px;
  line-height: 1.5rem;
}
@media screen and (max-width: 767px) {
  #tier-form .field.radio .inner-radio.CONTENT_BOX {
    flex-direction: column;
  }
  #tier-form .field.radio .inner-radio.CONTENT_BOX > span {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  #tier-form .field.textarea {
    width: 100%;
  }
  #tier-form .field.textarea textarea {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
}
#tier-form .field.checkbox {
  width: 100%;
}
#tier-form .field.checkbox .checkbox {
  width: 100%;
  max-width: 100%;
}

#deployment-info-form .notches-wrapper .notches {
  width: calc(var(--form-element-width) - 30px);
}

form.disabled {
  opacity: 0.6;
  user-select: none;
  pointer-events: none;
}

.field.multi-toggle .multi-toggle p {
  display: none;
}
.field.multi-toggle .multi-toggle .notches-wrapper .notches {
  width: var(--form-element-width);
}
.field.field-select .cameo .controls .fa-chevron-down {
  color: var(--fg-soft);
  font-size: var(--fs-body-sm);
}

.field.checkbox .checkbox {
  padding: 0 !important;
}

#app-review .review-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5rem;
}
@media screen and (max-width: 767px) {
  #app-review .review-body {
    margin-top: 2rem;
    padding: 0 1rem;
  }
}
#app-review .review-body .image {
  width: 250px;
  height: 250px;
}
@media screen and (max-width: 767px) {
  #app-review .review-body .image {
    width: 150px;
    height: 150px;
  }
}
@media screen and (max-width: 767px) {
  #app-review .review-body h1 {
    text-align: center;
  }
}
#app-review .review-body p {
  color: var(--fg-soft);
  margin: 12px 0;
}
@media screen and (max-width: 767px) {
  #app-review .review-body p {
    text-align: center;
  }
}

:root {
  --form-element-margin: 12px;
}