@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: #12358F;
  --fg-primary-washed: #F2F4FA;
  --fg-accent: #ed7450;
  --fg-warning: var(--fg-accent);
  --fg-danger: #981826;
  --fg-danger-washed: #FAF1F1;
  --fg-danger-acid: #FF1E1E;
  --fg-secondary: #1e9d79;
  --fg-secondary-washed: #F1F8F6;
  --fg-alternate: #4E4E88;
  --fg-body: #0B1A33;
  --fg-soft: #717dab;
  --fg-button: #ffffff;
  --dark-fg-primary: #4a75e4;
  --dark-fg-accent: #d08549;
  --dark-fg-warning: var(--dark-fg-accent);
  --dark-fg-danger: #cb4855;
  --dark-fg-danger-acid: #FF1E1E;
  --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: #f7f7f7;
  --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-fadeout: linear-gradient(180deg, rgba(255,255,255,0) 50%, var(--bg-body) 95%);
  --bg-boxed-switch-off: rgba(255,255,255,0.8);
  --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);
  --bg-gray-1: #828282;
  --bg-gray-2: #3C485C;
  --bg-gray-3: #BDBDBD;
  --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%);
  --darkbg-fadeout: linear-gradient(180deg, rgba(0,0,0,0) 50%, var(--dark-bg-body) 95%);
  --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);
  --player-fg-primary: var(--fg-primary);
  --player-fg-text: var(--bg-body);
  --player-fg-background: var(--fg-body);
  --player-fg-contrast-1: var(--fg-primary);
  --player-fg-contrast-2: #434651;
  --player-dark-fg-primary: var(--dark-fg-primary);
  --player-dark-fg-text: var(--dark-bg-body);
  --player-dark-fg-background: var(--dark-fg-body);
  --player-dark-fg-contrast-1: var(--fg-primary);
  --player-dark-fg-contrast-2: #434651;
}

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-warning: var(--dark-fg-warning);
  --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);
  --bg-fadeout: var(--dark-bg-fadeout);
  /** 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);
}

body.player-dark-mode {
  --player-fg-primary: var(--player-dark-fg-primary);
  --player-fg-text: var(--player-dark-fg-text);
  --player-fg-background: var(--player-dark-fg-background);
  --player-fg-contrast-1: var(--player-dark-fg-contrast-1);
  --player-fg-contrast-2: var(--player-dark-fg-contrast-2);
}

/**
 * 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: 3px;
  --radius-small: calc(var(--radius) * 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 18px;
  --form-element-width: 370px;
  --form-element-height: 46px;
  --form-radio-width: 20px;
  --form-element-margin: 6px;
  --form-element-radius: 5px;
}
@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: "PP Neue Montreal", Helvetica, Roboto, Arial, sans-serif;
  --font-stack-spaced: "PP Neue Montreal", Helvetica, Roboto, Arial, sans-serif;
  --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: 34px;
  --lh-h1: 43px;
  /* h2 and h2-tier titles */
  --fs-h2: 32px;
  --lh-h2: 56px;
  /* h3 and h3-tier titles */
  --fs-h3: 25px;
  --lh-h3: 32px;
  /* h3 and h3-tier titles */
  --fs-h4: 20px;
  --lh-h4: 28px;
  /* general default font-size */
  --fs-body: 16px;
  --lh-body: 28px;
  /* small/secondary body texts */
  --fs-body-sm: 14px;
  --lh-body-sm: 20px;
  /* 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: 24px;
  /* general button & form elements */
  --fs-button: 16px;
  --lh-button: 28px;
  /* small/secondary buttons */
  --fs-button-sm: 14px;
  --lh-button-sm: 28px;
  /* small/secondary buttons */
  --fs-button-xsm: 11px;
  --lh-button-xsm: 20px;
  /* sidebar navigation menu items */
  --fs-sidebar: 16px;
  /* accordion headings, etc. */
  --fs-sh: 24px;
  --lh-sh: 28px;
  /* table */
  --fs-table: 14px;
  --lh-table: 20px;
  /* cameo */
  --fs-cameo-button-icon: 10px;
  /* tabs */
  --fs-tab-extra-small: 9px;
}

body {
  font-family: var(--font-stack-default);
  font-stretch: condensed;
  font-weight: 400;
  letter-spacing: 0.02em;
  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-body);
  font-size: var(--fs-h3);
  font-family: var(--font-stack-spaced);
  line-height: var(--lh-h3);
}

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

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

.fa-user {
  margin-bottom: 1px;
}

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

.inset-block {
  padding: 1rem;
  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);
}

s {
  text-decoration: underline;
  text-underline-offset: -0.4em;
  text-decoration-skip-ink: none;
}

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

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

*::-webkit-scrollbar-track {
  background: var(--fg-primary);
}

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

/**
 * 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;
  max-width: 100vw;
  min-height: 100dvh;
  width: 100%;
  scroll-behavior: auto;
}
body .page {
  width: 100%;
  flex-grow: 1;
}
body .page main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
body .page section:is(.faq, .dynamic-section) {
  width: 100%;
  max-width: var(--body-width);
}
@media screen and (max-width: 767px) {
  body:not(.fullscreen, .gjs-dashed) {
    /* fixme this should just use var(--header-height) but it gets overridden */
    padding-top: 75px !important;
  }
  body:not(.fullscreen, .gjs-dashed) .page {
    min-height: calc(var(--100vh) - 75px);
    width: var(--body-width);
    overflow-x: hidden;
  }
}

/**
 * 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 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  text-align: center;
  color: var(--fg-primary);
}
footer > :not(.full-width, .gjs-full-width) {
  width: var(--body-width);
}
footer > :is(.full-width, .gjs-full-width) {
  width: 100%;
}

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

.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: 232px;
  --dashboard-widget-margin: 1px;
  --dashboard-widget-container-padding: 1px;
  --dashboard-widget-border-radius: 0;
  --dashboard-main-width: auto;
  --dashboard-main-padding: 0;
  --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%;
    --dashboard-main-width: 100vw;
    --dashboard-main-padding: 0;
    --dashboard-widget-container-padding: 1px;
    /* fullscreen pages do not have headers/dashboard elements */
  }
  body.dashboard:not(.fullscreen, .gjs-dashed) {
    /* fixme this should just use var(--header-height) but it gets overridden */
    padding-top: var(--dashboard-header-height) !important;
  }
  body.dashboard:not(.fullscreen, .gjs-dashed) .page {
    min-height: calc(100dvh - 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 {
  padding: 0;
}
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;
  padding: var(--dashboard-main-padding);
  align-items: initial;
  justify-content: initial;
  /* 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;
  grid-gap: 0;
}
body.dashboard main.lonely .dashboard-widget:not(.action-bar) {
  min-height: calc(100vh - 16rem);
  max-width: var(--dashboard-main-width);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
body.dashboard main.lonely .dashboard-widget.action-bar {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
@media screen and (min-width: 1921px) {
  body.dashboard main {
    margin: 1rem 0 0 calc(1rem + var(--dashboard-sidebar-width));
  }
}
@media screen and (max-width: 767px) {
  body.dashboard main {
    margin-left: 0;
  }
}
body.dashboard .dashboard-widget-container {
  height: 100%;
}
body.dashboard .dashboard-widget-container .acl > * {
  width: 100%;
}
body.dashboard .dashboard-widget {
  grid-row: span var(--dashboard-rows);
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: var(--form-element-width);
  background-color: var(--bg-body);
  border-radius: var(--dashboard-widget-border-radius);
}
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(100% - var(--dashboard-sidebar-width));
  align-items: center;
  margin-left: var(--dashboard-sidebar-width);
  background: var(--bg-body);
  border-top: 1px solid var(--bg-element);
}
@media screen and (max-width: 767px) {
  body.dashboard footer {
    margin-left: 0;
    max-width: 100vw;
  }
  body.dashboard footer p {
    padding: 0 1rem;
  }
}
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;
}

body.flyout-open {
  scroll-behavior: auto;
  position: fixed;
  overflow: hidden;
}
body.flyout-open #flyout {
  background-color: var(--bg-overlay);
}

#flyout {
  position: fixed;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 2000;
  transition: background-color var(--anim-step) ease-in-out;
}
@media screen and (max-width: 767px) {
  #flyout {
    display: block;
    overflow-x: auto;
  }
}
#flyout:empty {
  display: none;
}

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

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

.em-notifications-overlay .notification {
  position: relative;
  width: 384px;
  max-width: calc(100vw - 48px);
  margin-bottom: 10px;
  margin-right: 20px;
  padding: 14px 20px;
  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);
  border: 0;
  background-color: var(--fg-primary);
  color: var(--fg-button);
}
.em-notifications-overlay .notification button {
  margin: 0 0 2px;
  padding: 0;
  color: var(--fg-button);
}
.em-notifications-overlay .notification button i {
  font-size: var(--fs-body);
}
.em-notifications-overlay .notification:not(.closing) {
  animation: translate-notification 0.2s ease-out;
}
.em-notifications-overlay .notification.closing {
  animation: close-notification 0.2s ease-in-out;
}
.em-notifications-overlay .notification.success {
  background-color: var(--fg-secondary);
}
.em-notifications-overlay .notification.fail {
  background-color: var(--fg-danger);
}
.em-notifications-overlay .notification .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.em-notifications-overlay .notification .header > .title {
  flex-grow: 1;
  font-size: var(--fs-sub);
}
.em-notifications-overlay .notification .header > .title i {
  margin-right: 8px;
}
.em-notifications-overlay .notification .text {
  margin-top: 8px;
}

section#floating {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  pointer-events: none;
  display: none;
  max-width: initial;
}
section#floating.visible {
  display: block;
  z-index: 20;
}
section#floating button#outreach-fab {
  position: absolute;
  bottom: 1em;
  right: 1em;
  pointer-events: all;
  box-shadow: 0 4px 4px var(--bg-fab-shadow);
}
section#floating button#outreach-fab:is(:hover, :active, :focus) {
  opacity: 1;
  filter: brightness(1.3);
}
section#floating button#outreach-fab > span {
  display: flex;
  gap: 0.5em;
  align-items: center;
  justify-content: center;
}

body.modal-open section#floating {
  display: none;
}

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 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;
  width: 50%;
}
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: 16px 6px;
}
form.bulk div.helps:empty {
  display: none;
}
form.bulk div.helps .help {
  border: 0 none;
  max-width: initial;
  padding: 0;
  text-indent: 0;
  margin: 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 */
#app-mass-content-create #help, #app-mass-user-group-create #help, #app-manage-content #help {
  color: color-mix(in srgb, var(--fg-body) 50%, transparent);
  margin: var(--lh-body) auto;
  display: flex;
  gap: 38px;
}
#app-mass-content-create #help button, #app-mass-user-group-create #help button, #app-manage-content #help button {
  margin: 0 auto 2rem;
}
#app-mass-content-create #help a i, #app-mass-user-group-create #help a i, #app-manage-content #help a i {
  margin: 0 0.5rem;
}
@media screen and (max-width: 767px) {
  #app-mass-content-create #help, #app-mass-user-group-create #help, #app-manage-content #help {
    flex-wrap: wrap;
  }
}
#app-mass-content-create #help .need-more, #app-mass-user-group-create #help .need-more, #app-manage-content #help .need-more {
  width: 280px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  border: 1px solid;
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--fg-body) 20%, transparent);
  padding: 36px 28px;
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  #app-mass-content-create #help .need-more, #app-mass-user-group-create #help .need-more, #app-manage-content #help .need-more {
    width: 100%;
  }
}
#app-mass-content-create #help .need-more p, #app-mass-user-group-create #help .need-more p, #app-manage-content #help .need-more p {
  text-align: center;
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--fg-body);
  margin: 0 0 25px;
}
#app-mass-content-create #help .need-more button, #app-mass-user-group-create #help .need-more button, #app-manage-content #help .need-more button {
  margin: 0;
}
#app-mass-content-create #help .need-more button:last-child, #app-mass-user-group-create #help .need-more button:last-child, #app-manage-content #help .need-more button:last-child {
  margin-top: 10px;
}
#app-mass-content-create #help .collapsible, #app-mass-user-group-create #help .collapsible, #app-manage-content #help .collapsible {
  margin: 10px 0;
}
#app-mass-content-create #help .collapsible:not(:last-child), #app-mass-user-group-create #help .collapsible:not(:last-child), #app-manage-content #help .collapsible:not(:last-child) {
  border-bottom: 1px solid;
  border-color: color-mix(in srgb, var(--fg-body) 20%, transparent);
  padding-bottom: 25px;
}
#app-mass-content-create #help .collapsible .collapse-title, #app-mass-user-group-create #help .collapsible .collapse-title, #app-manage-content #help .collapsible .collapse-title {
  text-transform: initial;
  color: var(--fg-body);
  font-weight: 400;
  font-size: var(--fs-sub);
}
#app-mass-content-create #help .collapsible .collapse-title .collapse-label, #app-mass-user-group-create #help .collapsible .collapse-title .collapse-label, #app-manage-content #help .collapsible .collapse-title .collapse-label {
  font-weight: 400;
  font-size: var(--fs-sub);
  line-height: var(--lh-sub);
  margin-bottom: 25px;
}
#app-mass-content-create #help .collapsible p, #app-mass-user-group-create #help .collapsible p, #app-manage-content #help .collapsible p {
  color: color-mix(in srgb, var(--fg-body) 50%, transparent);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
#app-mass-content-create #help .collapsible .collapsible .collapse-title, #app-mass-user-group-create #help .collapsible .collapsible .collapse-title, #app-manage-content #help .collapsible .collapsible .collapse-title {
  color: var(--fg-secondary);
}

button {
  width: var(--form-element-width);
  height: var(--form-element-height);
  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: 400;
  font-size: var(--fs-button);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.02em;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
  /* faux buttons are elements that look like buttons but aren't interactable */
}
button.small {
  height: 36px;
  font-weight: 500;
  font-size: var(--fs-button-xsm);
  line-height: var(--lh-button-xsm);
}
button.small i {
  font-size: var(--fs-button-xsm) !important;
  margin: 0 4px 0 0 !important;
}
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: 400;
  user-select: none;
}
button i:is(.fa, .fas, .far, .fal) {
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  font-size: var(--fs-body-sm);
  margin: 0 8px 0;
}
button i:is(.fa, .fas, .far, .fal):first-child {
  margin-left: 0;
}
button i:is(.fa, .fas, .far, .fal):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 0 1px;
}
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: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
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 3px 0 3px;
}
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: var(--form-element-height);
  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: 400;
  font-size: var(--fs-button);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.02em;
  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.small {
  height: 36px;
  font-weight: 500;
  font-size: var(--fs-button-xsm);
  line-height: var(--lh-button-xsm);
}
a.button.small i {
  font-size: var(--fs-button-xsm) !important;
  margin: 0 4px 0 0 !important;
}
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: 400;
  user-select: none;
}
a.button i:is(.fa, .fas, .far, .fal) {
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  font-size: var(--fs-body-sm);
  margin: 0 8px 0;
}
a.button i:is(.fa, .fas, .far, .fal):first-child {
  margin-left: 0;
}
a.button i:is(.fa, .fas, .far, .fal):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 0 1px;
}
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: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
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 3px 0 3px;
}
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-child {
  border-radius: var(--radius) 0 0 var(--radius);
}
.button-group button:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
  border-right-width: 1px;
}
.button-group button:first-child:last-child {
  border-radius: var(--radius);
}

.button-group-dropdown .button-group-dropdown-label {
  width: var(--form-element-width);
  height: var(--form-element-height);
  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: 400;
  font-size: var(--fs-button);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.02em;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
  /* faux buttons are elements that look like buttons but aren't interactable */
  border-radius: 0;
  border-right-width: 0 !important;
  margin: 0;
}
.button-group-dropdown .button-group-dropdown-label.small {
  height: 36px;
  font-weight: 500;
  font-size: var(--fs-button-xsm);
  line-height: var(--lh-button-xsm);
}
.button-group-dropdown .button-group-dropdown-label.small i {
  font-size: var(--fs-button-xsm) !important;
  margin: 0 4px 0 0 !important;
}
.button-group-dropdown .button-group-dropdown-label > span, .button-group-dropdown .button-group-dropdown-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: 400;
  user-select: none;
}
.button-group-dropdown .button-group-dropdown-label i:is(.fa, .fas, .far, .fal) {
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  font-size: var(--fs-body-sm);
  margin: 0 8px 0;
}
.button-group-dropdown .button-group-dropdown-label i:is(.fa, .fas, .far, .fal):first-child {
  margin-left: 0;
}
.button-group-dropdown .button-group-dropdown-label i:is(.fa, .fas, .far, .fal):last-child {
  margin-right: 0;
}
.button-group-dropdown .button-group-dropdown-label.main {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  height: 50px;
}
.button-group-dropdown .button-group-dropdown-label.ok {
  background: var(--fg-secondary);
}
.button-group-dropdown .button-group-dropdown-label.warn {
  background: var(--fg-accent);
}
.button-group-dropdown .button-group-dropdown-label.danger {
  background: var(--fg-danger);
}
.button-group-dropdown .button-group-dropdown-label.secondary {
  background: var(--fg-secondary);
}
.button-group-dropdown .button-group-dropdown-label.alternate {
  background: var(--fg-alternate);
}
.button-group-dropdown .button-group-dropdown-label:is(:hover, :active, :focus) {
  opacity: 0.8;
  outline: 0;
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.button-group-dropdown .button-group-dropdown-label:is(:hover, :active, :focus).ok {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.button-group-dropdown .button-group-dropdown-label:is(:hover, :active, :focus).warn {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.button-group-dropdown .button-group-dropdown-label:is(:hover, :active, :focus).danger {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.button-group-dropdown .button-group-dropdown-label:is(:hover, :active, :focus).secondary {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.button-group-dropdown .button-group-dropdown-label:is(:hover, :active, :focus).alternate {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.button-group-dropdown .button-group-dropdown-label.icon {
  width: calc(var(--form-element-height) - 2px);
  height: calc(var(--form-element-height) - 2px);
}
.button-group-dropdown .button-group-dropdown-label.icon i:is(.fa, .fas, .far) {
  margin: 0 0 0 1px;
}
.button-group-dropdown .button-group-dropdown-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;
}
.button-group-dropdown .button-group-dropdown-label.stand-in.secondary {
  color: var(--fg-secondary);
  border-color: var(--fg-secondary);
}
.button-group-dropdown .button-group-dropdown-label.stand-in.alternate {
  color: var(--fg-alternate);
  border-color: var(--fg-alternate);
}
.button-group-dropdown .button-group-dropdown-label.stand-in:is(.accent, .warn) {
  color: var(--fg-accent);
  border-color: var(--fg-accent);
}
.button-group-dropdown .button-group-dropdown-label.stand-in:is(.danger, .error) {
  color: var(--fg-danger);
  border-color: var(--fg-danger);
}
.button-group-dropdown .button-group-dropdown-label.inverse {
  background: var(--bg-body);
  border: 1px solid var(--fg-primary);
  color: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
.button-group-dropdown .button-group-dropdown-label.inverse:focus {
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.button-group-dropdown .button-group-dropdown-label.inverse:is(.ok, .secondary) {
  border-color: var(--fg-secondary);
  color: var(--fg-secondary);
}
.button-group-dropdown .button-group-dropdown-label.inverse:is(.ok, .secondary):focus {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.button-group-dropdown .button-group-dropdown-label.inverse.warn {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
.button-group-dropdown .button-group-dropdown-label.inverse.warn:focus {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.button-group-dropdown .button-group-dropdown-label.inverse.danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
.button-group-dropdown .button-group-dropdown-label.inverse.danger:focus {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.button-group-dropdown .button-group-dropdown-label.inverse.alternate {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
.button-group-dropdown .button-group-dropdown-label.inverse.alternate:focus {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.button-group-dropdown .button-group-dropdown-label.inline {
  width: 50px;
}
.button-group-dropdown .button-group-dropdown-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);
}
.button-group-dropdown .button-group-dropdown-label.subtle span {
  font-family: var(--font-stack-default);
}
.button-group-dropdown .button-group-dropdown-label.subtle:is(.forward, .back) i.fa {
  margin: 2px 3px 0 3px;
}
.button-group-dropdown .button-group-dropdown-label.subtle:is(:focus, :hover, :active) {
  outline: 0;
  box-shadow: unset;
  border: none;
  text-decoration: underline;
}
.button-group-dropdown .button-group-dropdown-label.subtle.primary {
  color: var(--fg-primary);
}
.button-group-dropdown .button-group-dropdown-label.subtle.secondary, .button-group-dropdown .button-group-dropdown-label.subtle.ok {
  color: var(--fg-secondary);
}
.button-group-dropdown .button-group-dropdown-label.subtle.alternate {
  color: var(--fg-accent);
}
.button-group-dropdown .button-group-dropdown-label.subtle.accent, .button-group-dropdown .button-group-dropdown-label.subtle.warning {
  color: var(--fg-accent);
}
.button-group-dropdown .button-group-dropdown-label.subtle.danger {
  color: var(--fg-danger);
}
.button-group-dropdown .button-group-dropdown-label:is(:disabled, .disabled) {
  color: var(--bg-element);
  background: var(--bg-main);
}
.button-group-dropdown .button-group-dropdown-label:is(:disabled, .disabled):is(.inverse, .stand-in) {
  opacity: 1;
  border-color: var(--bg-main);
  color: var(--bg-main);
  background: none;
}
.button-group-dropdown .button-group-dropdown-label:is(:disabled, .disabled).subtle {
  color: var(--bg-main);
  background: none;
  text-decoration: none;
}
.button-group-dropdown .button-group-dropdown-label:is(.disabled, :disabled, .faux) {
  cursor: default;
  pointer-events: none;
}
.button-group-dropdown .button-group-dropdown-label:is(.disabled, :disabled, .faux):is(:hover, :active, :focus) {
  opacity: 1;
  outline: 0;
  box-shadow: unset;
}
.button-group-dropdown .button-group-dropdown-label:is(.disabled, :disabled, .faux):is(.inverse, .stand-in):is(:focus, :active, :hover) {
  outline: 0;
  box-shadow: unset;
}
.button-group-dropdown .button-group-dropdown-label i.icon {
  margin: 0;
}
.button-group-dropdown .button-group-dropdown-label i.icon:first-of-type {
  margin-right: 0.25rem;
}
.button-group-dropdown:first-child .button-group-dropdown-label {
  border-radius: var(--radius) 0 0 var(--radius);
}
.button-group-dropdown:last-child .button-group-dropdown-label {
  border-radius: 0 var(--radius) var(--radius) 0;
  border-right-width: 1px;
}
.button-group-dropdown:first-child:last-child .button-group-dropdown-label {
  border-radius: var(--radius);
}
.button-group-dropdown .tooltip {
  background-color: var(--bg-element);
}
.button-group-dropdown .tooltip.BOTTOM::before {
  border-color: transparent transparent var(--bg-element) transparent;
}
.button-group-dropdown .tooltip.TOP::before {
  border-color: var(--bg-element) transparent transparent transparent;
}
.button-group-dropdown .tooltip.RIGHT::before {
  border-color: transparent var(--bg-element) transparent transparent;
}
.button-group-dropdown .tooltip.LEFT::before {
  border-color: transparent transparent transparent var(--bg-element);
}
.button-group-dropdown .button-group-dropdown-contents button {
  border-radius: var(--radius);
  border-width: 1px;
  margin-bottom: 0.25rem !important;
}
.button-group-dropdown .button-group-dropdown-contents button:last-child {
  margin-bottom: 0 !important;
}

.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);
  outline: none;
  font-weight: 400;
  font-size: var(--fs-body);
  border: 0;
  border-radius: var(--form-element-radius);
  background: var(--bg-dashboard);
  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: color-mix(in srgb, var(--fg-body) 50%, transparent);
}
.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 .value .recipient {
  animation: fade-in-opacity 0.5s ease;
}

.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;
  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;
  gap: 8px;
}
.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: 400;
  margin-left: 1rem;
  font-size: var(--fs-body);
  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: 16px;
  /* override styles in .boxed here */
  width: 16px !important;
  margin: 0 !important;
  pointer-events: none;
  color: white;
  font-size: 10px !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: var(--form-element-height);
  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: 400;
  font-size: var(--fs-button);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.02em;
  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: 16px;
  height: 16px;
  -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]).small {
  height: 36px;
  font-weight: 500;
  font-size: var(--fs-button-xsm);
  line-height: var(--lh-button-xsm);
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]).small i {
  font-size: var(--fs-button-xsm) !important;
  margin: 0 4px 0 0 !important;
}
.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: 400;
  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, .fal) {
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  font-size: var(--fs-body-sm);
  margin: 0 8px 0;
}
.form-managed.field:is(.checkbox, .checklist, .radio) :is(.inner-checkbox, .inner-radio) input:is([type=checkbox], [type=radio]) i:is(.fa, .fas, .far, .fal):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, .fal):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 0 1px;
}
.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: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
.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 3px 0 3px;
}
.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: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
.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;
  justify-content: center;
  height: 100%;
}
.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: var(--form-element-height);
  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: 400;
  font-size: var(--fs-button);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.02em;
  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.small {
  height: 36px;
  font-weight: 500;
  font-size: var(--fs-button-xsm);
  line-height: var(--lh-button-xsm);
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed.small i {
  font-size: var(--fs-button-xsm) !important;
  margin: 0 4px 0 0 !important;
}
.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: 400;
  user-select: none;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed i:is(.fa, .fas, .far, .fal) {
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  font-size: var(--fs-body-sm);
  margin: 0 8px 0;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed i:is(.fa, .fas, .far, .fal):first-child {
  margin-left: 0;
}
.form-managed.field:is(.checkbox, .checklist, .radio) .inner.boxed i:is(.fa, .fas, .far, .fal):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 0 1px;
}
.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: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
.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 3px 0 3px;
}
.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);
}

.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 > input {
  background-color: transparent;
}
.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%;
}

.field.field-dropdown select {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--form-element-width);
  height: var(--form-element-height);
  padding: var(--form-element-padding);
  outline: none;
  font-weight: 400;
  font-size: var(--fs-body);
  border: 0;
  border-radius: var(--form-element-radius);
  background: var(--bg-dashboard);
  color: var(--fg-body);
  transition: border-color var(--anim-step) ease;
  border-radius: var(--radius);
  font-family: var(--font-stack-default);
  display: block;
  flex-direction: unset;
  justify-content: unset;
  padding-left: 11px;
}
.field.field-dropdown select.warn, .field.field-dropdown select.invalid, .field.field-dropdown select.danger {
  border-color: var(--fg-danger);
}
.field.field-dropdown select::placeholder {
  color: color-mix(in srgb, var(--fg-body) 50%, transparent);
}
.field.field-dropdown select:focus, .field.field-dropdown select:focus-within, .field.field-dropdown select:hover, .field.field-dropdown select:active {
  outline: none;
  border-color: var(--bg-main);
}
.field.field-dropdown select:disabled, .field.field-dropdown select.disabled {
  border-color: var(--bg-main);
  background: var(--bg-element);
  color: var(--bg-main);
}
.field.field-dropdown select .recipient {
  animation: fade-in-opacity 0.5s ease;
}

div.embedded-rich-text.form-managed.field {
  --embedded-rich-text-height: calc(6 * var(--lh-body));
}
div.embedded-rich-text.form-managed.field .embedded-rich-text-wrapper {
  width: 100%;
  position: relative;
  max-width: var(--form-element-width);
  border-radius: var(--radius);
  border: 1px solid var(--bg-element);
  overflow: hidden;
}
div.embedded-rich-text.form-managed.field .rte-container .rte-controls {
  border-bottom: 1px solid var(--bg-element);
}
div.embedded-rich-text.form-managed.field .rte-container .rte-controls .button-group {
  margin-bottom: 0;
}
div.embedded-rich-text.form-managed.field .rich-text-placeholder {
  position: absolute;
  top: calc(var(--form-element-height) - 0.2rem);
  left: 1rem;
  color: var(--bg-main);
}
div.embedded-rich-text.form-managed.field.full-editor .embedded-rich-text-wrapper {
  max-width: initial;
}
div.embedded-rich-text.form-managed.field.full-editor .rich-text-placeholder {
  top: 5rem;
}
div.embedded-rich-text.form-managed.field .ProseMirror {
  padding: var(--form-element-padding);
  padding-top: 0.75rem;
  height: calc(var(--embedded-rich-text-height));
  border: 0;
  overflow: auto;
}
div.embedded-rich-text.form-managed.field .ProseMirror :first-child {
  margin-top: 0;
  padding-top: 0;
}
div.embedded-rich-text.form-managed.field.required .rich-text-placeholder:after {
  content: "*";
}
div.embedded-rich-text.form-managed.field:is(:hover, :active, :focus, :focus-within) .embedded-rich-text-wrapper {
  border-color: var(--bg-main);
}
div.embedded-rich-text.form-managed.field:is(:hover, :active, :focus, :focus-within) .embedded-rich-text-overlay i.icon {
  color: var(--bg-main);
}
div.embedded-rich-text.form-managed.field:is(:focus, :focus-within) .rich-text-placeholder {
  display: none;
}

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);
  outline: none;
  font-weight: 400;
  font-size: var(--fs-body);
  border: 0;
  border-radius: var(--form-element-radius);
  background: var(--bg-dashboard);
  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: color-mix(in srgb, var(--fg-body) 50%, transparent);
}
.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 .recipient {
  animation: fade-in-opacity 0.5s ease;
}
.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);
}

div.modal-rich-text.form-managed.field {
  --modal-rich-text-height: calc(6 * var(--lh-body));
}
div.modal-rich-text.form-managed.field .modal-rich-text-wrapper {
  height: var(--modal-rich-text-height);
  width: 100%;
  position: relative;
  max-width: var(--form-element-width);
  border-radius: var(--radius);
  border: 1px solid var(--bg-element);
  overflow: hidden;
  cursor: pointer;
}
div.modal-rich-text.form-managed.field .rich-text-preview {
  padding: var(--form-element-padding);
  padding-top: 0.75rem;
}
div.modal-rich-text.form-managed.field .rich-text-preview :first-child {
  margin-top: 0;
  padding-top: 0;
}
div.modal-rich-text.form-managed.field .rich-text-preview img {
  max-width: 100%;
}
div.modal-rich-text.form-managed.field .rich-text-placeholder {
  color: var(--bg-main);
}
div.modal-rich-text.form-managed.field.required .rich-text-placeholder:after {
  content: "*";
}
div.modal-rich-text.form-managed.field .modal-rich-text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--modal-rich-text-height);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  background: var(--bg-fadeout);
}
div.modal-rich-text.form-managed.field .modal-rich-text-overlay i.icon {
  color: var(--bg-element);
  width: auto;
  margin: 0 0.25rem 0.25rem 0;
}
div.modal-rich-text.form-managed.field:is(:hover, :active, :focus, :focus-within) .modal-rich-text-wrapper {
  border-color: var(--bg-main);
}
div.modal-rich-text.form-managed.field:is(:hover, :active, :focus, :focus-within) .modal-rich-text-overlay i.icon {
  color: var(--bg-main);
}

.field-phone-wrapper {
  position: relative;
}
.field-phone-wrapper .pretty-phone-number {
  position: absolute;
  width: var(--form-element-width);
  height: var(--form-element-height);
  padding: var(--form-element-padding);
  border: 0;
  border-radius: var(--radius);
  line-height: var(--lh-body);
  font-size: var(--fs-body);
  background: var(--bg-dashboard);
  color: var(--fg-body);
  left: 0;
  top: 0;
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: center;
}
.field-phone-wrapper span.country-flag {
  margin-right: 0.25rem;
}
.field-phone-wrapper:focus-within .pretty-phone-number {
  display: none;
}
.field-phone-wrapper .field.phone-number {
  margin: 0;
}
.field-phone-wrapper[data-overlay=true]:not(:focus-within) input {
  color: transparent;
}
.field-phone-wrapper.with-label .pretty-phone-number {
  top: 26px;
}

.pretty-phone-number {
  overflow: hidden;
}
.pretty-phone-number span.country-flag {
  flex-shrink: 0;
}
.pretty-phone-number span.number-value {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.form-managed.field.password {
  width: var(--form-element-width);
}
.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.02em;
  text-transform: uppercase;
  font-weight: 700;
}
.form-managed.field.radio .inner-radio.CONTENT_BOX > span .entry-content .subtitle {
  font-weight: 700;
  letter-spacing: 0.02em;
  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;
}

.field.recipient-combined-input .recipient-list.inline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--form-element-width);
  height: var(--form-element-height);
  padding: var(--form-element-padding);
  outline: none;
  font-weight: 400;
  font-size: var(--fs-body);
  border: 0;
  border-radius: var(--form-element-radius);
  background: var(--bg-dashboard);
  color: var(--fg-body);
  transition: border-color var(--anim-step) ease;
  padding: 0.75rem 1rem;
  height: auto;
  min-height: var(--form-element-height);
  flex-direction: row;
  justify-content: stretch;
  align-items: flex-start;
  cursor: text;
}
.field.recipient-combined-input .recipient-list.inline.warn, .field.recipient-combined-input .recipient-list.inline.invalid, .field.recipient-combined-input .recipient-list.inline.danger {
  border-color: var(--fg-danger);
}
.field.recipient-combined-input .recipient-list.inline::placeholder {
  color: color-mix(in srgb, var(--fg-body) 50%, transparent);
}
.field.recipient-combined-input .recipient-list.inline:focus, .field.recipient-combined-input .recipient-list.inline:focus-within, .field.recipient-combined-input .recipient-list.inline:hover, .field.recipient-combined-input .recipient-list.inline:active {
  outline: none;
  border-color: var(--bg-main);
}
.field.recipient-combined-input .recipient-list.inline:disabled, .field.recipient-combined-input .recipient-list.inline.disabled {
  border-color: var(--bg-main);
  background: var(--bg-element);
  color: var(--bg-main);
}
.field.recipient-combined-input .recipient-list.inline .recipient {
  animation: fade-in-opacity 0.5s ease;
}
.field.recipient-combined-input .recipient-list.inline input {
  display: flex;
  min-width: 12em;
  width: auto;
  height: auto;
  font-size: var(--fs-body);
  background: none;
  margin: 5px 0 0 0;
  padding: 0;
}
.field.recipient-combined-input .recipient-list.inline .recipient {
  animation: none;
}

.search-input-container {
  position: relative;
}
.search-input-container .search-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 5;
  left: 22px;
  margin: auto 0;
  top: 0;
  bottom: 0;
  background: transparent;
  color: color-mix(in srgb, var(--fg-body) 50%, transparent);
  width: 24px;
  height: 24px;
  font-size: 17px;
}
.search-input-container .search-input {
  margin: 0;
}
.search-input-container .search-input > input {
  padding: 0 70px 0 56px;
}
.search-input-container .clear-container {
  position: absolute;
  z-index: 5;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--fg-primary);
  cursor: pointer;
}
.search-input-container .clear-container > i {
  font-size: 12px;
}
.search-input-container .clear-container > span {
  font-weight: 500;
  font-size: 12px;
}

.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: var(--form-element-height);
  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;
  width: var(--form-element-width);
}
div.text-input.form-managed input + button.icon.subtle {
  position: absolute;
  right: 0;
  top: 0;
  height: var(--form-element-height);
  width: 3rem;
  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;
}
div.text-input.form-managed .input-additional-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 12px;
  bottom: 0;
  height: var(--form-element-height);
}
div.text-input.form-managed .input-additional-controls .icon.subtle {
  overflow: unset;
  margin: 0;
  height: inherit;
}
div.text-input.form-managed .input-additional-controls .icon.subtle i {
  margin: 0;
}
div.text-input.form-managed .input-additional-controls .field.multi-toggle {
  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-body);
  font-weight: 400;
  font-size: var(--fs-body);
  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: 18px;
  border-radius: var(--radius);
  background-color: var(--bg-body);
  border: 1px solid;
  border-color: color-mix(in srgb, var(--fg-primary) 50%, transparent);
  transition: background-color var(--anim-step) ease, opacity var(--anim-step) ease;
}
.form-managed.field.toggle .inner .switch.on {
  background-color: var(--fg-primary);
  border-color: var(--fg-primary);
}
.form-managed.field.toggle .inner .switch:before {
  content: " ";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: var(--radius);
  background-color: color-mix(in srgb, var(--fg-body) 50%, transparent);
  top: 1px;
  left: 1px;
  transform: translateX(0);
  transition: transform calc(var(--anim-step) * 0.5) ease;
}
.form-managed.field.toggle .inner .switch.on:before {
  transform: translateX(16px);
  background-color: var(--bg-body);
}
.form-managed.field.toggle .inner.secondary .switch.on {
  background-color: var(--fg-secondary);
  border-color: var(--fg-secondary);
}
.form-managed.field.toggle .inner:is(.disabled, .disabled:hover) .switch {
  background-color: var(--bg-element) !important;
  border-color: var(--bg-element);
}
.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: var(--form-element-height);
  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: 400;
  font-size: var(--fs-button);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.02em;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
  /* faux buttons are elements that look like buttons but aren't interactable */
  width: var(--form-element-width);
  cursor: pointer;
  justify-content: space-between;
}
.form-managed.field.toggle .inner.boxed.small {
  height: 36px;
  font-weight: 500;
  font-size: var(--fs-button-xsm);
  line-height: var(--lh-button-xsm);
}
.form-managed.field.toggle .inner.boxed.small i {
  font-size: var(--fs-button-xsm) !important;
  margin: 0 4px 0 0 !important;
}
.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: 400;
  user-select: none;
}
.form-managed.field.toggle .inner.boxed i:is(.fa, .fas, .far, .fal) {
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  font-size: var(--fs-body-sm);
  margin: 0 8px 0;
}
.form-managed.field.toggle .inner.boxed i:is(.fa, .fas, .far, .fal):first-child {
  margin-left: 0;
}
.form-managed.field.toggle .inner.boxed i:is(.fa, .fas, .far, .fal):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 0 1px;
}
.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: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
.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 3px 0 3px;
}
.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: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 {
  background-color: var(--bg-body);
  color: var(--fg-body);
  border: 1px solid var(--fg-secondary);
}
.form-managed.field.toggle .inner.boxed:not(.inverse, .disabled).secondary .switch {
  border-color: var(--fg-secondary);
}
.form-managed.field.toggle .inner.boxed:not(.inverse, .disabled).secondary .switch:not(.on) {
  background-color: var(--bg-body);
}
.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).secondary .switch.on {
  background-color: var(--fg-secondary);
}
.form-managed.field.toggle .inner.boxed:not(.inverse, .disabled).secondary .switch.on:before {
  background-color: var(--bg-body);
}
.form-managed.field.toggle .inner.boxed:not(.inverse, .disabled).secondary span {
  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: color-mix(in srgb, var(--fg-primary) 20%, transparent);
}
.form-managed.field.toggle .inner.boxed.inverse label {
  font-weight: 400;
}
.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);
}

.form-managed.field.toggle.underline {
  margin: 0;
}
.form-managed.field.toggle.underline:last-child .inner.underline {
  border-bottom: 0;
}
.form-managed.field.toggle .inner.underline {
  border-bottom: 1px solid;
  border-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
  padding: 0;
  margin: 0;
}

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

form.no-help p.message.help:is(.info, .hint, .invalid) {
  display: none;
}

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);
  outline: none;
  font-weight: 400;
  font-size: var(--fs-body);
  border: 0;
  border-radius: var(--form-element-radius);
  background: var(--bg-dashboard);
  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: color-mix(in srgb, var(--fg-body) 50%, transparent);
}
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 .recipient {
  animation: fade-in-opacity 0.5s ease;
}
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: var(--form-element-height);
  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: 400;
  font-size: var(--fs-button);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.02em;
  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.small {
  height: 36px;
  font-weight: 500;
  font-size: var(--fs-button-xsm);
  line-height: var(--lh-button-xsm);
}
input[type=file] :after.small i {
  font-size: var(--fs-button-xsm) !important;
  margin: 0 4px 0 0 !important;
}
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: 400;
  user-select: none;
}
input[type=file] :after i:is(.fa, .fas, .far, .fal) {
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  font-size: var(--fs-body-sm);
  margin: 0 8px 0;
}
input[type=file] :after i:is(.fa, .fas, .far, .fal):first-child {
  margin-left: 0;
}
input[type=file] :after i:is(.fa, .fas, .far, .fal):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 0 1px;
}
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: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
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 3px 0 3px;
}
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;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--fg-body);
  font-weight: 400;
}

:is(.field.recipient-combined-input, .field.text, .field.password, .field.textarea, .field.field-dropdown) label {
  display: block;
  margin-bottom: 6px;
}

textarea {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--form-element-width);
  height: var(--form-element-height);
  padding: var(--form-element-padding);
  outline: none;
  font-weight: 400;
  font-size: var(--fs-body);
  border: 0;
  border-radius: var(--form-element-radius);
  background: var(--bg-dashboard);
  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: color-mix(in srgb, var(--fg-body) 50%, transparent);
}
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);
}
textarea .recipient {
  animation: fade-in-opacity 0.5s ease;
}

/** 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;
}
@media screen and (max-width: 767px) {
  .action-bar {
    position: unset;
  }
}
.action-bar #actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .action-bar #actions {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
}
.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;
}

/* ./.action-bar */
#action-bar-search {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 35px 40px 30px 40px;
  /* /.results */
}
@media screen and (max-width: 767px) {
  #action-bar-search {
    display: block;
    padding: 0;
  }
}
#action-bar-search .panes {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}
#action-bar-search .pane-left {
  display: flex;
  align-items: center;
  margin-right: 1rem;
}
@media screen and (max-width: 767px) {
  #action-bar-search .pane-left {
    flex-wrap: wrap;
    flex: 1;
    margin: 0;
    padding: 1rem;
    background: var(--bg-dashboard);
  }
}
#action-bar-search .search-container {
  display: flex;
  align-items: center;
  height: 100%;
  background: var(--bg-body);
  z-index: 999;
}
@media screen and (max-width: 767px) {
  #action-bar-search .search-container {
    background: var(--bg-dashboard);
  }
}
@media screen and (max-width: 767px) {
  #action-bar-search .search-container {
    width: 100%;
  }
}
#action-bar-search .search-container .search-block {
  background: var(--bg-body);
  display: flex;
  align-items: center;
  flex-grow: 1;
  left: 40px;
  padding-left: 30px;
}
@media screen and (max-width: 767px) {
  #action-bar-search .search-container .search-block {
    background: var(--bg-dashboard);
  }
}
#action-bar-search .search-container .search-block input {
  margin: 0;
  flex-grow: 1;
}
#action-bar-search .search-container .search-block button {
  margin: 0 0 0 1em;
  font-weight: 400;
  font-size: var(--fs-button-sm);
  width: auto;
}
@media screen and (max-width: 767px) {
  #action-bar-search .search-container .search-block {
    position: unset;
    width: 100%;
    padding-left: 0;
    margin-top: 33px;
    margin-bottom: 31px;
  }
  #action-bar-search .search-container .search-block > button i {
    margin: 0;
  }
  #action-bar-search .search-container .search-block > button span {
    display: none;
  }
  #action-bar-search .search-container .search-block input {
    width: 100%;
    background: var(--fg-button);
  }
  #action-bar-search .search-container .search-block .search-input-container {
    width: 100%;
  }
}
#action-bar-search .pane-right {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
}
#action-bar-search .pane-right .additional-controls {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
@media screen and (max-width: 767px) {
  #action-bar-search .pane-right .additional-controls {
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 999;
  }
  #action-bar-search .pane-right .additional-controls .tab-container {
    margin: 0;
  }
}
#action-bar-search .pane-right .additional-controls button {
  margin-top: 0;
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  #action-bar-search .pane-right .additional-controls button {
    height: 36px;
    font-weight: 500;
    font-size: var(--fs-button-xsm);
    line-height: var(--lh-button-xsm);
  }
}
#action-bar-search .pane-right .additional-controls .toggle > span, #action-bar-search .pane-right .additional-controls .toggle {
  margin-top: 0;
  margin-bottom: 0;
}
#action-bar-search .pane-right .additional-controls .form-managed {
  margin: 0;
}
#action-bar-search .results {
  display: flex;
  color: var(--fg-body);
  font-weight: 400;
  font-size: var(--fs-h4);
  margin: 0;
}
@media screen and (max-width: 767px) {
  #action-bar-search .results {
    margin-top: 4px;
  }
}
#action-bar-search .results .title-search-icon {
  margin-right: 17px;
}
#action-bar-search .results span {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
#action-bar-search .results span.result-count {
  line-height: 1.4em;
}
#action-bar-search .results span.result-count a {
  margin-left: 0.5rem;
  flex-basis: 100%;
  color: var(--fg-danger);
}
#action-bar-search .results span.result-count a:hover, #action-bar-search .results span.result-count a:active {
  text-decoration: none;
}
#action-bar-search .advanced-search-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 21px;
  --form-element-width: 137px;
  --form-element-height: 38px;
  --fs-body-sm: 12px;
  --fs-body: 12px;
  --fs-button: 12px;
}
#action-bar-search .advanced-search-fields > .field {
  margin: 0;
}
#action-bar-search .advanced-search-fields > .field > .cameo {
  margin: 0;
}
#action-bar-search .advanced-search-fields button {
  margin: 0;
}
#action-bar-search .advanced-search-fields .advanced-clear {
  width: 38px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  #action-bar-search .advanced-search-fields {
    position: fixed;
    width: 100%;
    left: 0;
    background: var(--bg-body);
    z-index: 1050;
    bottom: 0;
    margin: 0;
    padding: 46px 20px 109px;
    gap: 10px;
    height: fit-content;
    box-shadow: 0px -18px 40px 0px rgba(34, 60, 80, 0.35);
    max-height: 100%;
    overflow: auto;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  #action-bar-search .advanced-search-fields > .field {
    --form-element-width: 100%;
    --form-element-height: 48px;
    width: var(--form-element-width);
  }
  #action-bar-search .advanced-search-fields .mobile-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 19px;
  }
  #action-bar-search .advanced-search-fields .mobile-header .overlay-title {
    font-size: var(--fs-h4);
    font-weight: 400;
    color: var(--fg-body);
  }
  #action-bar-search .advanced-search-fields .mobile-header .icon {
    cursor: pointer;
    font-size: var(--fs-h4);
    font-weight: 400;
  }
}

/* /#action-bar-search */
.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 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  min-width: 100px;
  border-radius: var(--radius);
  background-color: var(--bg-main);
  color: var(--bg-body);
  justify-self: flex-end;
  text-transform: capitalize;
  text-align: center;
  font-size: var(--fs-body-sm);
  font-weight: 400;
  line-height: var(--lh-body-sm);
}
span.badge.assigned {
  background-color: var(--fg-soft);
}
span.badge:is(.enrolled, .required) {
  color: var(--fg-danger);
  background-color: color-mix(in srgb, var(--fg-danger) 10%, transparent);
}
span.badge:is(.optional) {
  color: var(--fg-secondary);
  background-color: color-mix(in srgb, var(--fg-secondary) 10%, transparent);
}
span.badge:is(.disabled, .incomplete, .danger, .error) {
  color: var(--fg-accent);
  background-color: color-mix(in srgb, var(--fg-accent) 10%, transparent);
}
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) {
  color: var(--fg-primary);
  background-color: color-mix(in srgb, var(--fg-primary) 10%, transparent);
}

.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 1rem;
  border: 1px solid;
  border-color: color-mix(in srgb, var(--fg-body) 50%, transparent);
  font-size: var(--fs-body);
  font-weight: 400;
  margin-bottom: 0.5rem;
  background-color: var(--bg-zebra);
}
.cameo:nth-child(even) {
  background-color: var(--bg-element);
}
.cameo .spin {
  animation: spinner 1.5s 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;
  color: var(--fg-primary);
  line-height: calc(var(--lh-body) - 1px);
}
.cameo > i:first-of-type {
  min-width: 1.6rem;
  height: 1.6rem;
  margin: 0 10px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cameo .controls {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex-grow: 0;
  flex-shrink: 0;
}
.cameo button {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
.cameo button:not(:last-child) {
  margin: 0 0.25rem 0 0;
}
.cameo button i {
  font-size: var(--fs-cameo-button-icon);
  margin: 0 !important;
  justify-content: center;
}
.cameo button.icon {
  background-color: color-mix(in srgb, var(--fg-primary) 10%, transparent);
}
.cameo button.icon i {
  color: var(--fg-primary);
}
.cameo button.danger {
  background-color: color-mix(in srgb, var(--fg-danger) 10%, transparent);
}
.cameo button.danger i {
  color: var(--fg-danger);
}
.cameo.ok {
  border-color: var(--fg-secondary);
}
.cameo.favorite {
  border-color: var(--fg-secondary);
  background-color: color-mix(in srgb, var(--fg-secondary) 10%, transparent) !important;
}
.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;
}
.cameo.bordered-bottom {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--bg-element);
  padding: 0;
  background-color: transparent;
}
.cameo.bordered-bottom:last-child {
  border: 0;
}

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

.cameo-list-select-item {
  cursor: pointer;
  background-color: transparent;
  border: 1px solid;
  font-size: var(--fs-body);
  font-weight: 400;
  border-color: color-mix(in srgb, var(--fg-body) 50%, transparent);
}
.cameo-list-select-item .label {
  color: var(--fg-primary);
}
.cameo-list-select-item .label i {
  margin-right: 0.25em;
}
.cameo-list-select-item .chevron {
  color: color-mix(in srgb, var(--fg-body) 50%, transparent);
  font-size: 8px;
}
.cameo-list-select-item.faded:not(.selected) {
  background-color: rgba(255, 255, 255, 0.2);
}
.cameo-list-select-item.selected {
  border-color: var(--fg-danger);
  background-color: color-mix(in srgb, var(--fg-danger) 10%, transparent) !important;
}
.cameo-list-select-item .cameo-image-preview {
  height: var(--form-element-height);
  width: auto;
  max-width: var(--form-element-height);
  margin-left: -1rem;
  margin-right: 1.25rem;
  border-radius: var(--radius);
}

.cameo-header-slot > .icon-container {
  display: flex;
  align-items: center;
}
.cameo-header-slot .slot-number {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-button);
  background-color: var(--fg-secondary);
  margin-right: 10px;
  border-radius: var(--radius);
  font-size: var(--fs-body-sm);
}
.cameo-header-slot .slot-number.no-number {
  background-color: var(--fg-accent);
}
.cameo-header-slot .cameo-icon {
  margin-right: 0.5em;
}

.list-select .label > .cameo-header-slot {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.cameo-outreach-default-message .icon-primary {
  margin-right: 8px;
  color: var(--fg-secondary);
}

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

/* put these in root so they can be overridden */
:root {
  --card-width: calc(100% - 20px);
  --poster-width: 100%;
  --card-shadow: 1px 1px 10px 0px rgba(0,0,0,0.15);
  --card-padding: 1em;
  --card-margin: 0 1em;
}

.card {
  /* 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);
  background-color: var(--bg-body);
  width: var(--card-width);
  height: auto;
  flex-shrink: 0;
  flex-grow: 0;
}
.card .poster {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  flex-grow: 0;
  width: var(--poster-width);
  height: auto;
  border-radius: var(--radius);
  background-position: center;
  background-size: cover;
  color: transparent;
  position: relative;
}
.card .poster[data-image-loaded=not-loaded] .quick-view {
  background-color: white;
}
.card .poster img {
  width: 100% !important;
}
.card .placeholder {
  width: 100%;
  min-width: initial;
  height: 100%;
}
.card .placeholder .icon {
  font-size: calc(var(--card-width) * 0.5);
  color: var(--bg-zebra);
}
.card h3 {
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  height: var(--lh-h4);
  overflow: hidden;
  color: var(--fg-primary);
  text-transform: capitalize;
  font-weight: 400;
  margin-top: 20px;
  margin-bottom: 8px;
  width: 100%;
  white-space: nowrap;
  text-align: center;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.card .description {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--fg-body);
  margin: 8px 0;
  padding: 0 1em;
  text-align: center;
  width: 100%;
}
.card .description:not(.poster ~ .description) p:first-of-type {
  margin-top: 0;
}
.card a.button {
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}

/**
 * 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;
  }
}
.carousel, .section-embedded-item {
  --per-page: 4.5;
  --card-margin: 16px;
  --total-margins: calc(var(--card-margin) * var(--per-page) * 2 - var(--card-margin));
  --poster-width: calc(var(--card-width) - calc(var(--card-padding) * 2));
  --card-padding: 20px;
  --card-width: calc(
    calc(var(--body-width) - var(--total-margins))
    / var(--per-page)
  );
  /* custom break for carousels */
  position: relative;
  overflow: visible;
}
@media screen and (max-width: 1079px) {
  .carousel, .section-embedded-item {
    --per-page: 3.5;
  }
}
@media screen and (max-width: 767px) {
  .carousel, .section-embedded-item {
    --per-page: 2.5;
  }
}
@media screen and (max-width: 419px) {
  .carousel, .section-embedded-item {
    --per-page: 1.5;
  }
}
.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 */
}
.carousel .cards .card, .section-embedded-item .cards .card {
  margin: 10px;
}
.carousel .cards .card .poster, .section-embedded-item .cards .card .poster {
  height: calc(var(--poster-width) * 1.5);
}
.carousel .cards .endcap, .section-embedded-item .cards .endcap {
  display: block;
  flex-shrink: 0;
  width: var(--card-margin);
  height: 1px;
}
.carousel span.fab, .section-embedded-item span.fab {
  transition: opacity var(--anim-step) ease;
  z-index: 100;
  /* opacity: 0; */
}
.carousel span.fab i.fa, .section-embedded-item span.fab i.fa {
  transition: all var(--anim-step) ease;
}
.carousel span.fab.prev, .section-embedded-item span.fab.prev {
  left: -25px;
}
@media screen and (max-width: 1366px) {
  .carousel span.fab.prev, .section-embedded-item span.fab.prev {
    left: 5px;
  }
}
.carousel span.fab.next, .section-embedded-item span.fab.next {
  right: -25px;
}
@media screen and (max-width: 1366px) {
  .carousel span.fab.next, .section-embedded-item span.fab.next {
    right: 5px;
  }
}
.carousel span.fab.disabled, .section-embedded-item span.fab.disabled {
  animation: fade-hide var(--anim-step) ease forwards;
  display: none;
  opacity: 0;
}
.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);
}
.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), minmax(0, 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:first-of-type {
  margin-left: var(--card-margin);
}
.content-card:last-of-type {
  margin-right: var(--card-margin);
}
.content-card img.preloader {
  display: block;
  width: 100%;
  height: auto;
}
.content-card .poster {
  height: auto;
}
.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;
  z-index: 1;
}
.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 .description {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: var(--lh-body);
  text-overflow: ellipsis;
  padding: 0;
}
.content-card .description:not(.poster ~ .description) {
  height: calc(var(--poster-width) * 1.5 + var(--lh-body-sm));
  -webkit-line-clamp: unset;
}
.content-card a.button {
  width: 90px;
  height: 40px;
}
.content-card.lecture-card .poster[data-image-loaded=not-loaded] {
  opacity: 0;
}
.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.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 {
  margin-top: 6px;
  padding-bottom: 1.5rem;
}
.consents .field.checkbox:not(:first-child) {
  margin-top: 12px;
}
.consents .field.checkbox.disabled {
  opacity: 0.6;
}
.consents .field.checkbox .inner-checkbox {
  margin-right: 0.5rem;
}
.consents .field.checkbox .inner {
  height: unset;
  padding: 0;
}
.consents .field.checkbox .inner .custom-label {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: color-mix(in srgb, var(--fg-body) 50%, transparent);
}
.consents .field.checkbox .help {
  margin-top: 3px;
}

.color-picker {
  display: flex;
  gap: 12px;
  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;
  cursor: pointer;
}
.color-picker .color-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.color-picker .pickr .pcr-button {
  border: 1px solid var(--bg-element);
  border-radius: var(--radius);
}
.color-picker .pickr .pcr-button::after {
  border-radius: 0;
}
.color-picker .label-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.color-picker .label-container .additional-controls .toggle {
  margin: 0;
}
.color-picker .label-container .additional-controls .toggle span {
  margin: 0;
  padding-right: 0;
}
.color-picker .label-container .additional-controls .toggle span label {
  font-size: 13px;
  margin-right: 8px;
}

.pcr-app .pcr-swatches > button {
  padding: 0;
}
.pcr-app .pcr-interaction .pcr-save {
  background: var(--fg-primary);
}
.pcr-app .pcr-interaction .pcr-result {
  height: 40px;
}
.pcr-app .pcr-interaction input[type=button] {
  height: 40px;
  padding: 0 16px;
}

.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;
  margin: 0 auto;
}
#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: 34px;
  height: 34px;
  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: 3px;
  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: var(--fs-body);
  word-break: break-word;
}
#app-chat .chat-message .content .container-name {
  padding-top: 3px;
}
#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;
  margin-top: 10px;
  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 20px;
  margin-top: 12px;
  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;
  gap: 4px;
  padding-right: 40px;
  padding-left: 14px;
}
.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);
}

.contact-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-body-alt);
  padding: 1rem;
  border-radius: var(--radius);
  --full-width: calc(2 * var(--form-element-width) + 0.5rem);
}
.contact-form h3 {
  margin-top: 0;
}
@media screen and (max-width: 767px) {
  .contact-form {
    --full-width: var(--form-element-width);
    padding: 1rem 0.5rem;
  }
}
.contact-form .view-container {
  max-width: 100%;
}
.contact-form form {
  max-width: 100%;
}
.contact-form :is(input, textarea) {
  width: var(--full-width);
  max-width: var(--full-width);
}
@media screen and (max-width: 767px) {
  .contact-form :is(input, textarea) {
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .contact-form .field-pair {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .contact-form .field-pair [role=group] {
    margin-top: 0;
    margin-right: 0.5rem;
    margin-bottom: 0;
  }
  .contact-form .field-pair [role=group] input {
    width: var(--form-element-width);
  }
  .contact-form textarea {
    height: calc(var(--lh-body) * 8);
  }
}
.contact-form button {
  margin: 18px auto 0;
}

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

.widget-document-viewer {
  width: 70%;
  height: 100%;
}
@media screen and (max-width: 767px) {
  .widget-document-viewer {
    width: 100%;
  }
}
.widget-document-viewer .document-viewer {
  width: 100%;
  height: 100%;
  text-align: center;
}
.widget-document-viewer .document-viewer iframe {
  width: 100%;
  height: 100%;
  outline: 0;
  border: 0;
}

.fa-star.favorite {
  color: transparent;
  -webkit-text-stroke: 1px var(--fg-secondary);
  cursor: pointer;
  width: 30px;
  height: 30px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: center;
  transition: background-color var(--anim-step) ease-in-out;
  border-radius: 100%;
}
.fa-star.favorite:hover {
  background-color: var(--bg-hover);
}
.fa-star.favorite.filled {
  color: var(--fg-secondary);
  -webkit-text-stroke: unset;
}
.fa-star.favorite.disabled {
  color: var(--bg-element);
  -webkit-text-stroke: unset;
  cursor: unset;
}

.favorite-button > * {
  pointer-events: none;
}
.favorite-button .fa-star {
  color: transparent;
  font-weight: 900;
  -webkit-text-stroke: 1px var(--fg-button);
}
.favorite-button.filled .fa-star {
  color: var(--fg-button);
  -webkit-text-stroke: unset;
}

/**
 * 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 .tab-container .notches {
  margin-bottom: 24px;
}
.file-picker .cutout {
  height: 222px;
  min-width: var(--form-element-width);
  border: 1px dashed;
  border-radius: var(--radius);
  border-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
  background: var(--bg-dashboard);
}
.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: 3px 0;
}
.file-picker .cutout div > label {
  width: var(--form-element-width);
  height: var(--form-element-height);
  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: 400;
  font-size: var(--fs-button);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.02em;
  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.small {
  height: 36px;
  font-weight: 500;
  font-size: var(--fs-button-xsm);
  line-height: var(--lh-button-xsm);
}
.file-picker .cutout div > label.small i {
  font-size: var(--fs-button-xsm) !important;
  margin: 0 4px 0 0 !important;
}
.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: 400;
  user-select: none;
}
.file-picker .cutout div > label i:is(.fa, .fas, .far, .fal) {
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  font-size: var(--fs-body-sm);
  margin: 0 8px 0;
}
.file-picker .cutout div > label i:is(.fa, .fas, .far, .fal):first-child {
  margin-left: 0;
}
.file-picker .cutout div > label i:is(.fa, .fas, .far, .fal):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 0 1px;
}
.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: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
.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 3px 0 3px;
}
.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 {
  font-weight: 400;
  font-size: var(--fs-sub);
  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-picker .tabs .help {
  font-size: var(--fs-body-sm);
  font-weight: 400;
  text-align: center;
  color: color-mix(in srgb, var(--fg-body) 70%, transparent);
  margin-bottom: 20px;
}

.file-upload-button {
  display: flex;
  flex-direction: column;
  width: var(--form-element-width);
  height: var(--form-element-height);
  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: 400;
  font-size: var(--fs-button);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.02em;
  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.small {
  height: 36px;
  font-weight: 500;
  font-size: var(--fs-button-xsm);
  line-height: var(--lh-button-xsm);
}
.file-upload-button.small i {
  font-size: var(--fs-button-xsm) !important;
  margin: 0 4px 0 0 !important;
}
.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: 400;
  user-select: none;
}
.file-upload-button i:is(.fa, .fas, .far, .fal) {
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  font-size: var(--fs-body-sm);
  margin: 0 8px 0;
}
.file-upload-button i:is(.fa, .fas, .far, .fal):first-child {
  margin-left: 0;
}
.file-upload-button i:is(.fa, .fas, .far, .fal):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 0 1px;
}
.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: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
.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 3px 0 3px;
}
.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;
  height: var(--header-height);
  width: 100%;
  --header-inner-height: calc(var(--header-height) - 1px);
  --header-padding: calc(calc(100vw - var(--body-width)) / 2);
  padding: 0 var(--header-padding);
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  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
  **/
  /**
   * 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
   */
  /**
   * 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
   */
  /* only when closed */
  /* when opened */
  /**
   * 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 */
}
@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 button { /* applies to both search form buttons and sidebar-toggle button */
  border: 0;
  background: transparent;
  color: var(--fg-secondary);
}
header button:focus, header button:active, header button:hover {
  outline: 0;
  color: var(--fg-secondary);
}
header .header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 42vw;
}
header .header-spacer {
  flex-grow: 1;
  height: var(--header-inner-height);
}
header .header-blank {
  width: var(--header-inner-height);
  height: var(--header-inner-height);
}
header .with-back-button-container + .header-right {
  width: auto;
}
header h1 {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: bold;
  align-self: center;
  white-space: nowrap;
}
header.dashboard h1 {
  font-weight: 500;
  text-align: left;
  font-size: var(--fs-sh);
}
@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;
  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;
  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;
  align-items: flex-start;
}
@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:not(.horizontal) .list {
  width: 100%;
}
header:not(.horizontal) .list .item span.sub-menu-handle {
  display: none;
}
@media screen and (min-width: 768px) {
  header:not(.horizontal) .list {
    --sidebar-margin: calc(3px + var(--left-margin));
    width: calc(100% - var(--sidebar-margin));
    margin-left: var(--sidebar-margin);
  }
}
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-around;
    align-items: center;
    padding: 0 var(--header-padding);
    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: 48px;
  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: 400;
  }
}
@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 figure:is(.logo, .icon) img {
  height: 100%;
  max-height: 46px;
}
@media screen and (max-width: 767px) {
  header #main-menu-v2 + .logo {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  header #main-menu-v2 .sidebar-toggle {
    display: flex;
    width: 40px;
    height: var(--header-height);
    margin: 0;
    padding: 0;
  }
  header #main-menu-v2 .sidebar-toggle i {
    font-size: 28px;
    margin: 0;
  }
}
header #main-menu-v2 .main-menu-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 1000;
  border-right: 1px solid var(--bg-element);
  background: var(--fg-primary);
  padding-top: 2em;
  gap: 8px;
}
@media screen and (max-width: 767px) {
  header #main-menu-v2 .main-menu-container {
    position: absolute;
    left: calc(var(--sidebar-width) * -1);
    transition: transform var(--anim-step) ease-in-out;
    overflow: auto;
    padding-bottom: 2rem;
  }
}
header #main-menu-v2 .main-menu-container.open {
  transform: translateX(var(--sidebar-width));
}
header #main-menu-v2 .main-menu-container .collapsible {
  margin-top: 0;
  padding-bottom: 0;
}
header #main-menu-v2 .item.collapsible {
  max-height: var(--item-height);
}
header #main-menu-v2 .item.collapsible > h2:hover.collapse-title {
  color: var(--fg-button);
  background: var(--fg-accent);
}
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 :is(.item.static, .item.function) {
  height: var(--item-height);
}
header #main-menu-v2 :is(.item.static, .item.function, .item.collapsible) {
  --item-height: 48px;
}
header #main-menu-v2 :is(.item.static, .item.function, .item.collapsible) .collapse-title {
  border: 0;
  margin: 0;
}
header #main-menu-v2 :is(.item.static, .item.function, .item.collapsible) a, header #main-menu-v2 :is(.item.static, .item.function, .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-button);
  transition: all var(--anim-step) ease;
  font-size: var(--fs-sidebar) !important;
  text-transform: none;
  margin-bottom: 0;
}
header #main-menu-v2 :is(.item.static, .item.function, .item.collapsible) a i, header #main-menu-v2 :is(.item.static, .item.function, .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 :is(.item.static, .item.function, .item.collapsible):hover > a, header #main-menu-v2 :is(.item.static, .item.function, .item.collapsible).active > a {
  color: var(--fg-button);
  background: var(--fg-accent);
  outline: 0;
  border: 0;
}
header #main-menu-v2 :is(.item.static, .item.function, .item.collapsible):hover > a .collapse-label, header #main-menu-v2 :is(.item.static, .item.function, .item.collapsible).active > a .collapse-label {
  color: var(--fg-button);
}
header #main-menu-v2 #install-pwa-button {
  width: var(--form-element-width);
  height: var(--form-element-height);
  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: 400;
  font-size: var(--fs-button);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.02em;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
  /* faux buttons are elements that look like buttons but aren't interactable */
  width: 80%;
  margin-left: 10%;
}
header #main-menu-v2 #install-pwa-button.small {
  height: 36px;
  font-weight: 500;
  font-size: var(--fs-button-xsm);
  line-height: var(--lh-button-xsm);
}
header #main-menu-v2 #install-pwa-button.small i {
  font-size: var(--fs-button-xsm) !important;
  margin: 0 4px 0 0 !important;
}
header #main-menu-v2 #install-pwa-button > span, header #main-menu-v2 #install-pwa-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: 400;
  user-select: none;
}
header #main-menu-v2 #install-pwa-button i:is(.fa, .fas, .far, .fal) {
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  font-size: var(--fs-body-sm);
  margin: 0 8px 0;
}
header #main-menu-v2 #install-pwa-button i:is(.fa, .fas, .far, .fal):first-child {
  margin-left: 0;
}
header #main-menu-v2 #install-pwa-button i:is(.fa, .fas, .far, .fal):last-child {
  margin-right: 0;
}
header #main-menu-v2 #install-pwa-button.main {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  height: 50px;
}
header #main-menu-v2 #install-pwa-button.ok {
  background: var(--fg-secondary);
}
header #main-menu-v2 #install-pwa-button.warn {
  background: var(--fg-accent);
}
header #main-menu-v2 #install-pwa-button.danger {
  background: var(--fg-danger);
}
header #main-menu-v2 #install-pwa-button.secondary {
  background: var(--fg-secondary);
}
header #main-menu-v2 #install-pwa-button.alternate {
  background: var(--fg-alternate);
}
header #main-menu-v2 #install-pwa-button:is(:hover, :active, :focus) {
  opacity: 0.8;
  outline: 0;
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
header #main-menu-v2 #install-pwa-button:is(:hover, :active, :focus).ok {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
header #main-menu-v2 #install-pwa-button:is(:hover, :active, :focus).warn {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
header #main-menu-v2 #install-pwa-button:is(:hover, :active, :focus).danger {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
header #main-menu-v2 #install-pwa-button:is(:hover, :active, :focus).secondary {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
header #main-menu-v2 #install-pwa-button:is(:hover, :active, :focus).alternate {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
header #main-menu-v2 #install-pwa-button.icon {
  width: calc(var(--form-element-height) - 2px);
  height: calc(var(--form-element-height) - 2px);
}
header #main-menu-v2 #install-pwa-button.icon i:is(.fa, .fas, .far) {
  margin: 0 0 0 1px;
}
header #main-menu-v2 #install-pwa-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;
}
header #main-menu-v2 #install-pwa-button.stand-in.secondary {
  color: var(--fg-secondary);
  border-color: var(--fg-secondary);
}
header #main-menu-v2 #install-pwa-button.stand-in.alternate {
  color: var(--fg-alternate);
  border-color: var(--fg-alternate);
}
header #main-menu-v2 #install-pwa-button.stand-in:is(.accent, .warn) {
  color: var(--fg-accent);
  border-color: var(--fg-accent);
}
header #main-menu-v2 #install-pwa-button.stand-in:is(.danger, .error) {
  color: var(--fg-danger);
  border-color: var(--fg-danger);
}
header #main-menu-v2 #install-pwa-button.inverse {
  background: var(--bg-body);
  border: 1px solid var(--fg-primary);
  color: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
header #main-menu-v2 #install-pwa-button.inverse:focus {
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
header #main-menu-v2 #install-pwa-button.inverse:is(.ok, .secondary) {
  border-color: var(--fg-secondary);
  color: var(--fg-secondary);
}
header #main-menu-v2 #install-pwa-button.inverse:is(.ok, .secondary):focus {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
header #main-menu-v2 #install-pwa-button.inverse.warn {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
header #main-menu-v2 #install-pwa-button.inverse.warn:focus {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
header #main-menu-v2 #install-pwa-button.inverse.danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
header #main-menu-v2 #install-pwa-button.inverse.danger:focus {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
header #main-menu-v2 #install-pwa-button.inverse.alternate {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
header #main-menu-v2 #install-pwa-button.inverse.alternate:focus {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
header #main-menu-v2 #install-pwa-button.inline {
  width: 50px;
}
header #main-menu-v2 #install-pwa-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);
}
header #main-menu-v2 #install-pwa-button.subtle span {
  font-family: var(--font-stack-default);
}
header #main-menu-v2 #install-pwa-button.subtle:is(.forward, .back) i.fa {
  margin: 2px 3px 0 3px;
}
header #main-menu-v2 #install-pwa-button.subtle:is(:focus, :hover, :active) {
  outline: 0;
  box-shadow: unset;
  border: none;
  text-decoration: underline;
}
header #main-menu-v2 #install-pwa-button.subtle.primary {
  color: var(--fg-primary);
}
header #main-menu-v2 #install-pwa-button.subtle.secondary, header #main-menu-v2 #install-pwa-button.subtle.ok {
  color: var(--fg-secondary);
}
header #main-menu-v2 #install-pwa-button.subtle.alternate {
  color: var(--fg-accent);
}
header #main-menu-v2 #install-pwa-button.subtle.accent, header #main-menu-v2 #install-pwa-button.subtle.warning {
  color: var(--fg-accent);
}
header #main-menu-v2 #install-pwa-button.subtle.danger {
  color: var(--fg-danger);
}
header #main-menu-v2 #install-pwa-button:is(:disabled, .disabled) {
  color: var(--bg-element);
  background: var(--bg-main);
}
header #main-menu-v2 #install-pwa-button:is(:disabled, .disabled):is(.inverse, .stand-in) {
  opacity: 1;
  border-color: var(--bg-main);
  color: var(--bg-main);
  background: none;
}
header #main-menu-v2 #install-pwa-button:is(:disabled, .disabled).subtle {
  color: var(--bg-main);
  background: none;
  text-decoration: none;
}
header #main-menu-v2 #install-pwa-button:is(.disabled, :disabled, .faux) {
  cursor: default;
  pointer-events: none;
}
header #main-menu-v2 #install-pwa-button:is(.disabled, :disabled, .faux):is(:hover, :active, :focus) {
  opacity: 1;
  outline: 0;
  box-shadow: unset;
}
header #main-menu-v2 #install-pwa-button:is(.disabled, :disabled, .faux):is(.inverse, .stand-in):is(:focus, :active, :hover) {
  outline: 0;
  box-shadow: unset;
}
header #main-menu-v2 #install-pwa-button > a {
  color: var(--bg-body);
  width: auto;
  padding: 0.5rem 1rem;
}
header #main-menu-v2 #install-pwa-button > a i {
  margin-right: 0;
}
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:is(.logo, .icon) { /* the site logo or icon */
  margin: 0;
  padding: 0;
  max-height: calc(var(--header-height) - 1px);
  overflow-y: hidden;
  display: flex;
}
header figure:is(.logo, .icon) a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--header-height);
}
@media screen and (max-width: 767px) {
  header figure:is(.logo, .icon) a {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
header figure:is(.logo, .icon) a:is(:hover, :focus, :active) {
  border: 0;
}
header figure:is(.logo, .icon) img {
  height: calc(var(--header-height) - 1px);
  margin: 0;
  border: 0;
  width: auto;
}
header figure:is(.logo, .icon).icon img {
  padding: 15px;
}
header.dashboard figure.logo {
  display: flex;
  justify-content: center;
  width: auto;
  margin-bottom: 18px;
}
header.dashboard figure.logo a {
  display: flex;
  justify-content: center;
  align-items: center;
}
header .logo-title {
  opacity: 0;
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  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);
}
@media screen and (max-width: 767px) {
  header .logo-title {
    justify-content: center;
  }
}
header .logo-title figure.logo {
  animation: none;
}
header .logo-title h1 {
  text-overflow: ellipsis;
  text-transform: none;
  max-width: 100%;
  overflow: hidden;
  margin: 0;
  font-weight: 400;
  font-size: calc(var(--fs-h2) - 2px);
  color: var(--fg-body);
  animation: none;
}
@media screen and (max-width: 767px) {
  header .logo-title h1 {
    font-size: 22px;
  }
}
@media screen and (max-width: 1366px) {
  header .logo-title {
    margin-left: 0;
  }
}
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 {
  --search-width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  height: var(--header-height);
  overflow: hidden;
}
header #search button {
  box-shadow: initial !important;
  height: var(--header-height);
  width: var(--header-height);
  color: var(--fg-accent);
}
header #search button .icon {
  font-size: 20px;
}
header #search:focus-within {
  flex-shrink: 1;
  flex-grow: 1;
}
header #search #search-toggle {
  display: none;
}
header #search input {
  background: var(--bg-element);
  border-width: 0px;
}
header #search:not(:focus, :focus-within) input {
  width: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
}
header #search:not(:focus, :focus-within) button.search {
  width: 35px;
  height: 35px;
}
header #search:not(:focus, :focus-within) button.search .icon {
  font-size: 30px;
}
header #search:not(:focus, :focus-within) button.clear {
  display: none;
}
header #search:is(:focus, :focus-within) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: var(--bg-body);
  border-bottom: 1px solid var(--bg-element);
}
header #search:is(:focus, :focus-within) input {
  opacity: 1;
  flex-grow: 1;
  padding-left: var(--header-height);
  padding-right: var(--header-height);
}
header #search:is(:focus, :focus-within) button.search {
  position: absolute;
  left: 0;
  color: var(--bg-main);
  right: calc(var(--search-width) - 1rem - 40px);
}
header #search:is(:focus, :focus-within) button.clear {
  position: absolute;
  display: flex;
  right: 0;
}
@media screen and (max-width: 767px) {
  header #search:is(:focus, :focus-within) {
    padding: 0 1em;
  }
  header #search:is(:focus, :focus-within) input {
    max-width: 100%;
  }
  header #search:is(:focus, :focus-within) button.search {
    left: 0.5em;
  }
  header #search:is(:focus, :focus-within) button.clear {
    right: 0.5em;
  }
}
header #avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 0.5em;
  position: relative;
}
header #avatar-container .icon {
  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: 37px;
  height: 37px;
  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;
  user-select: none;
}
@media screen and (max-width: 767px) {
  header #avatar-container .dropdown-toggle {
    margin-left: 0;
    margin-right: 0;
  }
}
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);
  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 {
    top: var(--header-height);
    max-width: 100vw;
  }
}
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.5rem;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
}
header .login-button:is(:hover, :active, :focus) {
  outline: 0;
  color: var(--fg-button);
}

header.dashboard {
  --header-height: var(--dashboard-header-height);
  --sidebar-width: var(--dashboard-sidebar-width);
  --header-padding: 1em;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--dashboard-sidebar-width);
  padding-right: 0;
}
@media screen and (max-width: 767px) {
  header.dashboard {
    padding-left: 1em;
    padding-right: 1em;
  }
}
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.dashboard .header-area {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 25px;
}
@media screen and (max-width: 767px) {
  header.dashboard .header-area {
    padding: 0;
  }
}

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

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

i.fa {
  height: auto;
}

.group-icon {
  width: 20px;
  height: 20px;
  font-size: 10px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--fg-button) !important;
  background-color: var(--fg-primary);
}

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

.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);
  outline: none;
  font-weight: 400;
  font-size: var(--fs-body);
  border: 0;
  border-radius: var(--form-element-radius);
  background: var(--bg-dashboard);
  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: color-mix(in srgb, var(--fg-body) 50%, transparent);
}
.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 .recipient {
  animation: fade-in-opacity 0.5s ease;
}
.label-collection:empty {
  display: none;
}
.label-collection .label {
  border-radius: var(--radius);
  position: relative;
  display: flex;
  flex-shrink: 1;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  padding: 0.25rem 0.5rem;
  width: auto;
  margin: 0;
  background-color: color-mix(in srgb, var(--fg-primary) 10%, transparent);
  color: var(--fg-primary) !important;
  user-select: none;
  line-height: unset !important;
}
.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.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: flex-start;
  justify-content: flex-start;
  position: relative;
  padding: 0 1rem 0 1rem;
  margin: 1rem 0;
  text-align: left;
  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;
  margin-top: 5px;
  margin-right: 0.5rem;
}

/** metadata item list (playlist editor) */
.meta-list ol {
  padding: 0;
  list-style-type: none;
}
.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);
}

.outreach-log-message {
  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;
  cursor: pointer;
}
.outreach-log-message .date {
  color: var(--fg-soft);
  font-size: 12px;
}
.outreach-log-message .title {
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.outreach-log-message .body {
  color: var(--fg-body);
  font-size: 15px;
  margin-top: 2px;
  word-wrap: break-word;
  padding: 0 !important;
}

.dialog.outreach-message-log-dialog {
  --modal-width: 500px;
  width: var(--modal-width);
  max-width: var(--modal-width);
}
.dialog.outreach-message-log-dialog > .header {
  padding: 40px 50px 1rem;
}
.dialog.outreach-message-log-dialog > .header > .search {
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .dialog.outreach-message-log-dialog > .header {
    flex-direction: column;
    padding: 3em 1em 1em;
    align-items: stretch;
    overflow: initial;
  }
  .dialog.outreach-message-log-dialog .content > .body {
    padding: 0;
  }
}

.dialog.outreach-send-message-dialog {
  --modal-width: 900px;
  width: var(--modal-width);
  max-width: var(--modal-width);
}
@media screen and (max-width: 767px) {
  .dialog.outreach-send-message-dialog {
    --modal-width: 100%;
  }
}

.outreach-send-form {
  --form-element-width: 100%;
}
.outreach-send-form .add-content-buttons {
  display: flex;
  justify-content: stretch;
  gap: 0.5em;
}
.outreach-send-form .add-content-buttons button {
  width: 100%;
}
.outreach-send-form .subject-container {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.outreach-send-form .subject-container button {
  margin: 0 0 var(--form-element-margin);
  width: var(--form-element-height);
  height: var(--form-element-height);
}
.outreach-send-form .attachments-list {
  margin-top: 1rem;
}

.outreach-container {
  width: 100%;
}
.outreach-container .spaced-top {
  margin-top: 1.5rem;
}

.widget-inline-outreach {
  --form-element-width: 100%;
  width: 100%;
}
.widget-inline-outreach .title-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}
.widget-inline-outreach .title-container h3 {
  margin: 0;
}
.widget-inline-outreach .title-container button {
  font-weight: 400;
  margin: 0;
  height: 36px;
  font-size: var(--fs-button-xsm);
  line-height: var(--lh-button-xsm);
}
.widget-inline-outreach .attachments-list {
  max-height: 216px;
  overflow: auto;
}
.widget-inline-outreach .add-content-buttons {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}
.widget-inline-outreach .add-content-buttons button {
  width: 100%;
  margin: 0;
}
.widget-inline-outreach .send-button {
  margin-top: 20px;
  margin-left: 0;
  font-weight: 500;
  width: 100%;
}

.page-init-form .page-type-selector {
  margin-top: 1rem;
}

.page-break {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--bg-element);
  margin: 1.5rem 0;
}

.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);
  min-height: 300px;
  border-radius: var(--radius);
  font-size: var(--fs-h4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.widget-list {
  width: 100%;
  height: 100%;
}
.widget-list .playlist-preview {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.widget-list .playlist-preview .item-preview {
  width: 600px;
  height: 100%;
}
.widget-list .playlist-preview .item-preview .not-available {
  text-align: center;
}
.widget-list .playlist-preview .item-preview iframe {
  width: 100%;
  border: 0;
  outline: 0;
}
.widget-list .playlist-preview .item-preview .document-viewer {
  width: 100%;
  height: 100%;
}
.widget-list .playlist-preview .item-preview .document-viewer iframe {
  height: 100%;
}
.widget-list .playlist-preview .item-preview .video-player {
  width: 100%;
  height: 100%;
}
.widget-list .playlist-preview .item-preview .video-player iframe {
  height: 320px;
}
@media screen and (max-width: 767px) {
  .widget-list .playlist-preview {
    flex-wrap: wrap;
  }
  .widget-list .playlist-preview .item-preview {
    height: unset;
    order: 2;
  }
  .widget-list .playlist-preview .item-preview .video-player {
    width: 100%;
    height: 100%;
  }
  .widget-list .playlist-preview .item-preview .video-player iframe {
    height: 200px;
  }
  .widget-list .playlist-preview .item-list {
    order: 1;
    width: 100%;
  }
}

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

.public-access-lock {
  width: 30px;
  height: 30px !important;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  justify-self: center;
  border-radius: 100%;
  font-weight: 400;
  cursor: pointer;
  transition: background-color var(--anim-step) ease-in-out;
}
.public-access-lock.unlocked {
  color: var(--fg-secondary);
}
.public-access-lock.locked {
  color: var(--fg-danger);
}
.public-access-lock:hover {
  background-color: var(--bg-hover);
}

.recipient-container {
  border: 1px solid var(--bg-element);
}
.recipient-container .recipient-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 1rem 0;
  color: var(--bg-main);
}
.recipient-container .recipient-header .multi-toggle {
  width: calc(var(--form-element-width) - var(--form-element-height) - 0.5rem);
}
.recipient-container .recipient-header .multi-toggle .notches {
  width: 100%;
}
.recipient-container .recipient-header .multi-toggle p {
  display: none;
}
.recipient-container .recipient-header button.add-recipient {
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-left: 0;
  flex-grow: 0;
}
.recipient-container .recipient-header button.stand-in {
  width: var(--form-element-width);
}
.recipient-container .recipient-header > div[role=group] {
  margin: 0;
}

.recipient-inline-container {
  --form-element-width: 100%;
  margin-bottom: 15px !important;
}
.recipient-inline-container .recipient-table {
  margin-bottom: 15px;
  border: 1px solid;
  border-radius: var(--radius);
  border-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
}
.recipient-inline-container .recipient-type-toggle-container {
  padding: 12px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid;
  border-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
}
.recipient-inline-container .recipient-type-toggle-container .title {
  font-weight: 400;
  font-size: var(--fs-body-sm);
  color: var(--fg-body);
}
.recipient-inline-container .recipient-type-toggle-container .field.multi-toggle {
  margin: 0;
}
.recipient-inline-container .recipient-type-toggle-container .field.multi-toggle .tab-container.small {
  margin: 0;
}
.recipient-inline-container .recipient-type-toggle-container .field.multi-toggle .tab-container.small .notches {
  margin: 0;
}
.recipient-inline-container .field.phone-number p, .recipient-inline-container .field.email-address p {
  position: absolute;
  top: 44px;
}
@media screen and (max-width: 767px) {
  .recipient-inline-container .field.phone-number p, .recipient-inline-container .field.email-address p {
    top: 42px;
  }
}
.recipient-inline-container .add-recipient {
  margin-top: 32px;
  padding: 0;
  height: 34px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .recipient-inline-container .add-recipient {
    margin-top: 46px;
  }
}

.recipient-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0.5rem 1rem 1rem;
  gap: 0.5rem;
}
.recipient-list .recipient {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: flex-start;
  height: 28px;
  padding: 4px 8px;
  line-height: 15px;
  gap: 4px;
  border-radius: var(--radius);
  color: var(--fg-primary);
  font-size: var(--fs-body);
  font-weight: 400;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--fg-primary) 10%, transparent);
}
.recipient-list .recipient.more-recipients-chip {
  flex-shrink: 0;
}
.recipient-list .recipient .entry-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.recipient-list .recipient > .icon:first-child {
  height: 12px;
  width: 10px;
  font-size: 12px;
  margin-top: 0;
  margin-right: 0.5em;
}
.recipient-list .recipient .country-flag {
  margin-right: 10px;
}
.recipient-list .recipient.undeliverable .icon.fa-octagon-exclamation {
  height: 12px;
  width: 12px;
  font-size: 13px;
}
.recipient-list .recipient .remove-recipient {
  width: 14px;
  height: 14px;
  z-index: 10;
  padding: 0;
  background: transparent;
  border-radius: 3px;
  margin: 0 0 0 4px;
}
.recipient-list .recipient .remove-recipient i {
  margin: 3px 1px 1px;
  color: var(--fg-primary);
  filter: saturate(0.1) brightness(3);
}
.recipient-list .recipient .remove-recipient i:hover {
  color: var(--fg-danger);
  filter: unset;
}
.recipient-list .recipient .remove-recipient:hover, .recipient-list .recipient .remove-recipient:focus {
  display: flex;
}
.recipient-list .recipient .pretty-phone-number {
  display: flex;
  align-items: center;
}
.recipient-list .recipient .icon.alert {
  margin-left: 0.25rem;
  font-size: 0.9rem;
}
.recipient-list .recipient:hover .remove-recipient, .recipient-list .recipient:focus .remove-recipient {
  display: flex;
}
.recipient-list .add-recipient {
  margin: 0;
  padding: 0;
  height: 34px;
  width: 34px;
}
.recipient-list p.message {
  margin: 0;
}

:is(.recipient-inline-container .recipient-list, .recipient-list.inline) {
  display: flex;
  flex-wrap: wrap;
  padding: 12px 15px;
  gap: 0.5rem;
}
:is(.recipient-inline-container .recipient-list, .recipient-list.inline) .recipient {
  padding: 2px 10px;
}
:is(.recipient-inline-container .recipient-list, .recipient-list.inline) p.message {
  margin: 0;
  padding: 0;
}

/**
 * Styles for both the rich text editor and the rich text display
 * on dynamic pages.
 */
.rte-container {
  width: 100%;
}
.rte-container .ProseMirror {
  border: 1px solid var(--bg-element);
  border-radius: 0;
  padding: 0.25rem 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;
}
.rte-container .ProseMirror img {
  max-width: 100%;
}
.rte-container .iframe-video-wrapper {
  border: 0;
  outline: 0;
}
.rte-container .iframe-video-wrapper.pointer-events-none {
  pointer-events: none;
  opacity: 0.5;
}
.rte-container .iframe-pdf-wrapper {
  border: 0;
  outline: 0;
}

.rte-controls :is(.rte-controls-primary, .rte-controls-secondary) {
  border-radius: var(--radius);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  background: transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 0;
}
.rte-controls :is(.rte-controls-primary, .rte-controls-secondary).rte-controls-secondary {
  margin-top: 0.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
}
.rte-controls .button-group {
  margin: 0 0.5rem 0 0;
  width: 100%;
}
.rte-controls .button-group:last-child {
  margin-right: 0;
}
.rte-controls .button-group :is(button, .button-group-dropdown .button-group-dropdown-label) {
  position: relative;
  --radius: 3px;
  --size: calc(var(--form-element-height) - 1em);
  width: var(--size);
  height: var(--size);
  margin: 0;
  border: 0;
  padding-bottom: 2px;
  border-radius: var(--radius);
}
.rte-controls .button-group :is(button, .button-group-dropdown .button-group-dropdown-label):is(:hover, :active, :focus) {
  z-index: 1;
}
.rte-controls .button-group :is(button, .button-group-dropdown .button-group-dropdown-label) span.palette {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 1px 0 0 0;
}
.rte-controls .button-group :is(button, .button-group-dropdown .button-group-dropdown-label) span.palette.primary {
  background-color: var(--fg-primary);
}
.rte-controls .button-group :is(button, .button-group-dropdown .button-group-dropdown-label) span.palette.secondary {
  background-color: var(--fg-secondary);
}
.rte-controls .button-group :is(button, .button-group-dropdown .button-group-dropdown-label) span.palette.tertiary {
  background-color: var(--fg-alternate);
}
.rte-controls .button-group :is(button, .button-group-dropdown .button-group-dropdown-label) span.palette.warning {
  background-color: var(--fg-danger);
}
.rte-controls .button-group :is(button, .button-group-dropdown .button-group-dropdown-label) span.palette.accent {
  background-color: var(--fg-accent);
}
.rte-controls .button-group :is(button, .button-group-dropdown .button-group-dropdown-label) span.palette.null {
  background-color: var(--fg-body);
}
.rte-controls .button-group .button-group-dropdown .button-group-dropdown-label {
  width: calc(var(--size) * 1.25);
}
.rte-controls .spacer {
  flex-grow: 1;
}
.rte-controls .separator {
  display: flex;
  height: 1.25rem;
  align-self: center;
  border-right: 1px solid var(--bg-element);
  margin: 0 0.25rem;
}
.rte-controls :is(.custom-highlight-color-picker, .custom-text-color-picker, .inset-block-picker) .field.color {
  width: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}
.rte-controls .text-size-button {
  padding: 0;
  align-items: center;
  justify-content: center;
}

/** 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);
  height: var(--form-element-height);
  touch-action: none;
}
.scrub-bar input {
  padding: 0;
  margin-left: 1rem;
  /* Input Track */
}
.scrub-bar input[type=range] {
  position: relative;
  -webkit-appearance: none;
  margin-right: 1rem;
  width: calc(100% - 30px);
  height: 30px;
  border-radius: 0;
  background: none;
  cursor: pointer;
}
.scrub-bar input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: var(--fg-primary);
  transition: background 0.3s ease-in-out;
  cursor: pointer;
  outline: 0;
  border: 0;
  margin-top: -5px;
}
.scrub-bar input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: var(--fg-primary);
  transition: background 0.3s ease-in-out;
  cursor: pointer;
  outline: 0;
  border: 0;
  margin-top: -5px;
}
.scrub-bar input[type=range]::-ms-thumb {
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: var(--fg-primary);
  transition: background 0.3s ease-in-out;
  cursor: pointer;
  outline: 0;
  border: 0;
  margin-top: -5px;
}
.scrub-bar input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
  height: 2px;
  margin: auto;
  border-radius: 0;
  background: var(--bg-element) linear-gradient(var(--fg-soft), var(--fg-soft)) no-repeat;
  background-size: var(--track-size, 0%) 100% !important;
}
.scrub-bar input[type=range]::-moz-range-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
  height: 2px;
  margin: auto;
  border-radius: 0;
  background: var(--bg-element) linear-gradient(var(--fg-soft), var(--fg-soft)) no-repeat;
  background-size: var(--track-size, 0%) 100% !important;
}
.scrub-bar input[type=range]::-ms-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
  height: 2px;
  margin: auto;
  border-radius: 0;
  background: var(--bg-element) linear-gradient(var(--fg-soft), var(--fg-soft)) no-repeat;
  background-size: var(--track-size, 0%) 100% !important;
}
.scrub-bar.vertical input[type=range] {
  writing-mode: vertical-rl;
  direction: rtl;
  width: 30px;
  height: calc(100% - 30px) !important;
}
.scrub-bar.vertical input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: var(--fg-primary);
  transition: background 0.3s ease-in-out;
  cursor: pointer;
  outline: 0;
  border: 0;
  margin-top: -5px;
  transform: translateX(5px);
}
.scrub-bar.vertical input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: var(--fg-primary);
  transition: background 0.3s ease-in-out;
  cursor: pointer;
  outline: 0;
  border: 0;
  margin-top: -5px;
  margin-left: 5px;
}
.scrub-bar.vertical input[type=range]::-ms-thumb {
  -webkit-appearance: none;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: var(--fg-primary);
  transition: background 0.3s ease-in-out;
  cursor: pointer;
  outline: 0;
  border: 0;
  margin-top: -5px;
  margin-left: 5px;
}
.scrub-bar.vertical input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
  width: 2px !important;
  height: 100%;
  margin: auto;
  border-radius: 0;
  background: var(--bg-element) linear-gradient(var(--fg-soft), var(--fg-soft)) no-repeat;
  background-size: 100% var(--track-size, 0%) !important;
  background-position: bottom !important;
}
.scrub-bar.vertical input[type=range]::-moz-range-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
  width: 2px !important;
  height: 100%;
  margin: auto;
  border-radius: 0;
  background: var(--bg-element) linear-gradient(var(--fg-soft), var(--fg-soft)) no-repeat;
  background-size: 100% var(--track-size, 0%) !important;
  background-position: bottom !important;
}
.scrub-bar.vertical input[type=range]::-ms-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
  width: 2px !important;
  height: 100%;
  margin: auto;
  border-radius: 0;
  background: var(--bg-element) linear-gradient(var(--fg-soft), var(--fg-soft)) no-repeat;
  background-size: 100% var(--track-size, 0%) !important;
  background-position: bottom !important;
}

.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: flex-end;
  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(4 * var(--anim-step)) ease infinite;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
table thead {
  color: color-mix(in srgb, var(--fg-body) 50%, transparent);
  font-size: var(--fs-table);
  line-height: var(--lh-table);
  font-weight: 400;
}
table thead tr th {
  padding: 25px 15px 25px 40px;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
  font-weight: 400;
  font-size: var(--fs-table);
  line-height: var(--lh-table);
}
@media screen and (max-width: 767px) {
  table thead tr th {
    width: 100%;
    border: 0;
    padding: 15px 20px;
  }
}
table tbody tr {
  border-bottom: 1px solid;
  border-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
}
table tbody tr.table-row-clickable {
  cursor: pointer;
}
table tbody tr.table-row-clickable:hover {
  background-color: var(--bg-dashboard);
}
table tbody tr:last-child {
  border-bottom: 0;
}
table tbody tr td {
  word-break: break-all;
  padding: 28px 15px 28px 40px;
  font-size: var(--fs-table);
  line-height: var(--lh-table);
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  table tbody tr td {
    padding: 15px 20px;
  }
}
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-table);
  line-height: var(--lh-table);
}
table tbody tr td:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}
table .no-results {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 350px;
}
table .no-results .no-results-img {
  width: 66px;
  height: 66px;
}
table .no-results .no-results-title {
  font-size: var(--fs-h4);
  font-weight: 400;
  color: var(--fg-body);
  margin-top: 16px;
}

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: var(--fs-table);
}
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;
  margin-bottom: 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: 4px;
  --tab-width: 100%;
  --head-width: calc(
    calc(var(--head-pad) * -1 * var(--tab-count) + var(--tab-width))
    / var(--tab-count)
  );
  --notch-height: 44px;
  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 */
}
@media screen and (max-width: 767px) {
  .tab-container {
    --head-pad: 2px;
    --notch-height: 30px;
  }
}
.tab-container.disabled {
  pointer-events: none;
  opacity: 0.6;
}
.tab-container .radio-notches-wrapper {
  display: none;
}
.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: 54px;
  border: 1px solid;
  border-radius: var(--form-element-radius);
  border-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
  width: var(--tab-width);
  padding: var(--head-pad);
  margin: 0 0 6px;
  border-radius: var(--radius);
  background-color: var(--fg-button);
}
.tab-container .notches:after {
  border-radius: var(--radius);
  content: "";
  background-color: var(--fg-primary);
  position: absolute;
  top: var(--head-pad);
  left: var(--head-pad);
  width: var(--head-width);
  height: var(--notch-height);
  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: var(--notch-height);
  padding: 0 15px;
  white-space: nowrap;
  z-index: 10;
  color: color-mix(in srgb, var(--fg-body) 40%, transparent);
  text-align: center;
  background: transparent;
  transition: color var(--anim-step) ease;
  font-size: 16px;
  font-weight: 400;
  line-height: var(--lh-body-sm);
}
@media screen and (max-width: 767px) {
  .tab-container .notches {
    height: 36px;
  }
  .tab-container .notches > .notch {
    font-size: 12px;
  }
}
.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"] > .tabs > .tab[data-tab-id="3"], .tab-container:not([data-selected-tab]) > .tabs > .tab[data-tab-id="3"] {
  transform: translateX(300%);
}
.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-button);
  font-weight: 400;
}
.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"] > .tabs > .tab[data-tab-id="3"] {
  transform: translateX(200%);
}
.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-button);
  font-weight: 400;
}
.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"] > .tabs > .tab[data-tab-id="2"] {
  transform: translateX(0%);
}
.tab-container[data-selected-tab="2"] > .tabs > .tab[data-tab-id="3"] {
  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-button);
  font-weight: 400;
}
.tab-container[data-selected-tab="3"] > .tabs > .tab[data-tab-id="0"] {
  transform: translateX(-300%);
}
.tab-container[data-selected-tab="3"] > .tabs > .tab[data-tab-id="1"] {
  transform: translateX(-200%);
}
.tab-container[data-selected-tab="3"] > .tabs > .tab[data-tab-id="2"] {
  transform: translateX(-100%);
}
.tab-container[data-selected-tab="3"] > .notches:after {
  left: calc(var(--head-pad) + var(--head-width) * 3);
}
.tab-container[data-selected-tab="3"] > .notches > .notch[data-tab-id="3"] {
  color: var(--fg-button);
  font-weight: 400;
}

/* /.tab-container */
.tab-container.as-tabs {
  --head-pad: 1px;
  --notch-height: 34px;
}
.tab-container.as-tabs > .notches {
  border: 0;
  border-bottom: 1px solid;
  border-radius: 0;
  height: unset;
  background-color: transparent;
  border-bottom-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
}
.tab-container.as-tabs > .notches:after {
  height: var(--notch-height);
  background-color: transparent;
  border-radius: 0;
  border-bottom: 2px solid var(--fg-primary);
  box-shadow: unset;
}
.tab-container.as-tabs > .notches > .notch {
  align-items: flex-start;
  padding-left: 15px;
  padding-right: 15px;
  height: var(--notch-height);
  z-index: 10;
  color: color-mix(in srgb, var(--fg-body) 50%, transparent);
  font-weight: 400;
  font-size: var(--fs-body-sm);
}
@media screen and (max-width: 767px) {
  .tab-container.as-tabs > .notches > .notch {
    padding: 0;
  }
}
.tab-container.as-tabs[data-selected-tab="0"] > .tabs > .tab[data-tab-id="1"], .tab-container.as-tabs:not([data-selected-tab]) > .tabs > .tab[data-tab-id="1"] {
  transform: translateX(100%);
}
.tab-container.as-tabs[data-selected-tab="0"] > .tabs > .tab[data-tab-id="2"], .tab-container.as-tabs:not([data-selected-tab]) > .tabs > .tab[data-tab-id="2"] {
  transform: translateX(200%);
}
.tab-container.as-tabs[data-selected-tab="0"] > .tabs > .tab[data-tab-id="3"], .tab-container.as-tabs:not([data-selected-tab]) > .tabs > .tab[data-tab-id="3"] {
  transform: translateX(300%);
}
.tab-container.as-tabs[data-selected-tab="0"] > .notches:after, .tab-container.as-tabs:not([data-selected-tab]) > .notches:after {
  left: var(--head-pad);
}
.tab-container.as-tabs[data-selected-tab="0"] > .notches > .notch[data-tab-id="0"], .tab-container.as-tabs:not([data-selected-tab]) > .notches > .notch[data-tab-id="0"] {
  color: var(--fg-primary);
  font-weight: 400;
}
.tab-container.as-tabs[data-selected-tab="1"] > .tabs > .tab[data-tab-id="0"] {
  transform: translateX(-100%);
}
.tab-container.as-tabs[data-selected-tab="1"] > .tabs > .tab[data-tab-id="1"] {
  transform: translateX(0%);
}
.tab-container.as-tabs[data-selected-tab="1"] > .tabs > .tab[data-tab-id="2"] {
  transform: translateX(100%);
}
.tab-container.as-tabs[data-selected-tab="1"] > .tabs > .tab[data-tab-id="3"] {
  transform: translateX(200%);
}
.tab-container.as-tabs[data-selected-tab="1"] > .notches:after {
  left: calc(var(--head-pad) + var(--head-width));
}
.tab-container.as-tabs[data-selected-tab="1"] > .notches > .notch[data-tab-id="1"] {
  color: var(--fg-primary);
  font-weight: 400;
}
.tab-container.as-tabs[data-selected-tab="2"] > .tabs > .tab[data-tab-id="0"] {
  transform: translateX(-200%);
}
.tab-container.as-tabs[data-selected-tab="2"] > .tabs > .tab[data-tab-id="1"] {
  transform: translateX(-100%);
}
.tab-container.as-tabs[data-selected-tab="2"] > .tabs > .tab[data-tab-id="2"] {
  transform: translateX(0%);
}
.tab-container.as-tabs[data-selected-tab="2"] > .tabs > .tab[data-tab-id="3"] {
  transform: translateX(100%);
}
.tab-container.as-tabs[data-selected-tab="2"] > .notches:after {
  left: calc(var(--head-pad) + var(--head-width) * 2);
}
.tab-container.as-tabs[data-selected-tab="2"] > .notches > .notch[data-tab-id="2"] {
  color: var(--fg-primary);
  font-weight: 400;
}
.tab-container.as-tabs[data-selected-tab="3"] > .tabs > .tab[data-tab-id="0"] {
  transform: translateX(-300%);
}
.tab-container.as-tabs[data-selected-tab="3"] > .tabs > .tab[data-tab-id="1"] {
  transform: translateX(-200%);
}
.tab-container.as-tabs[data-selected-tab="3"] > .tabs > .tab[data-tab-id="2"] {
  transform: translateX(-100%);
}
.tab-container.as-tabs[data-selected-tab="3"] > .notches:after {
  left: calc(var(--head-pad) + var(--head-width) * 3);
}
.tab-container.as-tabs[data-selected-tab="3"] > .notches > .notch[data-tab-id="3"] {
  color: var(--fg-primary);
  font-weight: 400;
}

.tab-container.small {
  --head-pad: 1px;
  --notch-height: 32px;
}
.tab-container.small .notches {
  height: 36px;
}
.tab-container.small .notches > .notch {
  font-size: var(--fs-button-sm);
}

.tab-container.extra-small {
  --head-pad: 1px;
  --notch-height: 18px;
}
.tab-container.extra-small .notches {
  height: 22px;
  margin: 0;
}
.tab-container.extra-small .notches > .notch {
  font-size: var(--fs-tab-extra-small);
  padding: 0 6px;
}

.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: var(--form-element-height);
  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: 400;
  font-size: var(--fs-button);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.02em;
  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.small {
  height: 36px;
  font-weight: 500;
  font-size: var(--fs-button-xsm);
  line-height: var(--lh-button-xsm);
}
.toggle-box.small i {
  font-size: var(--fs-button-xsm) !important;
  margin: 0 4px 0 0 !important;
}
.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: 400;
  user-select: none;
}
.toggle-box i:is(.fa, .fas, .far, .fal) {
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  font-size: var(--fs-body-sm);
  margin: 0 8px 0;
}
.toggle-box i:is(.fa, .fas, .far, .fal):first-child {
  margin-left: 0;
}
.toggle-box i:is(.fa, .fas, .far, .fal):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 0 1px;
}
.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: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
.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 3px 0 3px;
}
.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: #f3f6f9;
  border-radius: var(--radius);
  border: 1px solid var(--fg-primary);
  color: var(--fg-primary);
  padding: 8px 14px;
  font-size: var(--fs-body);
  font-weight: 400;
  transition: opacity 0.3s ease-in-out;
}
@media screen and (max-width: 767px) {
  .tooltip {
    width: 70vw;
    white-space: normal;
  }
}
.tooltip.visible {
  display: flex;
}
.tooltip:before {
  content: "";
  position: absolute;
  border-style: solid;
  display: flex;
}
.tooltip.LEFT:after, .tooltip.LEFT:before {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.tooltip.LEFT:after {
  border-left-color: #f3f6f9;
  border-width: 8px;
  margin-top: -8px;
  margin-left: -0.4px;
}
.tooltip.LEFT:before {
  border-left-color: var(--fg-primary);
  border-width: 9px;
  margin-top: -9px;
}
.tooltip.RIGHT:after, .tooltip.RIGHT:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.tooltip.RIGHT:after {
  border-right-color: #f3f6f9;
  border-width: 8px;
  margin-top: -8px;
  margin-right: -0.4px;
}
.tooltip.RIGHT:before {
  border-right-color: var(--fg-primary);
  border-width: 9px;
  margin-top: -9px;
}
.tooltip.TOP:after, .tooltip.TOP:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.tooltip.TOP:after {
  border-top-color: #f3f6f9;
  border-width: 8px;
  margin-left: -8px;
  margin-top: -0.4px;
}
.tooltip.TOP:before {
  border-top-color: var(--fg-primary);
  border-width: 9px;
  margin-left: -9px;
}
.tooltip.BOTTOM:after, .tooltip.BOTTOM:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.tooltip.BOTTOM:after {
  border-bottom-color: #f3f6f9;
  border-width: 8px;
  margin-left: -8px;
  margin-bottom: -0.4px;
}
.tooltip.BOTTOM:before {
  border-bottom-color: var(--fg-primary);
  border-width: 9px;
  margin-left: -9px;
}

.user-access-container {
  width: 100%;
}
.user-access-container .title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-access-container .title-container > * {
  margin: 0;
}
.user-access-container > .field.toggle {
  margin: 30px 0;
}
.user-access-container > .field.toggle .inner {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.user-access-container .users-wrapper {
  overflow: auto;
  max-height: 400px;
}
.user-access-container .users {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: fit-content;
  min-width: 100%;
}
.user-access-container .users .container-principal {
  width: 100%;
  min-width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background-color: var(--bg-dashboard);
  border-radius: var(--radius);
  height: 70px;
  padding: 0 16px;
}
.user-access-container .users .container-principal .principal-name {
  display: flex;
  flex-basis: 150px;
  flex-grow: 1;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: var(--fs-sub);
}
.user-access-container .users .container-principal .principal-name i {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  width: 20px;
}
@media screen and (max-width: 767px) {
  .user-access-container .users .container-principal .principal-name {
    flex-basis: unset;
  }
  .user-access-container .users .container-principal .principal-name > span {
    max-width: 36px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.user-access-container .users .container-principal .principal-permissions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.user-access-container .users .container-principal .principal-permissions .field.toggle {
  margin: 0;
}
.user-access-container .users .container-principal .principal-permissions .field.toggle .inner {
  flex-direction: column;
  justify-content: unset;
  margin: 0;
  padding: 0;
}
.user-access-container .users .container-principal .principal-permissions .field.toggle .inner label {
  margin: 0;
  font-weight: 500;
  font-size: 12px;
  color: color-mix(in srgb, var(--fg-body) 50%, transparent);
}
.user-access-container .users .container-principal .principal-permissions .remove-principal {
  background: transparent;
  color: var(--fg-danger);
  width: 20px;
  height: 20px;
  padding: 0;
  outline: 0;
  margin: 8px 0 0;
}
.user-access-container .users .container-principal .principal-permissions .remove-principal:hover {
  box-shadow: none;
}

.user-group-membership-container {
  width: var(--form-element-width);
}
.user-group-membership-container .title-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}
.user-group-membership-container .title-container button, .user-group-membership-container .title-container h3 {
  margin: 0 !important;
}
.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;
}

.widget-video-player {
  --player-width: 800px;
  width: var(--player-width);
  height: calc(0.56 * var(--player-width));
}
@media screen and (max-width: 1366px) {
  .widget-video-player {
    --player-width: 100%;
    height: 500px;
  }
}
.widget-video-player .video-player {
  width: 100%;
  height: 100%;
}
.widget-video-player iframe.player {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  background: black;
  z-index: 1;
}
.widget-video-player iframe.player.player-expanded {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 999999;
}

.video-player-wrapper {
  width: 100dvw;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
}
.video-player-wrapper.panel-blur .video-overlays > div, .video-player-wrapper.panel-blur .video-control-bar, .video-player-wrapper.panel-blur .video-play-button, .video-player-wrapper.panel-blur .scrub-bar.volume {
  backdrop-filter: blur(4px);
}
.video-player-wrapper video {
  object-fit: contain;
  width: 100dvw;
  height: 100dvh;
}
.video-player-wrapper .video-control-group {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
}
.video-player-wrapper .video-control-group.play-controls {
  margin-right: 4px;
}
.video-player-wrapper .video-control-group:is(:first-of-type, :last-of-type) {
  flex: 1;
}
.video-player-wrapper .video-control-group:first-of-type {
  justify-content: flex-start;
}
.video-player-wrapper .video-control-group:last-of-type {
  justify-content: flex-end;
}
.video-player-wrapper .video-control-group > :first-child {
  margin-left: 0;
}
.video-player-wrapper .video-control-group > :last-child {
  margin-right: 0;
}
.video-player-wrapper i.icon {
  font-size: 20px;
  color: var(--player-fg-primary);
}
.video-player-wrapper button {
  width: 30px;
  height: 30px;
  margin: 0 5px;
  padding: 0;
  background: none;
}
.video-player-wrapper button:is(:hover, :active, :focus) {
  outline: none;
  box-shadow: unset;
  color: white;
}
.video-player-wrapper button:is(.backward-step, .forward-step) {
  margin: 0;
}
.video-player-wrapper button:is(.backward-step, .forward-step) i {
  margin: 0;
}
.video-player-wrapper button:is(.play, .pause) {
  width: 32px;
  height: 32px;
  margin: 0;
}
.video-player-wrapper button:is(.play, .pause) i {
  font-size: 22px;
  margin: 0;
}
.video-player-wrapper button:is(.play) i {
  margin-left: 3px;
}
.video-player-wrapper button.forward-step {
  margin-left: -1px;
}
.video-player-wrapper button:is(:focus) {
  color: var(--player-fg-primary);
}
.video-player-wrapper button:is(:hover, :active) {
  color: var(--bg-body);
}
.video-player-wrapper button:disabled {
  color: var(--player-fg-background);
}
.video-player-wrapper .video-control-bar {
  position: fixed;
  width: 100%;
  padding: 5px 30px 10px;
  height: auto;
  font-size: var(--fs-body);
  left: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  opacity: 1;
  background-color: var(--player-fg-background);
  transition: opacity 3s ease;
}
@media screen and (max-width: 767px) {
  .video-player-wrapper .video-control-bar {
    padding: 10px 24px 20px;
    row-gap: 6px;
  }
  .video-player-wrapper .video-control-bar .scrub-bar {
    height: 35px;
  }
}
.video-player-wrapper .video-control-bar.hidden {
  opacity: 0;
}
.video-player-wrapper .video-control-bar p {
  margin: 0;
  color: var(--player-fg-text);
}
@media screen and (orientation: portrait) and (max-width: 767px) {
  .video-player-wrapper .video-control-bar p {
    display: none;
  }
}
.video-player-wrapper .video-control-bar p.title {
  margin-left: 5px;
}
.video-player-wrapper .video-control-bar .spacer {
  width: 100%;
  flex-grow: 1;
  flex-shrink: 1;
}
.video-player-wrapper .video-position-controls {
  bottom: 30px;
}
.video-player-wrapper #video-main-controls {
  position: fixed;
  bottom: 0;
}
.video-player-wrapper .video-overlays {
  position: absolute;
  height: 100dvh;
  width: 100dvw;
  pointer-events: none;
  overflow: hidden;
  top: 0;
  left: 0;
}
.video-player-wrapper .video-overlays > div {
  display: none;
  position: absolute;
  color: var(--player-fg-text);
  max-width: 40dvw;
  min-width: 20dvw;
  bottom: 92px;
  height: auto;
  pointer-events: all;
  background-color: var(--player-fg-background);
}
.video-player-wrapper .video-overlays > div.visible {
  display: block;
}
.video-player-wrapper .video-overlays > div > .video-overlay-inner {
  padding: 20px;
  overflow-y: auto;
}
.video-player-wrapper .video-overlays > :is(.video-info-overlay, .video-settings-overlay, .video-title-overlay) {
  right: 20px;
}
.video-player-wrapper .video-overlays > :is(.video-info-overlay, .video-settings-overlay, .video-title-overlay) > .video-overlay-inner {
  max-height: 50dvh;
}
.video-player-wrapper .video-overlays > :is(.video-info-overlay, .video-settings-overlay, .video-title-overlay) h3 {
  margin: 0;
  line-height: calc(var(--fs-h4) + 5px);
  font-size: var(--fs-h4);
  color: var(--player-fg-text);
  border-bottom: 1px solid;
  border-color: color-mix(in srgb, var(--player-fg-text) 15%, transparent);
  padding-bottom: 2px;
}
.video-player-wrapper .video-overlays > :is(.video-info-overlay, .video-settings-overlay, .video-title-overlay) p {
  color: var(--player-fg-text);
  margin: 0.5em 0 1em;
}
@media screen and (orientation: portrait) and (max-width: 767px) {
  .video-player-wrapper .video-overlays > :is(.video-info-overlay, .video-settings-overlay, .video-title-overlay) {
    max-width: calc(100dvw - 40px);
  }
  .video-player-wrapper .video-overlays > :is(.video-info-overlay, .video-settings-overlay, .video-title-overlay) > .video-overlay-inner {
    width: 100%;
    height: auto;
  }
}
@media screen and (orientation: landscape) and (max-width: 959px) {
  .video-player-wrapper .video-overlays > :is(.video-info-overlay, .video-settings-overlay, .video-title-overlay) {
    max-width: 50dvw;
    width: 100%;
  }
  .video-player-wrapper .video-overlays > :is(.video-info-overlay, .video-settings-overlay, .video-title-overlay) .video-overlay-inner {
    max-height: calc(100dvh - 140px);
  }
}
.video-player-wrapper .video-overlays > .video-info-overlay {
  top: 50px;
  right: 31px;
  bottom: unset;
}
@media screen and (max-width: 767px) {
  .video-player-wrapper .video-overlays > .video-info-overlay {
    top: 60px;
    right: 18px;
  }
}
.video-player-wrapper .video-overlays > .video-info-overlay .video-overlay-inner {
  padding: 0;
}
.video-player-wrapper .video-overlays > .video-info-overlay .video-overlay-inner h3 {
  padding: 20px 20px 6px 20px;
}
.video-player-wrapper .video-overlays > .video-info-overlay .video-overlay-inner p {
  margin: 8px 20px 20px 20px;
}
.video-player-wrapper .video-overlays > :is(.video-playlist-overlay, .video-title-overlay) {
  left: 20px;
}
.video-player-wrapper .video-overlays > :is(.video-playlist-overlay, .video-title-overlay) > .video-overlay-inner {
  max-height: 270px;
  padding: 12px;
}
.video-player-wrapper .video-overlays > :is(.video-playlist-overlay, .video-title-overlay) a {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  padding: 5px 8px;
  color: var(--player-fg-text);
  text-decoration: none;
}
.video-player-wrapper .video-overlays > :is(.video-playlist-overlay, .video-title-overlay) a.current {
  background-color: color-mix(in srgb, var(--player-fg-text) 10%, transparent);
}
.video-player-wrapper .video-overlays > :is(.video-playlist-overlay, .video-title-overlay) a:last-of-type {
  margin-bottom: 0;
}
@media screen and (orientation: portrait) and (max-width: 767px) {
  .video-player-wrapper .video-overlays > :is(.video-playlist-overlay, .video-title-overlay) {
    max-width: calc(100dvw - 40px);
    width: 100%;
  }
  .video-player-wrapper .video-overlays > :is(.video-playlist-overlay, .video-title-overlay) .video-overlay-inner {
    max-height: calc(100dvh - 140px);
  }
}
@media screen and (orientation: landscape) and (max-width: 959px) {
  .video-player-wrapper .video-overlays > :is(.video-playlist-overlay, .video-title-overlay) {
    max-width: 50dvw;
    width: 100%;
  }
  .video-player-wrapper .video-overlays > :is(.video-playlist-overlay, .video-title-overlay) .video-overlay-inner {
    max-height: calc(100dvh - 140px);
  }
}
.video-player-wrapper .video-overlays > .video-settings-overlay .video-overlay-inner {
  padding: 10px 20px;
}
@media screen and (orientation: landscape) and (max-width: 959px) {
  .video-player-wrapper .video-overlays > .video-settings-overlay {
    width: auto;
  }
}
@media screen and (max-width: 767px) {
  .video-player-wrapper .video-overlays > .video-title-overlay {
    width: fit-content;
  }
}
.video-player-wrapper .video-overlays > .video-title-overlay h3 {
  font-size: var(--fs-body);
  border: 0;
  padding: 0;
}
.video-player-wrapper .volume-controls {
  position: relative;
  touch-action: none;
}
.video-player-wrapper .scrub-bar {
  width: auto;
  height: 35px;
  flex-grow: 1;
  flex-shrink: 1;
  border: none;
  background: none;
}
.video-player-wrapper .scrub-bar input {
  width: auto;
  flex-grow: 1;
  height: 35px !important;
}
.video-player-wrapper .scrub-bar.volume {
  display: none;
  height: 200px;
  position: absolute;
  bottom: 92px;
  right: 70px;
  min-width: unset;
  width: 36px;
  max-width: 36px;
  background-color: var(--player-fg-background);
}
.video-player-wrapper .scrub-bar.volume.visible {
  display: flex;
}
.video-player-wrapper .scrub-bar.volume input[type=range] {
  margin: 0;
}
.video-player-wrapper .scrub-bar.position {
  width: 100%;
  flex-grow: 1;
}
.video-player-wrapper .scrub-bar.position input[type=range] {
  margin: 0;
  height: 50px;
}
.video-player-wrapper .scrub-bar input[type=range]::-webkit-slider-thumb {
  background: var(--player-fg-primary);
}
.video-player-wrapper .scrub-bar input[type=range]::-moz-range-thumb {
  background: var(--player-fg-primary);
}
.video-player-wrapper .scrub-bar input[type=range]::-ms-range-thumb {
  background: var(--player-fg-primary);
}
.video-player-wrapper .scrub-bar input[type=range]::-webkit-slider-runnable-track {
  background: var(--player-fg-contrast-2) linear-gradient(var(--player-fg-contrast-1), var(--player-fg-contrast-1)) no-repeat;
}
.video-player-wrapper .scrub-bar input[type=range]::-moz-range-track {
  background: var(--player-fg-contrast-2) linear-gradient(var(--player-fg-contrast-1), var(--player-fg-contrast-1)) no-repeat;
}
.video-player-wrapper .scrub-bar input[type=range]::-ms-track {
  background: var(--player-fg-contrast-2) linear-gradient(var(--player-fg-contrast-1), var(--player-fg-contrast-1)) no-repeat;
}
.video-player-wrapper .top-right-controls {
  position: absolute;
  top: 14px;
  right: 24px;
}
.video-player-wrapper .top-right-controls i.icon {
  font-size: 30px;
}
@media screen and (max-width: 767px) {
  .video-player-wrapper .top-right-controls {
    top: 16px;
    right: 12px;
  }
}
.video-player-wrapper .video-play-button {
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: calc(50% - 3px);
  transform: translate(-50%, -50%);
  width: 84px;
  height: 56px;
  border-radius: var(--radius);
  cursor: pointer;
  background-color: var(--player-fg-background);
}
.video-player-wrapper .video-play-button i {
  font-size: 28px;
  margin-left: 6px;
}
.video-player-wrapper .video-play-button.visible {
  display: flex;
}

/* set editor styles */
:root {
  --gjs-main-color: var(--fg-body);
  --gjs-secondary-color: var(--fg-body);
  --gjs-primary-color: var(--bg-body);
  --gjs-tertiary-color: var(--bg-element);
  --gjs-quaternary-color: var(--fg-primary);
  --gjs-color-blue: var(--fg-primary);
  --gjs-color-red: var(--fg-danger);
  --gjs-color-yellow: var(--fg-accent);
  --gjs-color-warn: var(--fg-danger);
  --gjs-color-green: var(--fg-secondary);
  --gjs-font-color: var(--fg-primary);
  --gjs-arrow-color: var(--fg-body);
}

.visual-page-editor {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: var(--font-stack-default), sans-serif;
}
.visual-page-editor .editor-row {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  height: 100%;
  height: -webkit-fill-available;
  border-left: 1px solid var(--bg-element);
  border-bottom: 1px solid var(--bg-element);
}
.visual-page-editor .editor-canvas {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.visual-page-editor .panel-top {
  padding: 6px 16px;
  width: 100%;
  display: flex;
  position: initial;
  justify-content: space-between;
}
.visual-page-editor .panel-top :is(.panel-top-right, .panel-top-left, .panel-top-center) {
  position: initial;
}
.visual-page-editor .panel-top .gjs-pn-buttons {
  padding: 4px;
  gap: 8px;
  border: 1px solid #ECEEF0;
  border-radius: var(--radius);
}
.visual-page-editor .panel-top .gjs-pn-buttons .gjs-pn-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
.visual-page-editor .panel-top .gjs-pn-buttons .gjs-pn-btn i {
  color: #646D79;
}
.visual-page-editor .panel-right {
  background: var(--gjs-primary-color);
  flex-basis: 30%;
  max-width: 300px;
  position: relative;
  overflow-y: auto;
  border: 1px solid;
  border-radius: var(--radius);
  border-color: color-mix(in srgb, var(--fg-body) 5%, transparent);
}
.visual-page-editor .panel-right .gjs-block-label {
  font-family: var(--font-stack-default), sans-serif;
}
.visual-page-editor .panel-switcher {
  padding: 10px 16px;
  position: initial;
  background-color: var(--gjs-color-blue);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.visual-page-editor .panel-switcher .gjs-pn-buttons {
  justify-content: center;
  gap: 8px;
}
.visual-page-editor .panel-switcher .gjs-pn-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.visual-page-editor .panel-switcher .gjs-pn-btn.gjs-pn-active {
  box-shadow: unset;
  background-color: color-mix(in srgb, var(--bg-dashboard) 15%, transparent);
}
.visual-page-editor .panel-switcher i {
  color: var(--gjs-primary-color);
}

/* grapes styles */
/* Reset some default styling */
.gjs-cv-canvas {
  top: 0;
  width: 100%;
  height: 100%;
}

.gjs-pn-panel {
  display: block;
  position: initial;
  padding: 0;
}

.gjs-block {
  width: auto;
  height: auto;
  min-height: auto;
  flex-grow: 1;
  justify-content: space-around;
  box-shadow: unset;
  background-color: var(--bg-dashboard);
}

.gjs-block__media {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
.gjs-block__media img {
  width: 32px;
  height: 32px;
}

.gjs-field {
  background-color: var(--bg-body);
  border-radius: var(--radius);
}
.gjs-field :is(input, select, textarea) {
  height: var(--lh-body);
}

:is(.gjs-btn-prim, .gjs-btn-full) {
  color: var(--fg-button);
  background-color: var(--fg-primary);
  height: var(--lh-body);
}

.gjs-category-open, .gjs-block-category.gjs-open, .gjs-sm-sector.gjs-sm-open, .gjs-trait-category.gjs-open {
  border: 0;
}

:is(.gjs-category-title, .gjs-layer-title, .gjs-block-category .gjs-title, .gjs-sm-sector-title, .gjs-trait-category .gjs-title) {
  font-weight: unset;
  background-color: var(--gjs-primary-color);
  border: 0;
}

:is(.gjs-sm-field input, .gjs-clm-select input, .gjs-clm-field input, .gjs-sm-field select, .gjs-clm-select select, .gjs-clm-field select) {
  color: var(--fg-body);
}

:is(.gjs-sm-field select, .gjs-clm-select select, .gjs-clm-field select) {
  border: 1px solid var(--bg-element);
  border-radius: var(--radius);
}

.gjs-field-units :is(.gjs-sm-field select, .gjs-clm-select select, .gjs-clm-field select) {
  border: unset;
  border-radius: unset;
}

.gjs-layer__icon {
  max-height: initial;
}

.gjs-sm-stack #gjs-sm-add {
  width: 20px;
  height: 20px;
  top: -33px;
  font-size: 15px;
  color: var(--fg-button);
  background: var(--fg-secondary);
}

.gjs-field-colorp {
  width: 30px;
}

#gjs-clm-add-tag, .gjs-clm-tags-btn {
  width: 20px;
  height: 20px;
  font-size: 15px;
  border-radius: var(--radius);
  color: var(--fg-button);
  background: var(--fg-secondary);
}

:is(.gjs-sm-layer #gjs-sm-close-layer, .gjs-sm-clear) {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  font-size: 18px;
  border-radius: var(--radius);
  background: var(--fg-danger);
  color: var(--fg-button);
}

.gjs-sm-layer #gjs-sm-move {
  height: 20px;
  width: 20px;
  min-width: unset;
  cursor: grab;
  padding: 0 2.5px;
  border-radius: var(--radius);
  color: var(--fg-button);
  background: var(--fg-primary);
}

:is(.gjs-select option, .gjs-field-select option, .gjs-clm-select option, .gjs-sm-select option, .gjs-fields option, .gjs-sm-unit option) {
  background-color: var(--bg-body);
  color: var(--fg-body);
}

.gjs-editor-cont .sp-container {
  position: fixed !important;
  top: 50vh !important;
  left: calc(100vw - 250px) !important;
  width: 200px !important;
}

.gjs-editor-cont .sp-button-container {
  position: static;
}

.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active) {
  width: var(--form-element-width);
  height: var(--form-element-height);
  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: 400;
  font-size: var(--fs-button);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.02em;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
  /* faux buttons are elements that look like buttons but aren't interactable */
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).small {
  height: 36px;
  font-weight: 500;
  font-size: var(--fs-button-xsm);
  line-height: var(--lh-button-xsm);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).small i {
  font-size: var(--fs-button-xsm) !important;
  margin: 0 4px 0 0 !important;
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active) > span, .gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active) 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: 400;
  user-select: none;
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active) i:is(.fa, .fas, .far, .fal) {
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  font-size: var(--fs-body-sm);
  margin: 0 8px 0;
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active) i:is(.fa, .fas, .far, .fal):first-child {
  margin-left: 0;
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active) i:is(.fa, .fas, .far, .fal):last-child {
  margin-right: 0;
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).main {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  height: 50px;
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).ok {
  background: var(--fg-secondary);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).warn {
  background: var(--fg-accent);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).danger {
  background: var(--fg-danger);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).secondary {
  background: var(--fg-secondary);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).alternate {
  background: var(--fg-alternate);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active):is(:hover, :active, :focus) {
  opacity: 0.8;
  outline: 0;
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active):is(:hover, :active, :focus).ok {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active):is(:hover, :active, :focus).warn {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active):is(:hover, :active, :focus).danger {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active):is(:hover, :active, :focus).secondary {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active):is(:hover, :active, :focus).alternate {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).icon {
  width: calc(var(--form-element-height) - 2px);
  height: calc(var(--form-element-height) - 2px);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).icon i:is(.fa, .fas, .far) {
  margin: 0 0 0 1px;
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).stand-in {
  background: var(--bg-body);
  border: 2px dashed var(--fg-primary);
  color: var(--fg-primary);
  height: var(--form-element-height);
  width: fit-content;
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).stand-in.secondary {
  color: var(--fg-secondary);
  border-color: var(--fg-secondary);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).stand-in.alternate {
  color: var(--fg-alternate);
  border-color: var(--fg-alternate);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).stand-in:is(.accent, .warn) {
  color: var(--fg-accent);
  border-color: var(--fg-accent);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).stand-in:is(.danger, .error) {
  color: var(--fg-danger);
  border-color: var(--fg-danger);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).inverse {
  background: var(--bg-body);
  border: 1px solid var(--fg-primary);
  color: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).inverse:focus {
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).inverse:is(.ok, .secondary) {
  border-color: var(--fg-secondary);
  color: var(--fg-secondary);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).inverse:is(.ok, .secondary):focus {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).inverse.warn {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).inverse.warn:focus {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).inverse.danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).inverse.danger:focus {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).inverse.alternate {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).inverse.alternate:focus {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).inline {
  width: 50px;
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).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);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).subtle span {
  font-family: var(--font-stack-default);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).subtle:is(.forward, .back) i.fa {
  margin: 2px 3px 0 3px;
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).subtle:is(:focus, :hover, :active) {
  outline: 0;
  box-shadow: unset;
  border: none;
  text-decoration: underline;
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).subtle.primary {
  color: var(--fg-primary);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).subtle.secondary, .gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).subtle.ok {
  color: var(--fg-secondary);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).subtle.alternate {
  color: var(--fg-accent);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).subtle.accent, .gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).subtle.warning {
  color: var(--fg-accent);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active).subtle.danger {
  color: var(--fg-danger);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active):is(:disabled, .disabled) {
  color: var(--bg-element);
  background: var(--bg-main);
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active):is(:disabled, .disabled):is(.inverse, .stand-in) {
  opacity: 1;
  border-color: var(--bg-main);
  color: var(--bg-main);
  background: none;
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active):is(:disabled, .disabled).subtle {
  color: var(--bg-main);
  background: none;
  text-decoration: none;
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active):is(.disabled, :disabled, .faux) {
  cursor: default;
  pointer-events: none;
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active):is(.disabled, :disabled, .faux):is(:hover, :active, :focus) {
  opacity: 1;
  outline: 0;
  box-shadow: unset;
}
.gjs-editor-cont :is(.sp-container button, .sp-container button:hover, .sp-container button:active):is(.disabled, :disabled, .faux):is(.inverse, .stand-in):is(:focus, :active, :hover) {
  outline: 0;
  box-shadow: unset;
}

.gjs-editor-cont :is(.sp-cancel, .sp-cancel:hover) {
  top: -22px;
  font-size: 18px;
  right: 0;
  left: unset;
  position: absolute;
  text-decoration: none;
  background: var(--fg-danger);
  color: var(--fg-button) !important;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: unset;
  padding-bottom: 2px;
  border-radius: var(--radius);
}

.gjs-sm-field.gjs-sm-composite {
  background: transparent;
  border-radius: var(--radius);
  border-color: var(--bg-main);
}

.gjs-clm-tags #gjs-clm-checkbox {
  vertical-align: middle;
  cursor: pointer;
  font-size: 9px;
  width: 15px;
  height: 15px;
  color: var(--fg-body);
  margin-top: -12px;
}
.gjs-clm-tags .gjs-clm-tag {
  height: 20px;
  background: var(--bg-element);
  border-radius: var(--radius);
}
.gjs-clm-tags #gjs-clm-close {
  font-size: 20px;
  line-height: 0;
  cursor: pointer;
  background-color: var(--fg-danger);
  color: var(--fg-button);
  border-radius: var(--radius);
  width: 13px;
  height: 13px;
  margin-right: -1px;
}
.gjs-clm-tags #gjs-clm-new {
  color: var(--fg-body);
  border-radius: var(--radius);
  border: 1px solid var(--bg-element);
}

.gjs-field-wrp {
  max-width: 100%;
}

.gjs-field .cameo {
  --form-element-height: 40px;
  --form-element-width: 100%;
  padding: 0 0.25rem 0 0.5rem;
}
.gjs-field .cameo button {
  width: 30px;
  height: 30px;
  margin: 0 0.25rem 0 0;
  text-align: center;
  vertical-align: middle;
  padding: 0;
}
.gjs-field .cameo button i {
  font-size: 15px;
  margin: 0;
}

.gjs-cell {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: flex-start;
}
.gjs-cell > * {
  width: 100%;
  max-width: 100%;
}
.gjs-cell > *.card {
  width: var(--card-width);
}

.gjs-radio-item input:checked + .gjs-radio-item-label {
  background-color: var(--fg-primary);
  color: var(--fg-button);
}

.column-flex {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  height: -webkit-fill-available;
  min-height: 2em;
}
.column-flex > * {
  max-width: 100%;
}

[data-gjs-type=wrapper] img {
  max-width: 100%;
}

.spacer-vertical {
  min-height: auto;
}

.widget-content-metadata-editor {
  display: flex;
  width: 100%;
  height: 100%;
  gap: var(--dashboard-widget-container-padding);
}
@media screen and (max-width: 767px) {
  .widget-content-metadata-editor {
    flex-wrap: wrap;
  }
}
.widget-content-metadata-editor .section-menu {
  background-color: var(--bg-body);
  border-radius: var(--dashboard-widget-border-radius);
  flex-basis: 250px;
  flex-shrink: 0;
  flex-grow: 0;
  padding-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .widget-content-metadata-editor .section-menu {
    flex-basis: 100%;
  }
}
.widget-content-metadata-editor .section-menu h3 {
  margin-bottom: 40px;
  padding: 25px 20px 0;
}
.widget-content-metadata-editor .section-menu .menu-item-container {
  padding: 0 20px;
}
.widget-content-metadata-editor .section-menu .menu-item-container .menu-item {
  color: color-mix(in srgb, var(--fg-body) 50%, transparent);
  font-size: var(--fs-sub);
  font-weight: 400;
  line-height: var(--lh-sub);
  transition: padding var(--anim-step) ease-in-out;
  cursor: pointer;
}
.widget-content-metadata-editor .section-menu .menu-item-container .menu-item.selected {
  color: var(--fg-primary);
  border-left: 2px solid var(--fg-primary);
  padding-left: 20px;
}
.widget-content-metadata-editor .section-menu .menu-item-container .divider {
  width: 100%;
  height: 1px;
  margin: 20px 0;
  background-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
}
.widget-content-metadata-editor .section-menu .menu-item-container:last-child .divider {
  display: none;
}
.widget-content-metadata-editor .section-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--bg-body);
  border-radius: var(--dashboard-widget-border-radius);
}
.widget-content-metadata-editor .section-editor > .tab-container {
  width: 100%;
  margin-top: 14px;
}
.widget-content-metadata-editor .section-editor .tabs .tab.cutout {
  border: 0;
}
.widget-content-metadata-editor .section-editor .section-type {
  max-width: 440px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 60px 36px;
}
@media screen and (max-width: 767px) {
  .widget-content-metadata-editor .section-editor .section-type {
    margin: 0;
    padding: 0;
  }
}
.widget-content-metadata-editor .section-editor .section-type .container-buttons {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
@media screen and (max-width: 767px) {
  .widget-content-metadata-editor .section-editor .section-type .container-buttons {
    gap: 10px;
    padding: 16px;
  }
}
.widget-content-metadata-editor .section-editor .section-type .container-buttons button {
  margin: 0;
  min-width: 130px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .widget-content-metadata-editor .section-editor .section-type .container-buttons button {
    width: 100%;
  }
}
.widget-content-metadata-editor .section-editor .section-type .container-buttons button.selected {
  color: var(--fg-primary);
  border-color: var(--fg-primary);
}
.widget-content-metadata-editor .section-editor .section-type .section-playlist {
  width: 100%;
  margin-top: 40px;
}
.widget-content-metadata-editor .section-editor .section-type .section-playlist h3 {
  font-size: var(--fs-sub);
}
@media screen and (max-width: 767px) {
  .widget-content-metadata-editor .section-editor .section-type .section-playlist {
    margin: 20px 0 0;
    padding: 16px;
  }
}
.widget-content-metadata-editor .section-editor .section-type .section-playlist .playlist-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 222px;
  border: 1px dashed;
  border-radius: var(--radius);
  border-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
  background: var(--bg-dashboard);
}
.widget-content-metadata-editor .section-editor .section-type .section-playlist .playlist-placeholder span {
  font-size: var(--fs-body);
  text-align: center;
}
.widget-content-metadata-editor .section-editor .section-type .section-playlist button {
  width: 100%;
  margin: 40px 0 0;
}
.widget-content-metadata-editor .section-editor .section-type .section-upload {
  width: 100%;
  flex: 1;
  --form-element-width: 100%;
}
@media screen and (max-width: 767px) {
  .widget-content-metadata-editor .section-editor .section-type .section-upload {
    padding: 16px;
  }
}
.widget-content-metadata-editor .section-editor .section-type .section-upload .file-picker {
  margin-top: 26px;
}
.widget-content-metadata-editor .section-editor .section-type .section-upload .file-picker-tabs {
  height: 100%;
  margin: 0;
}
.widget-content-metadata-editor .section-editor .section-type .section-upload > button {
  width: 100%;
  margin: 40px 0 0;
}
.widget-content-metadata-editor .section-editor .section-metadata {
  --form-element-width: 440px;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 767px) {
  .widget-content-metadata-editor .section-editor .section-metadata {
    --form-element-width: 100%;
    padding: 0 16px;
  }
}
.widget-content-metadata-editor .section-editor .section-metadata .tab-container {
  margin-top: 14px;
}
.widget-content-metadata-editor .section-editor .section-metadata .tab-container .notches .notch {
  display: block;
  font-size: var(--fs-body-sm);
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 767px) {
  .widget-content-metadata-editor .section-editor .section-metadata .tab-container .tabs .tab > * {
    width: 100%;
  }
}
.widget-content-metadata-editor .section-editor .section-metadata .section-poster-file > button {
  margin: 40px 0 0;
  width: 100%;
}
.widget-content-metadata-editor .section-editor .section-metadata .section-basic-information {
  margin-top: 40px;
}
.widget-content-metadata-editor .section-editor .section-metadata .section-basic-information > button {
  margin: 40px 0 0;
  width: 100%;
}
.widget-content-metadata-editor .section-editor .section-schedule {
  padding: 40px 16px;
}
@media screen and (max-width: 767px) {
  .widget-content-metadata-editor .section-editor .section-schedule {
    padding: 40px 0;
  }
}
.widget-content-metadata-editor .section-editor .section-schedule .datepicker-footer {
  gap: 0;
}
.widget-content-metadata-editor .section-editor .section-schedule .datepicker-footer > button {
  padding-right: 0;
}
.widget-content-metadata-editor .section-editor .section-playlist {
  --form-element-width: 440px;
  width: var(--form-element-width);
  margin: 40px 16px;
}
.widget-content-metadata-editor .section-editor .section-playlist > button {
  width: 100%;
  margin: 16px 0;
}
.widget-content-metadata-editor .section-editor .section-search-labels {
  --form-element-width: 440px;
  padding: 40px 16px;
}
@media screen and (max-width: 767px) {
  .widget-content-metadata-editor .section-editor .section-search-labels {
    --form-element-width: 100%;
  }
}
.widget-content-metadata-editor .section-editor .section-search-labels h3 {
  font-size: var(--fs-sub);
}
.widget-content-metadata-editor .section-editor .section-search-labels .divider {
  width: 100%;
  height: 1px;
  background-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
  margin: 25px 0;
}
.widget-content-metadata-editor .section-editor .section-search-labels .container-add-label {
  display: flex;
  align-items: flex-end;
  padding: 20px;
  border: 1px solid;
  border-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
  border-radius: var(--radius);
  width: var(--form-element-width);
  gap: 8px;
}
.widget-content-metadata-editor .section-editor .section-search-labels .container-add-label .text-input {
  margin: 0;
  flex-grow: 1;
  width: auto;
}
.widget-content-metadata-editor .section-editor .section-search-labels .container-add-label .text-input input {
  width: 100%;
}
.widget-content-metadata-editor .section-editor .section-search-labels .container-add-label > button {
  flex-shrink: 0;
  margin: 0;
  width: var(--form-element-height);
  height: var(--form-element-height);
}
.widget-content-metadata-editor .section-editor .section-search-labels .labels-container {
  padding-top: 20px;
  max-width: var(--form-element-width);
}
.widget-content-metadata-editor .section-editor .section-search-labels .entries {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  gap: 10px;
  padding: 0;
  margin: 0;
  justify-content: stretch;
  align-items: center;
  max-height: 240px;
  overflow: auto;
}
.widget-content-metadata-editor .section-editor .section-search-labels .label {
  border-radius: var(--radius);
  color: var(--fg-primary);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  width: auto;
  flex-shrink: 1;
  flex-grow: 1;
  text-align: center;
  transition: all var(--anim-step) ease;
  font-size: var(--fs-body-sm);
  /** base colors */
  background-color: color-mix(in srgb, var(--fg-primary) 10%, transparent);
}
.widget-content-metadata-editor .section-editor .section-search-labels .label.selected {
  background-color: color-mix(in srgb, var(--fg-secondary) 10%, transparent);
  color: var(--fg-secondary);
}

.widget-favorites {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.widget-favorites > h3 {
  margin-top: 0;
}
.widget-favorites .entries {
  width: 100%;
  margin: 0 auto;
  max-height: 370px;
  overflow: auto;
  flex: 1;
  padding-top: 6px;
}
@media screen and (max-width: 767px) {
  .widget-favorites .entries {
    max-height: 322px;
  }
}
.widget-favorites .entries .cameo {
  border-color: color-mix(in srgb, var(--fg-body) 50%, transparent);
  width: 100%;
}
.widget-favorites .entries .cameo.favorite {
  background-color: var(--bg-zebra) !important;
}
.widget-favorites .entries .cameo.favorite:nth-child(even) {
  background-color: var(--bg-element) !important;
}
.widget-favorites .entries .cameo .send-outreach-icon i:before {
  margin-left: 2px;
}
.widget-favorites .page-break {
  margin: 14px 0;
}
.widget-favorites > button {
  margin: 0;
  width: 100%;
}

.widget-outreach-history-simple {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.widget-outreach-history-simple > h3 {
  margin-top: 0;
}
.widget-outreach-history-simple .table-container {
  flex: 1;
  max-height: 370px;
}
.widget-outreach-history-simple table th, .widget-outreach-history-simple table td {
  padding: 10px 10px 10px 0;
}
.widget-outreach-history-simple table th:nth-child(2), .widget-outreach-history-simple table td:nth-child(2) {
  width: 6.5rem;
}
.widget-outreach-history-simple table thead th {
  border-top: 0;
  padding-top: 0;
  padding-bottom: 8px;
}
.widget-outreach-history-simple table .recipient-list {
  padding: 0;
  flex-wrap: nowrap;
}
.widget-outreach-history-simple table .recipient-list .recipient {
  font-size: var(--fs-body-sm);
}
.widget-outreach-history-simple .page-break {
  margin: 14px 0;
}
.widget-outreach-history-simple > button {
  width: 100%;
  margin: 0;
}

.widget-review {
  --form-element-width: 440px;
  max-width: var(--form-element-width);
  width: 100%;
}
.widget-review .key-value-container {
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 0;
}
.widget-review .key-value-container .label, .widget-review .key-value-container .value {
  font-size: var(--fs-body-sm);
  font-weight: 400;
  color: var(--fg-body);
  line-height: 18px;
}
.widget-review .key-value-container .value {
  text-align: start;
  margin-left: 4rem;
}
.widget-review .key-value-container.uuid .value {
  margin-left: 1rem;
}
.widget-review .key-value-container:not(:last-child) {
  border-bottom: 1px solid;
  border-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
}
.widget-review .key-value-container .label-collection {
  width: 100%;
  max-height: 200px;
  overflow: auto;
}

.widget-sidebar-view {
  display: flex;
  width: 100%;
  height: 100%;
  gap: var(--dashboard-widget-container-padding);
}
@media screen and (max-width: 767px) {
  .widget-sidebar-view {
    flex-wrap: wrap;
  }
}
.widget-sidebar-view .section-menu {
  background-color: var(--bg-body);
  border-radius: var(--dashboard-widget-border-radius);
  flex-basis: 250px;
  flex-shrink: 0;
  flex-grow: 0;
  padding-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .widget-sidebar-view .section-menu {
    flex-basis: 100%;
  }
}
.widget-sidebar-view .section-menu h3 {
  margin-bottom: 40px;
  padding: 0 20px;
}
.widget-sidebar-view .section-menu .menu-item-container {
  padding: 0 20px;
}
.widget-sidebar-view .section-menu .menu-item-container .menu-item {
  color: color-mix(in srgb, var(--fg-body) 50%, transparent);
  font-size: var(--fs-sub);
  font-weight: 400;
  line-height: var(--lh-sub);
  transition: padding var(--anim-step) ease-in-out;
  cursor: pointer;
}
.widget-sidebar-view .section-menu .menu-item-container .menu-item.selected {
  color: var(--fg-primary);
  border-left: 2px solid var(--fg-primary);
  padding-left: 20px;
}
.widget-sidebar-view .section-menu .menu-item-container .divider {
  width: 100%;
  height: 1px;
  margin: 20px 0;
  background-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
}
.widget-sidebar-view .section-menu .menu-item-container:last-child .divider {
  display: none;
}
.widget-sidebar-view .section-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--bg-body);
  border-radius: var(--dashboard-widget-border-radius);
}
.widget-sidebar-view .section-editor .tabs .tab.cutout {
  border: 0;
}

.widget-player-customization .tab-container {
  --tab-width: var(--form-element-width);
}
.widget-player-customization #player-defaults {
  min-height: 326px;
}

.widget-add-content-simple {
  --form-element-width: 100%;
}
.widget-add-content-simple h3 {
  margin-top: 0;
}
.widget-add-content-simple .upload-type-buttons-container {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.widget-add-content-simple .upload-type-buttons-container button {
  width: 100%;
  margin: 0;
  border-color: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
.widget-add-content-simple .upload-type-buttons-container button.selected {
  border-color: var(--fg-primary);
  color: var(--fg-primary);
}
.widget-add-content-simple .toggle {
  margin: 14px 0 20px;
}
.widget-add-content-simple .playlist-container .meta-list {
  max-height: 172px;
  overflow: auto;
}
.widget-add-content-simple .playlist-container .meta-list ol {
  margin: 0;
}
.widget-add-content-simple .file-picker .cutout {
  height: 146px;
}
.widget-add-content-simple .file-picker .tabs .help {
  margin-bottom: 6px;
}
.widget-add-content-simple .page-break {
  margin: 14px 0;
}
.widget-add-content-simple .submit-button, .widget-add-content-simple .select-item-button {
  margin: 0;
  width: 100%;
}

/* 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: 700px;
  --modal-margin: 22px;
  --footer-padding: 16px;
  --modal-pane-width: calc(var(--modal-width) * 0.5);
  --modal-side-padding: 56px;
  --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: 100dvh;
    --modal-side-padding: 1rem;
    height: var(--modal-body-height) !important;
    width: var(--modal-width) !important;
    max-height: initial;
    max-width: initial;
  }
}
.dialog .header {
  width: 100%;
  overflow: hidden;
  padding: 3rem 1rem 1rem;
  background-color: var(--bg-body);
  border-radius: var(--radius) var(--radius) 0 0;
  text-overflow: ellipsis;
  flex-grow: 0;
}
.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-body);
  font-size: var(--fs-h3);
  font-weight: 400;
  text-align: start;
  padding: 24px 40px;
}
.dialog > :is(.body, .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 > :is(.body, .content) {
    min-height: initial;
    height: auto;
    align-items: stretch;
    justify-content: flex-start;
  }
}
.dialog > :is(.body, .content).body {
  padding: 1rem;
}
.dialog > :is(.body, .content) .body {
  overflow: auto;
  padding: 0 var(--modal-side-padding) 2rem;
}
@media screen and (max-width: 767px) {
  .dialog > :is(.body, .content) .body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
}
.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);
}
.dialog .footer {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  width: 100%;
  padding: var(--footer-padding) var(--modal-side-padding);
  min-height: var(--fs-body);
  background: var(--bg-body);
  border-radius: 0 0 var(--radius) var(--radius);
  flex-grow: 0;
}
.dialog .footer .buttons {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin: 0;
}
.dialog .footer .buttons > button {
  margin: 0;
  min-width: 136px;
}
.dialog .footer > button {
  min-width: 100px;
}
.dialog .footer a {
  width: var(--form-element-width);
  height: var(--form-element-height);
  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: 400;
  font-size: var(--fs-button);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.02em;
  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.small {
  height: 36px;
  font-weight: 500;
  font-size: var(--fs-button-xsm);
  line-height: var(--lh-button-xsm);
}
.dialog .footer a.small i {
  font-size: var(--fs-button-xsm) !important;
  margin: 0 4px 0 0 !important;
}
.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: 400;
  user-select: none;
}
.dialog .footer a i:is(.fa, .fas, .far, .fal) {
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  font-size: var(--fs-body-sm);
  margin: 0 8px 0;
}
.dialog .footer a i:is(.fa, .fas, .far, .fal):first-child {
  margin-left: 0;
}
.dialog .footer a i:is(.fa, .fas, .far, .fal):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 0 1px;
}
.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: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
.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 3px 0 3px;
}
.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 .header {
  padding: 24px var(--modal-side-padding);
  border-bottom: 1px solid rgba(16, 44, 128, 0.1);
}
.dialog.with-header .header h1, .dialog.with-header .header h2, .dialog.with-header .header h3 {
  padding: 0;
  margin: 0;
}
.dialog.with-header .content {
  padding-top: 2rem;
  border-radius: 0 0 var(--radius) var(--radius);
}
@media screen and (max-width: 767px) {
  .dialog:not(.with-header) .content {
    padding-top: 3rem;
    border-radius: 0;
  }
}
.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 {
    padding-top: 3rem;
  }
}
.dialog:not(.with-header).with-footer .content {
  padding-top: 2rem;
}
.dialog:not(.with-footer).with-header .content {
  padding-bottom: 1rem;
}
.dialog.no-body.with-header.with-footer .header {
  border-bottom: 0;
}
@media screen and (max-width: 767px) {
  .dialog.no-body.with-header.with-footer .header {
    flex-grow: 1;
    align-items: flex-end;
  }
  .dialog.no-body.with-header.with-footer .footer {
    flex-grow: 1;
    align-items: flex-start;
  }
}
@media screen and (max-width: 767px) {
  .dialog :is(.header, .footer) {
    flex-grow: 0;
  }
  .dialog .header {
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .dialog :is(.content, .body) {
    flex-grow: 1;
    justify-content: flex-start;
  }
  .dialog .footer {
    align-items: flex-start;
  }
}
@media screen and (max-width: 767px) {
  .dialog :is(.header, .content, .body, .footer) {
    border-radius: 0;
  }
  .dialog .body .header {
    padding-top: 0;
  }
}
.dialog.warn :is(.header, .body) {
  color: var(--fg-warn);
}
.dialog.danger :is(.header, .body) {
  color: var(--fg-danger);
}
@media screen and (max-width: 767px) {
  .dialog :is(form, .bound-modal-form) {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    flex-grow: 1;
  }
  .dialog :is(form, .bound-modal-form) .field:not(.toggle, .phone-number) label {
    flex-grow: 0;
    display: block;
    width: 100%;
  }
  .dialog :is(form, .bound-modal-form) :is(textarea, .textarea) {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
}

/** list select type dialog base styles */
#modal > .dialog.list {
  /* constrain width and let inner elements flex */
  --modal-width: 800px;
  --inner-padding: 46px;
  width: var(--modal-width) !important;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.list {
    width: 100% !important;
    --inner-padding: 1rem;
  }
}
#modal > .dialog.list .content {
  max-height: calc(8px + var(--modal-body-height));
  padding-top: 2rem;
}
#modal > .dialog.list .body {
  height: var(--modal-body-height);
  padding: 0 var(--inner-padding);
  padding-bottom: var(--inner-padding);
}
@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 .body .tab-container {
  margin-bottom: 20px;
}
#modal > .dialog.list .body .search {
  margin-bottom: 20px;
}
#modal > .dialog.list .body .search .text-input {
  margin: 0;
}
#modal > .dialog.list .footer {
  padding: var(--footer-padding);
  padding-right: var(--inner-padding);
}
#modal > .dialog.list .footer button {
  margin: 0;
}
#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);
}
#modal > .dialog.list .entries > *:not(.favorite), #modal > .dialog.list .entries > *:not(.selected) {
  background-color: var(--bg-zebra);
}
#modal > .dialog.list .entries > *:not(.favorite):nth-child(even), #modal > .dialog.list .entries > *:not(.selected):nth-child(even) {
  background-color: var(--bg-element);
}
#modal > .dialog.list .entries > *:not(.favorite):nth-child(even):hover, #modal > .dialog.list .entries > *:not(.selected):nth-child(even):hover {
  background-color: var(--bg-hover);
}
#modal > .dialog.list .entries > *:hover {
  background-color: var(--bg-hover);
}
#modal > .dialog.list .entries > *:first-child {
  margin-top: 0;
}
#modal > .dialog.list .entries > *:last-child {
  margin-bottom: 0;
}
#modal > .dialog.list.with-header .header {
  flex-wrap: wrap;
  padding: 24px var(--inner-padding);
  border-bottom: 1px solid;
  border-color: color-mix(in srgb, var(--fg-body) 20%, transparent);
}
#modal > .dialog.list.with-header .header h3 {
  padding: 0;
}
#modal > .dialog.list.with-header .header .search button {
  margin: 0;
}

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

#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, #flyout > .flyout span.fab {
  right: 0;
  top: 0;
  z-index: 999;
  mix-blend-mode: difference;
}
#modal > .dialog span.fab:not(.back) i.fa, #flyout > .flyout 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, #flyout > .flyout span.fab.back {
  right: auto;
  left: -58px;
}
#modal > .dialog span.fab.back i.fa, #flyout > .flyout span.fab.back i.fa {
  color: var(--bg-body);
  background: var(--fg-accent);
}

/** manage grants dialog */
#modal > .dialog.manage-grants {
  --modal-width: 900px;
  width: var(--modal-width);
}
@media screen and (max-width: 767px) {
  #modal > .dialog.manage-grants {
    --modal-width: 100%;
  }
}
#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;
}
@media screen and (max-width: 767px) {
  .advanced-message-search .header {
    --fab-header-spacing: 1rem;
  }
}
.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: 100%;
    border-radius: 0;
    padding-right: 0;
    padding-left: 0;
  }
}
#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 .content .header {
  padding-top: 0;
}
#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%;
  }
}
#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;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.advanced-search.advanced-search-users form {
    grid-template-columns: 1fr;
  }
}
#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%;
}

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

.dialog.chat-user-list-dialog .header {
  padding-bottom: 0.5rem !important;
}
@media screen and (max-width: 767px) {
  .dialog.chat-user-list-dialog .header {
    --fab-header-spacing: 1rem;
    padding-bottom: 2rem !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-add-user-bulk .body .modal-content-container .text-container {
  justify-content: flex-start;
}
#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: 400;
  line-height: var(--lh-modal-body);
  margin: 0;
  text-align: center;
}
#modal > .dialog.common-faq .body .modal-content-container p.title {
  font-weight: 400;
  font-size: var(--fs-h3);
}
#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 {
  min-width: 500px;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.confirm {
    --modal-width: 100%;
    width: var(--modal-width);
    min-width: var(--modal-width);
  }
}
#modal > .dialog.confirm:not(.danger) .header {
  color: var(--fg-primary);
}
#modal > .dialog.confirm .content .body p {
  margin: 0.5rem 0;
  font-size: 1.2rem;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.confirm:not(.with-header) .content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: flex-start;
  }
  #modal > .dialog.confirm:not(.with-header) .content .body {
    flex-grow: 0;
  }
}
#modal > .dialog.confirm .footer {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: var(--footer-padding);
  border-color: color-mix(in srgb, var(--fg-body) 20%, transparent);
}
#modal > .dialog.confirm .footer button, #modal > .dialog.confirm .footer a {
  margin: var(--form-element-margin) 0.25em;
  min-width: 136px;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.confirm {
    width: inherit;
    min-width: inherit;
  }
  #modal > .dialog.confirm .header {
    flex-grow: 1;
    align-items: flex-end;
  }
  #modal > .dialog.confirm .footer {
    flex-grow: 1;
    align-items: flex-start;
    flex-wrap: nowrap;
  }
  #modal > .dialog.confirm .content {
    flex-grow: 0;
    align-items: center;
    justify-content: center;
  }
}

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

.date-picker-dialog, .calendar-picker {
  --modal-side-padding: 76px;
}
.date-picker-dialog .content, .calendar-picker .content {
  padding: 32px 0 !important;
  max-height: unset !important;
}
.date-picker-dialog .content .body, .calendar-picker .content .body {
  padding: 0 var(--modal-side-padding);
}
@media screen and (max-width: 767px) {
  .date-picker-dialog .content .body, .calendar-picker .content .body {
    padding: 0 1rem;
  }
}
.date-picker-dialog .date-inputs, .calendar-picker .date-inputs {
  --form-element-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.date-picker-dialog .date-inputs .date-row, .calendar-picker .date-inputs .date-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}
.date-picker-dialog .date-inputs .date-row .text-input, .calendar-picker .date-inputs .date-row .text-input {
  width: 100%;
}
.date-picker-dialog .date-inputs .control-icon, .calendar-picker .date-inputs .control-icon {
  color: color-mix(in srgb, var(--fg-body) 40%, transparent);
}
.date-picker-dialog .datepicker-header, .calendar-picker .datepicker-header {
  display: flex;
  align-items: center;
  padding: 26px 0 4px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--bg-gray-3);
}
.date-picker-dialog .datepicker-header button, .calendar-picker .datepicker-header button {
  margin: 0;
  background: transparent;
}
.date-picker-dialog .datepicker-header button i, .calendar-picker .datepicker-header button i {
  color: var(--bg-gray-2);
}
.date-picker-dialog .datepicker-header .current-month, .calendar-picker .datepicker-header .current-month {
  width: 100%;
  text-align: center;
  color: var(--bg-gray-1);
  font-weight: 400;
  font-size: var(--fs-body-sm);
}
.date-picker-dialog .datepicker-body table thead th, .calendar-picker .datepicker-body table thead th {
  font-weight: 400;
}
.date-picker-dialog .datepicker-body table tbody tr, .calendar-picker .datepicker-body table tbody tr {
  border-bottom: 0;
}
.date-picker-dialog .datepicker-body table tbody td, .calendar-picker .datepicker-body table tbody td {
  width: 64px;
  height: 64px;
  padding: 0;
}
@media screen and (max-width: 767px) {
  .date-picker-dialog .datepicker-body table tbody td, .calendar-picker .datepicker-body table tbody td {
    width: 51px;
    height: 51px;
  }
}
.date-picker-dialog .datepicker-body table tbody td .item, .calendar-picker .datepicker-body table tbody td .item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: inherit;
  height: inherit;
  color: var(--fg-body);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  cursor: pointer;
}
.date-picker-dialog .datepicker-body table tbody td.selected-range, .calendar-picker .datepicker-body table tbody td.selected-range {
  background-color: color-mix(in srgb, var(--fg-primary) 30%, transparent);
}
.date-picker-dialog .datepicker-body table tbody td.selected-range .item, .calendar-picker .datepicker-body table tbody td.selected-range .item {
  color: var(--fg-button);
}
.date-picker-dialog .datepicker-body table tbody td.first-item-no-range .item, .calendar-picker .datepicker-body table tbody td.first-item-no-range .item {
  background-color: var(--fg-primary);
  border-radius: 100%;
  color: var(--fg-button);
}
.date-picker-dialog .datepicker-body table tbody td.first-item-in-range, .calendar-picker .datepicker-body table tbody td.first-item-in-range {
  background: linear-gradient(to left, rgba(18, 53, 143, 0.3) 50%, transparent 50%);
}
.date-picker-dialog .datepicker-body table tbody td.first-item-in-range .item, .calendar-picker .datepicker-body table tbody td.first-item-in-range .item {
  background-color: var(--fg-primary);
  border-radius: 100%;
  color: var(--fg-button);
}
.date-picker-dialog .datepicker-body table tbody td.last-item-in-range, .calendar-picker .datepicker-body table tbody td.last-item-in-range {
  background: linear-gradient(to right, rgba(18, 53, 143, 0.3) 50%, transparent 50%);
}
.date-picker-dialog .datepicker-body table tbody td.last-item-in-range .item, .calendar-picker .datepicker-body table tbody td.last-item-in-range .item {
  background-color: var(--fg-primary);
  border-radius: 100%;
  color: var(--fg-button);
}
.date-picker-dialog .datepicker-footer, .calendar-picker .datepicker-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  gap: 1rem;
}
.date-picker-dialog .datepicker-footer button, .calendar-picker .datepicker-footer button {
  margin: 0;
}
.date-picker-dialog .datepicker-footer .datepicker-controls-right, .calendar-picker .datepicker-footer .datepicker-controls-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.datepicker-input-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: var(--form-element-width);
  height: var(--form-element-height);
  padding: var(--form-element-padding);
  outline: none;
  font-weight: 400;
  font-size: var(--fs-body);
  border: 0;
  border-radius: var(--form-element-radius);
  background: var(--bg-dashboard);
  color: var(--fg-body);
  transition: border-color var(--anim-step) ease;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-width: var(--form-element-width);
  width: auto;
  white-space: nowrap;
}
.datepicker-input-container.warn, .datepicker-input-container.invalid, .datepicker-input-container.danger {
  border-color: var(--fg-danger);
}
.datepicker-input-container::placeholder {
  color: color-mix(in srgb, var(--fg-body) 50%, transparent);
}
.datepicker-input-container:focus, .datepicker-input-container:focus-within, .datepicker-input-container:hover, .datepicker-input-container:active {
  outline: none;
  border-color: var(--bg-main);
}
.datepicker-input-container:disabled, .datepicker-input-container.disabled {
  border-color: var(--bg-main);
  background: var(--bg-element);
  color: var(--bg-main);
}
.datepicker-input-container .recipient {
  animation: fade-in-opacity 0.5s ease;
}
.datepicker-input-container .datepicker-value {
  overflow: hidden;
  text-overflow: ellipsis;
}
.datepicker-input-container .placeholder-label {
  color: color-mix(in srgb, var(--fg-body) 50%, transparent);
}
.datepicker-input-container .clear-date {
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .dm-thread-select {
    --fab-header-spacing: 1rem;
  }
  .dm-thread-select .header {
    flex-wrap: wrap;
  }
  .dm-thread-select .header span {
    text-align: center;
  }
}
.dm-thread-select button.primary {
  margin-top: 1em;
}

/** modal for editing a submitted answer in an evaluation */
@media screen and (min-width: 768px) {
  #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;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.edit-answer textarea {
    height: 100%;
    flex-grow: 1;
  }
}
#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;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.edit-answer .content {
    padding: 0 1em;
  }
  #modal > .dialog.edit-answer .content .body {
    padding: 0;
  }
}

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

.embed-code-dialog .code-body {
  white-space: pre-wrap;
  word-break: break-word;
  color: color-mix(in srgb, var(--fg-body) 70%, transparent);
  font-size: var(--fs-body-sm);
  border: 1px solid var(--bg-element);
  border-radius: var(--radius);
  padding: 1rem;
  width: 608px;
}
.embed-code-dialog .code-body.loading {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .embed-code-dialog .code-body {
    width: 100%;
  }
}

@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;
}
@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);
    padding: 35px 0;
  }
}
#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: 640px;
    width: var(--modal-width);
  }
}
#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: 28px;
  width: 100%;
}
#modal > .dialog.file-url .body p {
  margin: 8px 0 0;
  font-size: var(--fs-h4);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-align: center;
}
#modal > .dialog.file-url .body p:first-child {
  margin-top: 20px;
}

/** 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;
  width: 100%;
}
#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 {
  --modal-width: 800px;
  width: var(--modal-width);
}
@media screen and (max-width: 767px) {
  #modal > .dialog.group {
    width: 100%;
  }
}
#modal > .dialog.group .content .body .cameo {
  width: 100%;
}

#modal > .dialog.label-select {
  --modal-width: 660px;
  --modal-side-padding: 80px;
  width: var(--modal-width);
}
@media screen and (max-width: 767px) {
  #modal > .dialog.label-select {
    --modal-width: 100%;
  }
}
#modal > .dialog.label-select .header {
  padding-top: 34px;
  padding-bottom: 34px;
  border-bottom: 1px solid;
  border-color: color-mix(in srgb, var(--fg-body) 20%, transparent);
}
#modal > .dialog.label-select .header h3 {
  color: var(--fg-body);
  font-size: 22px;
  line-height: 20px;
  text-align: start;
  font-weight: 400;
  margin-bottom: 0;
}
#modal > .dialog.label-select .content {
  padding-top: 30px;
}
#modal > .dialog.label-select .body {
  min-height: auto;
  max-height: var(--modal-body-height);
  padding-bottom: 3rem;
}
#modal > .dialog.label-select .body .search.add {
  margin-top: 34px;
  align-items: flex-end;
}
#modal > .dialog.label-select .body .search.add .text-input {
  margin: 0;
}
#modal > .dialog.label-select .body .search.add button {
  margin: 0;
}
#modal > .dialog.label-select .entries {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  gap: 10px;
  padding: 0;
  margin: 0;
  justify-content: stretch;
  align-items: center;
}
#modal > .dialog.label-select .label {
  border-radius: var(--radius);
  color: var(--fg-primary);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  width: auto;
  flex-shrink: 1;
  flex-grow: 1;
  text-align: center;
  transition: all var(--anim-step) ease;
  font-size: var(--fs-body);
  font-weight: 400;
  /** base colors */
  background-color: color-mix(in srgb, var(--fg-primary) 10%, transparent);
  border: 1px solid var(--fg-primary);
}
#modal > .dialog.label-select .label.selected {
  background-color: color-mix(in srgb, var(--fg-secondary) 10%, transparent);
  color: var(--fg-secondary);
  border: 1px solid var(--fg-secondary);
}
@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 {
  --modal-width: 500px;
  --form-element-width: 100%;
  width: var(--modal-width);
}
@media screen and (max-width: 767px) {
  #modal > .dialog.link-select {
    --modal-width: 100%;
  }
}
#modal > .dialog.link-select .body form {
  margin-top: 1.5rem;
  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;
  width: 100%;
}
@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;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.login-information-dialog p {
    margin: 0 auto;
  }
  #modal > .dialog.login-information-dialog .header {
    flex-grow: 0;
  }
  #modal > .dialog.login-information-dialog .footer {
    flex-grow: 1;
    align-items: center;
  }
}

#modal > .dialog.login-form {
  --modal-width: 540px;
  width: var(--modal-width);
}
@media screen and (max-width: 767px) {
  #modal > .dialog.login-form {
    width: 100%;
  }
}
#modal > .dialog.login-form #login-form {
  width: var(--form-element-width);
  margin: 0 auto;
}
#modal > .dialog.login-form #forgot-password {
  margin-top: 22px;
}
#modal > .dialog.login-form #sign-up {
  margin-top: 10px;
}

/** 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: 800px;
  width: var(--modal-width);
  animation-fill-mode: forwards;
  animation-timing-function: ease;
  animation-duration: calc(2 * var(--anim-step));
}
#modal > .dialog.menu-entry-edit > * {
  --form-element-width: 100%;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.menu-entry-edit {
    --modal-width: 100%;
  }
}
#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));
}
@media screen and (max-width: 767px) {
  #modal > .dialog.menu-entry-edit .header {
    padding-right: 1rem;
  }
}
#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);
  width: auto;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.menu-entry-edit .header .spacer {
    display: none;
  }
}
#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;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.menu-entry-edit .body .text-input {
    width: 100%;
  }
}
#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-grow: 1;
  flex-shrink: 0;
  padding-top: 24px;
  flex-basis: 100%;
}
#modal > .dialog.menu-entry-edit .body #menu-entry-edit .text-input, #modal > .dialog.menu-entry-edit .body #menu-entry-links .text-input {
  width: 100%;
}
#modal > .dialog.menu-entry-edit .body #menu-entry-edit p, #modal > .dialog.menu-entry-edit .body #menu-entry-links p {
  margin: 6px 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);
  outline: none;
  font-weight: 400;
  font-size: var(--fs-body);
  border: 0;
  border-radius: var(--form-element-radius);
  background: var(--bg-dashboard);
  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: color-mix(in srgb, var(--fg-body) 50%, transparent);
}
#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 .recipient {
  animation: fade-in-opacity 0.5s ease;
}
#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;
}

body.modal-open #app-outreach-history #modal {
  display: flex;
  padding: 20px;
}

.outreach-message-details-dialog {
  --modal-width: 842px;
  width: var(--modal-width);
  overflow: hidden;
  border-radius: var(--radius);
}
@media screen and (max-width: 767px) {
  .outreach-message-details-dialog {
    --modal-width: 100%;
    height: auto !important;
  }
}
.outreach-message-details-dialog .fab {
  right: 20px !important;
  height: 75px;
  display: flex;
  align-items: center;
}
.outreach-message-details-dialog .fab i {
  color: var(--fg-body) !important;
}
.outreach-message-details-dialog .header {
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--fg-body);
  padding: 25px 46px;
  border-bottom: 1px solid;
  border-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
}
@media screen and (max-width: 767px) {
  .outreach-message-details-dialog .header {
    font-size: var(--fs-h4);
    padding: 25px 20px;
    justify-content: flex-start;
  }
}
.outreach-message-details-dialog .content {
  padding: 0 !important;
}
.outreach-message-details-dialog .body {
  padding: 0 !important;
}
.outreach-message-details-dialog .outreach-message-details-body {
  padding: 24px 46px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
@media screen and (max-width: 767px) {
  .outreach-message-details-dialog .outreach-message-details-body {
    padding: 22px 20px;
  }
}
.outreach-message-details-dialog .outreach-message-details-body .key-value-container {
  display: flex;
  align-items: start;
  margin: 0;
}
.outreach-message-details-dialog .outreach-message-details-body .key-value-container .key {
  color: #848C98;
  font-size: var(--fs-body-sm);
  font-weight: 400;
  text-align: end;
  width: 58px;
}
.outreach-message-details-dialog .outreach-message-details-body .key-value-container .value {
  color: var(--fg-body);
  font-size: var(--fs-body-sm);
  font-weight: 400;
  white-space: pre-line;
}

.outreach-edit-default-message-dialog {
  width: var(--modal-width);
}
.outreach-edit-default-message-dialog #edit-default-message-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/** styles specific to content dialogs */
#modal > .dialog.preview-content {
  --modal-body-height: 600px;
  --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;
  padding: 0;
}
#modal > .dialog.preview-content .body {
  display: flex;
  flex-direction: row;
  height: 100%;
  padding: 0;
}
#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: 400;
  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: 2rem 1rem 2rem 2rem;
  overflow: hidden;
  width: var(--poster-width);
  border-right: 1px solid var(--bg-element);
}
#modal > .dialog.preview-content .poster-pane img.poster {
  border-radius: var(--radius);
  width: 100%;
  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: 2rem 2rem 2rem 1rem;
  border-left: 1px solid var(--bg-element);
  --item-height: 41px;
}
#modal > .dialog.preview-content .list-pane .cameo-list-select-item {
  width: 100%;
}
#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: 2.4rem 0 1rem;
}
#modal > .dialog.preview-content .info-pane .info-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  padding: 0 1rem;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.preview-content .info-pane .info-content {
    padding: 0;
  }
}
#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: 1rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--bg-element);
}
#modal > .dialog.preview-content .info-pane .info-footer .buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
#modal > .dialog.preview-content .info-pane .info-footer .buttons.right-aligned {
  justify-content: flex-end;
  padding-right: 1rem;
}
#modal > .dialog.preview-content .info-pane .info-footer .buttons button {
  margin: 0;
}
#modal > .dialog.preview-content .info-pane .info-footer .buttons button:not(.back) {
  min-width: 136px;
}
#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: 100dvh;
  }
  #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: flex;
    padding: 0 1rem;
    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;
    padding-top: 44px;
  }
  #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: absolute;
    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.recipient-selection-dialog .content {
  height: calc(var(--modal-body-height) + 1rem);
}
#modal > .dialog.recipient-selection-dialog .content .body {
  padding: 0 50px 1.5rem;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.recipient-selection-dialog .content .body {
    padding: 0 1rem 1.5rem;
    display: block;
    margin: 1rem 0;
  }
}
#modal > .dialog.recipient-selection-dialog .content .body .multi-toggle {
  margin: 0 0 1rem;
}
#modal > .dialog.recipient-selection-dialog .content .body .search {
  margin-bottom: 1rem;
}
#modal > .dialog.recipient-selection-dialog .content .body form button {
  margin-top: 1rem;
}
#modal > .dialog.recipient-selection-dialog .content .body .recipients-selection-body {
  min-width: var(--form-element-width);
}
#modal > .dialog.recipient-selection-dialog .content .body .recipients-selection-body .recipients .disabled {
  pointer-events: all;
}

#modal > .dialog.session-expired-modal {
  --modal-width: 600px;
  --modal-side-padding: 60px;
  width: var(--modal-width);
}
@media screen and (max-width: 767px) {
  #modal > .dialog.session-expired-modal {
    --modal-width: 100%;
  }
}
#modal > .dialog.session-expired-modal p {
  margin: 1rem 0;
}
#modal > .dialog.session-expired-modal .footer .buttons > button {
  min-width: 178px;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.session-expired-modal p {
    margin: 0 auto;
  }
  #modal > .dialog.session-expired-modal .content {
    flex-grow: 0;
  }
  #modal > .dialog.session-expired-modal .footer {
    flex-grow: 1;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  #modal > .dialog.session-expired-modal .footer .buttons {
    flex-wrap: wrap;
  }
  #modal > .dialog.session-expired-modal .footer .buttons button {
    width: 100%;
  }
}

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

@media screen and (min-width: 768px) {
  #modal > .dialog.rich-text-editor {
    --modal-width: 90%;
    --modal-body-height: 90vh;
    width: 100%;
  }
}
#modal > .dialog.rich-text-editor .bound-rich-text-editor {
  padding: 0.25rem 0;
}
#modal > .dialog.rich-text-editor .rte-element {
  height: calc(var(--modal-body-height) - 100px - 4em);
}
#modal > .dialog.rich-text-editor .rte-element .ProseMirror {
  height: 100%;
  overflow: auto;
  border-color: var(--bg-element);
}
@media screen and (max-width: 767px) {
  #modal > .dialog.rich-text-editor .button-group {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  #modal > .dialog.rich-text-editor .button-group :is(.spacer, .separator) {
    display: none;
  }
}

/**
 * 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);
}
#modal > .dialog.assessment-question .justified {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  grid-column: span 2;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.assessment-question .justified {
    grid-column: span 1;
  }
}
@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%;
}

/** question-type-select dialog */
#modal > .dialog.question-type-select {
  --modal-width: 806px;
  width: var(--modal-width);
}
@media screen and (max-width: 767px) {
  #modal > .dialog.question-type-select {
    --modal-width: 100%;
  }
}
#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;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.question-type-select .entries {
    flex-wrap: wrap;
  }
}
#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.02em;
  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);
}
@media screen and (max-width: 767px) {
  #modal > .dialog.question-multiple-choice {
    --modal-width: 100%;
    --modal-body-height: 100%;
  }
}
#modal > .dialog.question-multiple-choice .content {
  padding-top: 19px;
  padding-left: calc(69px - 1rem);
  padding-right: calc(69px - 1rem);
}
@media screen and (max-width: 767px) {
  #modal > .dialog.question-multiple-choice .content {
    padding-left: 0;
    padding-right: 0;
  }
}
#modal > .dialog.question-multiple-choice .body form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex-direction: column;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.question-multiple-choice .body form {
    grid-template-columns: 1fr;
  }
}
#modal > .dialog.question-multiple-choice .body form .textarea {
  grid-column: span 2;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.question-multiple-choice .body form .textarea {
    grid-column: span 1;
  }
}
#modal > .dialog.question-multiple-choice .body form > button {
  grid-column: span 2;
  margin-bottom: 29px;
  margin-top: 26px;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.question-multiple-choice .body form > button {
    grid-column: span 1;
  }
}
#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;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.question-multiple-choice .body form .toggle.randomize {
    margin-right: auto;
  }
}
#modal > .dialog.question-multiple-choice .body form .toggle.multi {
  margin-left: 1rem;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.question-multiple-choice .body form .toggle.multi {
    margin: 0 auto;
  }
}
#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.02em;
}
#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;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.question-multiple-choice .body form .text-input {
    grid-column: span 1;
  }
}
#modal > .dialog.question-multiple-choice .body form .cameo-answer {
  width: 100%;
  grid-column: span 2;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.question-multiple-choice .body form .cameo-answer {
    grid-column: span 1;
  }
}
#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: 400;
  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:is([data-section-type=COURSE_MODULE_CAROUSEL], [data-section-type=COURSE_MODULE_GRID]) {
  max-width: calc(var(--form-element-width) + 2rem);
}
#modal > .dialog.section-edit:is([data-section-type=DYNAMIC_LIST_CAROUSEL], [data-section-type=DYNAMIC_LIST_GRID]) {
  width: 1000px;
}
#modal > .dialog.section-edit:is([data-section-type=DYNAMIC_LIST_CAROUSEL], [data-section-type=DYNAMIC_LIST_GRID]) .content .body {
  padding: 0 var(--modal-side-padding);
}
#modal > .dialog.section-edit:is([data-section-type=DYNAMIC_LIST_CAROUSEL], [data-section-type=DYNAMIC_LIST_GRID]) .pane.disabled {
  opacity: 0.5;
  user-select: none;
  pointer-events: none;
}
#modal > .dialog.section-edit:is([data-section-type=DYNAMIC_LIST_CAROUSEL], [data-section-type=DYNAMIC_LIST_GRID]) .pane.with-divider {
  padding: 35px 0;
}
#modal > .dialog.section-edit:is([data-section-type=DYNAMIC_LIST_CAROUSEL], [data-section-type=DYNAMIC_LIST_GRID]) .pane.with-divider .divider {
  display: block;
  width: 1px;
  height: 100%;
  background: var(--bg-element);
}
#modal > .dialog.section-edit:is([data-section-type=DYNAMIC_LIST_CAROUSEL], [data-section-type=DYNAMIC_LIST_GRID]) form {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  grid-column-gap: 1rem;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit:is([data-section-type=DYNAMIC_LIST_CAROUSEL], [data-section-type=DYNAMIC_LIST_GRID]) form {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1px auto;
  }
}
#modal > .dialog.section-edit:is([data-section-type=DYNAMIC_LIST_CAROUSEL], [data-section-type=DYNAMIC_LIST_GRID]) form :is(.field.text-input:not(.hidden), .field.field-select) {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit:is([data-section-type=DYNAMIC_LIST_CAROUSEL], [data-section-type=DYNAMIC_LIST_GRID]) form :is(.field.text-input:not(.hidden), .field.field-select) {
    flex-direction: column;
    align-items: stretch;
  }
}
#modal > .dialog.section-edit:is([data-section-type=DYNAMIC_LIST_CAROUSEL], [data-section-type=DYNAMIC_LIST_GRID]) form :is(.field.text-input:not(.hidden), .field.field-select) label {
  flex-shrink: 0;
  width: 100px;
  margin-right: 1rem;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit:is([data-section-type=DYNAMIC_LIST_CAROUSEL], [data-section-type=DYNAMIC_LIST_GRID]) form :is(.field.text-input:not(.hidden), .field.field-select) label {
    width: auto;
  }
}
#modal > .dialog.section-edit:is([data-section-type=DYNAMIC_LIST_CAROUSEL], [data-section-type=DYNAMIC_LIST_GRID]) form :is(.field.text-input:not(.hidden), .field.field-select) input, #modal > .dialog.section-edit:is([data-section-type=DYNAMIC_LIST_CAROUSEL], [data-section-type=DYNAMIC_LIST_GRID]) form :is(.field.text-input:not(.hidden), .field.field-select) > span {
  width: unset;
  flex-grow: 1;
}
#modal > .dialog.section-edit:is([data-section-type=DYNAMIC_LIST_CAROUSEL], [data-section-type=DYNAMIC_LIST_GRID]) form :is(.field.text-input:not(.hidden), .field.field-select) p.help {
  width: 75%;
  margin-left: 25%;
}
#modal > .dialog.section-edit:is([data-section-type=DYNAMIC_LIST_CAROUSEL], [data-section-type=DYNAMIC_LIST_GRID]) form .field.multi-toggle label {
  display: none;
}
#modal > .dialog.section-edit:is([data-section-type=DYNAMIC_LIST_CAROUSEL], [data-section-type=DYNAMIC_LIST_GRID]) form .field.multi-toggle .notches-wrapper > p {
  width: 100px;
  margin-right: 1rem;
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit:is([data-section-type=DYNAMIC_LIST_CAROUSEL], [data-section-type=DYNAMIC_LIST_GRID]) form .field.multi-toggle label {
    display: block;
  }
  #modal > .dialog.section-edit:is([data-section-type=DYNAMIC_LIST_CAROUSEL], [data-section-type=DYNAMIC_LIST_GRID]) form .field.multi-toggle .notches-wrapper > p {
    display: none;
  }
  #modal > .dialog.section-edit:is([data-section-type=DYNAMIC_LIST_CAROUSEL], [data-section-type=DYNAMIC_LIST_GRID]) form .field.multi-toggle .notches-wrapper > p + .notches {
    width: 100%;
  }
}
#modal > .dialog.section-edit:is([data-section-type=TEXT], [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;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit[data-section-type=TEXT] form {
    grid-template-columns: 1fr;
  }
}
#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;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit[data-section-type=TEXT] form .field.title {
    grid-column: span 1;
    flex-direction: column;
    align-items: stretch;
  }
  #modal > .dialog.section-edit[data-section-type=TEXT] form .field.title input {
    width: 100%;
  }
}
#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;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit[data-section-type=TEXT] form .field.toggle {
    grid-column: span 1;
  }
}
#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;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] form {
    grid-template-columns: 1fr;
  }
}
#modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] form .buttons-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
  grid-column: span 2;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] form .buttons-container {
    grid-column: span 1;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  #modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] form .buttons-container > * {
    width: 100%;
  }
}
#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;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] form .field.title {
    grid-column: span 1;
  }
}
#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;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit[data-section-type=EMBEDDED_ITEM] form .toggles-container {
    grid-column: span 1;
    flex-wrap: wrap;
  }
}
#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;
}
@media screen and (max-width: 767px) {
  #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 1;
  }
}
#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;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form {
    grid-template-columns: 1fr;
  }
}
#modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form .buttons-container {
  grid-column: span 2;
  display: flex;
  justify-content: center;
  gap: 1rem;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form .buttons-container {
    grid-column: span 1;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  #modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form .buttons-container > * {
    width: 100%;
    margin: 0;
  }
}
#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;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form .field.title {
    grid-column: span 1;
  }
}
#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;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form .field.toggle {
    grid-column: span 1;
  }
}
#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;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form > .message {
    grid-column: span 1;
  }
}
#modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form > .cameo {
  grid-column: span 2;
  margin: 0 auto;
  width: 100%;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit[data-section-type=IMAGE_SLIDER] form > .cameo {
    grid-column: span 1;
  }
}
#modal > .dialog.section-edit:is([data-section-type=PLAYLIST_CAROUSEL], [data-section-type=PLAYLIST_GRID]) {
  width: 550px;
}
#modal > .dialog.section-edit:is([data-section-type=PLAYLIST_CAROUSEL], [data-section-type=PLAYLIST_GRID]) .content .body {
  padding: 1rem var(--modal-side-padding);
}
#modal > .dialog.section-edit:is([data-section-type=PLAYLIST_CAROUSEL], [data-section-type=PLAYLIST_GRID]) form .field.text-input {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit:is([data-section-type=PLAYLIST_CAROUSEL], [data-section-type=PLAYLIST_GRID]) form .field.text-input {
    flex-direction: column;
    align-items: stretch;
  }
}
#modal > .dialog.section-edit:is([data-section-type=PLAYLIST_CAROUSEL], [data-section-type=PLAYLIST_GRID]) form .field.text-input label {
  width: 100px;
  margin-right: 1rem;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit:is([data-section-type=PLAYLIST_CAROUSEL], [data-section-type=PLAYLIST_GRID]) form .field.text-input label {
    width: 100%;
  }
}
#modal > .dialog.section-edit:is([data-section-type=PLAYLIST_CAROUSEL], [data-section-type=PLAYLIST_GRID]) form .field.text-input input {
  width: unset;
  flex-grow: 1;
}
#modal > .dialog.section-edit:is([data-section-type=PLAYLIST_CAROUSEL], [data-section-type=PLAYLIST_GRID]) form .multi-toggle label {
  display: none;
}
#modal > .dialog.section-edit:is([data-section-type=PLAYLIST_CAROUSEL], [data-section-type=PLAYLIST_GRID]) form .multi-toggle .notches-wrapper > p {
  width: 100px;
  margin-right: 1rem;
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit:is([data-section-type=PLAYLIST_CAROUSEL], [data-section-type=PLAYLIST_GRID]) form .multi-toggle label {
    display: block;
  }
  #modal > .dialog.section-edit:is([data-section-type=PLAYLIST_CAROUSEL], [data-section-type=PLAYLIST_GRID]) form .multi-toggle .notches-wrapper > p {
    display: none;
  }
  #modal > .dialog.section-edit:is([data-section-type=PLAYLIST_CAROUSEL], [data-section-type=PLAYLIST_GRID]) form .multi-toggle .notches-wrapper > p + .notches {
    width: 100%;
  }
}
#modal > .dialog.section-edit:is([data-section-type=PLAYLIST_CAROUSEL], [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;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.section-edit[data-section-type=RICH_TEXT] {
    max-width: 100vw;
    max-height: 100vh;
  }
}
#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 - 27em);
  overflow: auto;
  color: var(--fg-body);
}

#modal > .dialog.confirm.menu-confirm .footer a {
  width: var(--form-element-width);
  height: var(--form-element-height);
  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: 800px;
  width: var(--modal-width);
  height: 535px;
}
#modal > .dialog.user.anonymous {
  --modal-width: var(--form-element-width);
}
#modal > .dialog.user.anonymous .body {
  grid-template-columns: 1fr;
}
#modal > .dialog.user h3 {
  margin-top: 0;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.user {
    --modal-width: 100%;
  }
}
#modal > .dialog.user .key-value-container {
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 0;
}
#modal > .dialog.user .key-value-container .label, #modal > .dialog.user .key-value-container .value {
  font-size: var(--fs-body-sm);
  font-weight: 400;
  color: var(--fg-body);
  line-height: 18px;
}
#modal > .dialog.user .key-value-container .value {
  text-align: start;
  margin-left: 4rem;
}
#modal > .dialog.user .key-value-container:not(:last-child) {
  border-bottom: 1px solid var(--bg-element);
}
#modal > .dialog.user .content {
  padding-top: 0;
}
#modal > .dialog.user .body {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  grid-gap: 1.5rem;
}
@media screen and (max-width: 767px) {
  #modal > .dialog.user .body {
    grid-template-columns: 1fr;
  }
}
#modal > .dialog.user .body .pane {
  width: 100%;
  padding-top: 2rem;
}
#modal > .dialog.user .body .pane .groups .member-group {
  width: 100%;
}
#modal > .dialog.user .body .pane .empty-groups-message {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: var(--fs-body);
  padding: 10px 24px 24px;
  color: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
#modal > .dialog.user .body .divider {
  width: 1px;
  height: 100%;
  background-color: var(--bg-element);
}
@media screen and (max-width: 767px) {
  #modal > .dialog.user .body .divider {
    width: 100%;
    height: 1px;
  }
}

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

/** universal modal styles */
/** styles for all list-type modals */
/** styles for all single-column form modals */
/** components used exclusively by modal dialogs */
/** individual modals */
body.flyout-open .flyout {
  transform: translateX(0);
}

.flyout {
  --flyout-width: 660px;
  --flyout-header-height: 70px;
  --flyout-footer-height: 80px;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  width: var(--flyout-width);
  height: 100dvh;
  background-color: #fff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  transform: translateX(100%);
  transition: transform var(--anim-step) ease-in-out;
  z-index: 1000;
}
@media screen and (max-width: 767px) {
  .flyout {
    --flyout-width: 100vw;
  }
}
.flyout span.fab {
  top: 12px !important;
}
.flyout .header {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  padding: 0 20px;
  height: var(--flyout-header-height);
  text-overflow: ellipsis;
  flex-grow: 0;
  border-bottom: 1px solid rgba(16, 44, 128, 0.1);
}
.flyout .header h3 {
  color: var(--fg-body);
  font-size: var(--fs-h3);
  font-weight: 400;
  text-align: start;
  margin: 0;
}
.flyout .content {
  flex: 1;
  padding: 24px 20px;
  overflow: auto;
}
.flyout .spacer {
  position: relative;
  display: flex;
  width: 100%;
  height: 1px;
  background: var(--bg-body);
}
.flyout .spacer .divider {
  width: 100%;
  height: 1px !important;
  background: rgba(16, 44, 128, 0.1) !important;
}
.flyout .footer {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  width: 100%;
  padding: 0 20px;
  height: var(--flyout-footer-height);
}
.flyout .footer .buttons {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin: 0;
}
.flyout .footer .buttons > button {
  margin: 0;
  min-width: 136px;
}
.flyout .footer > button {
  min-width: 100px;
}
.flyout .footer a {
  width: var(--form-element-width);
  height: var(--form-element-height);
  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: 400;
  font-size: var(--fs-button);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.02em;
  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);
}
.flyout .footer a.small {
  height: 36px;
  font-weight: 500;
  font-size: var(--fs-button-xsm);
  line-height: var(--lh-button-xsm);
}
.flyout .footer a.small i {
  font-size: var(--fs-button-xsm) !important;
  margin: 0 4px 0 0 !important;
}
.flyout .footer a > span, .flyout .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: 400;
  user-select: none;
}
.flyout .footer a i:is(.fa, .fas, .far, .fal) {
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  font-size: var(--fs-body-sm);
  margin: 0 8px 0;
}
.flyout .footer a i:is(.fa, .fas, .far, .fal):first-child {
  margin-left: 0;
}
.flyout .footer a i:is(.fa, .fas, .far, .fal):last-child {
  margin-right: 0;
}
.flyout .footer a.main {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  height: 50px;
}
.flyout .footer a.ok {
  background: var(--fg-secondary);
}
.flyout .footer a.warn {
  background: var(--fg-accent);
}
.flyout .footer a.danger {
  background: var(--fg-danger);
}
.flyout .footer a.secondary {
  background: var(--fg-secondary);
}
.flyout .footer a.alternate {
  background: var(--fg-alternate);
}
.flyout .footer a:is(:hover, :active, :focus) {
  opacity: 0.8;
  outline: 0;
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.flyout .footer a:is(:hover, :active, :focus).ok {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.flyout .footer a:is(:hover, :active, :focus).warn {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.flyout .footer a:is(:hover, :active, :focus).danger {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.flyout .footer a:is(:hover, :active, :focus).secondary {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.flyout .footer a:is(:hover, :active, :focus).alternate {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.flyout .footer a.icon {
  width: calc(var(--form-element-height) - 2px);
  height: calc(var(--form-element-height) - 2px);
}
.flyout .footer a.icon i:is(.fa, .fas, .far) {
  margin: 0 0 0 1px;
}
.flyout .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;
}
.flyout .footer a.stand-in.secondary {
  color: var(--fg-secondary);
  border-color: var(--fg-secondary);
}
.flyout .footer a.stand-in.alternate {
  color: var(--fg-alternate);
  border-color: var(--fg-alternate);
}
.flyout .footer a.stand-in:is(.accent, .warn) {
  color: var(--fg-accent);
  border-color: var(--fg-accent);
}
.flyout .footer a.stand-in:is(.danger, .error) {
  color: var(--fg-danger);
  border-color: var(--fg-danger);
}
.flyout .footer a.inverse {
  background: var(--bg-body);
  border: 1px solid var(--fg-primary);
  color: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
.flyout .footer a.inverse:focus {
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
.flyout .footer a.inverse:is(.ok, .secondary) {
  border-color: var(--fg-secondary);
  color: var(--fg-secondary);
}
.flyout .footer a.inverse:is(.ok, .secondary):focus {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
.flyout .footer a.inverse.warn {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
.flyout .footer a.inverse.warn:focus {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
.flyout .footer a.inverse.danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
.flyout .footer a.inverse.danger:focus {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
.flyout .footer a.inverse.alternate {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
.flyout .footer a.inverse.alternate:focus {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
.flyout .footer a.inline {
  width: 50px;
}
.flyout .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);
}
.flyout .footer a.subtle span {
  font-family: var(--font-stack-default);
}
.flyout .footer a.subtle:is(.forward, .back) i.fa {
  margin: 2px 3px 0 3px;
}
.flyout .footer a.subtle:is(:focus, :hover, :active) {
  outline: 0;
  box-shadow: unset;
  border: none;
  text-decoration: underline;
}
.flyout .footer a.subtle.primary {
  color: var(--fg-primary);
}
.flyout .footer a.subtle.secondary, .flyout .footer a.subtle.ok {
  color: var(--fg-secondary);
}
.flyout .footer a.subtle.alternate {
  color: var(--fg-accent);
}
.flyout .footer a.subtle.accent, .flyout .footer a.subtle.warning {
  color: var(--fg-accent);
}
.flyout .footer a.subtle.danger {
  color: var(--fg-danger);
}
.flyout .footer a:is(:disabled, .disabled) {
  color: var(--bg-element);
  background: var(--bg-main);
}
.flyout .footer a:is(:disabled, .disabled):is(.inverse, .stand-in) {
  opacity: 1;
  border-color: var(--bg-main);
  color: var(--bg-main);
  background: none;
}
.flyout .footer a:is(:disabled, .disabled).subtle {
  color: var(--bg-main);
  background: none;
  text-decoration: none;
}
.flyout .footer a:is(.disabled, :disabled, .faux) {
  cursor: default;
  pointer-events: none;
}
.flyout .footer a:is(.disabled, :disabled, .faux):is(:hover, :active, :focus) {
  opacity: 1;
  outline: 0;
  box-shadow: unset;
}
.flyout .footer a:is(.disabled, :disabled, .faux):is(.inverse, .stand-in):is(:focus, :active, :hover) {
  outline: 0;
  box-shadow: unset;
}

.outreach-message-details-flyout .key-value-container {
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 0;
}
.outreach-message-details-flyout .key-value-container .key, .outreach-message-details-flyout .key-value-container .value {
  font-size: var(--fs-body-sm);
  font-weight: 400;
  color: var(--fg-body);
}
.outreach-message-details-flyout .key-value-container .value {
  text-align: end;
  margin-left: 4rem;
  white-space: break-spaces;
}
.outreach-message-details-flyout .key-value-container:not(:last-child) {
  border-bottom: 1px solid;
  border-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
}
.outreach-message-details-flyout .recipient-list {
  padding: 0;
  justify-content: flex-end;
}
.outreach-message-details-flyout .recipient-list .recipient {
  font-size: var(--fs-body-sm);
}
.outreach-message-details-flyout .attachments {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  overflow: hidden;
}
.outreach-message-details-flyout .attachments .context-item {
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  gap: 6px;
  padding: 0 1px;
}
.outreach-message-details-flyout .attachments .context-item i {
  color: color-mix(in srgb, var(--fg-body) 40%, transparent);
}
.outreach-message-details-flyout .attachments .context-item > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/**
 * 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 {
  --dashboard-widget-margin: 2px;
  /* /.block */
}
#app-admin .dashboard {
  grid-template-rows: auto;
}
#app-admin .divider {
  display: block;
  width: 100%;
  height: var(--dashboard-widget-margin);
  background-color: var(--bg-dashboard);
}
#app-admin .dashboard-widget {
  min-width: calc(var(--form-element-width) - 2rem);
  padding: 0;
}
#app-admin .dashboard-widget #features, #app-admin .dashboard-widget #settings, #app-admin .dashboard-widget #resources, #app-admin .dashboard-widget #server, #app-admin .dashboard-widget #users, #app-admin .dashboard-widget #content {
  padding: 25px;
}
@media screen and (max-width: 1025px) {
  #app-admin {
    --dashboard-columns: 1;
  }
}
#app-admin .sm-chart {
  position: relative;
  width: 100%;
  height: 236px;
}
#app-admin .sm-chart .children-container {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 8px;
  left: 0;
  right: 0;
}
#app-admin .sm-chart .children-container .chart-description {
  width: 100px;
  text-align: center;
  font-size: var(--fs-body);
  line-height: 20px;
}
#app-admin .sm-chart .children-container .chart-description .storage-amount {
  font-weight: 500;
  color: var(--fg-primary);
}
#app-admin .sm-chart .children-container .chart-description .storage-amount.danger {
  color: var(--fg-danger);
}
#app-admin .sm-chart .children-container .chart-description .storage-amount.warning {
  color: var(--fg-accent);
}
#app-admin .sm-chart .children-container .chart-description .storage-label {
  font-weight: 400;
  color: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
#app-admin .dashboard section {
  width: 100%;
}
#app-admin .block {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: var(--fs-sh) 0;
}
#app-admin .block#users .entries, #app-admin .block#content .entries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
}
#app-admin .block#users .entries .entry-container, #app-admin .block#content .entries .entry-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  width: 100%;
  border-radius: var(--radius);
  background-color: #f3f6f9;
  border: 1px solid rgba(18, 53, 143, 0.1);
}
#app-admin .block#users .entries .entry-container i, #app-admin .block#content .entries .entry-container i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33px;
  height: 33px;
  color: var(--fg-primary);
  border-radius: 100%;
  font-size: var(--fs-body-sm);
  background-color: color-mix(in srgb, var(--fg-primary) 10%, transparent);
}
#app-admin .block#users .entries .entry-container i.spinner, #app-admin .block#content .entries .entry-container i.spinner {
  height: 24px;
  width: 24px;
}
#app-admin .block#users .entries .entry-container .entry-label, #app-admin .block#content .entries .entry-container .entry-label {
  margin-top: 8px;
  font-weight: 500;
  font-size: var(--fs-body-sm);
  line-height: 15px;
  color: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
#app-admin .block#users .entries .entry-container .entry-status, #app-admin .block#content .entries .entry-container .entry-status {
  margin-top: 8px;
  font-weight: 500;
  font-size: var(--fs-sh);
  line-height: var(--fs-sh);
  color: var(--fg-primary);
}
#app-admin .block:first-of-type {
  margin-top: 0;
}
#app-admin .block h3 {
  color: var(--fg-body);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin-top: 0;
  margin-bottom: 14px;
  font-weight: 400;
}
#app-admin .block .entry {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  height: 44px;
}
#app-admin .block .entry:not(:last-child) {
  border-bottom: 1px solid;
  border-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
}
#app-admin .block .entry .label {
  color: color-mix(in srgb, var(--fg-body) 70%, transparent);
  font-size: var(--fs-body);
  font-weight: 400;
}
#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-top: 4px;
}
#app-admin .block#server .entries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
}
#app-admin .block#server .entries .service-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  width: 100%;
  border-radius: var(--radius);
  background-color: #f3f6f9;
  border: 1px solid rgba(18, 53, 143, 0.1);
}
#app-admin .block#server .entries .service-entry i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33px;
  height: 33px;
  color: var(--fg-primary);
  border-radius: 100%;
  font-size: var(--fs-body-sm);
  background-color: color-mix(in srgb, var(--fg-primary) 10%, transparent);
}
#app-admin .block#server .entries .service-entry i.spinner {
  height: 24px;
  width: 24px;
}
#app-admin .block#server .entries .service-entry .entry-label {
  margin-top: 8px;
  font-weight: 500;
  font-size: var(--fs-sub);
  line-height: 23px;
  color: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
#app-admin .block#server .entries .service-entry .entry-status {
  margin-top: 4px;
  font-weight: 500;
  font-size: var(--fs-cameo-button-icon);
  line-height: var(--lh-body-sm);
  color: var(--fg-body);
}
#app-admin .block#server .entries .service-entry.error {
  border-color: color-mix(in srgb, var(--fg-danger) 10%, transparent);
}
#app-admin .block#server .entries .service-entry.error i {
  color: var(--fg-danger);
  background-color: color-mix(in srgb, var(--fg-danger) 10%, transparent);
}
#app-admin .block#server .entries .service-entry.error .entry-label {
  color: color-mix(in srgb, var(--fg-danger) 70%, transparent);
}
#app-admin .block#server .entries .service-entry.error .entry-status {
  color: var(--fg-danger);
}
@media screen and (max-width: 1366px) {
  #app-admin .dashboard-widget.statistics {
    grid-column: span 2;
  }
}
@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);
  }
}

#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-add-content-v2 .dashboard {
  --dashboard-main-padding: 0;
  --dashboard-columns: 1;
  --dashboard-widget-margin: 1px;
  grid-template-rows: min-content;
}
#app-add-content-v2 .dashboard .dashboard-widget-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: var(--dashboard-widget-container-padding);
}
@media screen and (max-width: 1366px) {
  #app-add-content-v2 .dashboard .dashboard-widget-container {
    grid-template-columns: 1fr;
  }
}
#app-add-content-v2 .dashboard .file-select .cameo-file, #app-add-content-v2 .dashboard .file-keep .cameo-file, #app-add-content-v2 .dashboard .file-upload .cameo-file {
  height: auto;
}
#app-add-content-v2 .dashboard .file-select .cameo-file .label, #app-add-content-v2 .dashboard .file-keep .cameo-file .label, #app-add-content-v2 .dashboard .file-upload .cameo-file .label {
  white-space: normal;
  margin: 6px 0;
}
#app-add-content-v2 .dashboard .dashboard-widget h3:first-child {
  margin-top: 0;
}
#app-add-content-v2 .dashboard .dashboard-widget.action-bar {
  height: min-content;
}
#app-add-content-v2 .dashboard .dashboard-widget.action-bar #actions {
  justify-content: flex-end;
}
#app-add-content-v2 .dashboard .dashboard-widget.action-bar #actions .toggle {
  --form-element-width: 250px;
  margin: 0;
}
#app-add-content-v2 .dashboard .dashboard-widget.action-bar #actions .toggle > span {
  margin: 0;
}
@media screen and (max-width: 1366px) {
  #app-add-content-v2 .dashboard .dashboard-widget.action-bar {
    width: auto;
  }
}
#app-add-content-v2 .dashboard .dashboard-widget.profile {
  background: transparent;
  padding: 0;
}

#app-mass-content-create #bulk-upload-widget {
  overflow-x: auto;
}
#app-mass-content-create #bulk-content-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  --form-element-width: 100%;
}
#app-mass-content-create #bulk-content-form .content-rows-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#app-mass-content-create #bulk-content-form .content-rows-container .content-row {
  position: relative;
  padding: 30px 20px 20px;
  border: 1px solid;
  border-color: color-mix(in srgb, var(--fg-body) 20%, transparent);
  border-radius: 10px;
  transition: opacity var(--anim-step) ease-in-out;
}
#app-mass-content-create #bulk-content-form .content-rows-container .content-row .content-body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex-wrap: nowrap;
  gap: 32px;
  transition: opacity var(--anim-step) ease-in-out;
}
#app-mass-content-create #bulk-content-form .content-rows-container .content-row .content-body.disabled {
  opacity: 0.7;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  #app-mass-content-create #bulk-content-form .content-rows-container .content-row .content-body {
    grid-template-columns: 1fr;
  }
}
#app-mass-content-create #bulk-content-form .content-rows-container .content-row .content-body .column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  overflow: hidden;
  padding: 0 6px;
}
@media screen and (max-width: 767px) {
  #app-mass-content-create #bulk-content-form .content-rows-container .content-row .content-body .column {
    flex-wrap: wrap;
    width: 100%;
  }
}
#app-mass-content-create #bulk-content-form .content-rows-container .content-row .content-body .column label {
  display: block;
  margin-bottom: 6px;
}
#app-mass-content-create #bulk-content-form .content-rows-container .content-row .content-body .column .field.textarea {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#app-mass-content-create #bulk-content-form .content-rows-container .content-row .content-body .column .field.textarea textarea {
  flex: 1;
}
#app-mass-content-create #bulk-content-form .content-rows-container .content-row .content-body .column .cameo {
  margin: 0;
}
#app-mass-content-create #bulk-content-form .content-rows-container .content-row .content-body .column button:not(.icon) {
  margin: 0;
  width: 100%;
}
#app-mass-content-create #bulk-content-form .content-rows-container .content-row .content-body .column > * {
  width: 100%;
}
#app-mass-content-create #bulk-content-form .content-rows-container .content-row .content-body .column .label-collection {
  max-height: 180px;
  overflow: auto;
}
#app-mass-content-create #bulk-content-form .content-rows-container .content-row .content-body .column .label-collection .label {
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  position: relative;
  padding-right: 1.5rem;
}
#app-mass-content-create #bulk-content-form .content-rows-container .content-row .content-body .column .label-collection .label > span {
  white-space: nowrap;
}
#app-mass-content-create #bulk-content-form .content-rows-container .content-row .content-body .column .label-collection .label i {
  top: 8px;
}
#app-mass-content-create #bulk-content-form .content-rows-container .content-row .divider {
  display: block;
  width: 100%;
  height: 1px;
  background-color: color-mix(in srgb, var(--fg-body) 20%, transparent);
  margin-top: 30px;
  margin-bottom: 15px;
}
#app-mass-content-create #bulk-content-form .content-rows-container .content-row .content-footer {
  display: flex;
  justify-content: flex-end;
}
#app-mass-content-create #bulk-content-form .content-rows-container .content-row .content-footer > .public-access-container {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 12px;
  right: 40px;
  width: 25px;
  height: 25px;
}
#app-mass-content-create #bulk-content-form .content-rows-container .content-row .content-footer > .status {
  position: absolute;
  top: 12px;
  right: 12px;
}
#app-mass-content-create #bulk-content-form .content-rows-container .content-row .content-footer button {
  margin: 0;
}
#app-mass-content-create #bulk-content-form textarea {
  resize: none;
  padding: 13px 1rem;
  line-height: var(--lh-body);
}
#app-mass-content-create #bulk-content-form span.status {
  display: flex;
  justify-content: center;
  align-items: center;
  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-mass-content-create #actions .toggle {
  --form-element-width: 170px;
}
@media screen and (max-width: 767px) {
  #app-mass-content-create #actions > span {
    flex-wrap: wrap;
  }
}
#app-mass-content-create .upload-files-confirm {
  --modal-width: 700px;
  width: var(--modal-width) !important;
}
#app-mass-content-create .upload-files-confirm > .content .body a {
  display: block;
  margin-top: 1rem;
}
#app-mass-content-create .upload-files-confirm > .footer {
  justify-content: center !important;
}

#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-add-page main.show-help .outreach, #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, #app-page-profile main.show-help .outreach {
  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 var(--dashboard-columns);
}
#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: 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;
}
#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;
}
@media screen and (max-width: 767px) {
  #app-mass-user-create .action-bar .toggle.field, #app-mass-user-group-create .action-bar .toggle.field {
    margin-left: 0;
  }
  #app-mass-user-create .action-bar #actions, #app-mass-user-group-create .action-bar #actions {
    flex-wrap: wrap;
    justify-content: center;
  }
  #app-mass-user-create .action-bar #actions > span, #app-mass-user-group-create .action-bar #actions > span {
    margin: 0;
  }
  #app-mass-user-create .action-bar #actions > span:not(:first-child), #app-mass-user-group-create .action-bar #actions > span:not(:first-child) {
    margin-top: 1rem;
  }
  #app-mass-user-create .action-bar #actions > span:not(:first-child) button.alternate, #app-mass-user-group-create .action-bar #actions > span:not(:first-child) button.alternate {
    margin-right: 1rem;
  }
}
#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 .status, #app-mass-user-group-create form.bulk .status {
  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 #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: 1;
  width: 100%;
}
#app-mass-user-create .user-rows-container, #app-mass-user-group-create .user-rows-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#app-mass-user-create .user-row, #app-mass-user-group-create .user-row {
  position: relative;
  padding: 30px 20px 20px;
  border: 1px solid;
  border-color: color-mix(in srgb, var(--fg-body) 20%, transparent);
  border-radius: 10px;
  transition: opacity var(--anim-step) ease-in-out;
}
#app-mass-user-create .user-row .user-body, #app-mass-user-group-create .user-row .user-body {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  flex-wrap: nowrap;
  gap: 32px;
  transition: opacity var(--anim-step) ease-in-out;
}
#app-mass-user-create .user-row .user-body.disabled, #app-mass-user-group-create .user-row .user-body.disabled {
  opacity: 0.7;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  #app-mass-user-create .user-row .user-body, #app-mass-user-group-create .user-row .user-body {
    grid-template-columns: 1fr;
  }
}
#app-mass-user-create .user-row .user-body .column, #app-mass-user-group-create .user-row .user-body .column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  overflow: hidden;
  padding: 0 6px;
}
#app-mass-user-create .user-row .user-body .column > label, #app-mass-user-group-create .user-row .user-body .column > label {
  display: block;
}
@media screen and (max-width: 767px) {
  #app-mass-user-create .user-row .user-body .column, #app-mass-user-group-create .user-row .user-body .column {
    flex-wrap: wrap;
    width: 100%;
  }
}
#app-mass-user-create .user-row .user-body .column .toggle, #app-mass-user-group-create .user-row .user-body .column .toggle {
  --form-element-width: 100%;
}
#app-mass-user-create .user-row .user-body .column .toggle > label, #app-mass-user-group-create .user-row .user-body .column .toggle > label {
  display: block;
  margin-bottom: 6px;
}
#app-mass-user-create .user-row .user-body .column .field.textarea, #app-mass-user-group-create .user-row .user-body .column .field.textarea {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#app-mass-user-create .user-row .user-body .column .field.textarea textarea, #app-mass-user-group-create .user-row .user-body .column .field.textarea textarea {
  flex: 1;
}
#app-mass-user-create .user-row .user-body .column .cameo, #app-mass-user-group-create .user-row .user-body .column .cameo {
  margin: 0;
}
#app-mass-user-create .user-row .user-body .column button:not(.icon), #app-mass-user-group-create .user-row .user-body .column button:not(.icon) {
  margin: 0;
  width: 100%;
}
#app-mass-user-create .user-row .user-body .column > *, #app-mass-user-group-create .user-row .user-body .column > * {
  width: 100%;
}
#app-mass-user-create .user-row .divider, #app-mass-user-group-create .user-row .divider {
  display: block;
  width: 100%;
  height: 1px;
  background-color: color-mix(in srgb, var(--fg-body) 20%, transparent);
  margin-top: 30px;
  margin-bottom: 15px;
}
#app-mass-user-create .user-row .user-footer, #app-mass-user-group-create .user-row .user-footer {
  display: flex;
  justify-content: flex-end;
}
#app-mass-user-create .user-row .user-footer > span, #app-mass-user-group-create .user-row .user-footer > span {
  position: absolute;
  top: 12px;
  right: 12px;
}
#app-mass-user-create .user-row .user-footer button, #app-mass-user-group-create .user-row .user-footer button {
  margin: 0;
}

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

#app-add-user-group {
  --form-element-width: 320px;
}
#app-add-user-group main {
  --dashboard-columns: 1;
  --dashboard-main-padding: 0;
  grid-template-rows: min-content;
}
#app-add-user-group .dashboard-widget.widget-add {
  height: 100%;
  padding: 0;
}
#app-add-user-group .dashboard-widget.action-bar {
  grid-column: span var(--dashboard-columns);
  height: min-content;
  padding-right: 25px;
}
#app-add-user-group .dashboard-widget.action-bar #actions {
  justify-content: flex-end;
}
#app-add-user-group .dashboard-widget .tab-container {
  --notch-height: 96px;
  width: 100%;
  height: 100%;
  margin: 0;
}
#app-add-user-group .dashboard-widget .tab-container .notches {
  margin-bottom: 0;
}
#app-add-user-group .dashboard-widget .tab-container .notches .notch {
  font-size: 25px;
  align-items: center;
}
#app-add-user-group .dashboard-widget .tab-container .tabs {
  height: calc(100% - var(--notch-height)) !important;
}
#app-add-user-group .dashboard-widget .tab-container .tabs .tab {
  height: 100%;
}
#app-add-user-group .dashboard-widget .tab-container .tabs .tab.cutout {
  border: 0;
  padding: 0;
}
#app-add-user-group .dashboard-widget .tab-container .tabs .tab > form {
  width: 100%;
  height: 100%;
}
#app-add-user-group .panes {
  display: flex;
  justify-content: space-evenly;
  padding: 0 30px;
  margin-top: 43px;
}
@media screen and (max-width: 1400px) {
  #app-add-user-group .panes {
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
  }
  #app-add-user-group .panes .divider {
    display: none;
  }
}
@media screen and (max-width: 1021px) {
  #app-add-user-group .panes {
    padding: 0 20px;
  }
  #app-add-user-group .panes .divider {
    display: flex;
    width: 100% !important;
    height: 1px;
  }
}
#app-add-user-group .panes .pane {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#app-add-user-group .panes .pane .pane-title {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 35px;
  width: var(--form-element-width);
}
#app-add-user-group .panes .pane .inline-fields {
  --form-element-width: 150px;
  display: flex;
  gap: 20px;
}
#app-add-user-group .panes .pane .inline-fields > * {
  margin-top: 0;
}
#app-add-user-group .panes .pane .fields {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
#app-add-user-group .panes .pane .fields .field {
  margin: 0;
}
#app-add-user-group .panes .pane .fields .field.password:not(:first-child) {
  margin-top: 25px;
}
#app-add-user-group .panes .divider {
  width: 1px;
  background-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
}
#app-add-user-group .horizontal-divider-container {
  display: flex;
  width: 100%;
  height: 1px;
  position: relative;
  padding: 40px 0;
}
#app-add-user-group .horizontal-divider-container .horizontal-divider {
  width: inherit;
  height: inherit;
  margin: 0 30px;
  background-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
}
#app-add-user-group .consents {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 30px;
}
#app-add-user-group .field.toggle {
  margin: 0 0 20px;
}
#app-add-user-group .field.toggle .inner {
  margin: 0;
}
#app-add-user-group .field.checkbox {
  width: 100%;
}
#app-add-user-group .field.checkbox .inner {
  max-width: fit-content;
}
#app-add-user-group #add-group-form {
  --form-element-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 30px;
}
@media screen and (max-width: 1400px) {
  #app-add-user-group #add-group-form {
    --form-element-width: 100%;
    padding: 34px 20px;
  }
}
#app-add-user-group #add-group-form .field.text {
  width: var(--form-element-width);
  margin: 0;
}
#app-add-user-group #add-group-form .horizontal-divider-container {
  width: var(--form-element-width);
  padding: 30px 0;
}
#app-add-user-group #add-group-form .horizontal-divider-container .horizontal-divider {
  margin: 0;
}
#app-add-user-group #add-group-form .groups-container {
  position: relative;
  width: var(--form-element-width);
  min-height: 260px;
  overflow: auto;
  border: 1px solid;
  border-radius: var(--form-element-radius);
  border-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
}
#app-add-user-group #add-group-form .groups-container .no-users {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#app-add-user-group #add-group-form .groups-container .no-users .no-users-title {
  font-size: var(--fs-button);
  line-height: var(--lh-body-sm);
}
#app-add-user-group #add-group-form .groups-container .no-users button {
  margin-top: 30px;
}
#app-add-user-group #add-group-form .groups-container .with-users {
  padding: 25px 20px;
}
#app-add-user-group #add-group-form .groups-container .with-users .users-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#app-add-user-group #add-group-form .groups-container .with-users .users-header > span {
  font-size: 25px;
  font-weight: 400;
  color: var(--fg-body);
}
#app-add-user-group #add-group-form .groups-container .with-users .users-header button {
  margin: 0;
}
#app-add-user-group #add-group-form .groups-container .with-users .users-list {
  margin-top: 28px;
}
#app-add-user-group #add-group-form .groups-container .with-users .users-list .cameo {
  padding: 0;
  width: 100%;
}

#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 .dashboard {
  --dashboard-main-padding: 0;
  --dashboard-columns: 1;
  grid-template-rows: min-content;
}
#app-content-profile .dashboard .dashboard-widget-container {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-gap: var(--dashboard-widget-container-padding);
}
@media screen and (max-width: 1366px) {
  #app-content-profile .dashboard .dashboard-widget-container {
    grid-template-columns: 1fr;
  }
}
#app-content-profile .dashboard .dashboard-widget-container.PROFILE .preview {
  display: none;
}
#app-content-profile .dashboard .dashboard-widget-container.PREVIEW {
  grid-template-columns: 1fr;
}
#app-content-profile .dashboard .dashboard-widget-container.PREVIEW .profile, #app-content-profile .dashboard .dashboard-widget-container.PREVIEW .review, #app-content-profile .dashboard .dashboard-widget-container.PREVIEW .acl, #app-content-profile .dashboard .dashboard-widget-container.PREVIEW .outreach {
  display: none;
}
#app-content-profile .dashboard .file-select .cameo-file, #app-content-profile .dashboard .file-keep .cameo-file, #app-content-profile .dashboard .file-upload .cameo-file {
  height: auto;
}
#app-content-profile .dashboard .file-select .cameo-file .label, #app-content-profile .dashboard .file-keep .cameo-file .label, #app-content-profile .dashboard .file-upload .cameo-file .label {
  white-space: normal;
  margin: 6px 0;
}
#app-content-profile .dashboard .dashboard-widget h3:first-child {
  margin-top: 0;
}
#app-content-profile .dashboard .dashboard-widget.action-bar {
  height: min-content;
}
#app-content-profile .dashboard .dashboard-widget.action-bar #actions {
  justify-content: space-between;
  align-items: center;
}
#app-content-profile .dashboard .dashboard-widget.action-bar #actions .pane-left .tab-container {
  margin: 0;
}
#app-content-profile .dashboard .dashboard-widget.action-bar #actions .pane-right {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
#app-content-profile .dashboard .dashboard-widget.action-bar #actions .pane-right > * {
  margin: 0;
}
@media screen and (max-width: 1366px) {
  #app-content-profile .dashboard .dashboard-widget.action-bar {
    width: auto;
  }
}
#app-content-profile .dashboard .dashboard-widget.profile {
  background: transparent;
  padding: 0;
}

#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 #access-rights .title-container {
  margin: 25px 0;
}
#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;
  }
}
@media screen and (max-width: 1140px) and (max-width: 767px) {
  #app-course-profile main .dashboard-widget:is(.course-profile, .acl, .modules, .evaluations, .actions) {
    padding: 1rem;
  }
}
@media screen and (max-width: 1140px) {
  #app-course-profile main .acl .placeholder {
    min-height: 350px;
  }
}
#app-course-profile #course-modules {
  min-height: 176px;
}

#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-form-profile main {
  --dashboard-rows: 2;
  --dashboard-columns: 2;
  grid-template-rows: min-content;
}
#app-form-profile main.new-form .acl, #app-form-profile main.new-form .solutions {
  display: none;
}
#app-form-profile .action-bar {
  height: min-content;
}
#app-form-profile .action-bar #actions {
  justify-content: flex-end;
}
@media screen and (max-width: 1366px) {
  #app-form-profile .action-bar {
    width: auto;
  }
}

#app-form-response-profile main {
  --dashboard-rows: 2;
  --dashboard-columns: 2;
  grid-template-rows: min-content;
}
#app-form-response-profile .action-bar {
  display: none;
  height: min-content;
}
#app-form-response-profile .action-bar #actions {
  justify-content: flex-end;
}
@media screen and (max-width: 1366px) {
  #app-form-response-profile .action-bar {
    width: auto;
  }
}
#app-form-response-profile .edit-answer .field.toggle {
  display: none;
}
#app-form-response-profile .edit-answer .spacer {
  display: none;
}
#app-form-response-profile .edit-answer .footer .buttons {
  display: none;
}
#app-form-response-profile .form-response > .cameo-solution > i.icon {
  color: var(--fg-secondary);
}

#app-group-profile {
  --dashboard-columns: 2;
  --dashboard-rows: 2;
  --dashboard-main-padding: 0;
}
#app-group-profile main.dashboard {
  display: block;
}
@media screen and (max-width: 1140px) {
  #app-group-profile {
    --dashboard-columns: 1;
  }
}
#app-group-profile .dashboard-widget-container {
  display: grid;
  grid-template-columns: repeat(var(--dashboard-columns), 1fr);
  grid-template-rows: auto 1fr;
  grid-gap: var(--dashboard-widget-container-padding);
}
#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;
  grid-column: span var(--dashboard-columns);
}
#app-group-profile .dashboard-widget.profile {
  grid-row: span 1;
}
#app-group-profile .dashboard-widget.profile h3 {
  margin-top: 0;
}
#app-group-profile .dashboard-widget.user-list {
  grid-row: span 3;
}
#app-group-profile .dashboard-widget.user-list .title-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}
#app-group-profile .dashboard-widget.user-list .title-container h3, #app-group-profile .dashboard-widget.user-list .title-container button {
  margin: 0;
}
#app-group-profile .dashboard-widget.outreach {
  grid-row: span 4;
}

#app-admin-landing {
  --dashboard-widget-margin: 2px;
  /* /.block */
}
#app-admin-landing .placeholder {
  min-height: 508px;
}
#app-admin-landing .dashboard {
  grid-template-rows: auto;
}
#app-admin-landing .divider {
  display: block;
  width: 100%;
  height: var(--dashboard-widget-margin);
  background-color: var(--bg-dashboard);
}
#app-admin-landing .dashboard-widget {
  min-width: calc(var(--form-element-width) - 2rem);
}
@media screen and (max-width: 1025px) {
  #app-admin-landing {
    --dashboard-columns: 1;
  }
}
#app-admin-landing .sm-chart {
  position: relative;
  width: 100%;
  height: 340px;
}
#app-admin-landing .sm-chart .children-container {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 8px;
  left: 0;
  right: 0;
}
#app-admin-landing .sm-chart .children-container .chart-description {
  width: 200px;
  text-align: center;
  font-size: var(--fs-body);
  line-height: 20px;
}
#app-admin-landing .sm-chart .children-container .chart-description .storage-amount {
  font-weight: 400;
  color: var(--fg-primary);
}
#app-admin-landing .sm-chart .children-container .chart-description .storage-amount > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#app-admin-landing .sm-chart .children-container .chart-description .storage-amount.danger {
  color: var(--fg-danger);
}
#app-admin-landing .sm-chart .children-container .chart-description .storage-amount.warning {
  color: var(--fg-accent);
}
#app-admin-landing .sm-chart .children-container .chart-description .storage-label {
  font-weight: 400;
  color: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
#app-admin-landing .dashboard section {
  width: 100%;
}
#app-admin-landing .add-content .view-container {
  width: 100%;
}
#app-admin-landing .block {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: var(--fs-sh) 0;
}
#app-admin-landing .block#users .entries, #app-admin-landing .block#content .entries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
}
#app-admin-landing .block#users .entries .entry-container, #app-admin-landing .block#content .entries .entry-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px;
  width: 100%;
  border-radius: var(--radius);
  background-color: #f3f6f9;
  border: 1px solid rgba(18, 53, 143, 0.1);
}
#app-admin-landing .block#users .entries .entry-container i, #app-admin-landing .block#content .entries .entry-container i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33px;
  height: 33px;
  color: var(--fg-primary);
  border-radius: 100%;
  font-size: var(--fs-body-sm);
  background-color: color-mix(in srgb, var(--fg-primary) 10%, transparent);
}
#app-admin-landing .block#users .entries .entry-container i.spinner, #app-admin-landing .block#content .entries .entry-container i.spinner {
  height: 24px;
  width: 24px;
}
#app-admin-landing .block#users .entries .entry-container .entry-label, #app-admin-landing .block#content .entries .entry-container .entry-label {
  margin-top: 8px;
  font-weight: 500;
  font-size: var(--fs-body-sm);
  line-height: 15px;
  text-align: center;
  color: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
#app-admin-landing .block#users .entries .entry-container .entry-label a, #app-admin-landing .block#content .entries .entry-container .entry-label a {
  font-size: var(--fs-body);
}
#app-admin-landing .block#users .entries .entry-container .entry-status, #app-admin-landing .block#content .entries .entry-container .entry-status {
  margin-top: 8px;
  font-weight: 400;
  font-size: var(--fs-sh);
  line-height: var(--fs-sh);
  color: var(--fg-primary);
}
#app-admin-landing .block:first-of-type {
  margin-top: 0;
}
#app-admin-landing .block h3 {
  color: var(--fg-body);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  margin-top: 0;
  margin-bottom: 25px;
  font-weight: 400;
}
#app-admin-landing .block#content h3 {
  margin-bottom: 4px;
}
#app-admin-landing .block#content .resources-usage {
  margin-bottom: 16px;
}
#app-admin-landing .block#content .resources-usage div {
  font-size: var(--fs-body-sm);
  line-height: var(--fs-body-sm);
  text-align: center;
  color: var(--fg-soft);
}
#app-admin-landing .block .entry {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  height: 44px;
}
#app-admin-landing .block .entry:not(:last-child) {
  border-bottom: 1px solid;
  border-color: color-mix(in srgb, var(--fg-body) 15%, transparent);
}
#app-admin-landing .block .entry .label {
  color: color-mix(in srgb, var(--fg-body) 70%, transparent);
  font-size: var(--fs-body);
  font-weight: 400;
}
#app-admin-landing .block.open {
  max-height: 100%;
}
#app-admin-landing .block.open h2 i {
  transform: rotateX(0deg);
}
#app-admin-landing .block#settings {
  grid-template-columns: 70% 30%;
}
#app-admin-landing .block#settings > span.badge {
  width: 100%;
}
#app-admin-landing .block#server :is(.spinner, .indicator) {
  margin-top: 4px;
}
#app-admin-landing .block#server .entries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
}
#app-admin-landing .block#server .entries .service-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  width: 100%;
  border-radius: var(--radius);
  background-color: #f3f6f9;
  border: 1px solid rgba(18, 53, 143, 0.1);
}
#app-admin-landing .block#server .entries .service-entry i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 33px;
  height: 33px;
  color: var(--fg-primary);
  border-radius: 100%;
  font-size: var(--fs-body-sm);
  background-color: color-mix(in srgb, var(--fg-primary) 10%, transparent);
}
#app-admin-landing .block#server .entries .service-entry i.spinner {
  height: 24px;
  width: 24px;
}
#app-admin-landing .block#server .entries .service-entry .entry-label {
  margin-top: 8px;
  font-weight: 500;
  font-size: var(--fs-sub);
  line-height: 23px;
  color: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
#app-admin-landing .block#server .entries .service-entry .entry-status {
  margin-top: 4px;
  font-weight: 400;
  font-size: var(--fs-cameo-button-icon);
  line-height: var(--lh-body-sm);
  color: var(--fg-body);
}
#app-admin-landing .block#server .entries .service-entry.error {
  border-color: color-mix(in srgb, var(--fg-danger) 10%, transparent);
}
#app-admin-landing .block#server .entries .service-entry.error i {
  color: var(--fg-danger);
  background-color: color-mix(in srgb, var(--fg-danger) 10%, transparent);
}
#app-admin-landing .block#server .entries .service-entry.error .entry-label {
  color: color-mix(in srgb, var(--fg-danger) 70%, transparent);
}
#app-admin-landing .block#server .entries .service-entry.error .entry-status {
  color: var(--fg-danger);
}
@media screen and (max-width: 1366px) {
  #app-admin-landing .dashboard-widget.statistics {
    grid-column: span 2;
  }
}
@media screen and (max-width: 1025px) {
  #app-admin-landing .dashboard-widget.statistics {
    grid-column: span 1;
  }
  #app-admin-landing .dashboard-widget.statistics #statistics {
    grid-template-columns: 1fr;
    grid-gap: 1rem;
    margin: 0;
    max-width: var(--form-element-width);
  }
}

#app-manage-assessments main.dashboard {
  gap: 0;
}
#app-manage-assessments .action-bar {
  padding: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
@media screen and (max-width: 767px) {
  #app-manage-assessments .action-bar {
    display: block;
  }
  #app-manage-assessments .action-bar .pane-right {
    display: block;
  }
  #app-manage-assessments .action-bar .pane-right .additional-controls {
    justify-content: center;
    margin-top: 0.5rem;
  }
  #app-manage-assessments .action-bar .pane-right .additional-controls > button {
    margin: 0;
  }
}
#app-manage-assessments .action-bar .search-block .toggle {
  margin: 0 0 0 0.5em;
  height: var(--form-element-height);
}
#app-manage-assessments .action-bar .search-block .toggle > span {
  margin: 0;
  height: 100%;
}
#app-manage-assessments .manage-container {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 0;
}
#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 #help {
  padding: 0 25px;
}
#app-manage-content main.dashboard {
  gap: 0;
}
#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 {
  padding: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
@media screen and (max-width: 767px) {
  #app-manage-content .action-bar {
    display: block;
  }
  #app-manage-content .action-bar .pane-right {
    display: block;
  }
}
#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 .manage-container {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 0;
}
#app-manage-content table.dynamic tr th:nth-child(1) span {
  width: 30px;
  display: flex;
  justify-content: center;
  justify-self: center;
}
@media screen and (max-width: 767px) {
  #app-manage-content table.dynamic tr th:nth-child(5) {
    padding: 0;
  }
}
@media screen and (max-width: 767px) {
  #app-manage-content table.dynamic tr th:nth-child(6) {
    padding: 0;
  }
}
#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: 1rem;
  padding-right: 1rem;
  text-overflow: unset;
}
#app-manage-content table.dynamic tr td:nth-child(2), #app-manage-content table.dynamic tr th:nth-child(2) {
  width: 8rem;
}
@media screen and (max-width: 767px) {
  #app-manage-content table.dynamic tr td:nth-child(2), #app-manage-content table.dynamic tr th:nth-child(2) {
    display: none;
  }
}
#app-manage-content table.dynamic tr td:nth-child(3), #app-manage-content table.dynamic tr th:nth-child(3) {
  width: 100%;
  white-space: normal;
  word-break: break-word;
}
@media screen and (max-width: 767px) {
  #app-manage-content table.dynamic tr td:nth-child(3), #app-manage-content table.dynamic tr th:nth-child(3) {
    width: 10rem;
  }
}
#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.5rem;
}
#app-manage-content table.dynamic tr td:nth-child(4), #app-manage-content table.dynamic tr th:nth-child(4) {
  width: 10rem;
}
@media screen and (max-width: 767px) {
  #app-manage-content table.dynamic tr td:nth-child(4), #app-manage-content table.dynamic tr th:nth-child(4) {
    display: none;
  }
}
#app-manage-content table.dynamic tr td:nth-child(4) .icon, #app-manage-content table.dynamic tr th:nth-child(4) .icon {
  margin-right: 0.5rem;
  margin-left: 0;
}
#app-manage-content table.dynamic tr td:nth-child(5), #app-manage-content table.dynamic tr th:nth-child(5) {
  width: 10rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #app-manage-content table.dynamic tr td:nth-child(5), #app-manage-content table.dynamic tr th:nth-child(5) {
    width: 5rem;
  }
}
#app-manage-content table.dynamic tr td:nth-child(5) .icon, #app-manage-content table.dynamic tr th:nth-child(5) .icon {
  cursor: pointer;
}
#app-manage-content table.dynamic tr td:nth-child(6), #app-manage-content table.dynamic tr th:nth-child(6) {
  width: 10rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  #app-manage-content table.dynamic tr td:nth-child(6), #app-manage-content table.dynamic tr th:nth-child(6) {
    width: 4rem;
  }
}
#app-manage-content table.dynamic tr td:nth-child(6) .icon, #app-manage-content table.dynamic tr th:nth-child(6) .icon {
  border-radius: 100%;
  color: var(--fg-primary);
  display: flex;
  justify-content: center;
  justify-self: center;
  align-items: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: background-color var(--anim-step) ease-in-out;
}
#app-manage-content table.dynamic tr td:nth-child(6) .icon:hover, #app-manage-content table.dynamic tr th:nth-child(6) .icon:hover {
  background-color: var(--bg-hover);
}
#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-courses main.dashboard {
  gap: 0;
}
#app-manage-courses .action-bar {
  padding: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
@media screen and (max-width: 767px) {
  #app-manage-courses .action-bar {
    display: block;
  }
  #app-manage-courses .action-bar .pane-right {
    display: block;
  }
  #app-manage-courses .action-bar .pane-right .additional-controls {
    justify-content: center;
    margin-top: 0.5rem;
  }
  #app-manage-courses .action-bar .pane-right .additional-controls > button {
    margin: 0;
  }
}
#app-manage-courses .action-bar .search-block .toggle {
  margin: 0 0 0 0.5em;
  height: var(--form-element-height);
}
#app-manage-courses .action-bar .search-block .toggle > span {
  margin: 0;
  height: 100%;
}
#app-manage-courses .manage-container {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 0;
}
#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;
}
@media screen and (max-width: 767px) {
  #app-manage-courses table.dynamic tr td:nth-child(2), #app-manage-courses table.dynamic tr th:nth-child(2) {
    width: unset;
  }
}
#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: repeat(var(--dashboard-columns), 1fr);
  grid-template-rows: min-content;
}
@media screen and (max-width: 767px) {
  #app-manage-messages main {
    --dashboard-columns: 1;
  }
}
@media screen and (max-width: 767px) {
  #app-manage-messages main .action-bar #action-bar-search .pane-right {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 767px) {
  #app-manage-messages main .action-bar #action-bar-search .pane-right .additional-controls {
    width: 100%;
    justify-content: center;
    margin-top: 1rem;
  }
  #app-manage-messages main .action-bar #action-bar-search .pane-right .additional-controls button {
    margin: 0;
  }
}
#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: 100dvh;
  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 .dashboard .dashboard-widget {
  padding: 0;
}
#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;
}
@media screen and (max-width: 767px) {
  #app-manage-pages table tr td:first-child, #app-manage-pages table tr th:first-child {
    width: 12rem;
  }
}
#app-manage-pages table tr td:nth-child(2), #app-manage-pages table tr th:nth-child(2) {
  width: 100%;
  text-align: center;
}
#app-manage-pages table tr td:nth-child(3), #app-manage-pages table tr th:nth-child(3) {
  width: 100%;
  text-align: center;
}
#app-manage-pages table tr td:nth-child(3) .icon, #app-manage-pages table tr th:nth-child(3) .icon {
  color: var(--fg-primary);
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  #app-manage-pages #modal .body {
    padding-top: 50px;
  }
}
#app-manage-pages .tab-container {
  margin: 0;
}
#app-manage-pages .tab-container > .notches {
  margin: 0;
}

.manage-page-layout {
  width: 100%;
  display: flex;
  flex-direction: column;
}

#app-manage-users .dashboard-widget {
  padding: 0;
}
#app-manage-users .dashboard-widget .tab-container {
  width: 100%;
}
#app-manage-users .table-tabs .notches {
  margin-left: 40px;
  width: min-content;
}
#app-manage-users .manage-wrapper {
  width: 100%;
}
#app-manage-users #manage-container {
  width: 100%;
}
@media screen and (max-width: 767px) {
  #app-manage-users #manage-container .table-tabs {
    margin: 0;
    background: var(--bg-dashboard);
  }
  #app-manage-users #manage-container .table-tabs .notches {
    width: 100%;
    background: var(--bg-dashboard);
    margin: 0 0 25px;
  }
}
#app-manage-users #manage-container .notches {
  margin-bottom: 0;
}
#app-manage-users #manage-container .notches .notch {
  white-space: nowrap;
}
#app-manage-users #manage-container .tab.cutout {
  border: 0;
  padding: 0;
}
#app-manage-users #manage-container section {
  margin-top: 31px;
}
@media screen and (max-width: 767px) {
  #app-manage-users #manage-container section {
    margin-top: 0;
  }
}
#app-manage-users #manage-container table {
  width: 100%;
}
#app-manage-users #manage-container table tr td:nth-child(3), #app-manage-users #manage-container table th:nth-child(3) {
  width: 10rem;
}
#app-manage-users #manage-container table tr td:nth-child(5), #app-manage-users #manage-container table tr td:nth-child(6), #app-manage-users #manage-container table tr td:nth-child(7), #app-manage-users #manage-container table th:nth-child(5), #app-manage-users #manage-container table th:nth-child(6), #app-manage-users #manage-container table th:nth-child(7) {
  width: 7rem;
  text-align: center;
}
#app-manage-users #manage-container table tr td:nth-child(7), #app-manage-users #manage-container table th:nth-child(7) {
  width: 11rem;
}
#app-manage-users #manage-container table td .chip-verified {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  padding: 4px 6px;
  font-size: 9px;
  line-height: 9px;
  font-weight: 600;
}
#app-manage-users #manage-container table td .chip-verified.verified {
  background-color: color-mix(in srgb, var(--fg-accent) 10%, transparent);
  color: var(--fg-accent);
}
#app-manage-users #manage-container table td .chip-verified.not-verified {
  background-color: color-mix(in srgb, var(--fg-danger) 10%, transparent);
  color: var(--fg-danger);
}
#app-manage-users #manage-container table td .external-icons {
  display: flex;
  justify-content: center;
}
#app-manage-users #manage-container table td .external-icons .external {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  font-size: 10px;
  font-weight: 400;
  color: var(--fg-button);
}
#app-manage-users #manage-container table td .external-icons .external::before {
  width: fit-content;
  margin-left: 1px;
}
#app-manage-users #manage-container table td .external-icons .external.ok {
  background-color: var(--fg-secondary);
}
#app-manage-users #manage-container table td .external-icons .external.danger {
  background-color: var(--fg-danger);
}
#app-manage-users #manage-container table .privilege-icons {
  display: flex;
  justify-content: center;
  gap: 4px;
}
@media screen and (max-width: 767px) {
  #app-manage-users #manage-container table tr {
    background: var(--bg-body);
  }
  #app-manage-users #manage-container table tr td:nth-child(1) a, #app-manage-users #manage-container 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-container table tr td:nth-child(5), #app-manage-users #manage-container table tr th:nth-child(5) {
    text-align: center;
  }
  #app-manage-users #manage-container table tr td:nth-child(5) .sort-block, #app-manage-users #manage-container table tr th:nth-child(5) .sort-block {
    justify-content: center;
  }
  #app-manage-users #manage-container table tr td:nth-child(3), #app-manage-users #manage-container table tr td:nth-child(4), #app-manage-users #manage-container table tr td:nth-child(5), #app-manage-users #manage-container table tr td:nth-child(6), #app-manage-users #manage-container table tr td:nth-child(7), #app-manage-users #manage-container table tr th:nth-child(3), #app-manage-users #manage-container table tr th:nth-child(4), #app-manage-users #manage-container table tr th:nth-child(5), #app-manage-users #manage-container table tr th:nth-child(6), #app-manage-users #manage-container 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-outreach-history #action-bar-search {
  height: fit-content;
}
#app-outreach-history .dashboard-widget {
  padding: 0;
}
#app-outreach-history .outreach-history {
  width: 100%;
}
#app-outreach-history .outreach-history .advanced-search-fields {
  height: fit-content;
}
#app-outreach-history .outreach-history table .recipient-list {
  padding: 0;
}
#app-outreach-history .outreach-history table .recipient-list .recipient {
  font-size: var(--fs-table);
}
#app-outreach-history .outreach-history table th:first-child, #app-outreach-history .outreach-history table td:first-child {
  width: 200px;
}
@media screen and (max-width: 767px) {
  #app-outreach-history .outreach-history table th:first-child, #app-outreach-history .outreach-history table td:first-child {
    width: 124px;
  }
}
#app-outreach-history .outreach-history table .td-context {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow: hidden;
}
#app-outreach-history .outreach-history table .td-context .context-item {
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  gap: 6px;
}
#app-outreach-history .outreach-history table .td-context .context-item i {
  color: color-mix(in srgb, var(--fg-body) 40%, transparent);
}
#app-outreach-history .outreach-history table .td-context .context-item > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 767px) {
  #app-outreach-history .outreach-history table th:nth-child(3), #app-outreach-history .outreach-history table th:nth-child(4), #app-outreach-history .outreach-history table td:nth-child(3), #app-outreach-history .outreach-history table td:nth-child(4) {
    display: none;
  }
}

#app-page-profile-visual {
  --dashboard-columns: 1;
}
#app-page-profile-visual main {
  grid-template-rows: min-content;
}
#app-page-profile-visual .page-mode-tabs-container {
  --form-element-width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 0;
}
#app-page-profile-visual .page-mode-tabs-container h3 {
  margin-top: 0;
}
#app-page-profile-visual .page-mode-tabs-container > .notches {
  width: 316px;
  margin: 16px 25px 16px auto;
  flex-shrink: 0;
}
@media screen and (max-width: 767px) {
  #app-page-profile-visual .page-mode-tabs-container > .notches {
    margin-right: auto;
  }
}
#app-page-profile-visual .page-mode-tabs-container > .tabs {
  flex: 1;
}
#app-page-profile-visual .page-mode-tabs-container > .tabs .tab {
  padding: 0;
  border: 0;
}
#app-page-profile-visual .page-mode-tabs-container #page-info {
  width: 100%;
  height: fit-content;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: var(--dashboard-widget-container-padding);
}
#app-page-profile-visual .page-mode-tabs-container #page-info.template {
  height: 100%;
  grid-template-rows: max-content;
}
#app-page-profile-visual .page-mode-tabs-container #page-info.template .side-menu {
  grid-row: span 1;
}
@media screen and (max-width: 767px) {
  #app-page-profile-visual .page-mode-tabs-container #page-info {
    grid-template-columns: 1fr;
  }
}
#app-page-profile-visual .page-mode-tabs-container #page-info .page-profile {
  grid-column: span 3;
  grid-row: span 1;
}
@media screen and (max-width: 767px) {
  #app-page-profile-visual .page-mode-tabs-container #page-info .page-profile {
    grid-column: span 1;
  }
}
#app-page-profile-visual .page-mode-tabs-container #page-info .page-profile #add-page-form {
  width: 100%;
}
#app-page-profile-visual .page-mode-tabs-container #page-info .page-profile #add-page-form button {
  width: 46px;
  height: 46px;
}
#app-page-profile-visual .page-mode-tabs-container #page-info .outreach {
  grid-column: span 3;
  grid-row: span 3;
}
@media screen and (max-width: 767px) {
  #app-page-profile-visual .page-mode-tabs-container #page-info .outreach {
    grid-column: span 1;
  }
}
#app-page-profile-visual .page-mode-tabs-container #page-info .access {
  grid-column: span 3;
  grid-row: span 2;
}
@media screen and (max-width: 767px) {
  #app-page-profile-visual .page-mode-tabs-container #page-info .access {
    grid-column: span 1;
  }
}
#app-page-profile-visual .page-mode-tabs-container #page-info .side-menu {
  grid-column: span 3;
}
@media screen and (max-width: 767px) {
  #app-page-profile-visual .page-mode-tabs-container #page-info .side-menu {
    grid-column: span 1;
  }
}
#app-page-profile-visual .page-mode-tabs-container #page-info .side-menu #menu-editor-form {
  width: 100%;
}
#app-page-profile-visual .page-mode-tabs-container #page-info .side-menu form > button {
  width: 100%;
}
#app-page-profile-visual .page-mode-tabs-container #page-info .analytics {
  position: relative;
  grid-column: span 6;
  display: flex;
}
@media screen and (max-width: 767px) {
  #app-page-profile-visual .page-mode-tabs-container #page-info .analytics {
    display: none;
    grid-column: span 1;
  }
}
#app-page-profile-visual .page-mode-tabs-container #page-info .analytics .sm-chart .children-container {
  position: absolute;
  right: 25px;
  top: 18px;
}
#app-page-profile-visual .page-mode-tabs-container #visual-editor-container {
  width: 100%;
}
#app-page-profile-visual .page-mode-tabs-container #visual-editor-container .editor {
  padding: 0;
}
@media screen and (max-width: 767px) {
  #app-page-profile-visual .page-mode-tabs-container #visual-editor-container .editor {
    display: none;
  }
}
#app-page-profile-visual .page-mode-tabs-container #visual-editor-container .visual-editor-not-available {
  display: none;
}
@media screen and (max-width: 767px) {
  #app-page-profile-visual .page-mode-tabs-container #visual-editor-container .visual-editor-not-available {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: var(--fs-h3);
    padding: 40px;
    color: color-mix(in srgb, var(--fg-body) 70%, transparent);
  }
}
#app-page-profile-visual .action-bar.dashboard-widget {
  grid-column: span var(--dashboard-columns);
}
#app-page-profile-visual .action-bar.dashboard-widget #actions .buttons-container {
  display: flex;
}
#app-page-profile-visual .editor.dashboard-widget {
  grid-column: span var(--dashboard-columns);
}
#app-page-profile-visual .editor.dashboard-widget .title-container {
  display: none;
}
#app-page-profile-visual .editor.dashboard-widget .visual-page-editor {
  position: relative;
  width: 100%;
  height: calc(100vh - 150px);
}
#app-page-profile-visual .editor.dashboard-widget.fullscreen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
#app-page-profile-visual .help.dashboard-widget {
  display: none;
}
#app-page-profile-visual .help.dashboard-widget .container-help p, #app-page-profile-visual .help.dashboard-widget .container-help ul, #app-page-profile-visual .help.dashboard-widget .container-help ol {
  color: var(--fg-primary);
}
#app-page-profile-visual .help.dashboard-widget .container-help li:not(:first-child) {
  margin-top: 0.5rem;
}
#app-page-profile-visual .help.dashboard-widget .container-help ol ol {
  margin: 1rem 0;
}
#app-page-profile-visual.help .page-profile, #app-page-profile-visual.help .analytics, #app-page-profile-visual.help .access, #app-page-profile-visual.help .side-menu, #app-page-profile-visual.help .outreach {
  display: none;
}
#app-page-profile-visual.help .help.dashboard-widget {
  display: flex;
  grid-column: span 2;
}

#app-send-announcement main {
  grid-template-rows: min-content;
}
#app-send-announcement #send-announcement-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 767px) {
  #app-send-announcement #send-announcement-form .textarea {
    width: 100%;
  }
}
#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;
  margin-bottom: 1rem;
  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;
  --dashboard-columns: 6;
}
@media screen and (max-width: 1366px) {
  #app-test main {
    --dashboard-columns: 2;
  }
}
@media screen and (max-width: 767px) {
  #app-test main {
    --dashboard-columns: 1;
  }
}
#app-test main .dashboard-widget {
  grid-column: span 2;
  grid-row: span 1;
  height: 100%;
}
@media screen and (max-width: 767px) {
  #app-test main .dashboard-widget {
    grid-column: span 1;
  }
}
#app-test main .dashboard-widget.rich-text-editor {
  grid-column: span var(--dashboard-columns);
}
@media screen and (max-width: 1366px) {
  #app-test main .dashboard-widget:is(.form-elements, .ui-components, .modals) {
    grid-column: span 1;
  }
}
#app-test main .dashboard-widget:is(.bar-chart, .line-chart, .bar-chart-with-toggles, .chart-with-calendar) {
  width: 100%;
  grid-column: span 3;
}
@media screen and (max-width: 1366px) {
  #app-test main .dashboard-widget:is(.bar-chart, .line-chart, .bar-chart-with-toggles, .chart-with-calendar) {
    grid-column: span 1;
  }
}
@media screen and (max-width: 767px) {
  #app-test main .dashboard-widget:is(.bar-chart, .line-chart, .bar-chart-with-toggles, .chart-with-calendar) {
    min-height: initial;
    height: auto;
  }
}
#app-test main .dashboard-widget.typography {
  grid-column: span 3;
}
@media screen and (max-width: 767px) {
  #app-test main .dashboard-widget.typography {
    grid-column: span 1;
  }
}
#app-test main .dashboard-widget.outreach {
  grid-column: span 3;
}
#app-test main .dashboard-widget.outreach #outreach {
  --form-element-width: 100%;
  width: 100%;
}
@media screen and (max-width: 767px) {
  #app-test main .dashboard-widget.outreach {
    grid-column: span 1;
  }
}
#app-test main .dashboard-widget.acl {
  grid-column: span 3;
}
@media screen and (max-width: 1366px) {
  #app-test main .dashboard-widget.acl {
    grid-column: span 2;
  }
}
@media screen and (max-width: 767px) {
  #app-test main .dashboard-widget.acl {
    grid-column: span 1;
  }
}
#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-test main #components .container {
  padding: 16px 8px;
}

#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;
  justify-content: space-between;
}
#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;
}
@media screen and (max-width: 767px) {
  #app-thread-profile .dashboard-widget #actions {
    justify-content: center;
    flex-wrap: wrap;
  }
}
#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;
}
@media screen and (max-width: 767px) {
  #app-thread-profile .dashboard-widget #actions .controls {
    justify-content: center;
    margin-top: 1rem;
  }
}
#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 .analytics {
  grid-column: span 2;
}
#app-user-profile .page-views {
  grid-column: span 3;
  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 .analytics {
    grid-column: span 1;
  }
  #app-user-profile .outreach {
    grid-column: span var(--dashboard-columns);
  }
  #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(4 * 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-user-profile-two .dashboard {
  --dashboard-main-padding: 0;
  --dashboard-columns: 1;
}
#app-user-profile-two .dashboard .dashboard-widget-container {
  display: grid;
  grid-template-columns: 5fr 4fr;
  grid-template-rows: auto repeat(3, 1fr);
  grid-gap: var(--dashboard-widget-container-padding);
}
@media screen and (max-width: 767px) {
  #app-user-profile-two .dashboard .dashboard-widget-container {
    grid-template-columns: 1fr;
  }
}
#app-user-profile-two .dashboard .dashboard-widget h3:first-child {
  margin-top: 0;
}
#app-user-profile-two .dashboard .dashboard-widget.action-bar {
  height: min-content;
}
#app-user-profile-two .dashboard .dashboard-widget.action-bar #actions {
  justify-content: flex-end;
}
@media screen and (max-width: 1366px) {
  #app-user-profile-two .dashboard .dashboard-widget.action-bar {
    width: auto;
  }
}
#app-user-profile-two .dashboard .dashboard-widget.profile {
  --form-element-margin: 14px;
  --form-element-width: 100%;
  grid-row: span 4;
}
#app-user-profile-two .dashboard .dashboard-widget.profile > form {
  width: 100%;
}
#app-user-profile-two .dashboard .dashboard-widget.profile .consents {
  margin-top: 25px;
}
#app-user-profile-two .dashboard .dashboard-widget.outreach {
  grid-row: span 1;
}
#app-user-profile-two .dashboard .dashboard-widget.outreach > form {
  width: 100%;
}
#app-user-profile-two .dashboard .dashboard-widget.access-control {
  --form-element-width: 100%;
  grid-row: span 3;
}
#app-user-profile-two .dashboard .dashboard-widget.access-control > div {
  width: var(--form-element-width);
}
#app-user-profile-two .dashboard .dashboard-widget.statistics {
  padding: 0;
  background: transparent;
  grid-column: span 2;
  grid-row: span 1;
  height: min-content;
}
@media screen and (max-width: 767px) {
  #app-user-profile-two .dashboard .dashboard-widget.statistics {
    grid-column: span 1;
  }
}
#app-user-profile-two .dashboard .dashboard-widget.statistics .chips-container {
  width: 100%;
  display: flex;
  gap: var(--dashboard-widget-container-padding);
}
@media screen and (max-width: 767px) {
  #app-user-profile-two .dashboard .dashboard-widget.statistics .chips-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--dashboard-widget-container-padding);
  }
}
#app-user-profile-two .dashboard .dashboard-widget.statistics .chips-container .chip {
  width: 100%;
  padding: 40px 25px;
  background-color: var(--bg-body);
  border-radius: var(--radius);
}
#app-user-profile-two .dashboard .dashboard-widget.statistics .chips-container .chip .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#app-user-profile-two .dashboard .dashboard-widget.statistics .chips-container .chip .header .count {
  font-weight: 700;
  font-size: var(--fs-h1);
  color: var(--fg-body);
}
#app-user-profile-two .dashboard .dashboard-widget.statistics .chips-container .chip .header .icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  border-radius: 100%;
  background-color: color-mix(in srgb, var(--fg-accent) 10%, transparent);
}
#app-user-profile-two .dashboard .dashboard-widget.statistics .chips-container .chip .header .icon-container i {
  color: var(--fg-accent);
}
#app-user-profile-two .dashboard .dashboard-widget.statistics .chips-container .chip .title {
  display: block;
  margin-top: 20px;
  font-size: var(--fs-body);
  font-weight: 400;
  color: color-mix(in srgb, var(--fg-body) 60%, transparent);
}

#app-site-customization main.dashboard {
  grid-template-columns: 1fr;
  grid-template-rows: min-content;
}
#app-site-customization main.dashboard .dashboard-widget {
  --dashboard-widget-border-radius: 0;
}
#app-site-customization main.dashboard .action-bar #actions {
  display: flex;
  justify-content: space-between;
}
#app-site-customization main.dashboard .action-bar #actions .tab-specific-actions {
  display: flex;
}
#app-site-customization main.dashboard .site-customization-tabs-container {
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: var(--bg-dashboard);
}
#app-site-customization main.dashboard .site-customization-tabs-container .dashboard-widget {
  grid-row: initial;
}
#app-site-customization main.dashboard .site-customization-tabs-container .dashboard-widget.defaults {
  grid-row: span 2;
}
#app-site-customization main.dashboard .site-customization-tabs-container > .notches {
  width: 500px;
  margin: 16px 25px 16px auto;
}
@media screen and (max-width: 767px) {
  #app-site-customization main.dashboard .site-customization-tabs-container > .notches {
    width: 90%;
    margin: 16px auto;
  }
}
#app-site-customization main.dashboard .site-customization-tabs-container > .tabs {
  height: 100% !important;
}
#app-site-customization main.dashboard .site-customization-tabs-container > .tabs .cutout {
  border: 0;
  padding: 0;
}
#app-site-customization main.dashboard .site-customization-tabs-container #theme-colors {
  width: 100%;
  display: grid;
  grid-gap: var(--dashboard-widget-container-padding);
  grid-template-columns: 2fr 1fr;
  background-color: var(--bg-dashboard);
}
@media screen and (max-width: 1366px) {
  #app-site-customization main.dashboard .site-customization-tabs-container #theme-colors {
    grid-template-columns: 1fr;
  }
}
#app-site-customization main.dashboard .site-customization-tabs-container #theme-colors #palette-form .tab-container > p {
  display: none;
}
#app-site-customization main.dashboard .site-customization-tabs-container #theme-colors #palette-form .colors {
  max-height: 256px;
  overflow: auto;
}
#app-site-customization main.dashboard .site-customization-tabs-container #theme-colors #default-outreach {
  width: var(--form-element-width);
}
#app-site-customization main.dashboard .site-customization-tabs-container #theme-colors #default-outreach > button {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}
#app-site-customization main.dashboard .site-customization-tabs-container #site-header {
  width: 100%;
  display: grid;
  grid-gap: var(--dashboard-widget-container-padding);
  grid-template-columns: repeat(2, 1fr);
  background-color: var(--bg-dashboard);
}
@media screen and (max-width: 1366px) {
  #app-site-customization main.dashboard .site-customization-tabs-container #site-header {
    grid-template-columns: 1fr;
  }
}
#app-site-customization main.dashboard .site-customization-tabs-container #site-header #header-container {
  zoom: 0.8;
  pointer-events: none;
  grid-column: span 2;
  grid-row: span 1;
  height: auto;
  background-color: var(--bg-body-alt);
}
@media screen and (max-width: 1366px) {
  #app-site-customization main.dashboard .site-customization-tabs-container #site-header #header-container {
    grid-column: span 1;
  }
}
#app-site-customization main.dashboard .site-customization-tabs-container #site-header #header-container header {
  position: relative;
  z-index: 1;
}
#app-site-customization main.dashboard .site-customization-tabs-container #site-header #header-container header.horizontal {
  margin-bottom: calc(var(--horizontal-menu-height));
}
#app-site-customization main.dashboard .site-customization-tabs-container #site-header > .configuration {
  grid-column: span 1;
}
#app-site-customization main.dashboard .site-customization-tabs-container #site-header #edit-menu {
  grid-column: span 1;
}
#app-site-customization main.dashboard .site-customization-tabs-container #site-header #edit-menu #menu-editor-form > button {
  width: 100%;
  margin: 1rem 0;
}
#app-site-customization main.dashboard .site-customization-tabs-container #site-header #edit-menu .hidden-items-tip {
  width: var(--form-element-width);
}
#app-site-customization main.dashboard .site-customization-tabs-container #site-header #edit-menu .hidden-items-tip div {
  font-size: var(--fs-body-sm);
  color: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
#app-site-customization main.dashboard .site-customization-tabs-container #site-footer {
  width: 100%;
}
#app-site-customization main.dashboard .site-customization-tabs-container #site-footer .dashboard-widget.editor {
  padding: 0;
}
#app-site-customization main.dashboard .site-customization-tabs-container #site-footer .dashboard-widget.editor .title-container {
  display: none;
}
#app-site-customization main.dashboard .site-customization-tabs-container #site-footer .visual-page-editor {
  width: 100%;
}
@media screen and (max-width: 767px) {
  #app-site-customization main.dashboard .site-customization-tabs-container #site-footer .editor {
    display: none;
  }
}
#app-site-customization main.dashboard .site-customization-tabs-container #site-footer .visual-editor-not-available {
  display: none;
}
@media screen and (max-width: 767px) {
  #app-site-customization main.dashboard .site-customization-tabs-container #site-footer .visual-editor-not-available {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: var(--fs-h3);
    padding: 40px;
    color: color-mix(in srgb, var(--fg-body) 70%, transparent);
  }
}
#app-site-customization main.dashboard .site-customization-tabs-container #branding-form .message {
  max-width: var(--form-element-width);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}
#app-site-customization main.dashboard .site-customization-tabs-container #branding-form .message i {
  margin-top: 5px;
}
#app-site-customization main.dashboard .site-customization-tabs-container #theme-form input[type=file] {
  display: none;
}
#app-site-customization main.dashboard .site-customization-tabs-container .tab-container.header-and-footer {
  width: 100%;
  background-color: var(--bg-body);
  padding-top: 14px;
}
#app-site-customization main.dashboard .site-customization-tabs-container .tab-container.header-and-footer #header-container {
  padding: 0 0 6px;
}

#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;
  max-height: 100vh;
  min-height: initial;
  height: auto;
  overflow: auto;
  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 {
  /**
   * 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
   */
}
#app-dynamic #main-menu-v2 figure:is(.logo, .icon) img {
  height: 100%;
  max-height: 46px;
}
@media screen and (max-width: 767px) {
  #app-dynamic #main-menu-v2 + .logo {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  #app-dynamic #main-menu-v2 .sidebar-toggle {
    display: flex;
    width: 40px;
    height: var(--header-height);
    margin: 0;
    padding: 0;
  }
  #app-dynamic #main-menu-v2 .sidebar-toggle i {
    font-size: 28px;
    margin: 0;
  }
}
#app-dynamic #main-menu-v2 .main-menu-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 1000;
  border-right: 1px solid var(--bg-element);
  background: var(--fg-primary);
  padding-top: 2em;
  gap: 8px;
}
@media screen and (max-width: 767px) {
  #app-dynamic #main-menu-v2 .main-menu-container {
    position: absolute;
    left: calc(var(--sidebar-width) * -1);
    transition: transform var(--anim-step) ease-in-out;
    overflow: auto;
    padding-bottom: 2rem;
  }
}
#app-dynamic #main-menu-v2 .main-menu-container.open {
  transform: translateX(var(--sidebar-width));
}
#app-dynamic #main-menu-v2 .main-menu-container .collapsible {
  margin-top: 0;
  padding-bottom: 0;
}
#app-dynamic #main-menu-v2 .item.collapsible {
  max-height: var(--item-height);
}
#app-dynamic #main-menu-v2 .item.collapsible > h2:hover.collapse-title {
  color: var(--fg-button);
  background: var(--fg-accent);
}
#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 :is(.item.static, .item.function) {
  height: var(--item-height);
}
#app-dynamic #main-menu-v2 :is(.item.static, .item.function, .item.collapsible) {
  --item-height: 48px;
}
#app-dynamic #main-menu-v2 :is(.item.static, .item.function, .item.collapsible) .collapse-title {
  border: 0;
  margin: 0;
}
#app-dynamic #main-menu-v2 :is(.item.static, .item.function, .item.collapsible) a, #app-dynamic #main-menu-v2 :is(.item.static, .item.function, .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-button);
  transition: all var(--anim-step) ease;
  font-size: var(--fs-sidebar) !important;
  text-transform: none;
  margin-bottom: 0;
}
#app-dynamic #main-menu-v2 :is(.item.static, .item.function, .item.collapsible) a i, #app-dynamic #main-menu-v2 :is(.item.static, .item.function, .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 :is(.item.static, .item.function, .item.collapsible):hover > a, #app-dynamic #main-menu-v2 :is(.item.static, .item.function, .item.collapsible).active > a {
  color: var(--fg-button);
  background: var(--fg-accent);
  outline: 0;
  border: 0;
}
#app-dynamic #main-menu-v2 :is(.item.static, .item.function, .item.collapsible):hover > a .collapse-label, #app-dynamic #main-menu-v2 :is(.item.static, .item.function, .item.collapsible).active > a .collapse-label {
  color: var(--fg-button);
}
#app-dynamic #main-menu-v2 #install-pwa-button {
  width: var(--form-element-width);
  height: var(--form-element-height);
  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: 400;
  font-size: var(--fs-button);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.02em;
  color: var(--fg-button);
  background: var(--fg-primary);
  border: 0;
  /* faux buttons are elements that look like buttons but aren't interactable */
  width: 80%;
  margin-left: 10%;
}
#app-dynamic #main-menu-v2 #install-pwa-button.small {
  height: 36px;
  font-weight: 500;
  font-size: var(--fs-button-xsm);
  line-height: var(--lh-button-xsm);
}
#app-dynamic #main-menu-v2 #install-pwa-button.small i {
  font-size: var(--fs-button-xsm) !important;
  margin: 0 4px 0 0 !important;
}
#app-dynamic #main-menu-v2 #install-pwa-button > span, #app-dynamic #main-menu-v2 #install-pwa-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: 400;
  user-select: none;
}
#app-dynamic #main-menu-v2 #install-pwa-button i:is(.fa, .fas, .far, .fal) {
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  font-size: var(--fs-body-sm);
  margin: 0 8px 0;
}
#app-dynamic #main-menu-v2 #install-pwa-button i:is(.fa, .fas, .far, .fal):first-child {
  margin-left: 0;
}
#app-dynamic #main-menu-v2 #install-pwa-button i:is(.fa, .fas, .far, .fal):last-child {
  margin-right: 0;
}
#app-dynamic #main-menu-v2 #install-pwa-button.main {
  font-size: var(--fs-modal-title);
  line-height: var(--lh-modal-title);
  height: 50px;
}
#app-dynamic #main-menu-v2 #install-pwa-button.ok {
  background: var(--fg-secondary);
}
#app-dynamic #main-menu-v2 #install-pwa-button.warn {
  background: var(--fg-accent);
}
#app-dynamic #main-menu-v2 #install-pwa-button.danger {
  background: var(--fg-danger);
}
#app-dynamic #main-menu-v2 #install-pwa-button.secondary {
  background: var(--fg-secondary);
}
#app-dynamic #main-menu-v2 #install-pwa-button.alternate {
  background: var(--fg-alternate);
}
#app-dynamic #main-menu-v2 #install-pwa-button:is(:hover, :active, :focus) {
  opacity: 0.8;
  outline: 0;
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
#app-dynamic #main-menu-v2 #install-pwa-button:is(:hover, :active, :focus).ok {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
#app-dynamic #main-menu-v2 #install-pwa-button:is(:hover, :active, :focus).warn {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
#app-dynamic #main-menu-v2 #install-pwa-button:is(:hover, :active, :focus).danger {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
#app-dynamic #main-menu-v2 #install-pwa-button:is(:hover, :active, :focus).secondary {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
#app-dynamic #main-menu-v2 #install-pwa-button:is(:hover, :active, :focus).alternate {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
#app-dynamic #main-menu-v2 #install-pwa-button.icon {
  width: calc(var(--form-element-height) - 2px);
  height: calc(var(--form-element-height) - 2px);
}
#app-dynamic #main-menu-v2 #install-pwa-button.icon i:is(.fa, .fas, .far) {
  margin: 0 0 0 1px;
}
#app-dynamic #main-menu-v2 #install-pwa-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;
}
#app-dynamic #main-menu-v2 #install-pwa-button.stand-in.secondary {
  color: var(--fg-secondary);
  border-color: var(--fg-secondary);
}
#app-dynamic #main-menu-v2 #install-pwa-button.stand-in.alternate {
  color: var(--fg-alternate);
  border-color: var(--fg-alternate);
}
#app-dynamic #main-menu-v2 #install-pwa-button.stand-in:is(.accent, .warn) {
  color: var(--fg-accent);
  border-color: var(--fg-accent);
}
#app-dynamic #main-menu-v2 #install-pwa-button.stand-in:is(.danger, .error) {
  color: var(--fg-danger);
  border-color: var(--fg-danger);
}
#app-dynamic #main-menu-v2 #install-pwa-button.inverse {
  background: var(--bg-body);
  border: 1px solid var(--fg-primary);
  color: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
#app-dynamic #main-menu-v2 #install-pwa-button.inverse:focus {
  box-shadow: 0 0 3px 0 var(--fg-primary);
}
#app-dynamic #main-menu-v2 #install-pwa-button.inverse:is(.ok, .secondary) {
  border-color: var(--fg-secondary);
  color: var(--fg-secondary);
}
#app-dynamic #main-menu-v2 #install-pwa-button.inverse:is(.ok, .secondary):focus {
  box-shadow: 0 0 3px 0 var(--fg-secondary);
}
#app-dynamic #main-menu-v2 #install-pwa-button.inverse.warn {
  border-color: var(--fg-accent);
  color: var(--fg-accent);
}
#app-dynamic #main-menu-v2 #install-pwa-button.inverse.warn:focus {
  box-shadow: 0 0 3px 0 var(--fg-accent);
}
#app-dynamic #main-menu-v2 #install-pwa-button.inverse.danger {
  border-color: var(--fg-danger);
  color: var(--fg-danger);
}
#app-dynamic #main-menu-v2 #install-pwa-button.inverse.danger:focus {
  box-shadow: 0 0 3px 0 var(--fg-danger);
}
#app-dynamic #main-menu-v2 #install-pwa-button.inverse.alternate {
  border-color: var(--fg-alternate);
  color: var(--fg-alternate);
}
#app-dynamic #main-menu-v2 #install-pwa-button.inverse.alternate:focus {
  box-shadow: 0 0 3px 0 var(--fg-alternate);
}
#app-dynamic #main-menu-v2 #install-pwa-button.inline {
  width: 50px;
}
#app-dynamic #main-menu-v2 #install-pwa-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);
}
#app-dynamic #main-menu-v2 #install-pwa-button.subtle span {
  font-family: var(--font-stack-default);
}
#app-dynamic #main-menu-v2 #install-pwa-button.subtle:is(.forward, .back) i.fa {
  margin: 2px 3px 0 3px;
}
#app-dynamic #main-menu-v2 #install-pwa-button.subtle:is(:focus, :hover, :active) {
  outline: 0;
  box-shadow: unset;
  border: none;
  text-decoration: underline;
}
#app-dynamic #main-menu-v2 #install-pwa-button.subtle.primary {
  color: var(--fg-primary);
}
#app-dynamic #main-menu-v2 #install-pwa-button.subtle.secondary, #app-dynamic #main-menu-v2 #install-pwa-button.subtle.ok {
  color: var(--fg-secondary);
}
#app-dynamic #main-menu-v2 #install-pwa-button.subtle.alternate {
  color: var(--fg-accent);
}
#app-dynamic #main-menu-v2 #install-pwa-button.subtle.accent, #app-dynamic #main-menu-v2 #install-pwa-button.subtle.warning {
  color: var(--fg-accent);
}
#app-dynamic #main-menu-v2 #install-pwa-button.subtle.danger {
  color: var(--fg-danger);
}
#app-dynamic #main-menu-v2 #install-pwa-button:is(:disabled, .disabled) {
  color: var(--bg-element);
  background: var(--bg-main);
}
#app-dynamic #main-menu-v2 #install-pwa-button:is(:disabled, .disabled):is(.inverse, .stand-in) {
  opacity: 1;
  border-color: var(--bg-main);
  color: var(--bg-main);
  background: none;
}
#app-dynamic #main-menu-v2 #install-pwa-button:is(:disabled, .disabled).subtle {
  color: var(--bg-main);
  background: none;
  text-decoration: none;
}
#app-dynamic #main-menu-v2 #install-pwa-button:is(.disabled, :disabled, .faux) {
  cursor: default;
  pointer-events: none;
}
#app-dynamic #main-menu-v2 #install-pwa-button:is(.disabled, :disabled, .faux):is(:hover, :active, :focus) {
  opacity: 1;
  outline: 0;
  box-shadow: unset;
}
#app-dynamic #main-menu-v2 #install-pwa-button:is(.disabled, :disabled, .faux):is(.inverse, .stand-in):is(:focus, :active, :hover) {
  outline: 0;
  box-shadow: unset;
}
#app-dynamic #main-menu-v2 #install-pwa-button > a {
  color: var(--bg-body);
  width: auto;
  padding: 0.5rem 1rem;
}
#app-dynamic #main-menu-v2 #install-pwa-button > a i {
  margin-right: 0;
}
#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;
}
#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(.rich-text) .rich-content-wrapper .iframe-video-wrapper, #app-dynamic :is(.rich-text) .rich-content-wrapper .iframe-pdf-wrapper {
  display: block;
}
#app-dynamic :is(.rich-text) .rich-content-wrapper .iframe-pdf-wrapper {
  width: 100%;
  height: 85vh;
}
#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 .course-overview {
  min-height: 240px;
}
#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 .embed-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
#app-dynamic .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 .embed-wrapper .embedded-item {
  height: fit-content;
  flex-basis: 66.667%;
  flex-shrink: 0;
  overflow: hidden;
}
#app-dynamic .embed-wrapper .embedded-item img {
  width: 100%;
  height: fit-content;
  max-height: 600px;
  object-fit: contain;
}
@media screen and (max-width: 767px) {
  #app-dynamic .embed-wrapper {
    flex-wrap: wrap;
  }
  #app-dynamic .embed-wrapper .text, #app-dynamic .embed-wrapper .embedded-item {
    flex-basis: 100% !important;
    margin: 0 6px;
  }
}
#app-dynamic .embed-wrapper:not(.with-left-side) .text, #app-dynamic .embed-wrapper:not(.with-right-side) .text {
  flex-basis: 40%;
}
#app-dynamic .embed-wrapper:not(.with-left-side) .embedded-item, #app-dynamic .embed-wrapper:not(.with-right-side) .embedded-item {
  flex-basis: 60%;
}
#app-dynamic .embed-wrapper:not(.with-left-side):not(.with-right-side) .embedded-item {
  flex-basis: 100%;
}
#app-dynamic .embed-wrapper.small.with-left-side:not(.with-right-side) .text, #app-dynamic .embed-wrapper.small.with-right-side:not(.with-left-side) .text {
  flex-basis: 60%;
}
#app-dynamic .embed-wrapper.small.with-left-side:not(.with-right-side) .embedded-item, #app-dynamic .embed-wrapper.small.with-right-side:not(.with-left-side) .embedded-item {
  flex-basis: 40%;
}
#app-dynamic .embed-wrapper.small.with-left-side.with-right-side .text {
  flex-basis: 35%;
}
#app-dynamic .embed-wrapper.small.with-left-side.with-right-side .embedded-item {
  flex-basis: 30%;
}
#app-dynamic .embed-wrapper.with-content-card .text, #app-dynamic .embed-wrapper.with-content-card .embedded-item {
  flex-basis: unset !important;
}
#app-dynamic .embed-wrapper.with-content-card .embedded-item {
  padding: 0;
  margin: 0;
  box-shadow: unset;
}
#app-dynamic .embed-wrapper .video-player {
  height: calc(0.56 * (var(--body-width) - var(--form-element-width) - 1rem));
}
@media screen and (max-width: 767px) {
  #app-dynamic .embed-wrapper .video-player {
    height: calc(0.56 * var(--body-width));
    width: var(--body-width);
    margin: 0 -1rem;
  }
}
#app-dynamic .embed-wrapper .video-player iframe.player {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  background: black;
  z-index: 1;
}
#app-dynamic .embed-wrapper .video-player iframe.player.player-expanded {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 999999;
}
#app-dynamic .embed-wrapper .document-viewer {
  height: calc(0.8 * (var(--body-width) - var(--form-element-width) - 1rem));
  margin: 0 0 1rem;
}
@media screen and (max-width: 767px) {
  #app-dynamic .embed-wrapper .document-viewer {
    height: calc(0.8 * var(--body-width));
    width: var(--body-width);
    margin: 0 -1rem;
  }
}
#app-dynamic .embed-wrapper .document-viewer iframe.viewer {
  border: 0;
  width: 100%;
  height: calc(100% - var(--form-element-height) - 6px);
}
#app-dynamic main.page.visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin: 0 auto;
}
#app-dynamic main.page.visual > * {
  width: 100%;
  max-width: var(--body-width);
}
#app-dynamic main.page.visual > *:is(.full-width, .gjs-full-width) {
  max-width: initial;
}
#app-dynamic main.page.visual img {
  max-width: 100%;
}
#app-dynamic main.page.visual .video-player {
  position: relative;
  width: 100%;
  padding: 26.5%;
}
#app-dynamic main.page.visual .video-player iframe {
  position: absolute;
  top: 0;
  left: 0;
}

#app-dynamic div.course-meta, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] div.course-meta {
    justify-content: center;
    flex-direction: column;
  }
}
#app-dynamic div.course-meta .enrollment .date, [data-gjs-type=wrapper] div.course-meta .enrollment .date {
  text-align: center;
}
#app-dynamic div.course-meta div.course-meta-block, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] div.course-meta div.course-meta-block.enrollment button {
  margin: 0;
}
#app-dynamic div.course-meta div.course-meta-block .label, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] div.course-meta div.course-meta-block .value button {
  transform: scale(0.8);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled, [data-gjs-type=wrapper] div.course-meta div.course-meta-block .enrolled {
  width: var(--form-element-width);
  height: var(--form-element-height);
  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: 400;
  font-size: var(--fs-button);
  font-family: var(--font-stack-spaced);
  cursor: pointer;
  transition: opacity var(--anim-step);
  padding: var(--button-padding);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  letter-spacing: 0.02em;
  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.small, [data-gjs-type=wrapper] div.course-meta div.course-meta-block .enrolled.small {
  height: 36px;
  font-weight: 500;
  font-size: var(--fs-button-xsm);
  line-height: var(--lh-button-xsm);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.small i, [data-gjs-type=wrapper] div.course-meta div.course-meta-block .enrolled.small i {
  font-size: var(--fs-button-xsm) !important;
  margin: 0 4px 0 0 !important;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled > span, #app-dynamic div.course-meta div.course-meta-block .enrolled label span, [data-gjs-type=wrapper] div.course-meta div.course-meta-block .enrolled > span, [data-gjs-type=wrapper] 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: 400;
  user-select: none;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled i:is(.fa, .fas, .far, .fal), [data-gjs-type=wrapper] div.course-meta div.course-meta-block .enrolled i:is(.fa, .fas, .far, .fal) {
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  font-size: var(--fs-body-sm);
  margin: 0 8px 0;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled i:is(.fa, .fas, .far, .fal):first-child, [data-gjs-type=wrapper] div.course-meta div.course-meta-block .enrolled i:is(.fa, .fas, .far, .fal):first-child {
  margin-left: 0;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled i:is(.fa, .fas, .far, .fal):last-child, [data-gjs-type=wrapper] div.course-meta div.course-meta-block .enrolled i:is(.fa, .fas, .far, .fal):last-child {
  margin-right: 0;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.main, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] div.course-meta div.course-meta-block .enrolled.ok {
  background: var(--fg-secondary);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.warn, [data-gjs-type=wrapper] div.course-meta div.course-meta-block .enrolled.warn {
  background: var(--fg-accent);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.danger, [data-gjs-type=wrapper] div.course-meta div.course-meta-block .enrolled.danger {
  background: var(--fg-danger);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.secondary, [data-gjs-type=wrapper] div.course-meta div.course-meta-block .enrolled.secondary {
  background: var(--fg-secondary);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.alternate, [data-gjs-type=wrapper] 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), [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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), [data-gjs-type=wrapper] div.course-meta div.course-meta-block .enrolled.icon i:is(.fa, .fas, .far) {
  margin: 0 0 0 1px;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.stand-in, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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), [data-gjs-type=wrapper] 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), [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] div.course-meta div.course-meta-block .enrolled.inverse {
  background: var(--bg-body);
  border: 1px solid var(--fg-primary);
  color: color-mix(in srgb, var(--fg-body) 70%, transparent);
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.inverse:focus, [data-gjs-type=wrapper] 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), [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] div.course-meta div.course-meta-block .enrolled.inline {
  width: 50px;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.subtle, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] div.course-meta div.course-meta-block .enrolled.subtle:is(.forward, .back) i.fa {
  margin: 2px 3px 0 3px;
}
#app-dynamic div.course-meta div.course-meta-block .enrolled.subtle:is(:focus, :hover, :active), [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] div.course-meta div.course-meta-block .enrolled.subtle.secondary, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] div.course-meta div.course-meta-block .enrolled.subtle.accent, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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), [data-gjs-type=wrapper] 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), [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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), [data-gjs-type=wrapper] 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), [data-gjs-type=wrapper] 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), [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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, [data-gjs-type=wrapper] 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 .course-title, [data-gjs-type=wrapper] .course-overview .course-title {
  color: var(--fg-primary);
}
#app-dynamic .course-overview .course-description, [data-gjs-type=wrapper] .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, [data-gjs-type=wrapper] .course-overview .course-description {
    width: calc(100vw - 2rem);
    margin: 0 1rem;
  }
}
#app-dynamic main.page.visual img, [data-gjs-type=wrapper] main.page.visual img {
  max-width: 100%;
}
#app-dynamic main.page.visual .video-player, [data-gjs-type=wrapper] main.page.visual .video-player {
  position: relative;
  width: 100%;
  padding: 26.5%;
}
#app-dynamic main.page.visual .video-player iframe, [data-gjs-type=wrapper] main.page.visual .video-player iframe {
  position: absolute;
  top: 0;
  left: 0;
}

#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 .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;
  align-items: center;
}
#app-pdf main#doc-viewer {
  position: relative;
  display: flex;
  height: auto;
  flex-grow: 1;
  flex-shrink: 0;
  overflow: hidden;
  width: 100%;
  max-width: var(--body-width);
}
@media screen and (max-width: 767px) {
  #app-pdf main#doc-viewer {
    flex-wrap: wrap;
    flex-grow: 0;
  }
}
#app-pdf main#doc-viewer .iframe-container {
  width: 100%;
}
#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 p {
  text-align: center;
  font-size: var(--fs-h4);
  font-weight: 400;
}
@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: 3rem 1.5rem;
  }
  #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);
}
@media screen and (max-width: 767px) {
  #app-pdf main#doc-viewer #doc-direct-link > button {
    margin-left: auto;
  }
}
#app-pdf main#doc-viewer .iframe-container, #app-pdf main#doc-viewer #doc-direct-link {
  position: relative;
  flex-grow: 1;
  flex-basis: 70%;
}
@media screen and (max-width: 767px) {
  #app-pdf main#doc-viewer .iframe-container, #app-pdf main#doc-viewer #doc-direct-link {
    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;
  object-fit: cover;
}
#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);
  outline: none;
  font-weight: 400;
  font-size: var(--fs-body);
  border: 0;
  border-radius: var(--form-element-radius);
  background: var(--bg-dashboard);
  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: color-mix(in srgb, var(--fg-body) 50%, transparent);
}
#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 .recipient {
  animation: fade-in-opacity 0.5s ease;
}
#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);
}

#app-video-player {
  width: 100dvw;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
}

.section.form {
  position: relative;
}
.section.form .questions-carousel.questions-wrap {
  --question-margin: 55px;
  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;
}
.section.form .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;
}
.section.form .questions::-webkit-scrollbar {
  display: none;
}
.section.form .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;
}
.section.form .questions .question > p {
  margin: 1rem 2rem;
  font-size: 20px;
  color: var(--fg-primary);
}
.section.form .questions .question > p:first-of-type {
  margin-top: 0;
}
.section.form .questions .question > .controls {
  width: 100%;
  margin-top: 1.5rem;
}
.section.form .questions .question > .controls .footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section.form .questions .question > .controls .footer button {
  margin: 0;
}
.section.form .questions .question > .controls .footer button:not(:first-child) {
  margin-left: 1rem;
}
.section.form .questions .question ol li::marker {
  color: var(--fg-primary);
}
.section.form .questions .question ol li div {
  margin-left: 0.5rem;
}
.section.form .questions .question ol li span {
  color: var(--fg-soft);
}

span.country-flag.country-flag-f32 {
  display: block;
  width: 16px;
  height: 16px;
  background: url(/media/flags32.png) no-repeat;
}
span.country-flag.country-flag-f32._African_Union {
  background-position: 0 -32px;
}
span.country-flag.country-flag-f32._Arab_League {
  background-position: 0 -64px;
}
span.country-flag.country-flag-f32._ASEAN {
  background-position: 0 -96px;
}
span.country-flag.country-flag-f32._CARICOM {
  background-position: 0 -128px;
}
span.country-flag.country-flag-f32._CIS {
  background-position: 0 -160px;
}
span.country-flag.country-flag-f32._Commonwealth {
  background-position: 0 -192px;
}
span.country-flag.country-flag-f32._England {
  background-position: 0 -224px;
}
span.country-flag.country-flag-f32._European_Union {
  background-position: 0 -256px;
}
span.country-flag.country-flag-f32._Islamic_Conference {
  background-position: 0 -288px;
}
span.country-flag.country-flag-f32._Kosovo {
  background-position: 0 -320px;
}
span.country-flag.country-flag-f32._NATO {
  background-position: 0 -352px;
}
span.country-flag.country-flag-f32._Northern_Cyprus {
  background-position: 0 -384px;
}
span.country-flag.country-flag-f32._Northern_Ireland {
  background-position: 0 -416px;
}
span.country-flag.country-flag-f32._Olimpic_Movement {
  background-position: 0 -448px;
}
span.country-flag.country-flag-f32._OPEC {
  background-position: 0 -480px;
}
span.country-flag.country-flag-f32._Red_Cross {
  background-position: 0 -512px;
}
span.country-flag.country-flag-f32._Scotland {
  background-position: 0 -544px;
}
span.country-flag.country-flag-f32._Somaliland {
  background-position: 0 -576px;
}
span.country-flag.country-flag-f32._Tibet {
  background-position: 0 -608px;
}
span.country-flag.country-flag-f32._United_Nations {
  background-position: 0 -640px;
}
span.country-flag.country-flag-f32._Wales {
  background-position: 0 -672px;
}
span.country-flag.country-flag-f32.eu {
  background-position: 0 -256px;
}
span.country-flag.country-flag-f32.ad, span.country-flag.country-flag-f32.and {
  background-position: 0 -704px;
}
span.country-flag.country-flag-f32.ae, span.country-flag.country-flag-f32.are {
  background-position: 0 -736px;
}
span.country-flag.country-flag-f32.af, span.country-flag.country-flag-f32.afg {
  background-position: 0 -768px;
}
span.country-flag.country-flag-f32.ag, span.country-flag.country-flag-f32.atg {
  background-position: 0 -800px;
}
span.country-flag.country-flag-f32.ai, span.country-flag.country-flag-f32.aia {
  background-position: 0 -832px;
}
span.country-flag.country-flag-f32.al, span.country-flag.country-flag-f32.alb {
  background-position: 0 -864px;
}
span.country-flag.country-flag-f32.am, span.country-flag.country-flag-f32.arm {
  background-position: 0 -896px;
}
span.country-flag.country-flag-f32.ao, span.country-flag.country-flag-f32.ago {
  background-position: 0 -928px;
}
span.country-flag.country-flag-f32.aq, span.country-flag.country-flag-f32.ata {
  background-position: 0 -960px;
}
span.country-flag.country-flag-f32.ar, span.country-flag.country-flag-f32.arg {
  background-position: 0 -992px;
}
span.country-flag.country-flag-f32.as, span.country-flag.country-flag-f32.asm {
  background-position: 0 -1024px;
}
span.country-flag.country-flag-f32.at, span.country-flag.country-flag-f32.aut {
  background-position: 0 -1056px;
}
span.country-flag.country-flag-f32.au, span.country-flag.country-flag-f32.aus {
  background-position: 0 -1088px;
}
span.country-flag.country-flag-f32.aw, span.country-flag.country-flag-f32.abw {
  background-position: 0 -1120px;
}
span.country-flag.country-flag-f32.ax, span.country-flag.country-flag-f32.ala {
  background-position: 0 -1152px;
}
span.country-flag.country-flag-f32.az, span.country-flag.country-flag-f32.aze {
  background-position: 0 -1184px;
}
span.country-flag.country-flag-f32.ba, span.country-flag.country-flag-f32.bih {
  background-position: 0 -1216px;
}
span.country-flag.country-flag-f32.bb, span.country-flag.country-flag-f32.brb {
  background-position: 0 -1248px;
}
span.country-flag.country-flag-f32.bd, span.country-flag.country-flag-f32.bgd {
  background-position: 0 -1280px;
}
span.country-flag.country-flag-f32.be, span.country-flag.country-flag-f32.bel {
  background-position: 0 -1312px;
}
span.country-flag.country-flag-f32.bf, span.country-flag.country-flag-f32.bfa {
  background-position: 0 -1344px;
}
span.country-flag.country-flag-f32.bg, span.country-flag.country-flag-f32.bgr {
  background-position: 0 -1376px;
}
span.country-flag.country-flag-f32.bh, span.country-flag.country-flag-f32.bhr {
  background-position: 0 -1408px;
}
span.country-flag.country-flag-f32.bi, span.country-flag.country-flag-f32.bdi {
  background-position: 0 -1440px;
}
span.country-flag.country-flag-f32.bj, span.country-flag.country-flag-f32.ben {
  background-position: 0 -1472px;
}
span.country-flag.country-flag-f32.bm, span.country-flag.country-flag-f32.bmu {
  background-position: 0 -1504px;
}
span.country-flag.country-flag-f32.bn, span.country-flag.country-flag-f32.brn {
  background-position: 0 -1536px;
}
span.country-flag.country-flag-f32.bo, span.country-flag.country-flag-f32.bol {
  background-position: 0 -1568px;
}
span.country-flag.country-flag-f32.br, span.country-flag.country-flag-f32.bra {
  background-position: 0 -1600px;
}
span.country-flag.country-flag-f32.bs, span.country-flag.country-flag-f32.bhs {
  background-position: 0 -1632px;
}
span.country-flag.country-flag-f32.bt, span.country-flag.country-flag-f32.btn {
  background-position: 0 -1664px;
}
span.country-flag.country-flag-f32.bw, span.country-flag.country-flag-f32.bwa {
  background-position: 0 -1696px;
}
span.country-flag.country-flag-f32.by, span.country-flag.country-flag-f32.blr {
  background-position: 0 -1728px;
}
span.country-flag.country-flag-f32.bz, span.country-flag.country-flag-f32.blz {
  background-position: 0 -1760px;
}
span.country-flag.country-flag-f32.ca, span.country-flag.country-flag-f32.can {
  background-position: 0 -1792px;
}
span.country-flag.country-flag-f32.cd, span.country-flag.country-flag-f32.cod {
  background-position: 0 -1824px;
}
span.country-flag.country-flag-f32.cf, span.country-flag.country-flag-f32.rca {
  background-position: 0 -1856px;
}
span.country-flag.country-flag-f32.cg, span.country-flag.country-flag-f32.cog {
  background-position: 0 -1888px;
}
span.country-flag.country-flag-f32.ch, span.country-flag.country-flag-f32.che {
  background-position: 0 -1920px;
}
span.country-flag.country-flag-f32.ci, span.country-flag.country-flag-f32.civ {
  background-position: 0 -1952px;
}
span.country-flag.country-flag-f32.ck, span.country-flag.country-flag-f32.cok {
  background-position: 0 -1984px;
}
span.country-flag.country-flag-f32.cl, span.country-flag.country-flag-f32.chl {
  background-position: 0 -2016px;
}
span.country-flag.country-flag-f32.cm, span.country-flag.country-flag-f32.cmr {
  background-position: 0 -2048px;
}
span.country-flag.country-flag-f32.cn, span.country-flag.country-flag-f32.chn {
  background-position: 0 -2080px;
}
span.country-flag.country-flag-f32.co, span.country-flag.country-flag-f32.col {
  background-position: 0 -2112px;
}
span.country-flag.country-flag-f32.cr, span.country-flag.country-flag-f32.cri {
  background-position: 0 -2144px;
}
span.country-flag.country-flag-f32.cu, span.country-flag.country-flag-f32.cub {
  background-position: 0 -2176px;
}
span.country-flag.country-flag-f32.cv, span.country-flag.country-flag-f32.cpv {
  background-position: 0 -2208px;
}
span.country-flag.country-flag-f32.cy, span.country-flag.country-flag-f32.cyp {
  background-position: 0 -2240px;
}
span.country-flag.country-flag-f32.cz, span.country-flag.country-flag-f32.cze {
  background-position: 0 -2272px;
}
span.country-flag.country-flag-f32.de, span.country-flag.country-flag-f32.deu {
  background-position: 0 -2304px;
}
span.country-flag.country-flag-f32.dj, span.country-flag.country-flag-f32.dji {
  background-position: 0 -2336px;
}
span.country-flag.country-flag-f32.dk, span.country-flag.country-flag-f32.dnk {
  background-position: 0 -2368px;
}
span.country-flag.country-flag-f32.dm, span.country-flag.country-flag-f32.dma {
  background-position: 0 -2400px;
}
span.country-flag.country-flag-f32.do, span.country-flag.country-flag-f32.dom {
  background-position: 0 -2432px;
}
span.country-flag.country-flag-f32.dz, span.country-flag.country-flag-f32.dza {
  background-position: 0 -2464px;
}
span.country-flag.country-flag-f32.ec, span.country-flag.country-flag-f32.ecu {
  background-position: 0 -2496px;
}
span.country-flag.country-flag-f32.ee, span.country-flag.country-flag-f32.est {
  background-position: 0 -2528px;
}
span.country-flag.country-flag-f32.eg, span.country-flag.country-flag-f32.egy {
  background-position: 0 -2560px;
}
span.country-flag.country-flag-f32.eh, span.country-flag.country-flag-f32.esh {
  background-position: 0 -2592px;
}
span.country-flag.country-flag-f32.er, span.country-flag.country-flag-f32.eri {
  background-position: 0 -2624px;
}
span.country-flag.country-flag-f32.es, span.country-flag.country-flag-f32.esp {
  background-position: 0 -2656px;
}
span.country-flag.country-flag-f32.et, span.country-flag.country-flag-f32.eth {
  background-position: 0 -2688px;
}
span.country-flag.country-flag-f32.fi, span.country-flag.country-flag-f32.fin {
  background-position: 0 -2720px;
}
span.country-flag.country-flag-f32.fj, span.country-flag.country-flag-f32.fji {
  background-position: 0 -2752px;
}
span.country-flag.country-flag-f32.fm, span.country-flag.country-flag-f32.fsm {
  background-position: 0 -2784px;
}
span.country-flag.country-flag-f32.fo, span.country-flag.country-flag-f32.fro {
  background-position: 0 -2816px;
}
span.country-flag.country-flag-f32.fr, span.country-flag.country-flag-f32.fra {
  background-position: 0 -2848px;
}
span.country-flag.country-flag-f32.bl, span.country-flag.country-flag-f32.blm {
  background-position: 0 -2848px;
}
span.country-flag.country-flag-f32.cp, span.country-flag.country-flag-f32.cpt {
  background-position: 0 -2848px;
}
span.country-flag.country-flag-f32.mf, span.country-flag.country-flag-f32.maf {
  background-position: 0 -2848px;
}
span.country-flag.country-flag-f32.yt, span.country-flag.country-flag-f32.myt {
  background-position: 0 -2848px;
}
span.country-flag.country-flag-f32.ga, span.country-flag.country-flag-f32.gab {
  background-position: 0 -2880px;
}
span.country-flag.country-flag-f32.gb, span.country-flag.country-flag-f32.gbr {
  background-position: 0 -2912px;
}
span.country-flag.country-flag-f32.sh, span.country-flag.country-flag-f32.shn {
  background-position: 0 -2912px;
}
span.country-flag.country-flag-f32.gd, span.country-flag.country-flag-f32.grd {
  background-position: 0 -2944px;
}
span.country-flag.country-flag-f32.ge, span.country-flag.country-flag-f32.geo {
  background-position: 0 -2976px;
}
span.country-flag.country-flag-f32.gg, span.country-flag.country-flag-f32.ggy {
  background-position: 0 -3008px;
}
span.country-flag.country-flag-f32.gh, span.country-flag.country-flag-f32.gha {
  background-position: 0 -3040px;
}
span.country-flag.country-flag-f32.gi, span.country-flag.country-flag-f32.gib {
  background-position: 0 -3072px;
}
span.country-flag.country-flag-f32.gl, span.country-flag.country-flag-f32.grl {
  background-position: 0 -3104px;
}
span.country-flag.country-flag-f32.gm, span.country-flag.country-flag-f32.gmb {
  background-position: 0 -3136px;
}
span.country-flag.country-flag-f32.gn, span.country-flag.country-flag-f32.gin {
  background-position: 0 -3168px;
}
span.country-flag.country-flag-f32.gp, span.country-flag.country-flag-f32.glp {
  background-position: 0 -3200px;
}
span.country-flag.country-flag-f32.gq, span.country-flag.country-flag-f32.gnq {
  background-position: 0 -3232px;
}
span.country-flag.country-flag-f32.gr, span.country-flag.country-flag-f32.grc {
  background-position: 0 -3264px;
}
span.country-flag.country-flag-f32.gt, span.country-flag.country-flag-f32.gtm {
  background-position: 0 -3296px;
}
span.country-flag.country-flag-f32.gu, span.country-flag.country-flag-f32.gum {
  background-position: 0 -3328px;
}
span.country-flag.country-flag-f32.gw, span.country-flag.country-flag-f32.gnb {
  background-position: 0 -3360px;
}
span.country-flag.country-flag-f32.gy, span.country-flag.country-flag-f32.guy {
  background-position: 0 -3392px;
}
span.country-flag.country-flag-f32.hk, span.country-flag.country-flag-f32.hkg {
  background-position: 0 -3424px;
}
span.country-flag.country-flag-f32.hn, span.country-flag.country-flag-f32.hnd {
  background-position: 0 -3456px;
}
span.country-flag.country-flag-f32.hr, span.country-flag.country-flag-f32.hrv {
  background-position: 0 -3488px;
}
span.country-flag.country-flag-f32.ht, span.country-flag.country-flag-f32.hti {
  background-position: 0 -3520px;
}
span.country-flag.country-flag-f32.hu, span.country-flag.country-flag-f32.hun {
  background-position: 0 -3552px;
}
span.country-flag.country-flag-f32.id, span.country-flag.country-flag-f32.idn {
  background-position: 0 -3584px;
}
span.country-flag.country-flag-f32.mc, span.country-flag.country-flag-f32.mco {
  background-position: 0 -3584px;
}
span.country-flag.country-flag-f32.ie, span.country-flag.country-flag-f32.irl {
  background-position: 0 -3616px;
}
span.country-flag.country-flag-f32.il, span.country-flag.country-flag-f32.isr {
  background-position: 0 -3648px;
}
span.country-flag.country-flag-f32.im, span.country-flag.country-flag-f32.imn {
  background-position: 0 -3680px;
}
span.country-flag.country-flag-f32.in, span.country-flag.country-flag-f32.ind {
  background-position: 0 -3712px;
}
span.country-flag.country-flag-f32.iq, span.country-flag.country-flag-f32.irq {
  background-position: 0 -3744px;
}
span.country-flag.country-flag-f32.ir, span.country-flag.country-flag-f32.irn {
  background-position: 0 -3776px;
}
span.country-flag.country-flag-f32.is, span.country-flag.country-flag-f32.isl {
  background-position: 0 -3808px;
}
span.country-flag.country-flag-f32.it, span.country-flag.country-flag-f32.ita {
  background-position: 0 -3840px;
}
span.country-flag.country-flag-f32.je, span.country-flag.country-flag-f32.jey {
  background-position: 0 -3872px;
}
span.country-flag.country-flag-f32.jm, span.country-flag.country-flag-f32.jam {
  background-position: 0 -3904px;
}
span.country-flag.country-flag-f32.jo, span.country-flag.country-flag-f32.jor {
  background-position: 0 -3936px;
}
span.country-flag.country-flag-f32.jp, span.country-flag.country-flag-f32.jpn {
  background-position: 0 -3968px;
}
span.country-flag.country-flag-f32.ke, span.country-flag.country-flag-f32.ken {
  background-position: 0 -4000px;
}
span.country-flag.country-flag-f32.kg, span.country-flag.country-flag-f32.kgz {
  background-position: 0 -4032px;
}
span.country-flag.country-flag-f32.kh, span.country-flag.country-flag-f32.khm {
  background-position: 0 -4064px;
}
span.country-flag.country-flag-f32.ki, span.country-flag.country-flag-f32.kir {
  background-position: 0 -4096px;
}
span.country-flag.country-flag-f32.km, span.country-flag.country-flag-f32.com {
  background-position: 0 -4128px;
}
span.country-flag.country-flag-f32.kn, span.country-flag.country-flag-f32.kna {
  background-position: 0 -4160px;
}
span.country-flag.country-flag-f32.kp, span.country-flag.country-flag-f32.prk {
  background-position: 0 -4192px;
}
span.country-flag.country-flag-f32.kr, span.country-flag.country-flag-f32.kor {
  background-position: 0 -4224px;
}
span.country-flag.country-flag-f32.kw, span.country-flag.country-flag-f32.kwt {
  background-position: 0 -4256px;
}
span.country-flag.country-flag-f32.ky, span.country-flag.country-flag-f32.cym {
  background-position: 0 -4288px;
}
span.country-flag.country-flag-f32.kz, span.country-flag.country-flag-f32.kaz {
  background-position: 0 -4320px;
}
span.country-flag.country-flag-f32.la, span.country-flag.country-flag-f32.lao {
  background-position: 0 -4352px;
}
span.country-flag.country-flag-f32.lb, span.country-flag.country-flag-f32.lbn {
  background-position: 0 -4384px;
}
span.country-flag.country-flag-f32.lc, span.country-flag.country-flag-f32.lca {
  background-position: 0 -4416px;
}
span.country-flag.country-flag-f32.li, span.country-flag.country-flag-f32.lie {
  background-position: 0 -4448px;
}
span.country-flag.country-flag-f32.lk, span.country-flag.country-flag-f32.lka {
  background-position: 0 -4480px;
}
span.country-flag.country-flag-f32.lr, span.country-flag.country-flag-f32.lbr {
  background-position: 0 -4512px;
}
span.country-flag.country-flag-f32.ls, span.country-flag.country-flag-f32.lso {
  background-position: 0 -4544px;
}
span.country-flag.country-flag-f32.lt, span.country-flag.country-flag-f32.ltu {
  background-position: 0 -4576px;
}
span.country-flag.country-flag-f32.lu, span.country-flag.country-flag-f32.lux {
  background-position: 0 -4608px;
}
span.country-flag.country-flag-f32.lv, span.country-flag.country-flag-f32.lva {
  background-position: 0 -4640px;
}
span.country-flag.country-flag-f32.ly, span.country-flag.country-flag-f32.lby {
  background-position: 0 -4672px;
}
span.country-flag.country-flag-f32.ma, span.country-flag.country-flag-f32.mar {
  background-position: 0 -4704px;
}
span.country-flag.country-flag-f32.md, span.country-flag.country-flag-f32.mda {
  background-position: 0 -4736px;
}
span.country-flag.country-flag-f32.me, span.country-flag.country-flag-f32.mne {
  background-position: 0 -4768px;
}
span.country-flag.country-flag-f32.mg, span.country-flag.country-flag-f32.mdg {
  background-position: 0 -4800px;
}
span.country-flag.country-flag-f32.mh, span.country-flag.country-flag-f32.mhl {
  background-position: 0 -4832px;
}
span.country-flag.country-flag-f32.mk, span.country-flag.country-flag-f32.mkd {
  background-position: 0 -4864px;
}
span.country-flag.country-flag-f32.ml, span.country-flag.country-flag-f32.mli {
  background-position: 0 -4896px;
}
span.country-flag.country-flag-f32.mm, span.country-flag.country-flag-f32.mmr {
  background-position: 0 -4928px;
}
span.country-flag.country-flag-f32.mn, span.country-flag.country-flag-f32.mng {
  background-position: 0 -4960px;
}
span.country-flag.country-flag-f32.mo, span.country-flag.country-flag-f32.mac {
  background-position: 0 -4992px;
}
span.country-flag.country-flag-f32.mq, span.country-flag.country-flag-f32.mtq {
  background-position: 0 -5024px;
}
span.country-flag.country-flag-f32.mr, span.country-flag.country-flag-f32.mrt {
  background-position: 0 -5056px;
}
span.country-flag.country-flag-f32.ms, span.country-flag.country-flag-f32.msr {
  background-position: 0 -5088px;
}
span.country-flag.country-flag-f32.mt, span.country-flag.country-flag-f32.mlt {
  background-position: 0 -5120px;
}
span.country-flag.country-flag-f32.mu, span.country-flag.country-flag-f32.mus {
  background-position: 0 -5152px;
}
span.country-flag.country-flag-f32.mv, span.country-flag.country-flag-f32.mdv {
  background-position: 0 -5184px;
}
span.country-flag.country-flag-f32.mw, span.country-flag.country-flag-f32.mwi {
  background-position: 0 -5216px;
}
span.country-flag.country-flag-f32.mx, span.country-flag.country-flag-f32.mex {
  background-position: 0 -5248px;
}
span.country-flag.country-flag-f32.my, span.country-flag.country-flag-f32.mys {
  background-position: 0 -5280px;
}
span.country-flag.country-flag-f32.mz, span.country-flag.country-flag-f32.moz {
  background-position: 0 -5312px;
}
span.country-flag.country-flag-f32.na, span.country-flag.country-flag-f32.nam {
  background-position: 0 -5344px;
}
span.country-flag.country-flag-f32.nc, span.country-flag.country-flag-f32.ncl {
  background-position: 0 -5376px;
}
span.country-flag.country-flag-f32.ne, span.country-flag.country-flag-f32.ner {
  background-position: 0 -5408px;
}
span.country-flag.country-flag-f32.ng, span.country-flag.country-flag-f32.nga {
  background-position: 0 -5440px;
}
span.country-flag.country-flag-f32.ni, span.country-flag.country-flag-f32.nic {
  background-position: 0 -5472px;
}
span.country-flag.country-flag-f32.nl, span.country-flag.country-flag-f32.nld {
  background-position: 0 -5504px;
}
span.country-flag.country-flag-f32.bq, span.country-flag.country-flag-f32.bes {
  background-position: 0 -5504px;
}
span.country-flag.country-flag-f32.no, span.country-flag.country-flag-f32.nor {
  background-position: 0 -5536px;
}
span.country-flag.country-flag-f32.bv, span.country-flag.country-flag-f32.bvt {
  background-position: 0 -5536px;
}
span.country-flag.country-flag-f32.nq, span.country-flag.country-flag-f32.atn {
  background-position: 0 -5536px;
}
span.country-flag.country-flag-f32.sj, span.country-flag.country-flag-f32.sjm {
  background-position: 0 -5536px;
}
span.country-flag.country-flag-f32.np, span.country-flag.country-flag-f32.npl {
  background-position: 0 -5568px;
}
span.country-flag.country-flag-f32.nr, span.country-flag.country-flag-f32.nru {
  background-position: 0 -5600px;
}
span.country-flag.country-flag-f32.nz, span.country-flag.country-flag-f32.nzl {
  background-position: 0 -5632px;
}
span.country-flag.country-flag-f32.om, span.country-flag.country-flag-f32.omn {
  background-position: 0 -5664px;
}
span.country-flag.country-flag-f32.pa, span.country-flag.country-flag-f32.pan {
  background-position: 0 -5696px;
}
span.country-flag.country-flag-f32.pe, span.country-flag.country-flag-f32.per {
  background-position: 0 -5728px;
}
span.country-flag.country-flag-f32.pf, span.country-flag.country-flag-f32.pyf {
  background-position: 0 -5760px;
}
span.country-flag.country-flag-f32.pg, span.country-flag.country-flag-f32.png {
  background-position: 0 -5792px;
}
span.country-flag.country-flag-f32.ph, span.country-flag.country-flag-f32.phl {
  background-position: 0 -5824px;
}
span.country-flag.country-flag-f32.pk, span.country-flag.country-flag-f32.pak {
  background-position: 0 -5856px;
}
span.country-flag.country-flag-f32.pl, span.country-flag.country-flag-f32.pol {
  background-position: 0 -5888px;
}
span.country-flag.country-flag-f32.pr, span.country-flag.country-flag-f32.pri {
  background-position: 0 -5920px;
}
span.country-flag.country-flag-f32.ps, span.country-flag.country-flag-f32.pse {
  background-position: 0 -5952px;
}
span.country-flag.country-flag-f32.pt, span.country-flag.country-flag-f32.prt {
  background-position: 0 -5984px;
}
span.country-flag.country-flag-f32.pw, span.country-flag.country-flag-f32.plw {
  background-position: 0 -6016px;
}
span.country-flag.country-flag-f32.py, span.country-flag.country-flag-f32.pry {
  background-position: 0 -6048px;
}
span.country-flag.country-flag-f32.qa, span.country-flag.country-flag-f32.qat {
  background-position: 0 -6080px;
}
span.country-flag.country-flag-f32.re, span.country-flag.country-flag-f32.reu {
  background-position: 0 -6112px;
}
span.country-flag.country-flag-f32.ro, span.country-flag.country-flag-f32.rou {
  background-position: 0 -6144px;
}
span.country-flag.country-flag-f32.rs, span.country-flag.country-flag-f32.srb {
  background-position: 0 -6176px;
}
span.country-flag.country-flag-f32.ru, span.country-flag.country-flag-f32.rus {
  background-position: 0 -6208px;
}
span.country-flag.country-flag-f32.rw, span.country-flag.country-flag-f32.rwa {
  background-position: 0 -6240px;
}
span.country-flag.country-flag-f32.sa, span.country-flag.country-flag-f32.sau {
  background-position: 0 -6272px;
}
span.country-flag.country-flag-f32.sb, span.country-flag.country-flag-f32.slb {
  background-position: 0 -6304px;
}
span.country-flag.country-flag-f32.sc, span.country-flag.country-flag-f32.syc {
  background-position: 0 -6336px;
}
span.country-flag.country-flag-f32.sd, span.country-flag.country-flag-f32.sdn {
  background-position: 0 -6368px;
}
span.country-flag.country-flag-f32.se, span.country-flag.country-flag-f32.swe {
  background-position: 0 -6400px;
}
span.country-flag.country-flag-f32.sg, span.country-flag.country-flag-f32.sgp {
  background-position: 0 -6432px;
}
span.country-flag.country-flag-f32.si, span.country-flag.country-flag-f32.svn {
  background-position: 0 -6464px;
}
span.country-flag.country-flag-f32.sk, span.country-flag.country-flag-f32.svk {
  background-position: 0 -6496px;
}
span.country-flag.country-flag-f32.sl, span.country-flag.country-flag-f32.sle {
  background-position: 0 -6528px;
}
span.country-flag.country-flag-f32.sm, span.country-flag.country-flag-f32.smr {
  background-position: 0 -6560px;
}
span.country-flag.country-flag-f32.sn, span.country-flag.country-flag-f32.sen {
  background-position: 0 -6592px;
}
span.country-flag.country-flag-f32.so, span.country-flag.country-flag-f32.som {
  background-position: 0 -6624px;
}
span.country-flag.country-flag-f32.sr, span.country-flag.country-flag-f32.sur {
  background-position: 0 -6656px;
}
span.country-flag.country-flag-f32.st, span.country-flag.country-flag-f32.stp {
  background-position: 0 -6688px;
}
span.country-flag.country-flag-f32.sv, span.country-flag.country-flag-f32.slv {
  background-position: 0 -6720px;
}
span.country-flag.country-flag-f32.sy, span.country-flag.country-flag-f32.syr {
  background-position: 0 -6752px;
}
span.country-flag.country-flag-f32.sz, span.country-flag.country-flag-f32.swz {
  background-position: 0 -6784px;
}
span.country-flag.country-flag-f32.tc, span.country-flag.country-flag-f32.tca {
  background-position: 0 -6816px;
}
span.country-flag.country-flag-f32.td, span.country-flag.country-flag-f32.tcd {
  background-position: 0 -6848px;
}
span.country-flag.country-flag-f32.tg, span.country-flag.country-flag-f32.tgo {
  background-position: 0 -6880px;
}
span.country-flag.country-flag-f32.th, span.country-flag.country-flag-f32.tha {
  background-position: 0 -6912px;
}
span.country-flag.country-flag-f32.tj, span.country-flag.country-flag-f32.tjk {
  background-position: 0 -6944px;
}
span.country-flag.country-flag-f32.tl, span.country-flag.country-flag-f32.tls {
  background-position: 0 -6976px;
}
span.country-flag.country-flag-f32.tm, span.country-flag.country-flag-f32.tkm {
  background-position: 0 -7008px;
}
span.country-flag.country-flag-f32.tn, span.country-flag.country-flag-f32.tun {
  background-position: 0 -7040px;
}
span.country-flag.country-flag-f32.to, span.country-flag.country-flag-f32.ton {
  background-position: 0 -7072px;
}
span.country-flag.country-flag-f32.tr, span.country-flag.country-flag-f32.tur {
  background-position: 0 -7104px;
}
span.country-flag.country-flag-f32.tt, span.country-flag.country-flag-f32.tto {
  background-position: 0 -7136px;
}
span.country-flag.country-flag-f32.tv, span.country-flag.country-flag-f32.tuv {
  background-position: 0 -7168px;
}
span.country-flag.country-flag-f32.tw, span.country-flag.country-flag-f32.twn {
  background-position: 0 -7200px;
}
span.country-flag.country-flag-f32.tz, span.country-flag.country-flag-f32.tza {
  background-position: 0 -7232px;
}
span.country-flag.country-flag-f32.ua, span.country-flag.country-flag-f32.ukr {
  background-position: 0 -7264px;
}
span.country-flag.country-flag-f32.ug, span.country-flag.country-flag-f32.uga {
  background-position: 0 -7296px;
}
span.country-flag.country-flag-f32.us, span.country-flag.country-flag-f32.usa {
  background-position: 0 -7328px;
}
span.country-flag.country-flag-f32.uy, span.country-flag.country-flag-f32.ury {
  background-position: 0 -7360px;
}
span.country-flag.country-flag-f32.uz, span.country-flag.country-flag-f32.uzb {
  background-position: 0 -7392px;
}
span.country-flag.country-flag-f32.va, span.country-flag.country-flag-f32.vat {
  background-position: 0 -7424px;
}
span.country-flag.country-flag-f32.vc, span.country-flag.country-flag-f32.vct {
  background-position: 0 -7456px;
}
span.country-flag.country-flag-f32.ve, span.country-flag.country-flag-f32.ven {
  background-position: 0 -7488px;
}
span.country-flag.country-flag-f32.vg, span.country-flag.country-flag-f32.vgb {
  background-position: 0 -7520px;
}
span.country-flag.country-flag-f32.vi, span.country-flag.country-flag-f32.vir {
  background-position: 0 -7552px;
}
span.country-flag.country-flag-f32.vn, span.country-flag.country-flag-f32.vnm {
  background-position: 0 -7584px;
}
span.country-flag.country-flag-f32.vu, span.country-flag.country-flag-f32.vut {
  background-position: 0 -7616px;
}
span.country-flag.country-flag-f32.ws, span.country-flag.country-flag-f32.wsm {
  background-position: 0 -7648px;
}
span.country-flag.country-flag-f32.ye, span.country-flag.country-flag-f32.yem {
  background-position: 0 -7680px;
}
span.country-flag.country-flag-f32.za, span.country-flag.country-flag-f32.zaf {
  background-position: 0 -7712px;
}
span.country-flag.country-flag-f32.zm, span.country-flag.country-flag-f32.zmb {
  background-position: 0 -7744px;
}
span.country-flag.country-flag-f32.zw, span.country-flag.country-flag-f32.zwe {
  background-position: 0 -7776px;
}
span.country-flag.country-flag-f32.sx, span.country-flag.country-flag-f32.sxm {
  background-position: 0 -7808px;
}
span.country-flag.country-flag-f32.cw, span.country-flag.country-flag-f32.cuw {
  background-position: 0 -7840px;
}
span.country-flag.country-flag-f32.ss, span.country-flag.country-flag-f32.ssd {
  background-position: 0 -7872px;
}
span.country-flag.country-flag-f32.nu, span.country-flag.country-flag-f32.niu {
  background-position: 0 -7904px;
}
span.country-flag.flag-f16 {
  display: block;
  width: 16px;
  height: 16px;
  background: url(/media/flags16.png) no-repeat;
}
span.country-flag.flag-f16._African_Union {
  background-position: 0 -16px;
}
span.country-flag.flag-f16._Arab_League {
  background-position: 0 -32px;
}
span.country-flag.flag-f16._ASEAN {
  background-position: 0 -48px;
}
span.country-flag.flag-f16._CARICOM {
  background-position: 0 -64px;
}
span.country-flag.flag-f16._CIS {
  background-position: 0 -80px;
}
span.country-flag.flag-f16._Commonwealth {
  background-position: 0 -96px;
}
span.country-flag.flag-f16._England {
  background-position: 0 -112px;
}
span.country-flag.flag-f16._European_Union, span.country-flag.flag-f16.eu {
  background-position: 0 -128px;
}
span.country-flag.flag-f16._Islamic_Conference {
  background-position: 0 -144px;
}
span.country-flag.flag-f16._Kosovo {
  background-position: 0 -160px;
}
span.country-flag.flag-f16._NATO {
  background-position: 0 -176px;
}
span.country-flag.flag-f16._Northern_Cyprus {
  background-position: 0 -192px;
}
span.country-flag.flag-f16._Northern_Ireland {
  background-position: 0 -208px;
}
span.country-flag.flag-f16._Olimpic_Movement {
  background-position: 0 -224px;
}
span.country-flag.flag-f16._OPEC {
  background-position: 0 -240px;
}
span.country-flag.flag-f16._Red_Cross {
  background-position: 0 -256px;
}
span.country-flag.flag-f16._Scotland {
  background-position: 0 -272px;
}
span.country-flag.flag-f16._Somaliland {
  background-position: 0 -288px;
}
span.country-flag.flag-f16._Tibet {
  background-position: 0 -304px;
}
span.country-flag.flag-f16._United_Nations {
  background-position: 0 -320px;
}
span.country-flag.flag-f16._Wales {
  background-position: 0 -336px;
}
span.country-flag.flag-f16.ad, span.country-flag.flag-f16.and {
  background-position: 0 -352px;
}
span.country-flag.flag-f16.ae, span.country-flag.flag-f16.are {
  background-position: 0 -368px;
}
span.country-flag.flag-f16.af, span.country-flag.flag-f16.afg {
  background-position: 0 -384px;
}
span.country-flag.flag-f16.ag, span.country-flag.flag-f16.atg {
  background-position: 0 -400px;
}
span.country-flag.flag-f16.ai, span.country-flag.flag-f16.aia {
  background-position: 0 -416px;
}
span.country-flag.flag-f16.al, span.country-flag.flag-f16.alb {
  background-position: 0 -432px;
}
span.country-flag.flag-f16.am, span.country-flag.flag-f16.arm {
  background-position: 0 -448px;
}
span.country-flag.flag-f16.ao, span.country-flag.flag-f16.ago {
  background-position: 0 -464px;
}
span.country-flag.flag-f16.aq, span.country-flag.flag-f16.ata {
  background-position: 0 -480px;
}
span.country-flag.flag-f16.ar, span.country-flag.flag-f16.arg {
  background-position: 0 -496px;
}
span.country-flag.flag-f16.as, span.country-flag.flag-f16.asm {
  background-position: 0 -512px;
}
span.country-flag.flag-f16.at, span.country-flag.flag-f16.aut {
  background-position: 0 -528px;
}
span.country-flag.flag-f16.au, span.country-flag.flag-f16.aus {
  background-position: 0 -544px;
}
span.country-flag.flag-f16.aw, span.country-flag.flag-f16.abw {
  background-position: 0 -560px;
}
span.country-flag.flag-f16.ax, span.country-flag.flag-f16.ala {
  background-position: 0 -576px;
}
span.country-flag.flag-f16.az, span.country-flag.flag-f16.aze {
  background-position: 0 -592px;
}
span.country-flag.flag-f16.ba, span.country-flag.flag-f16.bih {
  background-position: 0 -608px;
}
span.country-flag.flag-f16.bb, span.country-flag.flag-f16.brb {
  background-position: 0 -624px;
}
span.country-flag.flag-f16.bd, span.country-flag.flag-f16.bgd {
  background-position: 0 -640px;
}
span.country-flag.flag-f16.be, span.country-flag.flag-f16.bel {
  background-position: 0 -656px;
}
span.country-flag.flag-f16.bf, span.country-flag.flag-f16.bfa {
  background-position: 0 -672px;
}
span.country-flag.flag-f16.bg, span.country-flag.flag-f16.bgr {
  background-position: 0 -688px;
}
span.country-flag.flag-f16.bh, span.country-flag.flag-f16.bhr {
  background-position: 0 -704px;
}
span.country-flag.flag-f16.bi, span.country-flag.flag-f16.bdi {
  background-position: 0 -720px;
}
span.country-flag.flag-f16.bj, span.country-flag.flag-f16.ben {
  background-position: 0 -736px;
}
span.country-flag.flag-f16.bl, span.country-flag.flag-f16.blm {
  background-position: 0 -1424px;
}
span.country-flag.flag-f16.bm, span.country-flag.flag-f16.bmu {
  background-position: 0 -752px;
}
span.country-flag.flag-f16.bn, span.country-flag.flag-f16.brn {
  background-position: 0 -768px;
}
span.country-flag.flag-f16.bo, span.country-flag.flag-f16.bol {
  background-position: 0 -784px;
}
span.country-flag.flag-f16.bq, span.country-flag.flag-f16.bes {
  background-position: 0 -2752px;
}
span.country-flag.flag-f16.br, span.country-flag.flag-f16.bra {
  background-position: 0 -800px;
}
span.country-flag.flag-f16.bs, span.country-flag.flag-f16.bhs {
  background-position: 0 -816px;
}
span.country-flag.flag-f16.bt, span.country-flag.flag-f16.btn {
  background-position: 0 -832px;
}
span.country-flag.flag-f16.bv, span.country-flag.flag-f16.bvt {
  background-position: 0 -2768px;
}
span.country-flag.flag-f16.bw, span.country-flag.flag-f16.bwa {
  background-position: 0 -848px;
}
span.country-flag.flag-f16.by, span.country-flag.flag-f16.blr {
  background-position: 0 -864px;
}
span.country-flag.flag-f16.bz, span.country-flag.flag-f16.blz {
  background-position: 0 -880px;
}
span.country-flag.flag-f16.ca, span.country-flag.flag-f16.can {
  background-position: 0 -896px;
}
span.country-flag.flag-f16.cd, span.country-flag.flag-f16.cod {
  background-position: 0 -912px;
}
span.country-flag.flag-f16.cf, span.country-flag.flag-f16.rca {
  background-position: 0 -928px;
}
span.country-flag.flag-f16.cg, span.country-flag.flag-f16.cog {
  background-position: 0 -944px;
}
span.country-flag.flag-f16.ch, span.country-flag.flag-f16.che {
  background-position: 0 -960px;
}
span.country-flag.flag-f16.ci, span.country-flag.flag-f16.civ {
  background-position: 0 -976px;
}
span.country-flag.flag-f16.ck, span.country-flag.flag-f16.cok {
  background-position: 0 -992px;
}
span.country-flag.flag-f16.cl, span.country-flag.flag-f16.chl {
  background-position: 0 -1008px;
}
span.country-flag.flag-f16.cm, span.country-flag.flag-f16.cmr {
  background-position: 0 -1024px;
}
span.country-flag.flag-f16.cn, span.country-flag.flag-f16.chn {
  background-position: 0 -1040px;
}
span.country-flag.flag-f16.co, span.country-flag.flag-f16.col {
  background-position: 0 -1056px;
}
span.country-flag.flag-f16.cp, span.country-flag.flag-f16.cpt {
  background-position: 0 -1424px;
}
span.country-flag.flag-f16.cr, span.country-flag.flag-f16.cri {
  background-position: 0 -1072px;
}
span.country-flag.flag-f16.cu, span.country-flag.flag-f16.cub {
  background-position: 0 -1088px;
}
span.country-flag.flag-f16.cv, span.country-flag.flag-f16.cpv {
  background-position: 0 -1104px;
}
span.country-flag.flag-f16.cw, span.country-flag.flag-f16.cuw {
  background-position: 0 -3920px;
}
span.country-flag.flag-f16.cy, span.country-flag.flag-f16.cyp {
  background-position: 0 -1120px;
}
span.country-flag.flag-f16.cz, span.country-flag.flag-f16.cze {
  background-position: 0 -1136px;
}
span.country-flag.flag-f16.de, span.country-flag.flag-f16.deu {
  background-position: 0 -1152px;
}
span.country-flag.flag-f16.dj, span.country-flag.flag-f16.dji {
  background-position: 0 -1168px;
}
span.country-flag.flag-f16.dk, span.country-flag.flag-f16.dnk {
  background-position: 0 -1184px;
}
span.country-flag.flag-f16.dm, span.country-flag.flag-f16.dma {
  background-position: 0 -1200px;
}
span.country-flag.flag-f16.do, span.country-flag.flag-f16.dom {
  background-position: 0 -1216px;
}
span.country-flag.flag-f16.dz, span.country-flag.flag-f16.dza {
  background-position: 0 -1232px;
}
span.country-flag.flag-f16.ec, span.country-flag.flag-f16.ecu {
  background-position: 0 -1248px;
}
span.country-flag.flag-f16.ee, span.country-flag.flag-f16.est {
  background-position: 0 -1264px;
}
span.country-flag.flag-f16.eg, span.country-flag.flag-f16.egy {
  background-position: 0 -1280px;
}
span.country-flag.flag-f16.eh, span.country-flag.flag-f16.esh {
  background-position: 0 -1296px;
}
span.country-flag.flag-f16.er, span.country-flag.flag-f16.eri {
  background-position: 0 -1312px;
}
span.country-flag.flag-f16.es, span.country-flag.flag-f16.esp {
  background-position: 0 -1328px;
}
span.country-flag.flag-f16.et, span.country-flag.flag-f16.eth {
  background-position: 0 -1344px;
}
span.country-flag.flag-f16.fi, span.country-flag.flag-f16.fin {
  background-position: 0 -1360px;
}
span.country-flag.flag-f16.fj, span.country-flag.flag-f16.fji {
  background-position: 0 -1376px;
}
span.country-flag.flag-f16.fm, span.country-flag.flag-f16.fsm {
  background-position: 0 -1392px;
}
span.country-flag.flag-f16.fo, span.country-flag.flag-f16.fro {
  background-position: 0 -1408px;
}
span.country-flag.flag-f16.fr, span.country-flag.flag-f16.fra {
  background-position: 0 -1424px;
}
span.country-flag.flag-f16.ga, span.country-flag.flag-f16.gab {
  background-position: 0 -1440px;
}
span.country-flag.flag-f16.gb, span.country-flag.flag-f16.gbr {
  background-position: 0 -1456px;
}
span.country-flag.flag-f16.gd, span.country-flag.flag-f16.grd {
  background-position: 0 -1472px;
}
span.country-flag.flag-f16.ge, span.country-flag.flag-f16.geo {
  background-position: 0 -1488px;
}
span.country-flag.flag-f16.gg, span.country-flag.flag-f16.ggy {
  background-position: 0 -1504px;
}
span.country-flag.flag-f16.gh, span.country-flag.flag-f16.gha {
  background-position: 0 -1520px;
}
span.country-flag.flag-f16.gi, span.country-flag.flag-f16.gib {
  background-position: 0 -1536px;
}
span.country-flag.flag-f16.gl, span.country-flag.flag-f16.grl {
  background-position: 0 -1552px;
}
span.country-flag.flag-f16.gm, span.country-flag.flag-f16.gmb {
  background-position: 0 -1568px;
}
span.country-flag.flag-f16.gn, span.country-flag.flag-f16.gin {
  background-position: 0 -1584px;
}
span.country-flag.flag-f16.gp, span.country-flag.flag-f16.glp {
  background-position: 0 -1600px;
}
span.country-flag.flag-f16.gq, span.country-flag.flag-f16.gnq {
  background-position: 0 -1616px;
}
span.country-flag.flag-f16.gr, span.country-flag.flag-f16.grc {
  background-position: 0 -1632px;
}
span.country-flag.flag-f16.gt, span.country-flag.flag-f16.gtm {
  background-position: 0 -1648px;
}
span.country-flag.flag-f16.gu, span.country-flag.flag-f16.gum {
  background-position: 0 -1664px;
}
span.country-flag.flag-f16.gw, span.country-flag.flag-f16.gnb {
  background-position: 0 -1680px;
}
span.country-flag.flag-f16.gy, span.country-flag.flag-f16.guy {
  background-position: 0 -1696px;
}
span.country-flag.flag-f16.hk, span.country-flag.flag-f16.hkg {
  background-position: 0 -1712px;
}
span.country-flag.flag-f16.hn, span.country-flag.flag-f16.hnd {
  background-position: 0 -1728px;
}
span.country-flag.flag-f16.hr, span.country-flag.flag-f16.hrv {
  background-position: 0 -1744px;
}
span.country-flag.flag-f16.ht, span.country-flag.flag-f16.hti {
  background-position: 0 -1760px;
}
span.country-flag.flag-f16.hu, span.country-flag.flag-f16.hun {
  background-position: 0 -1776px;
}
span.country-flag.flag-f16.id, span.country-flag.flag-f16.idn {
  background-position: 0 -1792px;
}
span.country-flag.flag-f16.ie, span.country-flag.flag-f16.irl {
  background-position: 0 -1808px;
}
span.country-flag.flag-f16.il, span.country-flag.flag-f16.isr {
  background-position: 0 -1824px;
}
span.country-flag.flag-f16.im, span.country-flag.flag-f16.imn {
  background-position: 0 -1840px;
}
span.country-flag.flag-f16.in, span.country-flag.flag-f16.ind {
  background-position: 0 -1856px;
}
span.country-flag.flag-f16.iq, span.country-flag.flag-f16.irq {
  background-position: 0 -1872px;
}
span.country-flag.flag-f16.ir, span.country-flag.flag-f16.irn {
  background-position: 0 -1888px;
}
span.country-flag.flag-f16.is, span.country-flag.flag-f16.isl {
  background-position: 0 -1904px;
}
span.country-flag.flag-f16.it, span.country-flag.flag-f16.ita {
  background-position: 0 -1920px;
}
span.country-flag.flag-f16.je, span.country-flag.flag-f16.jey {
  background-position: 0 -1936px;
}
span.country-flag.flag-f16.jm, span.country-flag.flag-f16.jam {
  background-position: 0 -1952px;
}
span.country-flag.flag-f16.jo, span.country-flag.flag-f16.jor {
  background-position: 0 -1968px;
}
span.country-flag.flag-f16.jp, span.country-flag.flag-f16.jpn {
  background-position: 0 -1984px;
}
span.country-flag.flag-f16.ke, span.country-flag.flag-f16.ken {
  background-position: 0 -2000px;
}
span.country-flag.flag-f16.kg, span.country-flag.flag-f16.kgz {
  background-position: 0 -2016px;
}
span.country-flag.flag-f16.kh, span.country-flag.flag-f16.khm {
  background-position: 0 -2032px;
}
span.country-flag.flag-f16.ki, span.country-flag.flag-f16.kir {
  background-position: 0 -2048px;
}
span.country-flag.flag-f16.km, span.country-flag.flag-f16.com {
  background-position: 0 -2064px;
}
span.country-flag.flag-f16.kn, span.country-flag.flag-f16.kna {
  background-position: 0 -2080px;
}
span.country-flag.flag-f16.kp, span.country-flag.flag-f16.prk {
  background-position: 0 -2096px;
}
span.country-flag.flag-f16.kr, span.country-flag.flag-f16.kor {
  background-position: 0 -2112px;
}
span.country-flag.flag-f16.kw, span.country-flag.flag-f16.kwt {
  background-position: 0 -2128px;
}
span.country-flag.flag-f16.ky, span.country-flag.flag-f16.cym {
  background-position: 0 -2144px;
}
span.country-flag.flag-f16.kz, span.country-flag.flag-f16.kaz {
  background-position: 0 -2160px;
}
span.country-flag.flag-f16.la, span.country-flag.flag-f16.lao {
  background-position: 0 -2176px;
}
span.country-flag.flag-f16.lb, span.country-flag.flag-f16.lbn {
  background-position: 0 -2192px;
}
span.country-flag.flag-f16.lc, span.country-flag.flag-f16.lca {
  background-position: 0 -2208px;
}
span.country-flag.flag-f16.li, span.country-flag.flag-f16.lie {
  background-position: 0 -2224px;
}
span.country-flag.flag-f16.lk, span.country-flag.flag-f16.lka {
  background-position: 0 -2240px;
}
span.country-flag.flag-f16.lr, span.country-flag.flag-f16.lbr {
  background-position: 0 -2256px;
}
span.country-flag.flag-f16.ls, span.country-flag.flag-f16.lso {
  background-position: 0 -2272px;
}
span.country-flag.flag-f16.lt, span.country-flag.flag-f16.ltu {
  background-position: 0 -2288px;
}
span.country-flag.flag-f16.lu, span.country-flag.flag-f16.lux {
  background-position: 0 -2304px;
}
span.country-flag.flag-f16.lv, span.country-flag.flag-f16.lva {
  background-position: 0 -2320px;
}
span.country-flag.flag-f16.ly, span.country-flag.flag-f16.lby {
  background-position: 0 -2336px;
}
span.country-flag.flag-f16.ma, span.country-flag.flag-f16.mar {
  background-position: 0 -2352px;
}
span.country-flag.flag-f16.mc, span.country-flag.flag-f16.mco {
  background-position: 0 -1792px;
}
span.country-flag.flag-f16.md, span.country-flag.flag-f16.mda {
  background-position: 0 -2368px;
}
span.country-flag.flag-f16.me, span.country-flag.flag-f16.mne {
  background-position: 0 -2384px;
}
span.country-flag.flag-f16.mf, span.country-flag.flag-f16.maf {
  background-position: 0 -1424px;
}
span.country-flag.flag-f16.mg, span.country-flag.flag-f16.mdg {
  background-position: 0 -2400px;
}
span.country-flag.flag-f16.mh, span.country-flag.flag-f16.mhl {
  background-position: 0 -2416px;
}
span.country-flag.flag-f16.mk, span.country-flag.flag-f16.mkd {
  background-position: 0 -2432px;
}
span.country-flag.flag-f16.ml, span.country-flag.flag-f16.mli {
  background-position: 0 -2448px;
}
span.country-flag.flag-f16.mm, span.country-flag.flag-f16.mmr {
  background-position: 0 -2464px;
}
span.country-flag.flag-f16.mn, span.country-flag.flag-f16.mng {
  background-position: 0 -2480px;
}
span.country-flag.flag-f16.mo, span.country-flag.flag-f16.mac {
  background-position: 0 -2496px;
}
span.country-flag.flag-f16.mq, span.country-flag.flag-f16.mtq {
  background-position: 0 -2512px;
}
span.country-flag.flag-f16.mr, span.country-flag.flag-f16.mrt {
  background-position: 0 -2528px;
}
span.country-flag.flag-f16.ms, span.country-flag.flag-f16.msr {
  background-position: 0 -2544px;
}
span.country-flag.flag-f16.mt, span.country-flag.flag-f16.mlt {
  background-position: 0 -2560px;
}
span.country-flag.flag-f16.mu, span.country-flag.flag-f16.mus {
  background-position: 0 -2576px;
}
span.country-flag.flag-f16.mv, span.country-flag.flag-f16.mdv {
  background-position: 0 -2592px;
}
span.country-flag.flag-f16.mw, span.country-flag.flag-f16.mwi {
  background-position: 0 -2608px;
}
span.country-flag.flag-f16.mx, span.country-flag.flag-f16.mex {
  background-position: 0 -2624px;
}
span.country-flag.flag-f16.my, span.country-flag.flag-f16.mys {
  background-position: 0 -2640px;
}
span.country-flag.flag-f16.mz, span.country-flag.flag-f16.moz {
  background-position: 0 -2656px;
}
span.country-flag.flag-f16.na, span.country-flag.flag-f16.nam {
  background-position: 0 -2672px;
}
span.country-flag.flag-f16.nc, span.country-flag.flag-f16.ncl {
  background-position: 0 -2688px;
}
span.country-flag.flag-f16.ne, span.country-flag.flag-f16.ner {
  background-position: 0 -2704px;
}
span.country-flag.flag-f16.ng, span.country-flag.flag-f16.nga {
  background-position: 0 -2720px;
}
span.country-flag.flag-f16.ni, span.country-flag.flag-f16.nic {
  background-position: 0 -2736px;
}
span.country-flag.flag-f16.nl, span.country-flag.flag-f16.nld {
  background-position: 0 -2752px;
}
span.country-flag.flag-f16.no, span.country-flag.flag-f16.nor {
  background-position: 0 -2768px;
}
span.country-flag.flag-f16.np, span.country-flag.flag-f16.npl {
  background-position: 0 -2784px;
}
span.country-flag.flag-f16.nq, span.country-flag.flag-f16.atn {
  background-position: 0 -2768px;
}
span.country-flag.flag-f16.nr, span.country-flag.flag-f16.nru {
  background-position: 0 -2800px;
}
span.country-flag.flag-f16.nu, span.country-flag.flag-f16.niu {
  background-position: 0 -3952px;
}
span.country-flag.flag-f16.nz, span.country-flag.flag-f16.nzl {
  background-position: 0 -2816px;
}
span.country-flag.flag-f16.om, span.country-flag.flag-f16.omn {
  background-position: 0 -2832px;
}
span.country-flag.flag-f16.pa, span.country-flag.flag-f16.pan {
  background-position: 0 -2848px;
}
span.country-flag.flag-f16.pe, span.country-flag.flag-f16.per {
  background-position: 0 -2864px;
}
span.country-flag.flag-f16.pf, span.country-flag.flag-f16.pyf {
  background-position: 0 -2880px;
}
span.country-flag.flag-f16.pg, span.country-flag.flag-f16.png {
  background-position: 0 -2896px;
}
span.country-flag.flag-f16.ph, span.country-flag.flag-f16.phl {
  background-position: 0 -2912px;
}
span.country-flag.flag-f16.pk, span.country-flag.flag-f16.pak {
  background-position: 0 -2928px;
}
span.country-flag.flag-f16.pl, span.country-flag.flag-f16.pol {
  background-position: 0 -2944px;
}
span.country-flag.flag-f16.pr, span.country-flag.flag-f16.pri {
  background-position: 0 -2960px;
}
span.country-flag.flag-f16.ps, span.country-flag.flag-f16.pse {
  background-position: 0 -2976px;
}
span.country-flag.flag-f16.pt, span.country-flag.flag-f16.prt {
  background-position: 0 -2992px;
}
span.country-flag.flag-f16.pw, span.country-flag.flag-f16.plw {
  background-position: 0 -3008px;
}
span.country-flag.flag-f16.py, span.country-flag.flag-f16.pry {
  background-position: 0 -3024px;
}
span.country-flag.flag-f16.qa, span.country-flag.flag-f16.qat {
  background-position: 0 -3040px;
}
span.country-flag.flag-f16.re, span.country-flag.flag-f16.reu {
  background-position: 0 -3056px;
}
span.country-flag.flag-f16.ro, span.country-flag.flag-f16.rou {
  background-position: 0 -3072px;
}
span.country-flag.flag-f16.rs, span.country-flag.flag-f16.srb {
  background-position: 0 -3088px;
}
span.country-flag.flag-f16.ru, span.country-flag.flag-f16.rus {
  background-position: 0 -3104px;
}
span.country-flag.flag-f16.rw, span.country-flag.flag-f16.rwa {
  background-position: 0 -3120px;
}
span.country-flag.flag-f16.sa, span.country-flag.flag-f16.sau {
  background-position: 0 -3136px;
}
span.country-flag.flag-f16.sb, span.country-flag.flag-f16.slb {
  background-position: 0 -3152px;
}
span.country-flag.flag-f16.sc, span.country-flag.flag-f16.syc {
  background-position: 0 -3168px;
}
span.country-flag.flag-f16.sd, span.country-flag.flag-f16.sdn {
  background-position: 0 -3184px;
}
span.country-flag.flag-f16.se, span.country-flag.flag-f16.swe {
  background-position: 0 -3200px;
}
span.country-flag.flag-f16.sg, span.country-flag.flag-f16.sgp {
  background-position: 0 -3216px;
}
span.country-flag.flag-f16.sh, span.country-flag.flag-f16.shn {
  background-position: 0 -1456px;
}
span.country-flag.flag-f16.si, span.country-flag.flag-f16.svn {
  background-position: 0 -3232px;
}
span.country-flag.flag-f16.sj, span.country-flag.flag-f16.sjm {
  background-position: 0 -2768px;
}
span.country-flag.flag-f16.sk, span.country-flag.flag-f16.svk {
  background-position: 0 -3248px;
}
span.country-flag.flag-f16.sl, span.country-flag.flag-f16.sle {
  background-position: 0 -3264px;
}
span.country-flag.flag-f16.sm, span.country-flag.flag-f16.smr {
  background-position: 0 -3280px;
}
span.country-flag.flag-f16.sn, span.country-flag.flag-f16.sen {
  background-position: 0 -3296px;
}
span.country-flag.flag-f16.so, span.country-flag.flag-f16.som {
  background-position: 0 -3312px;
}
span.country-flag.flag-f16.sr, span.country-flag.flag-f16.sur {
  background-position: 0 -3328px;
}
span.country-flag.flag-f16.ss, span.country-flag.flag-f16.ssd {
  background-position: 0 -3936px;
}
span.country-flag.flag-f16.st, span.country-flag.flag-f16.stp {
  background-position: 0 -3344px;
}
span.country-flag.flag-f16.sv, span.country-flag.flag-f16.slv {
  background-position: 0 -3360px;
}
span.country-flag.flag-f16.sx, span.country-flag.flag-f16.sxm {
  background-position: 0 -3904px;
}
span.country-flag.flag-f16.sy, span.country-flag.flag-f16.syr {
  background-position: 0 -3376px;
}
span.country-flag.flag-f16.sz, span.country-flag.flag-f16.swz {
  background-position: 0 -3392px;
}
span.country-flag.flag-f16.tc, span.country-flag.flag-f16.tca {
  background-position: 0 -3408px;
}
span.country-flag.flag-f16.td, span.country-flag.flag-f16.tcd {
  background-position: 0 -3424px;
}
span.country-flag.flag-f16.tg, span.country-flag.flag-f16.tgo {
  background-position: 0 -3440px;
}
span.country-flag.flag-f16.th, span.country-flag.flag-f16.tha {
  background-position: 0 -3456px;
}
span.country-flag.flag-f16.tj, span.country-flag.flag-f16.tjk {
  background-position: 0 -3472px;
}
span.country-flag.flag-f16.tl, span.country-flag.flag-f16.tls {
  background-position: 0 -3488px;
}
span.country-flag.flag-f16.tm, span.country-flag.flag-f16.tkm {
  background-position: 0 -3504px;
}
span.country-flag.flag-f16.tn, span.country-flag.flag-f16.tun {
  background-position: 0 -3520px;
}
span.country-flag.flag-f16.to, span.country-flag.flag-f16.ton {
  background-position: 0 -3536px;
}
span.country-flag.flag-f16.tr, span.country-flag.flag-f16.tur {
  background-position: 0 -3552px;
}
span.country-flag.flag-f16.tt, span.country-flag.flag-f16.tto {
  background-position: 0 -3568px;
}
span.country-flag.flag-f16.tv, span.country-flag.flag-f16.tuv {
  background-position: 0 -3584px;
}
span.country-flag.flag-f16.tw, span.country-flag.flag-f16.twn {
  background-position: 0 -3600px;
}
span.country-flag.flag-f16.tz, span.country-flag.flag-f16.tza {
  background-position: 0 -3616px;
}
span.country-flag.flag-f16.ua, span.country-flag.flag-f16.ukr {
  background-position: 0 -3632px;
}
span.country-flag.flag-f16.ug, span.country-flag.flag-f16.uga {
  background-position: 0 -3648px;
}
span.country-flag.flag-f16.us, span.country-flag.flag-f16.usa {
  background-position: 0 -3664px;
}
span.country-flag.flag-f16.uy, span.country-flag.flag-f16.ury {
  background-position: 0 -3680px;
}
span.country-flag.flag-f16.uz, span.country-flag.flag-f16.uzb {
  background-position: 0 -3696px;
}
span.country-flag.flag-f16.va, span.country-flag.flag-f16.vat {
  background-position: 0 -3712px;
}
span.country-flag.flag-f16.vc, span.country-flag.flag-f16.vct {
  background-position: 0 -3728px;
}
span.country-flag.flag-f16.ve, span.country-flag.flag-f16.ven {
  background-position: 0 -3744px;
}
span.country-flag.flag-f16.vg, span.country-flag.flag-f16.vgb {
  background-position: 0 -3760px;
}
span.country-flag.flag-f16.vi, span.country-flag.flag-f16.vir {
  background-position: 0 -3776px;
}
span.country-flag.flag-f16.vn, span.country-flag.flag-f16.vnm {
  background-position: 0 -3792px;
}
span.country-flag.flag-f16.vu, span.country-flag.flag-f16.vut {
  background-position: 0 -3808px;
}
span.country-flag.flag-f16.ws, span.country-flag.flag-f16.wsm {
  background-position: 0 -3824px;
}
span.country-flag.flag-f16.ye, span.country-flag.flag-f16.yem {
  background-position: 0 -3840px;
}
span.country-flag.flag-f16.yt, span.country-flag.flag-f16.myt {
  background-position: 0 -1424px;
}
span.country-flag.flag-f16.za, span.country-flag.flag-f16.zaf {
  background-position: 0 -3856px;
}
span.country-flag.flag-f16.zm, span.country-flag.flag-f16.zmb {
  background-position: 0 -3872px;
}
span.country-flag.flag-f16.zw, span.country-flag.flag-f16.zwe {
  background-position: 0 -3888px;
}