@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@200;300;400;600;700;900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*
  Row hover reaches the frozen column too.

  Table::Body::ColumnComponent paints an opaque background on a sticky cell, and it has to --
  a transparent frozen column lets horizontally-scrolled content show through it. The side
  effect is that the cell's own background covers the row's hover colour, so the first column
  is the one cell in the table that never highlights.

  Inheriting the row's background during hover fixes that without naming a colour: rows use
  hover:bg-gray-100, hover:bg-body-light, hover:bg-green-200 and others, and each keeps its own.
  Safe because every hovering row in the app sets a base background of its own, so `inherit`
  always resolves to an opaque colour rather than turning the frozen column see-through.

  Placed after the @tailwind directives, and higher specificity than a bare utility class, so it
  wins over the component's bg-* without needing !important at any call site.
*/
tbody tr:hover > td.sticky {
  background-color: inherit;
}

/*
  The AI cascade -- a colour sweeping through the sentence while a model is working.

  ⚠ THE SENTENCE IS THE INDICATOR, NOT THE ICON BESIDE IT. A spinner says "something is
  happening" and goes on saying exactly that; the words say WHAT is happening, and they are
  what a reader is already looking at. Moving light through them makes the line itself the
  thing that is alive, which is the effect people now recognise from other AI tools.

  Written by hand rather than as a Tailwind animation because background-clip: text needs
  four coordinated declarations -- gradient, size, clip and a transparent colour -- and a
  utility that sets `color: transparent` without the other three would make text disappear.
  Keeping them in one rule means they cannot be applied apart.

  ⚠ GUARDED TWICE, BECAUSE THE FAILURE MODE IS INVISIBLE TEXT. `color: transparent` is only
  safe if the gradient actually paints, so the whole effect sits inside @supports; and
  motion is opt-out, so a reader who asked their OS for less of it gets the ordinary ink
  colour rather than a still gradient in colours nobody chose for body text.

  Two intensities. `.ai-cascade` is the one in the product: brand purple as the base, with a
  band of fuchsia and sky travelling through it. `.ai-cascade-vivid` is the loud version,
  catalogued in the kitchen sink for comparison. Lifted into lib/kitchen_sink/page.html.erb
  -- if you change these, change them there too.
*/
.ai-cascade,
.ai-cascade-vivid {
  color: #582796;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) {
    .ai-cascade,
    .ai-cascade-vivid {
      background-size: 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      /* A gradient cannot paint outside the glyphs, and descenders and italics sit right at
         the edge of them -- so the box gets a hair of padding rather than clipping the tail
         of a "g". */
      padding-bottom: 0.05em;
      animation: ai-cascade 3s linear infinite;
    }

    /* 100deg rather than 90: a slight tilt makes the band cross tall letters before short
       ones, which reads as light moving over the text instead of a bar sliding behind it. */
    .ai-cascade {
      background-image: linear-gradient(
        100deg,
        #582796 0%, #6d28d9 12%, #c026d3 26%, #a855f7 38%,
        #0ea5e9 50%,
        #a855f7 62%, #c026d3 74%, #6d28d9 88%, #582796 100%
      );
    }

    .ai-cascade-vivid {
      background-image: linear-gradient(
        100deg,
        #4c1d95 0%,
        #7c3aed 18%, #d946ef 32%, #f43f5e 44%,
        #f59e0b 56%, #22d3ee 70%, #6366f1 84%,
        #4c1d95 100%
      );
      animation-duration: 2s;
    }
  }
}

/*
  Left to right, because that is the direction the sentence is read in.

  ⚠ THE NUMBERS ARE A PAIR AND THE LOOP DEPENDS ON THEM. The gradient tiles (background-repeat
  defaults to repeat), so a seamless loop needs the travel to be a WHOLE tile. A background
  position of X% resolves to X% x (container - image) pixels, so at background-size: 200% the
  image is 2W wide and 0% -> -200% moves it exactly 2W: one tile, and the last frame is
  pixel-identical to the first. Change the size without changing this and the sentence jumps
  once every cycle -- which reads as a stutter in the work, not in the animation.
*/
@keyframes ai-cascade {
  from { background-position: 0% 0; }
  to   { background-position: -200% 0; }
}

