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%; }
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *

*/

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/

trix-editor {
  &.customized-min-height {
    min-height: 15em;
  }
}

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

/* Remove file option from trix-toolbar */
.trix-button-group--file-tools {
  display: none !important;
}

.doc_pages .trix-button-group--file-tools,
.document_libraries .trix-button-group--file-tools {
  display: flex !important;
}


/* Restore formatting visibility inside Trix editor and rendered output.
   Tailwind Preflight strips these styles globally; we re-apply them here. */
trix-editor,
.trix-content {
  strong, b {
    font-weight: bold;
  }
  em, i {
    font-style: italic;
  }
  del, s {
    text-decoration: line-through;
  }
  h1 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.5rem;
  }
  blockquote {
    border-left: 3px solid #d1d5db;
    padding-left: 1rem;
    color: #6b7280;
    font-style: italic;
    margin: 0.5rem 0;
  }
  ul {
    list-style-type: disc;
    padding-left: 1.5rem;
  }
  ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
  }
  li {
    margin: 0.125rem 0;
  }
  pre {
    background: #f3f4f6;
    padding: 0.75rem;
    border-radius: 0.375rem;
    font-family: monospace;
    white-space: pre-wrap;
    font-size: 0.875rem;
  }
}
@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] { display: none !important; }

/*

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

*/

:root {
  --padding-card: 1rem;
  --fallback-pc: #ffffff;
  --fallback-nc: #ffffff;
  --fallback-inc: #ffffff;
  --fallback-ec: #ffffff;
}

.checkbox-sm, .checkbox-xs {
  @apply rounded-sm;
}

/* Navbar dropdown rows: make the entire row clickable, not just the link text.
   Fill the <li> so clicks on the padding trigger navigation. flex (not block)
   keeps icon + text rows aligned side-by-side. */
.dropdown-content.menu li > a {
  @apply flex items-center gap-2 w-full;
}

trix-editor a {
  color: #009ce4;
  text-decoration: underline;
  background-color: #009CE40E;
}
.trix-fit .trix-content {
  height: auto;
}

.ts-wrapper {
  @apply w-full;
}

.ts-control {
  @apply w-full rounded-lg textarea textarea-sm textarea-bordered text-sm min-h-fit;
  line-height: 32px;
}

.ts-control input {
  @apply text-sm; /* Match your textarea text size */
  margin: 0 !important;
  padding: 0 !important;
}

.ts-wrapper.multi.has-items .ts-control {
  padding: 0.25rem 0.5rem !important; /* Adjust when items are present */
}

.ts-wrapper.multi .ts-control > div {
  @apply px-2 mr-1 rounded-full bg-info text-sm text-white;
}

.ts-wrapper.plugin-remove_button .item .remove {
  @apply border-none text-lg leading-none py-0 px-2 rounded-r-md ml-1;
}

.ts-dropdown {
  @apply rounded-lg border border-solid border-gray-300 mt-1;
  border-top-width: 1px !important; /* Override default */
}

.ts-dropdown [data-selectable].option,
.ts-dropdown .no-results {
  @apply py-1 px-3;
}

.ts-dropdown .create:hover,
.ts-dropdown .option:hover,
.ts-dropdown .active {
  @apply bg-blue-100;
}

.pagy {
  @apply flex space-x-1 text-sm font-semibold text-gray-500;
  a:not(.gap) {
    @apply block px-3 py-1 bg-gray-200 rounded-lg;
    &:hover {
      @apply bg-gray-300;
    }
    &:not([href]) {
      /* disabled links */
      @apply text-gray-300 bg-gray-100 cursor-default;
    }
    &.current {
      @apply text-white bg-gray-400;
    }
  }
  label {
    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
    input {
      @apply bg-gray-100 border-none rounded-lg;
    }
  }
}

.wssSidebarSlidebtn {
  position: absolute;
  top: 64px;
  left: 114px;
  z-index: 20;
  opacity: 1;
}