/*
  PI Research row signals -- an icon that unfurls its label on hover, focus or tap.

  ⚠ THE LABEL WAS THE PROBLEM, NOT THE SPACE. The signals used to render as text pills
  truncated to 18 characters, which produced "No…", "at least two…" and "No at least two
  study coordinators" side by side: the `title` carried the full wording so hover worked,
  but the visible label on a scan was useless and one of them was not English. Recorded as
  crown-claims/BACKLOG.md item 2.

  So the resting state is the mark alone -- has it, doesn't have it, not in their answers --
  which is the thing a reader compares ACROSS rows, and the label unfurls for the one signal
  they are actually asking about. A row of six marks reads as a row of six marks rather than
  as six ragged sentences.

  max-width rather than display, because a transition needs two computable values and
  `display: none` is not one. 170px clears the longest vocabulary chip label; anything
  longer still truncates, and the title attribute stays the full text either way.

  :focus-visible is listed alongside :hover so the keyboard reaches it, and .is-open is what
  a tap sets on touch devices, where :hover either never fires or sticks after the tap.
*/
.pi-sigchip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  flex: none;
  border-width: 1px;
  border-radius: 9999px;
  cursor: default;
  /*
    ⚠ SYMMETRIC, AND IT WAS NOT. This carried padding-left alone, so a collapsed chip
    measured 4 + 14 + 0 = 18px wide against a 22px height: not a circle, and the mark sat
    4px from the left edge and hard against the right. With border-radius: 9999px on an
    18x22 box that renders as an upright ellipse with the icon pushed left, which is what
    is visible on the marks whose glyph does not fill its own box.

    ⚠ AND THE PADDING IS 3, NOT 4, BECAUSE THE BORDER IS PART OF THE BOX. Preflight sets
    box-sizing: border-box, so `height: 22px` already contains the 1px border top and
    bottom -- but the width is auto, so it grows to content + padding + border. At 4px a
    side that is 14 + 8 + 2 = 24 against a height of 22: measured, an upright 24x22
    ellipse with the mark correctly centred inside it. 3px a side gives 14 + 6 + 2 = 22,
    which is the height, so the chip is a true circle.

    justify-content and min-width hold the centring even if a glyph ever renders at a
    different size -- feather swaps the <i> for an <svg> at runtime, so the box is not
    ours to assume.
  */
  padding-left: 3px;
  padding-right: 3px;
  justify-content: center;
  min-width: 22px;
}

.pi-sigchip svg {
  flex: none;
}

.pi-sigchip .pi-sigchip-label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  /*
    A label longer than the cap is cut, and the cut should say so. Without this the
    clip lands mid-word -- "board-certified dermatolog" -- which reads as a typo in the
    data rather than as a label that did not fit. The chip's title carries the whole
    string either way, so nothing is lost by admitting the trim.
  */
  text-overflow: ellipsis;
  padding-right: 0;
  transition: max-width 0.2s ease, opacity 0.15s ease, padding-right 0.2s ease, padding-left 0.2s ease;
}

.pi-sigchip:hover .pi-sigchip-label,
.pi-sigchip:focus-visible .pi-sigchip-label,
.pi-sigchip.is-open .pi-sigchip-label {
  max-width: 170px;
  opacity: 1;
  padding-left: 5px;
  /* 4 here plus the chip's own 4 is the 8px the label used to carry alone. */
  padding-right: 4px;
}

/* The unfurl is decoration; anyone who has asked for less motion gets the label instantly. */
@media (prefers-reduced-motion: reduce) {
  .pi-sigchip .pi-sigchip-label {
    transition: none;
  }
}

/*
  A region waiting on a patch it has already acknowledged.

  Controls inside PI Research replace the whole results block, which is ~690KB and
  about a second on a wide search, because holding a PI reorders the field. The star
  itself answers immediately (turbo_fetch_controller#press), so this is not the
  acknowledgement -- it is the reason the rest of the list has not moved yet, and it
  stops a second click landing on rows that are about to be replaced underneath it.

  Deliberately mild. The reader is still reading this list; dimming it to half is a
  bigger interruption than the wait it describes.
*/
[data-busy-region][aria-busy="true"] {
  cursor: progress;
}

[data-busy-region] > * {
  transition: opacity 0.12s ease;
}