@import "actiontext.css";

/* DaisyUI v3 defaults buttons to uppercase — override globally */
.btn {
  text-transform: none !important;
}

/* DaisyUI's bare .btn-outline:hover inverts the button: background goes to base-content
   and text to base-100 (white). Call sites that override only the hover background with a
   light tint (hover:bg-slate-50 and friends) still get the white text, which is unreadable.
   Keep the button's own text colour whenever it overrides the hover background and does not
   name its own hover colour. Colour variants (.btn-outline.btn-primary etc.) and anything
   with an explicit hover text colour are left to DaisyUI / the call site. */
@media (hover: hover) {
  .btn-outline[class*="hover:bg-"]:not([class*="hover:text-"]):not(.btn-primary):not(.btn-secondary):not(.btn-accent):not(.btn-neutral):not(.btn-info):not(.btn-success):not(.btn-warning):not(.btn-error):hover {
    color: var(--fallback-bc, oklch(var(--bc) / 1));
  }
}

.agile-action-button {
  align-items: center !important;
  display: inline-flex !important;
  justify-content: center !important;
  text-align: center !important;
}

.agile-action-button * {
  text-align: center !important;
}

.agile-action-button-label {
  display: inline-block !important;
  text-align: center !important;
}

.agile-action-form {
  display: inline-flex !important;
  margin: 0 !important;
}

.toggle:hover {
  background-color: auto !important;
}

/* Merge Field Chips (TipTap + subject input) */
.merge-field-chip {
  @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-neutral text-white cursor-default select-none;
}

/* TipTap editor surface */
.tiptap-editor {
  @apply prose prose-sm max-w-none;
}
.tiptap-editor p { @apply my-1; }
.tiptap-editor table { @apply w-full border-collapse my-2; }
.tiptap-editor th { @apply bg-base-200 font-semibold px-2 py-1 border border-base-300 text-left text-sm; }
.tiptap-editor td { @apply px-2 py-1 border border-base-300 text-sm; }
.tiptap-editor img { @apply max-w-full h-auto; }
.tiptap-editor .selectedCell { @apply bg-info/10; }

/* Make merge-field chip attachments render inline.
   Use :has() so table attachments (also attachment--content) are unaffected. */
trix-editor figure.attachment--content:has(span[data-merge-field]) {
  display: inline !important;
  vertical-align: middle;
  margin: 0;
}
trix-editor figure.attachment--content:has(span[data-merge-field]) figcaption {
  display: none;
}

/* Page canvas (US Letter proportions for statement templates) */
.page-canvas {
  @apply w-[816px] min-h-[1056px] border border-base-300 shadow-sm bg-white p-[72px] mx-auto;
}

/* Inside page-canvas the canvas itself provides padding — strip the editor's default p-4 */
.page-canvas .tiptap-editor {
  @apply p-0 min-h-[912px];
}

.page-overflow-warning {
  @apply text-warning text-sm mt-2 hidden;
}

.page-overflow-warning.visible {
  @apply block;
}

.grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:rgba(0,0,0,.1);margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0;top:0;left:0;width:var(--gs-column-width);height:var(--gs-cell-height)}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack>.grid-stack-item>.grid-stack-item-content,.grid-stack>.grid-stack-placeholder>.placeholder-content{top:var(--gs-item-margin-top);right:var(--gs-item-margin-right);bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:var(--gs-item-margin-top);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:var(--gs-item-margin-top);left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:var(--gs-item-margin-top);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px;right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);right:var(--gs-item-margin-right)}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:var(--gs-item-margin-bottom);right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;bottom:var(--gs-item-margin-bottom);left:var(--gs-item-margin-left)}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px;left:var(--gs-item-margin-left)}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,top}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px rgba(0,0,0,.2);opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing{transition:left 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y="0"]{top:0}.grid-stack>.grid-stack-item[gs-x="0"]{left:0}
/* 
  Use the following to reproduce a Tailwind UI Select field with Tom Select 
*/