/*
  ⚠ THE DELAY IS ON THE BUSY RULE ONLY, AND THAT IS WHAT MAKES IT ONE-WAY. A transition
  uses the transition properties of the style it is moving TO, so dimming waits 140ms and
  un-dimming starts at once. Both halves matter: a response that lands in 60ms must leave
  no trace at all, and content that has already arrived must not stay grey while a timer
  runs down.
*/
[data-busy-region][aria-busy="true"] > * {
  opacity: 0.72;
  transition-delay: 140ms;
}

/*
  The control that was clicked keeps its full strength -- it is the one thing on screen
  that has already changed, and fading it would undo the acknowledgement.
*/
[data-busy-region][aria-busy="true"] .pi-hold[aria-busy="true"] {
  opacity: 1;
}

/* Nothing inside accepts a second click until the replacement lands. */
[data-busy-region][aria-busy="true"] button,
[data-busy-region][aria-busy="true"] a,
[data-busy-region][aria-busy="true"] input {
  pointer-events: none;
}

/*
  ⚠ DURATION ONLY, NOT `transition: none`. The shorthand would also clear
  `transition-delay`, and the delay is not motion — it is the 140ms grace that stops a
  fast response leaving a flicker behind. Zeroing the duration keeps the dim instantaneous
  (which is what the preference asks for) while still letting a response that lands inside
  the grace leave no trace at all.
*/
@media (prefers-reduced-motion: reduce) {
  [data-busy-region] > * {
    transition-duration: 0.01ms;
  }
}

/*
  A control that swaps its own glyph for the Pikorua while the server answers it.

  ⚠ THE FEEDBACK HAS TO LAND ON THE THING THAT WAS CLICKED. CRWN-638 is the duplicate
  button on an FQ question: the copy icon, a round trip of up to a couple of seconds, and
  nothing on screen in between — so the reader's own report was "wondering if they actually
  selected the duplicate button". Dimming the row answers "why has nothing moved"; only the
  glyph answers "did my click land", because the glyph is where they were looking.

  Markup contract (see Atoms::Spinner::Component for the mark itself):

    <button data-busy-swap>
      <span data-busy-swap-idle> ...icon... </span>
      <span data-busy-swap-busy> ...spinner... </span>
    </button>

  ⚠ BOTH LAYERS ARE ALWAYS RENDERED AND THE BUSY ONE IS ABSOLUTE. Swapping by `display`
  would resize the button mid-click — the Pikorua is a different aspect to a feather icon —
  and a control that changes size under the cursor is how a row reflows out from under
  someone. Absolute positioning means the button's box is decided by the idle glyph alone
  and never moves.
*/
[data-busy-swap] {
  position: relative;
}

[data-busy-swap] > [data-busy-swap-idle],
[data-busy-swap] > [data-busy-swap-busy] {
  transition: opacity 0.12s ease;
}

[data-busy-swap] > [data-busy-swap-busy] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

/* Same one-way grace as the region above: 140ms before anything shows, instant to undo. */
[data-busy-swap][aria-busy="true"] > [data-busy-swap-idle] {
  opacity: 0;
  transition-delay: 140ms;
}

[data-busy-swap][aria-busy="true"] > [data-busy-swap-busy] {
  opacity: 1;
  transition-delay: 140ms;
}

/* A control already working does not accept a second click, whatever region it is in. */
[data-busy-swap][aria-busy="true"] {
  pointer-events: none;
  cursor: progress;
}

/*
  The page-level line for <turbo-frame> navigation — opening a modal, above all. Driven by
  trackFrameFetches() in app/javascript/busy.js; see Atoms::BusyBar::Component for why this
  is not Turbo's own progress bar.
*/
#busy-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

/*
  The same ~140ms grace the region and the swap use: a fast frame leaves no trace.
  ⚠ VALUELESS, matching Turbo's own `busy` attribute on the frame it mirrors — busy.js sets
  it with `toggleAttribute`, so `[data-busy="true"]` would never match.
*/
#busy-bar[data-busy] {
  opacity: 1;
  transition-delay: 140ms;
}

/*
  ⚠ INDETERMINATE, AND IT MUST NEVER REACH THE RIGHT EDGE AND STOP. A bar that fills to 100%
  and waits is claiming the work is finished; nothing here knows how far along the server
  is. This sweeps instead, so it is honest about saying only "still going".
*/
#busy-bar > span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 9999px;
  background: linear-gradient(
    90deg,
    theme("colors.interactive.on-light.default" / 0),
    theme("colors.interactive.on-light.default"),
    theme("colors.interactive.on-light.default" / 0)
  );
  animation: busy-bar-sweep 1.1s ease-in-out infinite;
}

@keyframes busy-bar-sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(350%);
  }
}

/*
  Reduced motion gets a still bar rather than no bar. The preference is about movement, not
  about being denied the only thing on screen that says a modal is on its way.
*/
@media (prefers-reduced-motion: reduce) {
  #busy-bar > span {
    width: 100%;
    animation: none;
    background: theme("colors.interactive.on-light.default");
  }

  #busy-bar {
    transition-duration: 0.01ms;
  }

  /* Same reasoning as the region above: lose the fade, keep the 140ms grace. */
  [data-busy-swap] > [data-busy-swap-idle],
  [data-busy-swap] > [data-busy-swap-busy] {
    transition-duration: 0.01ms;
  }
}

/*
  A row control that appears when you hover the row -- the pencil on the Study Details card.

  ⚠ A HOVER-ONLY CONTROL IS AN INVISIBLE CONTROL FOR SOME PEOPLE, so the hiding is scoped
  rather than absolute. `opacity` rather than `display: none` or `hidden`, because an
  opacity-0 link is still in the tab order and still in the accessibility tree -- it can be
  reached by keyboard, and reaching it reveals it. Three guarantees, each one a reason this
  is hand-written CSS rather than a stack of Tailwind variants whose generated order would
  decide the outcome:

    - Keyboard: :focus-within on the row, and :focus-visible on the control itself.
    - Touch: the whole hidden state sits inside @media (hover: hover), so a phone or tablet
      -- where no hover event will ever arrive -- gets the control at full opacity always.
    - Motion: the fade is dropped for a reader who asked their OS for less of it.

  The row carries Tailwind's `group`; the control carries `.row-hover-reveal`. Placed after
  the @tailwind directives so it wins over a bare utility on source order.
*/
.row-hover-reveal {
  opacity: 1;
}

@media (hover: hover) {
  .row-hover-reveal {
    opacity: 0;
    transition: opacity 150ms ease-in-out;
  }

  .group:hover .row-hover-reveal,
  .group:focus-within .row-hover-reveal,
  .row-hover-reveal:focus-visible {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .row-hover-reveal {
    transition: none;
  }
}
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@200;300;400;600;700;900&display=swap");

.native--fixed-container-bottom-margin {
  margin-bottom: 82px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

/*
 * The webfont @imports that used to live here moved to application.tailwind.css. Sprockets emits
 * require_tree's output above this file's own body, so an @import here is never the first rule in
 * the compiled stylesheet -- and CSS drops any @import that is not first. The result was that the
 * family named `Inter` never loaded, while the typography classes ask for it by that exact name
 * with no fallback, so every table and heading rendered in the browser default serif.
 */

html {
  scroll-padding-top: 100px;
}

.table-container {
  overflow-x: auto;
}

.table-container table {
  width: 100%;
  table-layout: fixed;
}

.table-container td {
  text-align: center;
  min-width: 120px;
  max-width: 200px;
  white-space: unset;
}

.table-container td:first-child {
  text-align: left;
  min-width: 200px;
  max-width: 300px;
}

.table-container th {
  max-width: 300px;
  white-space: unset;
}

.table-container th:first-child,
.table-container td:first-child {
  position: sticky;
  left: 0;
  background-color: white;
}

.pdf-response-container .table-container td {
  min-width: 40px;
}

.pdf-response-container .table-container td:first-child {
  min-width: 160px;
}

.fq-response-question.required:after {
  content: "*";
  color: red;
}

.fq-response-question .trix-content {
  flex-grow: 1;
}

.onboarding-form {
  display: flex;
  z-index: 30;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 4rem;
  flex-direction: column;
  height: calc(100% - 5rem);
  overflow-y: auto;
  overflow-x: visible;
}

.therapeutic-areas-select-container {
  height: calc(100% - 5rem);

  overflow-y: auto;
}

.grid-toggle-active {
  color: #6c35b1 !important;
  border: 1px solid #6c35b1 !important;
}

trix-editor a {
  text-decoration: revert;
}

trix-editor ol,
trix-editor ul {
  padding-left: 12px;
}

.trix-content del,
trix-editor del {
  text-decoration: underline;
}

.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content
  .attachment-gallery.attachment-gallery--2
  > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
.trix-content
  .attachment-gallery.attachment-gallery--4
  > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

.trix-content a {
  color: revert;
  text-decoration: revert;
}

.trix-content ol {
  list-style: auto;
}

.trix-content ul {
  list-style-type: disc;
}

.trix-content ul li,
.trix-content ol li {
  margin-bottom: 0.5rem;
}

.admin-notes-container trix-editor {
  max-height: 250px;
  overflow: auto;
}

.fq-rich-text-area,
.custom-rich-text-area {
  min-height: 0px;
  overflow: auto;
}

.fq-rich-text-area ol,
.custom-rich-text-area ol {
  list-style: auto;
}

.fq-rich-text-area ul,
.custom-rich-text-area ul {
  list-style: disc;
}

/* Number field + editor sit side by side; the editor keeps its own grid so the
   canned-labels dropdown anchors to the rich text field, not the number field. */
.question-editor-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  column-gap: 0.5rem;
  align-items: start;
}

.question-editor-with-template {
  --question-template-trigger-width: 32px;
  --question-template-gap: 0.5rem;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--question-template-trigger-width);
  align-items: start;
  column-gap: var(--question-template-gap);
  row-gap: 0.5rem;
}