/**
 * tom-select.css (v2.4.3)
 * Copyright (c) contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 */
input[data-controller="grant-categories"] {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}
.ts-wrapper.multi.has-items .ts-control {
  padding: calc(8px - 2px - 1px) 8px calc(8px - 2px - 3px - 1px);
}
.full .ts-control {
  background-color: #fff;
}
.disabled .ts-control,
.disabled .ts-control * {
  cursor: default !important;
}
.ts-control > * {
  vertical-align: baseline;
  display: inline-block;
}
.ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #1da7ee;
  color: #fff;
  border: 1px solid #0073bb;
}
.tomselected:not(.ts-hidden-accessible) {
  opacity: 0;
}
.ts-wrapper.multi .ts-control > div.active {
  background: #92c836;
  color: #fff;
  border: 1px solid #00578d;
}
.ts-wrapper.multi.disabled .ts-control > div,
.ts-wrapper.multi.disabled .ts-control > div.active {
  color: white;
  background: #d2d2d2;
  border: 1px solid #aaaaaa;
}
.ts-control > input {
  flex: 1 1 auto;
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  min-width: 100%;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  -ms-user-select: auto !important;
  user-select: auto !important;
  box-shadow: none !important;
}
.ts-control > input::-ms-clear {
  display: none;
}
.ts-control > input:focus {
  outline: none !important;
}
.has-items .ts-control > input {
  margin: 0 4px !important;
}
.ts-control.rtl {
  text-align: right;
}
.ts-control.rtl.single .ts-control:after {
  left: 15px;
  right: auto;
}
.ts-control.rtl .ts-control > input {
  margin: 0 4px 0 -2px !important;
}
.disabled .ts-control {
  opacity: 0.5;
  background-color: #fafafa;
}
.input-hidden .ts-control > input {
  opacity: 0;
  position: absolute;
  left: -10000px;
}

.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  margin: 0.25rem 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 3px 3px;
}
.tomselected:not(.ts-hidden-accessible) {
  opacity: 0;
}
.ts-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}
.ts-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 5px 8px;
}
.ts-dropdown .option,
.ts-dropdown [data-disabled],
.ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}
.ts-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
}
.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}
.ts-dropdown .optgroup-header {
  color: #303030;
  background: #fff;
  cursor: default;
}
.ts-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}
.ts-dropdown .spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 8px;
}
.ts-dropdown .spinner::after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px;
  border-radius: 50%;
  border: 5px solid #d0d0d0;
  border-color: #d0d0d0 transparent #d0d0d0 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.ts-dropdown-content {
  overflow: hidden auto;
  max-height: 200px;
  scroll-behavior: smooth;
}

.ts-wrapper.plugin-drag_drop .ts-dragging {
  color: transparent !important;
}
.ts-wrapper.plugin-drag_drop .ts-dragging > * {
  visibility: hidden !important;
}

.plugin-checkbox_options:not(.rtl) .option input {
  margin-right: 0.5rem;
}

.plugin-checkbox_options.rtl .option input {
  margin-left: 0.5rem;
}

/* stylelint-disable function-name-case */
.plugin-clear_button {
  --ts-pr-clear-button: 1em;
}
.plugin-clear_button .clear-button {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(8px - 6px);
  margin-right: 0 !important;
  background: transparent !important;
  transition: opacity 0.5s;
  cursor: pointer;
}
.plugin-clear_button.form-select .clear-button,
.plugin-clear_button.single .clear-button {
  right: max(var(--ts-pr-caret), 8px);
}
.plugin-clear_button.focus.has-items .clear-button,
.plugin-clear_button:not(.disabled):hover.has-items .clear-button {
  opacity: 1;
}

.ts-wrapper .dropdown-header {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: color-mix(#fff, #d0d0d0, 85%);
  border-radius: 3px 3px 0 0;
}
.ts-wrapper .dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}
.ts-wrapper .dropdown-header-close:hover {
  color: black;
}

.plugin-dropdown_input .dropdown-input {
  border: 1px solid #d0d0d0;
  border-width: 0 0 1px;
  display: block;
  padding: 8px 8px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  width: 100%;
  background: transparent;
}
.plugin-dropdown_input .items-placeholder {
  border: 0 none !important;
  box-shadow: none !important;
  width: 100%;
}
.plugin-dropdown_input.has-items .items-placeholder,
.plugin-dropdown_input.dropdown-active .items-placeholder {
  display: none !important;
}

.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  min-width: 0;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  flex: none;
  min-width: 4px;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus
  .ts-control
  > input::-ms-input-placeholder {
  color: transparent;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus
  .ts-control
  > input::placeholder {
  color: transparent;
}

.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex;
}
.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup::before {
  display: none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}

.ts-wrapper.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
}
.ts-wrapper.plugin-remove_button .item .remove {
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 0 6px;
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}
.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item {
  padding-right: 0 !important;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left: 1px solid #0073bb;
  margin-left: 6px;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
  border-left-color: #00578d;
}
.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
  border-left-color: #aaaaaa;
}

.ts-wrapper.plugin-remove_button.rtl .item {
  padding-left: 0 !important;
}
.ts-wrapper.plugin-remove_button.rtl .item .remove {
  border-right: 1px solid #0073bb;
  margin-right: 6px;
}
.ts-wrapper.plugin-remove_button.rtl .item.active .remove {
  border-right-color: #00578d;
}
.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
  border-right-color: #aaaaaa;
}

:root {
  --ts-pr-clear-button: 0px;
  --ts-pr-caret: 0px;
  --ts-pr-min: 0.75rem;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.single .ts-control input {
  cursor: pointer;
}

.ts-control:not(.rtl) {
  padding-right: max(
    var(--ts-pr-min),
    var(--ts-pr-clear-button) + var(--ts-pr-caret)
  ) !important;
}

.ts-control.rtl {
  padding-left: max(
    var(--ts-pr-min),
    var(--ts-pr-clear-button) + var(--ts-pr-caret)
  ) !important;
}

.ts-wrapper {
  position: relative;
}

.ts-dropdown,
.ts-control,
.ts-control input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: #fff;
  cursor: text;
}

.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.ts-wrapper.single .ts-control {
  --ts-pr-caret: 2rem;
}
.ts-wrapper.single .ts-control::after {
  content: " ";
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -3px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #808080 transparent transparent transparent;
}
.ts-wrapper.single .ts-control:not(.rtl)::after {
  right: 15px;
}
.ts-wrapper.single .ts-control.rtl::after {
  left: 15px;
}
.ts-wrapper.single.dropdown-active .ts-control::after {
  margin-top: -4px;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent #808080 transparent;
}
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.single.input-active .ts-control input {
  cursor: text;
}

.ts-wrapper {
  display: flex;
}
min-height: 36px;
.ts-wrapper.multi.has-items .ts-control {
  padding-left: 5px;
  --ts-pr-min: $padding-x;
}
.ts-wrapper.multi .ts-control [data-value] {
  text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);
  background-color: color-mix(#1da7ee, #178ee9, 60%);
  background-image: linear-gradient(to bottom, #1da7ee, #178ee9);
  background-repeat: repeat-x;
}
.ts-wrapper.multi .ts-control [data-value].active {
  background-color: color-mix(#008fd8, #0075cf, 60%);
  background-image: linear-gradient(to bottom, #008fd8, #0075cf);
  background-repeat: repeat-x;
}
.ts-wrapper.multi.disabled .ts-control [data-value] {
  color: #999;
  text-shadow: none;
  background: none;
  box-shadow: none;
}
.ts-wrapper.multi.disabled .ts-control [data-value],
.ts-wrapper.multi.disabled .ts-control [data-value] .remove {
  border-color: #e6e6e6;
}
.ts-wrapper.multi.disabled .ts-control [data-value] .remove {
  background: none;
}
.ts-wrapper.single .ts-control {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  background-color: color-mix(#fefefe, #f2f2f2, 60%);
  background-image: linear-gradient(to bottom, #fefefe, #f2f2f2);
  background-repeat: repeat-x;
}

.ts-wrapper.single .ts-control,
.ts-dropdown.single {
  border-color: #b8b8b8;
}

.ts-dropdown .optgroup-header {
  padding-top: 7px;
  font-weight: bold;
  font-size: 0.85em;
}
.ts-dropdown .optgroup {
  border-top: 1px solid #f0f0f0;
}
.ts-dropdown .optgroup:first-child {
  border-top: 0 none;
}
/*
 * 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.
 *


 */
@import "./gridstack.min.css";
@import "./actiontext.css";
@import "./tom-select.min.css";
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

@font-face {
  font-family: "digital-clock-font";
  src: url(/assets/LiquidCrystal-Normal-4087e122eb40c8be702da586bfe4c140d9bdecd38eed74b8a453d9ecbec0f481.otf);
}

/* Sidebar collapse behavior (production-safe) */
#sidebar.sidebar-collapsed .sidebar-label { display: none; }

#sidebar * {
  direction: ltr;
}

.thin-scrollbar {
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

.digital-clock {
  font-family: "digital-clock-font";
}
.fake-link {
  text-decoration: underline;
}

.fake-link:hover {
  text-decoration: underline;
  cursor: pointer;
}

.simple-calendar {
  table {
    -webkit-border-horizontal-spacing: 0px;
    -webkit-border-vertical-spacing: 0px;
    background-color: rgba(0, 0, 0, 0);
    /* border: 1px solid rgb(221, 221, 221);
    border-collapse: collapse;
    box-sizing: border-box; */
    max-width: 100%;
    width: 100%;
  }

  tr {
    border-collapse: collapse;
  }

  th {
    padding: 6px;
    /* border-bottom: 0px solid rgb(221, 221, 221); */
    /* border-collapse: collapse; */
    /* border-left: 0px solid rgb(221, 221, 221); */
    /* border-right: 0px solid rgb(221, 221, 221); */
    /* border-top: 0px none rgb(51, 51, 51); */
    /* box-sizing: border-box; */
    text-align: right;
    color: black; /* White text for contrast */
    font-weight: 400;
    /* background-color: #10b981;  */
    background-color: white;
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
  }

  td {
    padding: 2px;
    vertical-align: top;
    width: 12%;
    font-size: 0.875rem;
    line-height: 1.25rem;

    border: 1px solid #ddd;
    border-top-color: rgb(221, 221, 221);
    border-top-style: solid;
    border-top-width: 1px;
    border-right-color: rgb(221, 221, 221);
    border-right-style: solid;
    border-right-width: 1px;
    border-bottom-color: rgb(221, 221, 221);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-color: rgb(221, 221, 221);
    border-left-style: solid;
    border-left-width: 1px;
    text-align: left;
  }

  .calendar-heading nav {
    display: inline-block;
  }

  .day {
    padding-left: 0.5rem;
    padding-top: 0.25rem;
    height: 100px;
    text-align: left;
    font-size: 1rem; /* 16px */
    line-height: 1.5rem; /* 24px */
    font-weight: 400;
  }

  .day-date {
    text-align: right;
  }

  .wday-0 {
    background: rgb(248 250 252);
  }
  .wday-1 {
  }
  .wday-2 {
  }
  .wday-3 {
  }
  .wday-4 {
  }
  .wday-5 {
  }
  .wday-6 {
    background: rgb(248 250 252);
  }

  .today {
    background: rgb(255 251 235);
  }

  .past {
  }
  .future {
  }

  .start-date {
  }

  .prev-month {
  }
  .next-month {
  }
  .current-month {
  }

  .has-events {
  }
}

.sort-desc:after,
.sort-asc:after {
  content: " ";
  position: relative;
  left: 2px;
  border: 8px solid transparent;
}

.sort-desc:after {
  top: 15px;
  border-top-color: white;
}

.sort-asc:after {
  bottom: 15px;
  border-bottom-color: white;
}

.sort {
  padding-right: 10px;
}

.tool-sort-button.sort-desc:after,
.tool-sort-button.sort-asc:after {
  content: none;
}

trix-toolbar {
  @apply whitespace-normal;
}

trix-toolbar .trix-button-row {
  flex-wrap: wrap !important;
  justify-content: start !important;
}

trix-toolbar .trix-button-row .trix-button-group-spacer {
  display: none;
}

trix-toolbar .trix-button-row .trix-button-group {
  margin-left: 0 !important;
  @apply mr-4 mb-3 py-1 px-1 !border !border-borcol bg-gray-50 dark:bg-gray-950 rounded-sm space-x-1;
}

trix-toolbar .trix-button-row .trix-button-group button {
  border: none !important;
  height: auto;
  @apply text-sm w-8 p-1.5 text-gray-600 dark:text-gray-300 rounded-sm hover:bg-gray-200 dark:hover:bg;
}

trix-toolbar .trix-button-row .trix-button-group button.trix-active {
  @apply !bg-primary !text-white !rounded-lg;
}

/* Custom Trix */

trix-editor {
  resize: vertical;
}

.trix-image-link-dialog {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}

.trix-image-link-dialog input:focus {
  outline: 2px solid #0066cc;
}

.trix-image-link-dialog button:hover {
  opacity: 0.9;
  cursor: pointer;
}

/* Removes bullets and numbers icon if desired */
/* trix-toolbar
  .trix-button-row
  span.trix-button-group--block-tools
  .trix-button--icon-bullet-list {
  display: none;
}

trix-toolbar
  .trix-button-row
  span.trix-button-group--block-tools
  .trix-button--icon-number-list {
  display: none;
} */

trix-editor ul {
  list-style-type: disc;
  margin-left: 1rem;
}

trix-editor ol {
  list-style-type: decimal;
  margin-left: 1rem;
}

trix-toolbar .trix-button-row .trix-button-group button.trix-active::before {
  @apply !bg-primary !text-white !rounded-lg;
}

.tooltip:before {
  color: white !important;
  font-weight: 600 !important;
  z-index: 100000 !important;
}

trix-editor {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

trix-editor pre {
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

.badge-stack-overlap > * + * {
  margin-top: -0.95rem; /* adjust overlap amount */
}
.badge-stack-overlap > * {
  position: relative;
  transition: transform 150ms ease;
}
.badge-stack-overlap > *:hover {
  transform: scale(1.25);
  z-index: 10;
}

.badge-stack-overlap-horizontal > * + * {
  margin-left: -0.95rem; /* adjust overlap amount */
}

.badge-stack-overlap-horizontal > * {
  position: relative;
  transition: transform 150ms ease;
}

.badge-stack-overlap-horizontal > *:hover {
  transform: scale(1.25);
  z-index: 10;
}

.perspective {
  perspective: 1000px;
}
.backface-hidden {
  backface-visibility: hidden;
}
.rotate-y-180 {
  transform: rotateY(180deg);
}

/* ── Resource Card Flip System ──────────────────────────────────────────── */
.card-3d {
  perspective: 1000px;
  height: 400px;
}
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.52s cubic-bezier(.4,0,.2,1);
}
.card-inner.is-flipped { transform: rotateY(180deg); }
.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  pointer-events: none;
}
.card-inner:not(.is-flipped) .card-front { pointer-events: auto; }
.card-inner.is-flipped .card-back { pointer-events: auto; }
.card-back { transform: rotateY(180deg); }
.card-face .res-card { height: 100%; }

/* ── HealthySC Resource Card Design System ──────────────────────────────── */
:root {
  --hsc-deep:   #0d2d45;
  --hsc-mid:    #15476d;
  --hsc-main:   #2980b9;
  --hsc-light:  #7ec8e3;
  --hsc-pale:   #e8f4fb;
  --hsc-green:  #629c51;
  --hsc-warm:   #6b6b60;
  --hsc-shadow: 0 4px 24px rgba(13,45,69,.10);
  --hsc-shadow-hover: 0 12px 40px rgba(13,45,69,.18);
  --hsc-radius: 16px;
  --hsc-tr:     .25s cubic-bezier(.4,0,.2,1);
}

.res-card {
  background: #fff;
  border-radius: var(--hsc-radius);
  border: 1px solid rgba(41,128,185,.12);
  border-top: 4px solid var(--card-accent, var(--hsc-main));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--hsc-shadow);
  transition: transform var(--hsc-tr), box-shadow var(--hsc-tr);
  container-type: inline-size;
}
.res-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--hsc-shadow-hover);
}
.res-card__header {
  padding: 1.1rem 1.15rem 0.65rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  border-bottom: 1px solid var(--hsc-pale);
}
.res-card__type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  height: 36px;
  padding: 0 1rem;
  border-radius: 50px;
  background: var(--hsc-pale);
  color: var(--hsc-mid);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.res-card__name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.05rem, 4cqi, 1.35rem);
  font-weight: 700;
  color: var(--hsc-deep);
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  word-break: break-word;
}
.res-card__name a {
  color: inherit;
  text-decoration: none;
}
.res-card__name a:hover {
  text-decoration: underline;
}
.res-card__body {
  padding: 0.75rem 1.15rem 0.5rem;
  flex: 1;
}
.res-card__desc {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.9rem;
  color: var(--hsc-warm);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.res-card__footer {
  padding: 0.65rem 1.15rem 0.9rem;
  margin-top: auto;
  border-top: 1px solid var(--hsc-pale);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.res-card__contact {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--hsc-warm);
  text-decoration: none;
  overflow: hidden;
}
.res-card__contact .rc-icon {
  color: var(--hsc-main);
  flex-shrink: 0;
  width: 14px;
  text-align: center;
  font-size: 0.78rem;
}
.res-card__contact span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.res-card__contact:hover span { color: var(--hsc-main); text-decoration: underline; }
.res-card__actions {
  margin-top: 0.45rem;
  display: flex;
  gap: 0.45rem;
  align-items: center;
}
.res-card__cta {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.48rem 0.75rem;
  border-radius: 50px;
  background: var(--hsc-main);
  color: #fff !important;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  transition: background var(--hsc-tr);
  border: none;
  cursor: pointer;
}
.res-card__cta:hover { background: var(--hsc-deep); }
.res-card__cta-icon {
  display: block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.res-card__updated {
  margin-top: 0.55rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.7rem;
  color: #9aa3ab;
  text-align: right;
}
.res-card__icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--hsc-light);
  background: #fff;
  color: var(--hsc-main);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--hsc-tr);
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}
.res-card__icon-btn:hover {
  background: var(--hsc-pale);
  border-color: var(--hsc-main);
}
.res-card__icon-btn.bookmarked {
  background: var(--hsc-green);
  border-color: var(--hsc-green);
  color: #fff;
}

.res-card__logo {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 3px;
}
/* Wide/banner logos (≥ 2:1) — prioritise width */
.res-card__logo--wide    { max-width: 88px; max-height: 28px; }
/* Square / near-square logos */
.res-card__logo--balanced { max-width: 52px; max-height: 38px; }
/* Portrait / tall logos */
.res-card__logo--tall    { max-width: 30px; max-height: 46px; }

/* ── Resource Card Back Face ─────────────────────────────────────────────── */
.res-card__back-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(41,128,185,.25) transparent;
}

.res-card__back-section {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(41,128,185,.10);
}

.res-card__back-section:last-child {
  border-bottom: none;
}

.res-card__back-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hsc-main);
  margin-bottom: 0.1rem;
}

.res-card__back-label i {
  margin-right: 3px;
  opacity: 0.7;
}

.res-card__back-text {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.82rem;
  color: #374151;
  line-height: 1.45;
}

.res-card__back-link {
  text-decoration: none;
  color: var(--hsc-mid);
  display: block;
}

.res-card__back-link:hover {
  color: var(--hsc-main);
  text-decoration: underline;
}

.res-card__back-hours-row {
  display: flex;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: #374151;
  font-family: 'DM Sans', system-ui, sans-serif;
}

.res-card__back-day {
  width: 4.5rem;
  flex-shrink: 0;
  font-weight: 600;
  color: var(--hsc-deep);
}

.res-card__back-note {
  font-size: 0.72rem;
  color: #9ca3af;
  font-style: italic;
  margin-top: 0.15rem;
}

/* Pagy pagination nav — highlight current page */
nav.pagy a.current {
  background-color: #4b5563;
  color: #ffffff;
}

nav.pagy a {
  transition: all;
  transition-duration: 250ms;
}

nav.pagy a:not([aria-disabled="true"]):not(.current):hover {
  background-color: #6A798E;
}

/* Dashboard Modules - Gridstack */

/* Card content must not clip: daisyUI tooltips render as absolutely-positioned
   pseudo-elements, so any overflow-hidden/auto ancestor truncates a tooltip at
   the card edge. Keep the whole card chain visible; modules that need to scroll
   long content wrap it in their own inner overflow container. */
.grid-stack > .grid-stack-item > .grid-stack-item-content {
  overflow: visible;
}

.grid-stack {
  position: relative;
  --grid-cell-height: 70px;
  --grid-cols: 12;
  /* Thin grid lines */
  background-color: transparent;
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
  background-size: calc(99.9% / var(--grid-cols)) var(--grid-cell-height);
  background-position: 0 0;
  min-height: 421px;
  padding: 0;
}

/* Responsive columns - must match JS columnOpts breakpoints */
@media (max-width: 1023px) {
  .grid-stack {
    --grid-cols: 1;
  }
}

/* Dark mode grid */
[data-theme="dark"] .grid-stack,
.dark .grid-stack {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
}

.grid-stack-item-content {
  background: transparent;
  overflow: visible !important;
  position: relative;
}

.grid-stack-item-content .card-body {
  height: 100%;
  overflow: hidden;
  /* Flex column: fixed header row + a height-bounded content region below that
     scrolls (see the .flex-1 wrapper in _container). This keeps every module's
     content inside its card instead of spilling over the grid. */
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Resize handle - corner triangle effect */
.grid-stack-item > .ui-resizable-se {
  width: 16px;
  height: 16px;
  bottom: 0;
  right: 0;
  cursor: se-resize;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.5s;
}

.grid-stack-item:hover > .ui-resizable-se{
  opacity: 1;
  transition: opacity 0.5s;
}

/* Drag handle styling */
.grid-stack-item .drag-handle {
  cursor: grab;
}

.grid-stack-item .drag-handle:active {
  cursor: grabbing;
}

/* Placeholder while dragging */
.grid-stack-placeholder > .placeholder-content {
  background-color: rgba(59, 130, 246, 0.1);
  border: 2px dashed rgba(59, 130, 246, 0.4);
  border-radius: 0.5rem;
}

/* Dragging state */
.grid-stack-item.ui-draggable-dragging {
  z-index: 100;
  opacity: 0.9;
}

.grid-stack-item.ui-draggable-dragging > .grid-stack-item-content {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}