.question-editor-with-template trix-toolbar {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
}

.question-editor-with-template .question-template-trigger {
  grid-column: 2;
  grid-row: 2;
}

.question-editor-with-template .question-template-trigger button {
  width: var(--question-template-trigger-width);
}

.question-editor-with-template .question-template-menu {
  width: calc(100% - var(--question-template-trigger-width) - var(--question-template-gap));
  max-width: calc(100% - var(--question-template-trigger-width) - var(--question-template-gap));
  min-width: min(320px, calc(100% - var(--question-template-trigger-width) - var(--question-template-gap)));
}

.question-editor-with-template trix-editor {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}

/* Drop the number field below the trix toolbar (~44px + 0.5rem row gap) so it
   sits directly beside the rich text field, not the formatting buttons. */
.question-number-input {
  margin-top: 52px;
}

.embed-fq-iframe-container iframe {
  display: flex;
  width: 100%;
  flex: 1 0 auto;
  min-height: fit-content;
  height: 500px;
}

.embed-fq-iframe-container #ff-compose {
  width: 100%;
}

.embed-fq-iframe-container input {
  appearance: auto;
}

.overflow-wrap-anywhere {
  overflow-wrap: anywhere;
}

.fq-section-sidebar-item-active {
  background-color: #6c35b1;
  color: white;
}

.loading-dots {
  width: 60px;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side, #000 90%, #0000);
  background:
    var(--_g) 0% 50%,
    var(--_g) 50% 50%,
    var(--_g) 100% 50%;
  background-size: calc(100% / 3) 50%;
  animation: l3 1s infinite linear;
}
@keyframes l3 {
  20% {
    background-position:
      0% 0%,
      50% 50%,
      100% 50%;
  }
  40% {
    background-position:
      0% 100%,
      50% 0%,
      100% 50%;
  }
  60% {
    background-position:
      0% 50%,
      50% 100%,
      100% 0%;
  }
  80% {
    background-position:
      0% 50%,
      50% 50%,
      100% 100%;
  }
}

[data-bridge-components~="form"]
  [data-controller~="bridge--form"]
  [type="submit"] {
  display: none;
}

.banner .trix-content {
  color: inherit;
}

.field_with_errors ~ div[data-documents-target],
.field_with_errors:has(> input),
.field_with_errors:has(> select) {
  border: 1px solid #f87171;
  border-radius: 0.25rem;
}

.field_with_errors:has(input[data-documents-target]) {
 border: 0px; 
}

.opportunity-status-select option {
  background-color: white;
  color: black;
}

/* Remove number field arrows: Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove number field arrows: Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Webkit: Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 9999px;
}
*:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}
*:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
*:hover {
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}
trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }

trix-toolbar * {
  box-sizing: border-box; }

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto; }

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }

trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }

trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }

trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%; }

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-dialogs {
  position: relative; }

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }

trix-toolbar .trix-dialog--link {
  max-width: 600px; }

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }

trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
  background: highlight; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
  background: highlight; }

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }

trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }

trix-editor .trix-button-group {
  display: inline-flex; }

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }

trix-editor .attachment__metadata-container {
  position: relative; }

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' \2022 '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }