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-toolbar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  background-color: var(--white);
}
trix-toolbar.visible {
  display: block;
}

trix-toolbar .trix-button-group {
  margin-bottom: 0;
}

trix-toolbar button[type="button"] {
  background-color: transparent;
  color: var(--black);
  border: none;
  border-radius: 4px;
  padding: 0.5em;
  margin: 0.25em;
  cursor: pointer;
}

trix-toolbar .trix-dialog {
  position: fixed;
  top: calc(var(--header-height) + var(--min-spacing));
  left: var(--min-spacing);
  width: 100%;
  height: fit-content;
}

trix-editor {
  padding: 0;
}

trix-editor h1 {
  font-size: 1.2em;
  margin: 0.67em 0;
}

trix-editor h1:first-child {
  margin-top: 0;
}

.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;
}
* {
  box-sizing: border-box;
}

html {
  transition: background-color 0.2s;
  background-color: var(--secondary-color);
}

html.primary {
  background-color: var(--primary-color-light);
}

html.secondary {
  background-color: var(--secondary-color-light);
}

html.tertiary {
  background-color: var(--tertiary-color-light);
}

html.quaternary {
  background-color: var(--quaternary-color-light);
}

html,
body {
  margin: 0;
  padding: 0;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: var(--sans-serif-font);
}

main {
  position: relative;
  min-height: calc(100dvh - var(--header-height));

  padding-left: var(--medium-spacing);
  padding-right: var(--medium-spacing);
  margin-top: var(--header-height);
  margin-bottom: var(--footer-height);
  margin-left: auto;
  margin-right: auto;
}

table {
  border-spacing: 0;
  border: none;
}

th {
  cursor: pointer;
}

th,
td {
  text-align: left;
  padding: 4px;
}

tr.hidden {
  display: none;
}

tr:nth-child(even) {
  color: var(--secondary-color);
}

tr:nth-child(even) a {
  color: var(--secondary-color);
}

tr:nth-child(even) a:visited {
  color: invert(var(--visited-color));
}

hr {
  border: none;
  border-bottom: solid var(--border-width) var(--interaction-color);
  margin: 16px 0;
}

input,
select,
textarea {
  font-family: var(--sans-serif-font);
  font-size: var(--font-size);
}

select[multiple=multiple] {
  height: 80px;
  border-radius: 4px;
  margin-bottom: 0;
}

a {
  color: black;
}

a.block {
  text-decoration: none;
}

a.block:hover {
  opacity: 0.8;
}

p>a {
  text-decoration: underline;
}


a:visited {
  color: var(--visited-color);
}

h1,
h2,
h3,
h4 {
  letter-spacing: -1.5px;
  margin: var(--medium-spacing) 0 var(--small-spacing);
}

h3,
h4 {
  letter-spacing: -1px;
}

p,
small {
  letter-spacing: 0px;
}

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

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

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

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

p,
input,
textarea,
select {
  font-size: var(--p-fs);
  line-height: var(--p-lh);
}

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

small {
  font-size: var(--small-fs);
}

ol,
ul {
  margin: var(--min-spacing) 0;
  padding-left: var(--medium-spacing);
}

hr {
  width: 100%;
  border: none;
  border-bottom: var(--border-width) solid var(--primary-color);
}

table tr td {
  min-width: 120px;
  padding-bottom: 2px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  border-radius: var(--border-radius);
  padding: var(--input-spacing);
}

button {
  background-color: rgba(0, 0, 0, 0);
  border: none;
  display: block;
  cursor: pointer;
}

input[type=submit],
input[type=reset],
.button {
  border-radius: var(--border-radius);
  padding: var(--input-spacing);
  cursor: pointer;

  background-color: var(--black);
  color: var(--secondary-color)
}

.button.small {
  border-radius: var(--border-radius-small);
}

textarea {
  min-width: var(--textarea-width);
  min-height: var(--textarea-height);

  resize: vertical;
  border: none;
  border-radius: var(--border-radius);
  background-color: var(--white);
  padding: 0;
  min-height: 100px;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  border-radius: var(--border-radius);
  padding: var(--input-spacing);
}

details>summary {
  cursor: pointer;
  list-style: none;
}

details>summary::-webkit-details-marker {
  display: none;
}

address {
  font-style: normal;
}

* {
  scrollbar-width: auto;
  scrollbar-color: var(--white) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--white);
  border-radius: 20px;
  border: 3px solid transparent;
}

::selection {
  background: var(--secondary-color);
}

::placeholder {
  color: var(--text-color-light);
  opacity: 1;
}

::-ms-input-placeholder {
  color: var(--text-color-light);
}

:root {
  /* Primary Colors */
  --primary-color: #35a7ff;
  --primary-color-light: #35a7ff;
  --primary-color-dark: #2e86c1;
  /* Secondary Colors */
  --secondary-color: #f1c40f;
  --secondary-color-light: #f4d03f;
  --secondary-color-lighter: #f7dc6f;
  --secondary-color-lightest: #fcf3d2;
  --secondary-color-dark: #d4ac0d;
  /* Tertiary Colors */
  --tertiary-color: #e74c3c;
  --tertiary-color-light: #ff5964;
  --tertiary-color-dark: #cb4335;
  /* Quaternary Colors */
  --quaternary-color: #2ecc71;
  --quaternary-color-light: #3bb273;
  --quaternary-color-dark: #27ae60;
  /* Neutral Colors */
  --white: #ffffff;
  --black: #000000;
  --gray-lightest: #f5f5f5;
  --gray-lighter: #ecf0f1;
  --gray-light: #d3d3d3;
  --gray: #bdc3c7;
  --gray-dark: #393934;
  /* Accent Colors */
  --accent-color: #8e44ad;
  --accent-color-light: #a569bd;
  --accent-color-dark: #7d3c98;
  /* Success Colors */
  --success-color: #2ecc71;
  --success-color-light: #58d68d;
  --success-color-dark: #28b463;
  /* Warning Colors */
  --warning-color: #f39c12;
  --warning-color-light: #f5b041;
  --warning-color-dark: #d68910;
  /* Info Colors */
  --info-color: #1abc9c;
  --info-color-light: #48c9b0;
  --info-color-dark: #16a085;
  /* Danger Colors */
  --danger-color: #e74c3c;
  --danger-color-light: #ec7063;
  --danger-color-dark: #cb4335;
  /* Background Colors */
  --background-color: #f8f9fa;
  --background-color-dark: #343a40;
  /* Text Colors */
  --text-color: #2c3e50;
  --text-color-light: #95a5a6;

  /*** Font families ***/
  --sans-serif-font: 'Antarctica', sans-serif;
  --serif-font: 'Antarctica', serif;

  /*** Font sizes ***/
  --h1-fs: 1.6rem;
  --h2-fs: 1.3rem;
  --h3-fs: 1.1rem;
  --h4-fs: 1rem;
  --p-fs: 1rem;
  --small-fs: 0.8rem;

  /*** Line heights ***/
  --h1-lh: 1.1em;
  --h2-lh: 1.1em;
  --h3-lh: 1.1em;
  --h4-lh: 1.1em;
  --p-lh: 1.1em;
  --small-lh: 1.1em;

  /*** Borders ***/
  --border-width: 2px;
  --border-radius: 22px;
  --border-radius-small: 8px;
  --border-style: solid;
  --border: var(--border-width) var(--border-style);

  /*** Shadows ***/
  --box-shadow: 0 3px 8px rgba(50, 50, 50, 0.17);
  --box-shadow-top: 0 -5px 8px 0 rgba(235, 235, 235, 0.8);
  --box-shadow-bottom: 0 5px 8px 0 rgba(235, 235, 235, 0.8);

  /*** Margins and Paddings ***/
  --large-spacing: 70px;
  --medium-spacing: 20px;
  --small-spacing: 16px;
  --min-spacing: 8px;
  --x-min-spacing: 4px;
  --input-spacing: 8px 12px;
  --text-spacing: 2px;

  /*** Element Sizes ***/
  --max-page-width: 1024px;
  --max-content-width: 600px;
  --header-height: 40px;
  --footer-height: 50px;
  --input-label-width: 200px;
  --textarea-width: 300px;
  --textarea-height: 160px;
  --card-width: 300px;

  /*** Icon sizes ***/
  --icon-size-tiny: 16px;
  --icon-size-small: 24px;
  --icon-size-medium: 32px;
  --icon-size-large: 48px;
  --icon-size-x-large: 64px;
}

@media screen and (max-width: 768px) {
  :root {
    --h1-fs: 1.5rem;
    --h2-fs: 1.3rem;
    --h3-fs: 1.2rem;
    --h4-fs: 1rem;
    --p-fs: 1rem;
    --small-fs: 0.7rem;
  }
}

@media screen and (max-width: 480px) {}

@media screen and (min-width: 1024px) {}

@media screen and (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media screen and (prefers-reduced-transparency: reduce) {
  * {
    opacity: 1 !important;
  }
}
.assets-cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
}

.assets-cover .heroicon.cross {
  position: absolute;
  top: var(--small-spacing);
  right: var(--small-spacing);
  cursor: pointer;
  border-radius: var(--border-radius-small);
  background-color: var(--gray);
}

.assets-cover .heroicon.cross:hover {
  background-color: var(--gray-light);
}

.assets-container {
  margin: var(--large-spacing) auto 0;
  width: 60vw;
  min-width: 400px;
  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);
  padding: var(--small-spacing);
  background-color: var(--gray-light);
  border-radius: var(--border-radius-small);
}

.assets-container nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--small-spacing);
  margin-bottom: var(--min-spacing);
  border-bottom: var(--border-width) solid var(--gray);
}

.assets-container nav button {
  font-size: var(--h3-fs);
  font-weight: bold;
  margin: var(--min-spacing) 0;
}

.assets-container nav button.active {
  text-decoration: underline;
}

.assets-forms {
  border-bottom: var(--border-width) solid var(--gray);
  padding-bottom: var(--min-spacing);
  min-height: 250px;
}

.asset {
  position: relative;
  width: 200px;
  padding: var(--small-spacing);

  background-color: var(--gray);
  border-radius: var(--border-radius-small);
}

.asset a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--x-min-spacing);
}

.asset img {
  width: calc(100% - var(--small-spacing) - var(--x-min-spacing) * 2);
  height: auto;
}

.asset h4,
.asset p {
  margin: 0;
}

.asset .heroicon.cross {
  position: absolute;
  top: var(--x-min-spacing);
  right: var(--x-min-spacing);
  cursor: pointer;
  border-radius: var(--border-radius-small);
}

.asset .heroicon.cross:hover {
  background-color: var(--gray-light);
}

/* Google Doc Buttons */
.google-doc-buttons {
  display: flex;
  gap: var(--small-spacing);
  justify-content: center;
  align-items: center;

}

.google-doc-buttons button {
  cursor: pointer;
  transition: transform 0.2s;

  background-color: var(--gray);
  padding: var(--small-spacing);
  border-radius: var(--border-radius-small);
}

.google-doc-buttons button:hover {
  transform: scale(1.1);
}
.autosave-indicator {
  position: absolute !important;
  top: 0;
  right: 0;
  color: #fff;

  transition: background-color 0.5s;

}
.autosave-indicator.loading {
  transition: transform 0.5s;
  animation: rotate 1.5s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* CLONE MODAL */
.clone-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

/* Clone button styling */
.heroicon.document-duplicate button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1;
}

.clone-modal {
  background-color: var(--white);
  border-radius: var(--border-radius);
  padding: var(--large-spacing);
  max-width: 500px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.clone-modal-header {
  margin-bottom: var(--medium-spacing);
}

.clone-modal-header h2 {
  margin: 0 0 var(--small-spacing) 0;
  color: var(--text-color);
}

.clone-modal-header p {
  margin: 0;
  color: var(--gray-dark);
  font-size: 0.9rem;
}

.clone-options {
  display: flex;
  flex-direction: column;
  gap: var(--small-spacing);
  margin-bottom: var(--medium-spacing);
}

.clone-option-button {
  display: flex;
  align-items: start;
  gap: var(--medium-spacing);
  padding: var(--medium-spacing);
  border: 2px solid var(--gray-lighter);
  border-radius: var(--border-radius);
  background-color: var(--white);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.clone-option-button:hover {
  border-color: var(--primary-color);
  background-color: var(--gray-lightest);
}

.clone-option-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clone-option-icon.linked {
  background-color: #e3f2fd;
}

.clone-option-icon.detached {
  background-color: #f3e5f5;
}

.clone-option-icon .heroicon {
  width: 24px;
  height: 24px;
}

.clone-option-icon.linked .heroicon {
  color: #1976d2;
}

.clone-option-icon.detached .heroicon {
  color: #7b1fa2;
}

.clone-option-content {
  flex: 1;
}

.clone-option-content h3 {
  margin: 0 0 var(--x-min-spacing) 0;
  font-size: 1rem;
  color: var(--text-color);
}

.clone-option-content p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gray-dark);
  line-height: 1.4;
}

.clone-modal-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--medium-spacing);
  border-top: 1px solid var(--gray-lighter);
}

.clone-modal-cancel {
  padding: var(--small-spacing) var(--medium-spacing);
  background-color: transparent;
  color: var(--gray-dark);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease;
}

.clone-modal-cancel:hover {
  background-color: var(--gray-lightest);
}
.loading-indicator-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;

  border-radius: var(--border-radius-small);

  background-color: rgba(0, 0, 0, 0.0);
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0% {
    background-color: rgba(0, 0, 0, 0.0)
  }
  50% {
    background-color: rgba(0, 0, 0, 0.1)
  }
  100% {
    background-color: rgba(0, 0, 0, 0.0);
  }
}
/* CONTEXT MENU */
.contextmenu-container {
  position: fixed;
  z-index: 1000000;
  display: none;
  width: 100%;
  height: 100%;
  background-color: transparent;
  top: 0;
  left: 0;
}
.contextmenu-menu {
  position: absolute;
  width: 200px;
  background-color: var(--gray-light);
  border-radius: var(--border-radius);
  padding: var(--min-spacing);
  box-shadow: var(--box-shadow);
}
.contextmenu-container.show {
  display: block;
}
.contextmenu-button {
  display: block;
  width: 100%;
  padding: var(--x-min-spacing) var(--min-spacing);
  background-color: transparent;
  border: none;
  text-align: left;
  cursor: pointer;

  font-size: var(--small-fs);
  text-decoration: none;

  display: flex;
  align-items: center;
  gap: var(--min-spacing);
}
.contextmenu-button .heroicon {
  transition: transform 0.2s;
}
.contextmenu-button:hover .heroicon {
  transform: scale(1.15);
}
.contextmenu-button .heroicon.arrow-path {
  animation: rotate 1.5s infinite linear;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.contextmenu-button:hover {
  background-color: var(--gray-lighter);
  border-radius: var(--border-radius);
}
.contextmenu-selected {
  background-color: var(--secondary-color-lightest);
  border-radius: var(--border-radius);
}
#dashboard-container {
  width: 100%;
}
#devise-shared-links {
  font-size: small;
}
#devise-shared-links a{
  display: block;
}
.download-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.download-container {
  background: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 400px;
  width: 100%;
  text-align: center;
}

.download-container h1 {
  font-size: 28px;
  margin-bottom: 10px;
  color: #333;
}

.download-instructions {
  color: #666;
  margin-bottom: 30px;
  font-size: 14px;
}

.code-input {
  width: 100%;
  font-size: 32px;
  letter-spacing: 8px;
  text-align: center;
  padding: 20px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  margin-bottom: 10px;
  transition: border-color 0.3s;
}

.code-input:focus {
  outline: none;
  border-color: #667eea;
}

.download-button {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  margin-top: 10px;
}

.download-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.download-button:active {
  transform: translateY(0);
}

.download-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.error-message {
  color: #e74c3c;
  font-size: 14px;
  min-height: 20px;
  margin-top: 10px;
}

.download-info {
  margin-top: 30px;
}

.download-link {
  display: inline-block;
  padding: 12px 24px;
  background: #27ae60;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  margin-top: 10px;
  font-weight: 600;
}

.download-link:hover {
  background: #229954;
}
/* LAYOUT */
.relative {
  position: relative;
}

.block {
  display: block;
}

.grid {
  display: grid;
}

.flex {
  display: flex;
}

.column {
  display: flex;
  flex-direction: column;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.align-center {
  align-items: center;
}

.align-start {
  align-items: flex-start;
}

.align-end {
  align-items: flex-end;
}

.align-stretch {
  align-items: stretch;
}

.align-baseline {
  align-items: baseline;
}

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.gap-x-min {
  gap: var(--x-min-spacing);
}

.gap-min {
  gap: var(--min-spacing);
}

.gap-small {
  gap: var(--small-spacing);
}

.gap-medium {
  gap: var(--medium-spacing);
}

.gap-large {
  gap: var(--large-spacing);
}

.row-gap-x-min {
  row-gap: var(--x-min-spacing);
}

.row-gap-min {
  row-gap: var(--min-spacing);
}

.row-gap-small {
  row-gap: var(--small-spacing);
}

.row-gap-medium {
  row-gap: var(--medium-spacing);
}

.row-gap-large {
  row-gap: var(--large-spacing);
}

.column-gap-x-min {
  column-gap: var(--x-min-spacing);
}

.column-gap-min {
  column-gap: var(--min-spacing);
}

.column-gap-small {
  column-gap: var(--small-spacing);
}

.column-gap-medium {
  column-gap: var(--medium-spacing);
}

.column-gap-large {
  column-gap: var(--large-spacing);
}

.w100 {
  width: 100%;
}

.w50 {
  width: 50%;
}

.w33 {
  width: 33%;
}

.w25 {
  width: 25%;
}

.page-height {
  min-height: calc(100dvh - var(--header-height));
  padding-bottom: var(--header-height);
}

.p-x-min {
  padding: var(--x-min-spacing);
}

.p-min {
  padding: var(--min-spacing);
}

.p-small {
  padding: var(--small-spacing);
}

.p-medium {
  padding: var(--medium-spacing);
}

.p-large {
  padding: var(--large-spacing);
}

.p-top-x-min {
  padding-top: var(--x-min-spacing);
}

.p-top-min {
  padding-top: var(--min-spacing);
}

.p-top-small {
  padding-top: var(--small-spacing);
}

.p-top-medium {
  padding-top: var(--medium-spacing);
}

.p-top-large {
  padding-top: var(--large-spacing);
}

.p-bottom-x-min {
  padding-bottom: var(--x-min-spacing);
}

.p-bottom-min {
  padding-bottom: var(--min-spacing);
}

.p-bottom-small {
  padding-bottom: var(--small-spacing);
}

.p-bottom-medium {
  padding-bottom: var(--medium-spacing);
}

.p-bottom-large {
  padding-bottom: var(--large-spacing);
}

.p-left-x-min {
  padding-left: var(--x-min-spacing);
}

.p-left-min {
  padding-left: var(--min-spacing);
}

.p-left-small {
  padding-left: var(--small-spacing);
}

.p-left-medium {
  padding-left: var(--medium-spacing);
}

.p-left-large {
  padding-left: var(--large-spacing);
}

.p-right-min {
  padding-right: var(--min-spacing);
}

.p-right-small {
  padding-right: var(--small-spacing);
}

.p-right-medium {
  padding-right: var(--medium-spacing);
}

.p-right-large {
  padding-right: var(--large-spacing);
}

.m-x-min {
  margin: var(--x-min-spacing);
}

.m-min {
  margin: var(--min-spacing);
}

.m-small {
  margin: var(--small-spacing);
}

.m-medium {
  margin: var(--medium-spacing);
}

.m-large {
  margin: var(--large-spacing);
}

.m-top-x-min {
  margin-top: var(--x-min-spacing);
}

.m-top-min {
  margin-top: var(--min-spacing);
}

.m-top-small {
  margin-top: var(--small-spacing);
}

.m-top-medium {
  margin-top: var(--medium-spacing);
}

.m-top-large {
  margin-top: var(--large-spacing);
}

.m-bottom-x-min {
  margin-bottom: var(--x-min-spacing);
}

.m-bottom-min {
  margin-bottom: var(--min-spacing);
}

.m-bottom-small {
  margin-bottom: var(--small-spacing);
}

.m-bottom-medium {
  margin-bottom: var(--medium-spacing);
}

.m-bottom-large {
  margin-bottom: var(--large-spacing);
}

.m-left-x-min {
  margin-left: var(--x-min-spacing);
}

.m-left-min {
  margin-left: var(--min-spacing);
}

.m-left-small {
  margin-left: var(--small-spacing);
}

.m-left-medium {
  margin-left: var(--medium-spacing);
}

.m-left-large {
  margin-left: var(--large-spacing);
}

.m-right-x-min {
  margin-right: var(--x-min-spacing);
}

.m-right-min {
  margin-right: var(--min-spacing);
}

.m-right-small {
  margin-right: var(--small-spacing);
}

.m-right-medium {
  margin-right: var(--medium-spacing);
}

.m-right-large {
  margin-right: var(--large-spacing);
}

.overflow-hidden {
  overflow: hidden;
}

/* Page */
.page {
  max-width: var(--max-page-width);
}

.content {
  width: 100%;
  max-width: var(--max-content-width);
}

.card,
.container {
  background-color: var(--gray-lighter);
  border-radius: var(--border-radius);
  transition: background-color 0.2s;
  min-width: var(--card-width);
}

.card {
  display: inline-flex;
  padding: var(--min-spacing);
  text-decoration: none;
}

.card:hover {
  background-color: var(--gray-lightest);
}

/* Lists */
.list {
  width: var(--max-page-width);
  max-width: 100%;
}

.listitem {
  position: relative;
  min-height: 32px;
  border-radius: var(--border-radius);
  margin: var(--min-spacing) 0;
  padding: var(--min-spacing);
  background-color: var(--gray-light);
}


/* Popups */
.popup {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup form {
  position: relative;
  width: 80%;
  max-height: 90dvh;
  background-color: var(--gray-light);
  padding: var(--small-spacing);
  border-radius: var(--border-radius);
  overflow: auto;
}

.popup form>div {
  display: flex;
  align-items: center;
  gap: var(--min-spacing);
  margin: var(--small-spacing) 0;
}

.popup form>div>label {
  width: var(--input-label-width);
}

.popup form input {
  background-color: #fff;
}

.popup form input[type="submit"] {
  background-color: var(--primary-color);
  border: none;
  border-radius: var(--border-radius);
  padding: var(--min-spacing);
  cursor: pointer;

  position: absolute;
  top: 20px;
  right: 20px;
}

.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden !important;
}

/* Kaminari pagination */
.pagination {
  position: fixed;
  z-index: 1000000;
  bottom: var(--min-spacing);
  left: 50%;
  transform: translateX(-50%);


  display: flex;
  gap: 0;
  margin: var(--min-spacing) 0;
}

.pagination>span {
  width: 30px;
  height: 30px;

  display: flex;
  justify-content: center;
  align-items: center;

  border-top: solid var(--gray) var(--border-width);
  border-bottom: solid var(--gray) var(--border-width);
  border-left: solid var(--gray) var(--border-width);
  border-radius: 0;

  background-color: var(--white);
}

.pagination>span:first-child {
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
}

.pagination>span:last-child {
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  border-right: solid var(--gray) var(--border-width);
}

.pagination>span.current {
  background-color: var(--primary-color);
}

.pagination>span a {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
}

/* Panel */
.panel {
  display: flex;
  flex-direction: column;
  gap: var(--min-spacing);

  padding: var(--min-spacing);

  border-radius: var(--border-radius);
  border: none;
  border-width: 0;

  background-color: var(--gray-light);
}

.panel .attribute {
  container-type: inline-size;
  container-name: attribute;
  width: 100%;
  margin-top: var(--min-spacing);
}

.panel .attribute+.attribute {
  margin-top: 0;
}

.panel .attribute-label {
  display: inline-block;
  width: var(--input-label-width);
  font-weight: bold;
}

@container attribute (width < 400px) {
  .panel .attribute-label {
    display: block;
    width: 100%;

  }
}

/* FORMS */
.form {
  display: grid;
  gap: var(--min-spacing);

  padding: var(--small-spacing);

  border-radius: var(--border-radius);

  background-color: var(--gray-lighter);
  color: var(--black);
}

.form.two-columns {
  grid-template-columns: 1fr 1fr;
}

.form label {
  margin: var(--min-spacing) 0 var(--x-min-spacing) 0;
}

.form input,
.form select,
.form textarea {
  background-color: var(--white);
  padding: var(--min-spacing);
}

.form input[type=submit] {
  background-color: var(--black);
}

.form textarea:focus-within {
  outline: solid var(--secondary-color) var(--border-width);
}

.field {
  display: block;
  margin-top: var(--min-spacing);
  margin-bottom: var(--x-min-spacing);
}

.field label {
  display: block;
}

.field input[type=radio]+label,
.field input[type=checkbox]+label {
  display: inline-block;
}

.button_to {
  display: inherit;
  height: fit-content;
}

.collection_check_boxes {
  background-color: var(--gray-light);
  border-radius: var(--border-radius);

  padding: var(--min-spacing);

  max-height: var(--input-label-width);
  overflow-y: scroll;
}

.collection_check_boxes input {
  display: none;
}

.collection_check_boxes input:checked+label {
  background-color: var(--primary-color);
}

.collection_check_boxes label {
  display: flex;
  align-items: center;

  width: fit-content;

  margin: 2px 0;
  padding: 2px 4px;
  border-radius: var(--border-radius);
}

.file-upload-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--gray);
  border-radius: var(--border-radius);
  padding: var(--min-spacing);
  cursor: pointer;
  transition: border-color 0.3s;
  min-height: 140px;
}

.file-upload-area:hover {
  border-color: var(--gray-lightest);
}

.file-upload-area.drag-over {
  border-color: var(--accent-color);
  background-color: var(--gray-lightest);
}

.file-name {
  font-weight: bold;
}

.belongs-to-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--min-spacing);
}

.belongs-to .belongs-to-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--min-spacing);
  border-radius: var(--border-radius);
  transition: background-color 0.2s;
  cursor: pointer;
  background-color: var(--gray-light);
}

.belongs-to .belongs-to-button:hover {
  background-color: var(--secondary-color-light);
}

.belongs-to .belongs-to-button.nullify:hover {
  background-color: var(--danger-color-light);
}

.belongs-to input[type=radio] {
  display: none;
}

.belongs-to input[type=radio]:checked+.belongs-to-button {
  background-color: var(--secondary-color);
}

.belongs-to input[type=radio]:checked+.belongs-to-button.nullify {
  background-color: var(--danger-color);
}

/* BUTTONS */

.add-model-button {
  background-color: var(--white);
  border-radius: var(--border-radius);
  transition: background-color 0.2s;
}

.add-model-button:hover {
  background-color: var(--gray-lightest);
}

.add-model-button a,
.add-model-button form,
.add-model-button form button[type=submit] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}


/* NOTIFICATIONS */
.notification-wrapper {
  position: fixed;
  z-index: 1000000;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--min-spacing);

  animation: slide-down 5s ease-in-out forwards;
}

.notice,
.alert {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--min-spacing);
  padding: var(--min-spacing);
  margin-top: var(--min-spacing);
  border-radius: var(--border-radius);
}

.notice {
  background-color: var(--success-color-dark);
}

.danger,
.error,
.alert {
  background-color: var(--danger-color-dark) !important;
  color: var(--background-color) !important;
}

@keyframes slide-down {
  0% {
    transform: translateY(100%);
  }

  10% {
    transform: translateY(0);
  }

  90% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100%);
  }
}

/* CHECKBOX */
.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: auto;
  height: 42px;
  gap: var(--min-spacing);
}

.checkbox-container span.label {
  width: var(--input-label-width);
}

.checkbox-container input[type=checkbox] {
  display: none;
}

.checkbox {
  display: block;
  height: 30px;
  width: 30px;
  border-radius: 15px;
  background-color: var(--primary-color-light);
  margin-left: 4px;
  position: relative;
}

.checkbox-container:hover input~.checkbox {
  background-color: interaction-color;
}

.checkbox-container input:active~.checkbox {
  background-color: var(--primary-color-light);
}

.checkbox-container input:checked~.checkbox {
  background-color: var(--primary-color);
}

.checkbox:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input:checked~.checkbox:after {
  display: block;
}

.checkbox-container .checkbox:after {
  left: 11px;
  bottom: 9px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-container.loading .checkbox:after {
  animation: spin 2s linear infinite;
}


/* OTHER */
.strong {
  font-weight: bold;
}

.underline {
  text-decoration: underline;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.max-height-50vh {
  max-height: 50vh;
}

.passive {
  opacity: 0.5;
}

.pointer {
  cursor: s;
}

.text-decoration-none {
  text-decoration: none;
}

.tag {
  justify-self: flex-end;
  display: inline-block;
  width: fit-content;
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 20px;
  background-color: var(--secondary-color);
  margin-right: 4px;
}

.tag.primary {
  background-color: var(--primary-color);
}

.tag.secondary {
  background-color: var(--secondary-color);
}

.tag.tertiary {
  background-color: var(--tertiary-color);
}

.tag.success {
  background-color: var(--success-color);
}

.tag.danger {
  background-color: var(--danger-color);
}

.tag.warning {
  background-color: var(--warning-color);
}

.tag.info {
  background-color: var(--info-color);
}
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;

  height: var(--header-height);

  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: transparent;

  transition: background-color 0.2s;
}

header.primary {
  background-color: var(--primary-color-light);
}

header.secondary {
  background-color: var(--secondary-color-light);
}

header.tertiary {
  background-color: var(--tertiary-color-light);
}

header.quaternary {
  background-color: var(--quaternary-color-light);
}

#header-left,
#header-right {
  display: flex;
  align-items: center;
  gap: var(--small-spacing);
}

#header-left a {
  display: inline-block;
  padding: var(--x-min-spacing);
  margin-right: var(--small-spacing);
}

#header-left a img {
  height: calc(var(--header-height) - 2 * var(--x-min-spacing));
  transition: transform 0.2s;
}

#header-left a img:hover {
  transform: scale(1.1);
}

#header-left .colors {
  display: flex;
  align-items: center;
  gap: var(--x-min-spacing);
}

#header-left .colors .color {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transition: transform 0.2s;
  cursor: pointer;
}

#header-left .colors .color:hover {
  transform: scale(1.1);
}

#header-left .colors .color.selected {
  border: solid var(--white) 2px;
}

#header-left .colors .color.primary {
  background-color: var(--primary-color-light);
}

#header-left .colors .color.secondary {
  background-color: var(--secondary-color-light);
}

#header-left .colors .color.tertiary {
  background-color: var(--tertiary-color-light);
}

#header-left .colors .color.quaternary {
  background-color: var(--quaternary-color-light);
}

#header-right .avatar-placeholder {
  width: var(--icon-size-medium);
  height: var(--icon-size-medium);
  border-radius: 50%;
  background-color: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

#header-right .avatar-placeholder span {
  font-weight: bold;
  padding-top: var(--x-min-spacing);
}

#header-right details nav {
  position: fixed;
  top: calc(var(--header-height) + var(--min-spacing));
  right: 0;

  min-width: 200px;

  background-color: var(--white);
  border-radius: var(--border-radius);

  padding: var(--small-spacing);
}

#header-right details nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--min-spacing);
  list-style: none;
  padding: 0;
}

#header-right details nav ul li {
  display: flex;
  align-items: center;
  gap: var(--x-min-spacing);
}

#header-right details nav ul li button,
#header-right details nav ul li a {
  text-decoration: none;
  font-size: medium;
  padding: 0;
}

#header-right #user-auth a {
  padding: var(--x-min-spacing);
  border-radius: var(--border-radius);
  background-color: var(--black);
  color: var(--white);
  text-decoration: none;
  padding: var(--min-spacing);
}
/* Hericons buttons */
.heroicon {
  --heroicon-size: 32px;
  position: relative;
  display: inline-flex;

  justify-content: center;
  align-items: center;

  width: var(--heroicon-size);
  height: var(--heroicon-size);

  text-decoration: none;

  overflow: hidden;
  border: none;

  flex-shrink: 0;
  flex-grow: 0;
}

.heroicon.tiny {
  --heroicon-size: var(--icon-size-tiny);
}

.heroicon.small {
  --heroicon-size: var(--icon-size-small);
}

.heroicon.medium {
  --heroicon-size: var(--icon-size-medium);
}

.heroicon.large {
  --heroicon-size: var(--icon-size-large);
}

.heroicon.x-large {
  --heroicon-size: var(--icon-size-x-large);
}

.heroicon.text {
  width: var(--p-lh);
  height: var(--p-lh);
  padding: 0;
  gap: 0;
  vertical-align: middle;
}

.heroicon::after {
  display: flex;
  justify-content: center;
  align-items: center;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-size: calc(var(--heroicon-size) * 0.75);
  background-repeat: no-repeat;
}

.heroicon.text::after {
  background-size: var(--p-fs);
}

.heroicon.absolute+.heroicon.absolute {
  right: calc(var(--heroicon-size));
}

.heroicon.absolute+.heroicon.absolute+.heroicon.absolute {
  right: calc(var(--heroicon-size) * 2);
}

.heroicon.absolute+.heroicon.absolute+.heroicon.absolute+.heroicon.absolute {
  right: calc(var(--heroicon-size) * 3);

}

.heroicon.button {
  background-color: var(--gray);
  border-radius: var(--border-radius);
  border: none;
}

.heroicon.button:hover {
  background-color: var(--gray-light);
}

.heroicon.button.small {
  border-radius: var(--border-radius-small);
}

.contains-heroicon {
  min-height: var(--heroicon-size);
}

.heroicon form {
  width: var(--heroicon-size);
  height: var(--heroicon-size);
  flex-shrink: 0;
  flex-grow: 0;
  z-index: 1;
}

.heroicon input[type="submit"],
.heroicon button[type="submit"] {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  z-index: 1000;
  text-indent: -9999px;
}

/** Icons */

.heroicon.show::after {
  background-image: url(/assets/heroicons/eye-d5d2589c4286f3e920c40ab49bed685f53664894a121e81038cc9c8dbd913e31.svg);
}

.heroicon.new::after,
.heroicon.plus::after,
.heroicon.create::after {
  background-image: url(/assets/heroicons/plus-0e9d87c3b1c72a84ffba7b51e79ead41a820a2735542e3df34e512f05826e070.svg);
}

.heroicon.pencil-square::after,
.heroicon.edit::after {
  background-image: url(/assets/heroicons/pencil-square-08727e28e4c340763273633e681ede037ec042a0e15e2167f50dd21aead22cd7.svg);
}

.heroicon.trash::after,
.heroicon.delete::after,
.heroicon.destroy::after {
  background-image: url(/assets/heroicons/trash-e00cece7476e20ac250d9d42475254d0200a1e0a54c98e255ab17d4a295b20f3.svg);
}

.heroicon.back::after {
  background-image: url(/assets/heroicons/arrow-uturn-left-129177c5b4bbf7c51a1c304bda8c0d067058cd5984f41fa4ce12dd4912e4e9ce.svg);
}

.heroicon.phone::after {
  background-image: url(/assets/heroicons/phone-203da971ece8fb07fb1122576120413578961aa9a62185d0ae7d2aab10598d9c.svg);
}

.heroicon.x-mark::after,
.heroicon.cancel::after,
.heroicon.close::after,
.heroicon.exit::after,
.heroicon.cross::after {
  background-image: url(/assets/heroicons/x-mark-55ab12e317bcdc52715ead17973b56d8f381afda4c2ad4af1cd0de36d9d2e988.svg);
}

.heroicon.mail::after {
  background-image: url(/assets/heroicons/envelope-0a0cdb50694716b91c25cc239b4caa3ec5d310c5f7c9512873477681a9630c36.svg);
}

.heroicon.search::after {
  background-image: url(/assets/heroicons/magnifying-glass-d63a04ef829b943cce7b515acebc046bc4e590734ceb4ef85348e727898a0c26.svg);
}

.heroicon.list::after {
  background-image: url(/assets/heroicons/list-bullet-4007a84fa98bab2b0f1c9936758068a0ce4829a4d286c3c776f9caed03ca7ffd.svg);
}

.heroicon.file::after,
.heroicon.document::after {
  background-image: url(/assets/heroicons/document-c62f6f0b951ef3b921794657dfbc418336b30778615c6dc49986fe5f563b6042.svg);
}

.heroicon.document-text::after {
  background-image: url(/assets/heroicons/document-text-fdd57b29f2740b22002ef7eb3d9324156607e0cbee5a75d1739444d2636865cb.svg);
}

.heroicon.logout::after {
  background-image: url(/assets/heroicons/logout-d83787c4b971ee60601f6ea3ee48415f3d4226cc3c563ee26e6313cb66920a3b.svg);
}

.heroicon.user::after {
  background-image: url(/assets/heroicons/user-9414cedf696a52b2e1dd58e5b8179b557f4699f27987ff071f31f0ea93295589.svg);
}

.heroicon.settings::after {
  background-image: url(/assets/heroicons/cog-6-tooth-d1c64e3f4473428a6b8f3526400faba22ec8200ee525d13c00cac6a89ce29dde.svg);
}

.heroicon.home::after {
  background-image: url(/assets/heroicons/home-e874a14602d6fe4498325a0c46753b9941c9cc77ba1cacd939ab46a466011569.svg);
}

.heroicon.home-modern::after {
  background-image: url(/assets/heroicons/home-modern-fb0aacf8ae0ffd140c549dadb326aeb75ba235e4c16e5ca10aae3bea69729083.svg);
}

.heroicon.library::after {
  background-image: url(/assets/heroicons/library-aef529fe8cba9f02088a5e3e53000f2a1fe63b8a2ff03c026d1ade69dda7a7e7.svg);
}

.heroicon.office::after {
  background-image: url(/assets/heroicons/office-c3140a401d16fd41cc5efb7e061e9950961f29dbbcba904943515c26ab5a1dea.svg);
}

.heroicon.dollar::after {
  background-image: url(/assets/heroicons/currency-dollar-ad960e33b0428a02fca80a3ce1c129194a1284ed549be6187efa474592cafde5.svg);
}

.heroicon.calendar::after {
  background-image: url(/assets/heroicons/calendar-0f7c199c246aad656a4f5ecfb1047379cf28a07ab2b237ee5ce3d1c4863d7d03.svg);
}

.heroicon.user::after {
  background-image: url(/assets/heroicons/user-9414cedf696a52b2e1dd58e5b8179b557f4699f27987ff071f31f0ea93295589.svg);
}

.heroicon.user-plus::after {
  background-image: url(/assets/heroicons/user-plus-b49b7cbaa90ea0d34d06c9aebdf2e6cba39706e29dc301e83584d760a76973ea.svg);
}

.heroicon.user-minus::after {
  background-image: url(/assets/heroicons/user-minus-b9b2ecce8c03b83098cf4baa694a73a3099356fe6c0357ea38dc21cffc12f454.svg);
}

.heroicon.user-circle::after {
  background-image: url(/assets/heroicons/user-circle-9157fb2d6a536c997fefefb3eca3a3d0c26b5495e04a3bffa5f5b1b9d6972299.svg);
}

.heroicon.user-group::after {
  background-image: url(/assets/heroicons/user-group-58de5c02c600af353a5f670d45f6d3fe9b4d327327d6c634832ce92a2941a2bb.svg);
}

.heroicon.face-smile::after {
  background-image: url(/assets/heroicons/face-smile-2e9454cc84cd4086eaf0bff17bd54580aa700fb5c4dcdf1ec2ef9ca0bf762674.svg);
}

.heroicon.face-frown::after {
  background-image: url(/assets/heroicons/face-frown-10a054edfa98cf8d119086fe9cb29294416d235dd7015749731430690129c3cc.svg);
}

.heroicon.globe::after {
  background-image: url(/assets/heroicons/globe-398e74614fd7587ee1b274d5de4962b23a8dcf02490f1e236540a267da8f54e7.svg);
}

.heroicon.heart::after {
  background-image: url(/assets/heroicons/heart-f75631a41621e9dd4c8c84b31fb2b90b111f9e6c64ec08a7b1c9276a67f66cd5.svg);
}

.heroicon.bookmark::after {
  background-image: url(/assets/heroicons/bookmark-625323f0fda92e9619eab5e6d7249c3f6ff9d3c14d108c28e3b1d1cdc9ca2d05.svg);
}

.heroicon.bookmarked::after {
  background-image: url(/assets/heroicons/bookmarked-7dc211e194fa06e180a54cef3ceb56308dc850219f7ff8d703bf6dddd64aeb44.svg);
}

.heroicon.bookmark-slash::after {
  background-image: url(/assets/heroicons/bookmark-slash-97e08b8dcd29454bfb75030af7359520882b0361a522536588498f87c8779abe.svg);
}

.heroicon.cloud-up::after,
.heroicon.upload::after {
  background-image: url(/assets/heroicons/cloud-up-1b0454f8742ba441fd487e7eb216ad17105e1669b1b1ef89c96c089fafad0626.svg);
}

.heroicon.disk::after,
.heroicon.save::after {
  background-image: url(/assets/heroicons/save-53f4057dcdc8e3b53db0c6b5bcd7363246ac9838e9c58a0f7ee12924ca95c2e4.svg);
}

.heroicon.qr-code::after {
  background-image: url(/assets/heroicons/qr-code-a78b9bc9c442f81c760259a1b35a7af48c0f75a917b8c5045abf8dd67c0158c6.svg);
}

.heroicon.arrow-path::after,
.heroicon.loading::after {
  background-image: url(/assets/heroicons/arrow-path-bb1322a892767246d51a866514ec1c0dbd53c22eaa85bd6292bdabb9a31b3e79.svg);
}

.heroicon.lock::after {
  background-image: url(/assets/heroicons/lock-80a0935de0d61ca2a3fe8b8a7ff873ea674b0c754748ad9e5d5d7c194b17275f.svg);
}

.heroicon.check::after {
  background-image: url(/assets/heroicons/check-079e629e3fde8786a7345f3d7104e0dbc8fc06270c04900a56dab0530e23a1f5.svg);
}

.heroicon.check-circle::after {
  background-image: url(/assets/heroicons/check-circle-e5773b11455885e4a95567d50e31c72ad41a1817eabbf3be0cf0e03a3f8e67fb.svg);
}

.heroicon.check-badge::after {
  background-image: url(/assets/heroicons/check-badge-7ca8417ff826f1eb16d729603175553e3683c2ac3ff9eec2cffbe51d14ba6b3d.svg);
}

.heroicon.check-bookmark::after {
  background-image: url(/assets/heroicons/check-bookmark-0ebcc4513976347cb561039a511114d8e80251030ac308aa5c450528957dcaa1.svg);
}

.heroicon.users::after {
  background-image: url(/assets/heroicons/users-757b877629b55ab8b81b95177fdc0a29ef53ac464e1cf9c2e3713372de0711b7.svg);
}

.heroicon.chart-pie::after {
  background-image: url(/assets/heroicons/chart-pie-9dcb890a5556b5e423d6faba9c91455e7f2eb8b7b27149ab1c2180e55399ac2c.svg);
}

.heroicon.chart-bar::after {
  background-image: url(/assets/heroicons/chart-bar-e5c0412c768bed40266c2617994afe0912a1b4f0c705f35921617d4b6bde4469.svg);
}

.heroicon.download::after,
.heroicon.arrow-down-circle::after {
  background-image: url(/assets/heroicons/arrow-down-circle-71f26ce2f019906ca1ee3b2edea95278f822ce59e88f9e660270322e3905d435.svg);
}

.heroicon.bookmark-square::after {
  background-image: url(/assets/heroicons/bookmark-square-9b7da0144d7d27fcb0613512821397c7eb55089a613df8f62114f44758a2b8fc.svg);
}

.heroicon.chrome::after {
  background-image: url(/assets/heroicons/chrome-2a2f6d42b58921ab17f2442084e3dddfafd9436b01fe938ce953042c71ec5e05.svg);
}

.heroicon.arrow-down::after {
  background-image: url(/assets/heroicons/arrow-down-8648244e299f5ecb28f63fc68f22e80b7561cc53f3501f3b0b63cb5d7b2a4623.svg);
}

.heroicon.arrow-left::after {
  background-image: url(/assets/heroicons/arrow-left-ba473f1128fc056a6d254dd3b770dc515b86ba74cfc757cec34957bc098155c4.svg);
}

.heroicon.arrow-right::after {
  background-image: url(/assets/heroicons/arrow-right-46d9baef137f4c40fb72202301ab98144fbd930254aa225c61c43dbda68c08c2.svg);
}

.heroicon.arrow-up::after {
  background-image: url(/assets/heroicons/arrow-up-ba473f1128fc056a6d254dd3b770dc515b86ba74cfc757cec34957bc098155c4.svg);
}

.heroicon.server::after {
  background-image: url(/assets/heroicons/server-ae5374555d670e933876aff8b98a106a00afd1b95a1bcf1690770d30bea1cf68.svg);
}

.heroicon.install::after {
  background-image: url(/assets/heroicons/install-266207ca099347cdb3164a22f7ed003bc30472c06fd4248279206e2b2fd69be3.svg);
}

.heroicon.cloud-arrow-down::after {
  background-image: url(/assets/heroicons/cloud-arrow-down-a37593c1d22ba773a15d7b5aa3de1eecdf3fa6d38ab5aa774650e5cfb3274ff7.svg);
}

.heroicon.document-arrow-down::after {
  background-image: url(/assets/heroicons/document-arrow-down-ea092689e075f0b6903767bea58e22268c0b0aa05a9d0d9aa8f178463043eca4.svg);
}

.heroicon.folder-arrow-down::after {
  background-image: url(/assets/heroicons/folder-arrow-down-d56a6f6fa3699615e381fe753a1a93aaebc7b31c7c9a9618fbc14bb00dfec6e1.svg);
}

.heroicon.folder::after {
  background-image: url(/assets/heroicons/folder-bf98a781b137b11dae7068ea2e3983c543d7df31ef3818281cbd668df87f9a12.svg);
}

.heroicon.archive-box-arrow-down::after {
  background-image: url(/assets/heroicons/archive-box-arrow-down-1c467a7fae9a9bca32cda8e89d01b890d6cd9240451752566263b640fea80ed3.svg);
}

.heroicon.archive-box::after {
  background-image: url(/assets/heroicons/archive-box-2d08eb99b7a746317815a7fa4b2129a8ef8b09947a58ac8d106e74da0796e96f.svg);
}

.heroicon.archive-box-x-mark::after {
  background-image: url(/assets/heroicons/archive-box-x-mark-d98f3eba446126dd09ec17d39cade4fc50930caf8734bd50eaba690cf921fc60.svg);
}

.heroicon.adjustments-horizontal::after {
  background-image: url(/assets/heroicons/adjustments-horizontal-835385a9d21d083b8168a348e03a6b5e7ed79e5ab417f17fd5b66e4115562b5f.svg);
}

.heroicon.adjustments-vertical::after {
  background-image: url(/assets/heroicons/adjustments-vertical-9d7af220354b3e47157ea2f904bf27aef4149cd171d2c785a40c55a1820eefa0.svg);
}

.heroicon.filter::after,
.heroicon.funnel::after {
  background-image: url(/assets/heroicons/funnel-e29ad290d25b523990d831902558056f432d5e509900604939acf900b084b40b.svg);
}

.heroicon.more,
.heroicon.ellipsis-horizontal::after {
  background-image: url(/assets/heroicons/ellipsis-horizontal-addbf574dbc0e485644196948cb373dbdaf2358a1a4268656c667c3c0bbf0af4.svg);
}

.heroicon.document-duplicate::after {
  background-image: url(/assets/heroicons/document-duplicate-4b60189467ad476710e5f30968410d3467cc0dbe542866a3b151aaf25a21353f.svg);
}

.heroicon.clock::after {
  background-image: url(/assets/heroicons/clock-a96472cc9aaf8d0dcafa273cec866f9ec35774cdbef0e8917d2af10b68b2e25e.svg);
}

.heroicon.chevron-right::after {
  background-image: url(/assets/heroicons/chevron-right-d5da772e39a552f86bf127dc50c7cb493e72f3ee96110f796bfcb3eef6036d68.svg);
}

.heroicon.chevron-left::after {
  background-image: url(/assets/heroicons/chevron-left-a890bf334239241eed5caa0f1f905745396afbeea6a83a38d8ad28e16249a3b1.svg);
}

.heroicon.star::after {
  background-image: url(/assets/heroicons/star-3dc0cf0b83c1525ea5fd30af1b02cf61d0f1f565a82e641cc375619c453274ca.svg);
}

.heroicon.star-filled::after {
  background-image: url(/assets/heroicons/star-filled-bd05bb66a4805c71e60aa53c05cb626baae87a291b154258ab81b77b4fb86e90.svg);
}

.heroicon.puzzle-piece::after {
  background-image: url(/assets/heroicons/puzzle-piece-908ba6ba7ae303b6f8b2ee8191b0191b1a9b11951907b7738c0c833e20c38b61.svg);
}

.heroicon.shopping-cart::after {
  background-image: url(/assets/heroicons/shopping-cart-b8b5219e2b0328254e013f53267ff9ef1df993ac815ca9e976f9eeef7316b212.svg);
}

.heroicon.sparkles::after {
  background-image: url(/assets/heroicons/sparkles-9c9b2b41398d24c6d6b5bd9d428f9ad1599ace21fe513382f45b04ea5681d3d7.svg);
}

.heroicon.bulb::after {
  background-image: url(/assets/heroicons/bulb-c9fe987e73d61b62df5cf74835c571a28429132e20d9a09f6ba3809499497182.svg);
}

.heroicon.bars-arrow-up::after {
  background-image: url(/assets/heroicons/bars-arrow-up-565a0582289877d4bdf1962a00ca23f036acf47dd224fabd394cd6736d29c439.svg);
}

.heroicon.bars-arrow-down::after {
  background-image: url(/assets/heroicons/bars-arrow-down-20ef5ca7306a920eb29aa8c2b3f6621d245408cabb61f7a053984a52585e2f0a.svg);
}

.heroicon.arrow-up-tray::after {
  background-image: url(/assets/heroicons/arrow-up-tray-4f90de50cc33ac0a57914a4e040328da82b2d170f9445d903c9b37751c6f6da8.svg);
}

.heroicon.arrow-down-tray::after {
  background-image: url(/assets/heroicons/arrow-down-tray-d4dd9b9706c152b038cf356163015234dcf0694643796e82446a44de4090ca5e.svg);
}

.heroicon.exclamation-circle::after {
  background-image: url(/assets/heroicons/exclamation-circle-622d2d0d51e7632cd0a8941b353d7913cec413d62afe7d0a0f0fd377d3dbcf3a.svg);
}

.heroicon.exclamation-triangle::after {
  background-image: url(/assets/heroicons/exclamation-triangle-59e118f9b9e74f56c419c9b954700df36b21658c1992bdff7451730f17b462ca.svg);
}

.heroicon.chatgpt::after {
  background-image: url(/assets/heroicons/chatgpt-048330ab9a668375fb1c58651dd0b1965ad9b600289fa3e92ff8e8f962a19c13.svg);
}

.heroicon.insert-above::after {
  background-image: url(/assets/heroicons/insert-above-204b6f8eef2beee2bd4e3bd53982e2828179e04e16987bf96222f8ec8dcf5417.svg);
}

.heroicon.insert-below::after {
  background-image: url(/assets/heroicons/insert-below-267b01c0e78493b543249d77a2b589a31694452a933703403d5fc14eef4a9862.svg);
}

.heroicon.aim::after {
  background-image: url(/assets/heroicons/aim-cffd5fd998d129a2085b7da49b96b36aee3651c50e41b4f5cc909cf5d13c7bc9.svg);
}

.heroicon.squares-four::after,
.heroicon.grid::after,
.heroicon.squares-2x2::after {
  background-image: url(/assets/heroicons/squares-2x2-05a1fe10de83efed20f242f106c9273ce28a747cbd27a5b0ec82cc50930df26b.svg);
}

.heroicon.inbox-stack::after {
  background-image: url(/assets/heroicons/inbox-stack-7aaba91cb5208868703bc7e711e7cf1fe46bab78355048438f9a59361992ff26.svg);
}

.heroicon.clock-recent::after {
  background-image: url(/assets/heroicons/clock-recent-9cf901bc2f2cd76d460ff5183b186fe717c09af38caec7f8e08c9b8195cd9a2d.svg);
}

.heroicon.leave::after,
.heroicon.arrow-left-start-on-rectangle::after {
  background-image: url(/assets/heroicons/arrow-left-start-on-rectangle-70cfeb990aaa1c15aaa0ffe46cd5fa1632bacf83e5c14910dc69804c1b29101b.svg);
}

.heroicon.login::after,
.heroicon.arrow-left-end-on-rectangle::after {
  background-image: url(/assets/heroicons/arrow-left-end-on-rectangle-973849680cde257dad818342becf74994972ec7a238b1b67e3c94c7863598530.svg);
}

.heroicon.link::after {
  background-image: url(/assets/heroicons/link-7a79120d122a7520a8eacf637315c38087e35b7c1a225ef92e5cfee73c53309d.svg);
}

.heroicon.photo::after {
  background-image: url(/assets/heroicons/photo-0fec9b6bb0269a77ffdc154a48f0f21cdb4c13c342105e66123e763a722a09d0.svg);
}

.heroicon.video::after {
  background-image: url(/assets/heroicons/video-5ee4f22d2b72ccf3772a9bacffb0b1af2b27a7bd5f0b2ae04fda2111833bfc64.svg);
}

.heroicon.wand::after {
  background-image: url(/assets/heroicons/wand-93274681976381e641a16e4a12d7c2098f00c7a0e5f9916f6d7ef041982ecab6.svg);
}

.heroicon.audio,
.heroicon.speaker-wave::after {
  background-image: url(/assets/heroicons/speaker-wave-f577acd19f1890c91ee4026c0afeaadfb6b4b035c10da25d73a5bfccf2d09eba.svg);
}


/* External service icons */
.heroicon.github::after {
  background-image: url(/assets/heroicons/external/github-c1e9e0aa02b08b42d2e48bd6c1d92ec3a02c80cdcdf326e4e19d37c8d3fc77c6.svg);
}

.heroicon.wikipedia::after {
  background-image: url(/assets/heroicons/external/wikipedia-eb0de92b3ac34116f0cdc6bbf7645e340fee40808738f60ddc4c19d3fc6f6b1f.svg);
}

.heroicon.youtube::after {
  background-image: url(/assets/heroicons/external/youtube-cbe913f724e148a5fe5e29b79201a52c5d09ab50bbbc9b6285298ee12ec91ce0.svg);
}

.heroicon.vimeo::after {
  background-image: url(/assets/heroicons/external/vimeo-bd0f8ef7b185055a093ca4a67ab7e45d2a2f19c29b77938a0e3decbbd0cf011a.svg);
}

.heroicon.pdf::after {
  background-image: url(/assets/heroicons/external/pdf-b4584637b153f764637e9f86da8266ba13808526c7382e1dfecb0cd5951d08cd.svg);
}

.heroicon.word::after {
  background-image: url(/assets/heroicons/external/word-f558d1bb1353fd85b4cb0d36067c7399c5ac4eca766ec9ecea7752b1f00e18db.svg);
}

.heroicon.spotify::after {
  background-image: url(/assets/heroicons/external/spotify-2b9fb08b2255a4fe8ee440373f146205f5dc5cd6ca233fb88cafb0924ea7ea0a.svg);
}

.heroicon.google-docs::after {
  background-image: url(/assets/heroicons/external/google-docs-65e9e26574646163011e4f9a624149908b727a5f75c17c111f109717f7e12186.svg);
}

.heroicon.google-sheets::after {
  background-image: url(/assets/heroicons/external/google-sheets-7738822a7b1b3ebcdd362c9f423b59844c8dff72e1eb2e8f94fb5b3551127bb3.svg);
}

.heroicon.google-slides::after {
  background-image: url(/assets/heroicons/external/google-slides-a62902ea3c242aefb2acdf2108833102ccc6b612d43d32c5e1b8236ae8473c45.svg);
}

.heroicon.google-forms::after {
  background-image: url(/heroicons/external/google-forms.svg);
}

.heroicon.play::after {
  background-image: url(/assets/heroicons/play-6876e6fde054a3bc3207139b53f09c896521c9c46b7fac2692a968088bcbae80.svg);
}

.heroicon.pause::after {
  background-image: url(/assets/heroicons/pause-8188469f1b4c83bb0660e237b27e1ea7a3656cc343907dedf740aa165a082304.svg);
}

.heroicon.presentation::after {
  background-image: url(/assets/heroicons/presentation-55c3ea6adec9a908fc4bc4c9298b16ad6c83944fbd94c4a5b6a2da0f50ec27a1.svg);
}

.heroicon.lesson::after {
  background-image: url(/assets/heroicons/lesson-4a8798a73a9bc345da602b2b33d66e6d09a5b5ba9742aa35cbd8518da1994f73.svg);
}
/* BREADCRUMBS */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--min-spacing);
}
.breadcrumbs details {
  position: relative;
}
.breadcrumbs details ul {
  position: absolute;
  z-index: 2;

  min-width: 200px;

  list-style: none;

  display: flex;
  flex-direction: column;
  gap: var(--min-spacing);

  background-color: var(--white);
  border-radius: var(--border-radius);

  box-shadow: var(--box-shadow);

  padding: var(--small-spacing);
}
.breadcrumbs details ul li a {
  text-decoration: none;
}
.breadcrumbs details ul li a:hover {
  text-decoration: underline;
}
/* DURATION COMPARISON */
.duration-match {
  color: var(--success-color);
  font-weight: 500;
}

.duration-close {
  color: var(--warning-color);
  font-weight: 500;
}

.duration-mismatch {
  color: var(--danger-color);
  font-weight: 500;
}
:root {
  --lesson-block-template-column: 1fr 3fr 8fr 3fr;
}

/* FORM */

.lesson_block-form-inputs {
  display: block;
}

.lesson_block-form-input {
  display: grid;
  grid-template-columns: auto 3fr;
  gap: var(--min-spacing);
  margin-bottom: var(--min-spacing);
}

.lesson_block-form-input input,
.lesson_block-form-input textarea,
.lesson_block-form-input select {
  width: 100%;
  padding: var(--min-spacing);
  border: 1px solid var(--gray-light);
  border-radius: var(--border-radius);
}

.lesson_block-form-input textarea {
  resize: vertical;
  min-height: 150px;
}

/* ROW FORM */

.row-form {
  position: relative;
  border-bottom: 1px solid var(--gray-light);
}

.row-form-form {
  position: relative;
}

.row-form:last-child {
  border-bottom: none;
}

.row-form-row {
  display: grid;
  gap: var(--min-spacing);
  grid-template-columns: var(--lesson-block-template-column);
  grid-template-areas: "duration aim details material" "section aim details material";
}

.row-form-row trix-editor,
.row-form-row input,
.row-form-row textarea,
.row-form-row select {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: none;
  border-radius: 0;
  resize: none;
}

.row-form-row trix-editor:last-child,
.row-form-row input:last-child,
.row-form-row textarea:last-child,
.row-form-row select:last-child {
  border-bottom: none;
}

.row-form-row trix-editor:focus,
.row-form-row input:focus,
.row-form-row textarea:focus,
.row-form-row select:focus {
  outline: none;
}

/* BLOCKS */
.lesson_block {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 24px;
  grid-template-areas: "frame interactions" "suggestions suggestions";
  gap: var(--x-min-spacing);

  margin: var(--min-spacing) 0;

  border-bottom: 1px solid var(--gray-light);
}

.lesson_block turbo-frame {
  grid-area: frame;
}

.lesson_block turbo-frame a {
  display: grid;
  grid-template-columns: var(--lesson-block-template-column);
  grid-template-areas: "duration aim activity material";
  gap: var(--x-min-spacing);

  padding: var(--min-spacing);

  text-decoration: none;
}

.lesson_block:last-child {
  border-bottom: none;
}

.lesson_block-header {
  position: sticky;
  top: calc(var(--header-height) + var(--min-spacing));
  z-index: 1;
  border: none;
  font-weight: bold;
  grid-template-columns: var(--lesson-block-template-column) auto;
  grid-template-areas: "duration aim details material interactions";
}

.lesson_block-duration {
  grid-area: duration;
}

.lesson_block-duration .cumulative-time-display {
  font-size: small;
  text-align: right;
}

.lesson_block-aim {
  grid-area: aim;
}

.lesson_block-details-container {
  grid-area: details;
}

.lesson_block-material {
  grid-area: material;
}

.lesson_block-section {
  grid-area: section;
}

.lesson_block-interactions {
  grid-area: interactions;
}

.lesson_block-suggestions {
  grid-area: suggestions;
}

.asset-buttons {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  gap: var(--x-min-spacing);
  flex-direction: row-reverse;
}

.asset-buttons .heroicon {
  border-radius: var(--border-radius-small);
  background-color: var(--gray-light);
}

.asset-buttons .heroicon:hover {
  background-color: var(--gray);
}


.lesson_block-section-letter {
  position: absolute;
  top: var(--min-spacing);
  left: -50px;
  font-weight: bold;
  font-size: 2em;
}

/* SUGGESTIONS */
.ai_suggestions {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  overflow-x: scroll;
  gap: var(--min-spacing);
}

.ai_suggestion_controls,
.ai_suggestion {
  position: relative;

  flex: 0 0 auto;
  width: 200px;

  padding: var(--min-spacing) var(--min-spacing) 40px;

  border-radius: var(--border-radius);
  background-color: var(--secondary-color-light);
}

.ai_suggestion_controls {
  background-color: var(--white);
}

.ai_suggestion h5 {
  margin-top: var(--min-spacing);
}

.ai_suggestion .suggestion-infos div {
  display: grid;
  grid-template-columns: 24px 1fr;
  font-size: small;
  align-items: center;
  gap: var(--x-min-spacing);
}

.ai_suggestion .apply-button {
  position: absolute;
  bottom: var(--min-spacing);
  right: var(--min-spacing);

  background-color: var(--black);
  color: var(--white);
  padding: var(--min-spacing);
  border-radius: 100px;
}

/* DETAILS PREVIEW */
.ai_details_preview {
  background: linear-gradient(135deg, var(--white) 0%, var(--secondary-color-light) 100%);
  border: 2px solid var(--secondary-color);
  border-radius: var(--border-radius);
  padding: var(--small-spacing);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.details-preview-header {
  padding-bottom: var(--min-spacing);
  border-bottom: 1px solid var(--secondary-color);
  margin-bottom: var(--min-spacing);
}

.details-preview-header h4 {
  display: flex;
  align-items: center;
  gap: var(--min-spacing);
  color: var(--secondary-color-dark);
  margin: 0;
}

.details-preview-header .icon-button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--x-min-spacing);
  border-radius: var(--border-radius-small);
  transition: background-color 0.2s;
}

.details-preview-header .icon-button:hover {
  background-color: var(--gray-light);
}

.details-preview-content {
  background-color: var(--white);
  border-radius: var(--border-radius);
  padding: var(--min-spacing);
  margin: var(--min-spacing) 0;
}

.preview-section {
  margin-bottom: var(--min-spacing);
}

.preview-section:last-child {
  margin-bottom: 0;
}

.preview-label {
  display: flex;
  align-items: center;
  gap: var(--x-min-spacing);
  color: var(--secondary-color-dark);
  font-weight: 600;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--x-min-spacing);
}

.preview-text {
  padding: var(--min-spacing);
  background-color: var(--gray-lightest);
  border-left: 3px solid var(--secondary-color);
  border-radius: var(--border-radius-small);
  line-height: 1.6;
}

.details-preview-actions {
  display: flex;
  gap: var(--min-spacing);
  padding-top: var(--min-spacing);
  border-top: 1px solid var(--gray-light);
}

.details-preview-actions .button {
  flex: 1;
  padding: var(--min-spacing);
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.details-preview-actions .button.primary {
  background-color: var(--secondary-color);
  color: var(--white);
}

.details-preview-actions .button.primary:hover {
  background-color: var(--secondary-color-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.details-preview-actions .button.secondary {
  background-color: var(--white);
  color: var(--gray-dark);
  border: 1px solid var(--gray);
}

.details-preview-actions .button.secondary:hover {
  background-color: var(--gray-light);
}

.hint {
  --radius: 10px;
  position: absolute;
  width: var(--radius);
  height: var(--radius);
  top: 0;
  right: 0;

  background-color: var(--secondary-color-light);
  border-radius: 100px;

  z-index: 1;

  cursor: pointer;
}
/* PLAY */
#play {
  --play-timer-width: 200px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overscroll-behavior-x: contain;
  height: calc(100vh - 2 * var(--header-height) - var(--medium-spacing));
  margin-top: var(--header-height);
  scrollbar-width: none;
}

#play-controls {
  transform: translateX(calc(var(--play-timer-width) + var(--medium-spacing)));
  transition: transform 0.3s;
  position: fixed;
  bottom: var(--medium-spacing);
  right: var(--medium-spacing);
  z-index: 1;
  display: flex;
  gap: var(--small-spacing);
  align-items: flex-end;
}

#play-controls.playing {
  transform: translateX(0);
}

#play-timer {
  background-color: var(--white);
  border-radius: var(--border-radius);
  padding: var(--small-spacing);
  box-shadow: var(--box-shadow);
}

#play-counters {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.play-counter {
  display: flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: „tnum“;
}

#play-block-counter {
  font-size: var(--h3-fs);
  font-weight: bold;
}

#play-progress::-moz-progress-bar {
  background: var(--primary-color);
}

#play-progress::-webkit-progress-value {
  background: var(--primary-color);
}

#play-progress {
  color: var(--primary-color);
}

#play-progress.complete::-moz-progress-bar {
  background: var(--warning-color);
}

#play-progress.complete::-webkit-progress-value {
  background: var(--warning-color);
}

#play-progress.complete {
  color: var(--warning-color);
}


.slide {
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* LESSONS INDEX */
.lessons-recents-section {
  margin-bottom: var(--large-spacing);
  padding-bottom: var(--large-spacing);
  border-bottom: 2px solid var(--gray-lighter);
}

.section-header {
  display: flex;
  align-items: center;
  gap: var(--small-spacing);
  margin-bottom: var(--medium-spacing);
}

.section-header .heroicon {
  width: 28px;
  height: 28px;
  color: var(--primary-color);
}

.section-header h2 {
  margin: 0;
}

.lessons-recents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--medium-spacing);
}

.lesson-recent-card {
  display: block;
  padding: var(--medium-spacing);
  background-color: var(--white);
  border: 1px solid var(--gray-lighter);
  border-radius: var(--border-radius);
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  box-shadow: var(--box-shadow-light);
}

.lesson-recent-card:hover {
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.lesson-recent-header {
  display: flex;
  align-items: center;
  gap: var(--small-spacing);
  margin-bottom: var(--small-spacing);
}

.lesson-recent-header .heroicon {
  width: 24px;
  height: 24px;
  color: var(--primary-color);
  flex-shrink: 0;
}

.lesson-recent-header h4 {
  margin: 0;
  font-size: 1rem;
  color: var(--text-color);
  font-weight: 600;
}

.lesson-recent-meta {
  display: flex;
  align-items: center;
  gap: var(--x-min-spacing);
  font-size: 0.85rem;
  color: var(--gray-dark);
  margin-top: var(--x-min-spacing);
}

.lesson-recent-meta .heroicon {
  width: 16px;
  height: 16px;
}

.empty-message {
  color: var(--gray-dark);
  font-style: italic;
}

.lessons-topic-group {
  margin-bottom: var(--large-spacing);
}

.topic-header {
  display: flex;
  align-items: center;
  gap: var(--small-spacing);
  margin-bottom: var(--medium-spacing);
  padding-bottom: var(--small-spacing);
  border-bottom: 2px solid var(--gray-lighter);
}

.lessons-module-group {
  margin-bottom: var(--medium-spacing);
}

.lessons-module-group.uncategorized {
  margin-left: 0;
}

.lessons-standalone {
  margin-bottom: var(--medium-spacing);
}

.module-header {
  display: flex;
  align-items: center;
  gap: var(--x-min-spacing);
  margin-bottom: var(--small-spacing);
  font-size: 1.1rem;
}

.lessons-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--small-spacing);
  margin-bottom: var(--small-spacing);
}

.lesson-card {
  background-color: var(--white);
  border: 1px solid var(--gray-lighter);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}

.lesson-card:hover {
  box-shadow: var(--box-shadow);
  transform: translateY(-2px);
}

.lesson-card-link {
  display: block;
  padding: var(--medium-spacing);
  text-decoration: none;
  color: var(--text-color);
}

.lesson-title {
  margin-bottom: var(--small-spacing);
  font-size: 1.1rem;
}

.lesson-info {
  display: flex;
  flex-direction: column;
  gap: var(--x-min-spacing);
}

.lesson-info-item {
  display: flex;
  align-items: center;
  gap: var(--x-min-spacing);
  font-size: 0.9rem;
  color: var(--gray-dark);
}

.lesson-info-item .heroicon {
  flex-shrink: 0;
}

.lesson-aim {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.duration-display {
  font-variant-numeric: tabular-nums;
}

.duration-match {
  color: var(--success-color);
}

.duration-close {
  color: var(--warning-color);
}

.duration-mismatch {
  color: var(--error-color);
}

.duration-difference {
  font-size: 0.85em;
  opacity: 0.8;
}

/* LESSON VARIANTS */
.lesson-variants {
  margin: var(--medium-spacing) 0;
}

.lesson-variants h4 {
  margin-bottom: var(--small-spacing);
  color: var(--gray-dark);
  font-size: 0.9rem;
  text-transform: uppercase;
}

.variants-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--x-min-spacing);
}

.variant-link {
  display: flex;
  align-items: center;
  gap: var(--x-min-spacing);
  padding: var(--x-min-spacing) var(--min-spacing);
  background-color: var(--white);
  border: 1px solid var(--gray-lighter);
  border-radius: var(--border-radius);
  text-decoration: none;
  color: var(--text-color);
  transition: all 0.2s;
  font-size: small;
}

.variant-link:hover {
  border-color: var(--primary-color);
  box-shadow: var(--box-shadow);
}

.variant-link.current {
  background-color: var(--primary-color);
  color: var(--white);
  border-color: var(--primary-color);
}

.current-indicator {
  font-size: 0.85em;
  opacity: 0.8;
}

/* LESSON CARD VARIANTS */
.lesson-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--small-spacing);
  margin-bottom: var(--small-spacing);
}

.variant-badge,
.card-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--x-min-spacing);
  padding: var(--x-min-spacing) var(--min-spacing) var(--x-min-spacing) var(--x-min-spacing);
  background-color: var(--primary-color);
  color: var(--white);
  border-radius: var(--border-radius);
  font-size: 0.75rem;
  font-weight: bold;
  white-space: nowrap;
}

.variant-badge .heroicon,
.card-badge .heroicon {
  width: 20px;
  height: 20px;
  filter: invert(1);
  margin: var(--x-min-spacing);
}

.card-title .card-badge {
  margin-left: var(--small-spacing);
  vertical-align: middle;
}

/* LESSON CLASS ASSIGNMENT */
.lesson-meta-info {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--medium-spacing);
  margin-bottom: var(--medium-spacing);
}

.lesson-class-assignment {
  background-color: var(--gray-lightest);
  padding: var(--medium-spacing);
  border-radius: var(--border-radius);
  min-width: 250px;
}

.lesson-class-assignment h4 {
  margin-bottom: var(--small-spacing);
  font-size: 0.9rem;
  text-transform: uppercase;
  color: var(--gray-dark);
}

.class-assignment-form {
  margin: 0;
}

.class-assignment-form .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--x-min-spacing);
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: var(--x-min-spacing);
  padding: var(--x-min-spacing) 0;
}

.checkbox-wrapper input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.checkbox-wrapper label {
  cursor: pointer;
  margin: 0;
}

.class-assignment-form label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color);
}

.class-assignment-form .form-select {
  padding: var(--x-min-spacing) var(--small-spacing);
  border: 1px solid var(--gray-lighter);
  border-radius: var(--border-radius);
  background-color: var(--white);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s;
}

.class-assignment-form .form-select:hover {
  border-color: var(--primary-color);
}

.class-assignment-form .form-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
}

.assigned-class-display {
  margin-top: var(--small-spacing);
}

.assigned-classes-display {
  margin-top: var(--small-spacing);
}

.assigned-classes-display h5 {
  font-size: 0.875rem;
  margin-bottom: var(--x-min-spacing);
  color: var(--gray-dark);
}

.no-classes-message {
  color: var(--gray-dark);
  font-size: 0.9rem;
  line-height: 1.5;
}

.create-class-link {
  color: var(--primary-color);
  text-decoration: underline;
  font-weight: 500;
}

.create-class-link:hover {
  color: var(--primary-color-dark);
}

@media (max-width: 768px) {
  .lesson-meta-info {
    grid-template-columns: 1fr;
  }
}
/* QR CODE FULLSCREEN OVERLAY */
.qrcode-fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--secondary-color-darkest);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  cursor: pointer;
}

.qrcode-container {
  border-radius: var(--border-radius);
  padding: var(--large-spacing);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--medium-spacing);
  max-width: 600px;
  cursor: default;
}

.qrcode-title {
  margin: 0;
  color: var(--text-color);
  font-size: 1.5rem;
  text-align: center;
}

.qrcode-image-wrapper {
  background-color: var(--white);
  padding: var(--medium-spacing);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.qrcode-image {
  display: block;
  width: 400px;
  height: 400px;
}

.qrcode-instruction {
  margin: 0;
  color: var(--gray-dark);
  font-size: 1.1rem;
  text-align: center;
}

.qrcode-close-button {
  padding: var(--small-spacing) var(--large-spacing);
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.qrcode-close-button:hover {
  background-color: var(--primary-color-dark);
}

/* QR CODE BUTTON */
.asset-qr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  margin-left: var(--x-min-spacing);
}

.asset-qr-button:hover {
  background-color: var(--primary-color-dark);
  transform: scale(1.1);
}

.asset-qr-button .heroicon {
  width: 20px;
  height: 20px;
}

.asset-play-wrapper {
  display: flex;
  align-items: center;
}

/* Fullscreen optimizations */
.qrcode-fullscreen-overlay:fullscreen {
  background-color: var(--secondary-color);
}

.qrcode-fullscreen-overlay:fullscreen .qrcode-container {
  box-shadow: none;
  max-width: none;
  padding: var(--large-spacing) * 2;
}

.qrcode-fullscreen-overlay:fullscreen .qrcode-image {
  width: 500px;
  height: 500px;
}

@media (max-width: 768px) {
  .qrcode-image {
    width: 300px;
    height: 300px;
  }

  .qrcode-fullscreen-overlay:fullscreen .qrcode-image {
    width: 350px;
    height: 350px;
  }
}

/* QR Code Download Code Styles */
.qrcode-download-code {
  margin-top: 30px;
  padding: 20px;
  background: var(--white);
  border-radius: 12px;
  text-align: center;
}

.qrcode-code-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.qrcode-download-url {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
}

.qrcode-code {
  font-size: 48px;
  font-weight: bold;
  letter-spacing: 8px;
  font-family: 'Courier New', monospace;
  color: var(--text-color);
  margin: 10px 0;
  background: var(--white);
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.qrcode-code-expires {
  font-size: 12px;
  color: var(--danger-color);
  font-weight: 600;
  margin-top: 10px;
}
/* SCHOOL CLASS BADGE */
.school-class-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--x-min-spacing);
  padding: var(--x-min-spacing) var(--x-min-spacing);
  background-color: var(--secondary-color);
  color: var(--white);
  border-radius: var(--border-radius);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: default;
}

.school-class-badge .heroicon {
  width: 20px;
  height: 20px;
}

.school-class-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--x-min-spacing);
}

/* SCHOOL CLASS CARD */
.school-class-card {
  background-color: var(--white);
  border: 1px solid var(--gray-lighter);
  border-radius: var(--border-radius);
  padding: var(--medium-spacing);
  box-shadow: var(--box-shadow-light);
}

.school-class-card-header {
  display: flex;
  align-items: center;
  gap: var(--small-spacing);
  margin-bottom: var(--small-spacing);
  padding-bottom: var(--small-spacing);
  border-bottom: 1px solid var(--gray-lighter);
}

.school-class-card-header .heroicon {
  width: 20px;
  height: 20px;
  color: var(--secondary-color);
}

.school-class-card-header h4 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-color);
}

.school-class-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--x-min-spacing);
}

.school-class-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

.school-class-info-item .label {
  color: var(--gray-dark);
  font-weight: 500;
}

.school-class-info-item .value {
  color: var(--text-color);
}

/* INDEX PAGE */
.school-classes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--medium-spacing);
  margin-top: var(--medium-spacing);
}

.school-class-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.school-class-card-link:hover {
  transform: translateY(-2px);
}

.school-class-card-link:hover .school-class-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.school-class-card-footer {
  margin-top: var(--small-spacing);
  padding-top: var(--small-spacing);
  border-top: 1px solid var(--gray-lighter);
  display: flex;
  gap: var(--medium-spacing);
  justify-content: space-around;
}

.school-class-stat {
  display: flex;
  align-items: center;
  gap: var(--x-min-spacing);
  font-size: 0.85rem;
  color: var(--gray-dark);
}

.school-class-stat .heroicon {
  width: 16px;
  height: 16px;
  color: var(--secondary-color);
}

/* SHOW PAGE */
.school-class-detail {
  max-width: 1200px;
  margin: 0 auto;
}

.school-class-header {
  display: flex;
  align-items: center;
  gap: var(--medium-spacing);
  margin-bottom: var(--large-spacing);
}

.school-class-header .heroicon {
  width: 48px;
  height: 48px;
  color: var(--secondary-color);
}

.school-class-header h1 {
  margin: 0;
}

.school-class-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--medium-spacing);
  margin-bottom: var(--large-spacing);
}

.info-card {
  background-color: var(--white);
  border: 1px solid var(--gray-lighter);
  border-radius: var(--border-radius);
  padding: var(--medium-spacing);
  box-shadow: var(--box-shadow-light);
}

.info-card h3 {
  margin-top: 0;
  margin-bottom: var(--medium-spacing);
  color: var(--text-color);
  font-size: 1.1rem;
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: var(--x-min-spacing);
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: var(--x-min-spacing) 0;
  border-bottom: 1px solid var(--gray-lighter);
}

.info-row:last-child {
  border-bottom: none;
}

.info-row .label {
  font-weight: 500;
  color: var(--gray-dark);
}

.info-row .value {
  color: var(--text-color);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: var(--medium-spacing);
  padding: var(--small-spacing);
  background-color: var(--gray-lightest);
  border-radius: var(--border-radius);
  margin-bottom: var(--small-spacing);
}

.stat-item:last-child {
  margin-bottom: 0;
}

.stat-item .heroicon {
  width: 32px;
  height: 32px;
  color: var(--secondary-color);
}

.stat-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--primary-color);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--gray-dark);
}

.section {
  margin-bottom: var(--large-spacing);
}

.section h2 {
  margin-bottom: var(--medium-spacing);
  color: var(--text-color);
}

.lessons-by-module {
  display: flex;
  flex-direction: column;
  gap: var(--large-spacing);
}

.module-group {
  background-color: var(--white);
  border: 1px solid var(--gray-lighter);
  border-radius: var(--border-radius);
  padding: var(--medium-spacing);
}

.module-title {
  display: flex;
  align-items: center;
  gap: var(--small-spacing);
  margin-top: 0;
  margin-bottom: var(--medium-spacing);
  color: var(--text-color);
}

.module-title .heroicon {
  width: 24px;
  height: 24px;
  color: var(--primary-color);
}

.lesson-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--small-spacing);
}

.lesson-card-compact {
  display: block;
  padding: var(--small-spacing);
  background-color: var(--gray-lightest);
  border: 1px solid var(--gray-lighter);
  border-radius: var(--border-radius);
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.lesson-card-compact:hover {
  background-color: var(--white);
  border-color: var(--primary-color);
  box-shadow: var(--box-shadow-light);
  transform: translateY(-1px);
}

.lesson-card-header-compact {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--x-min-spacing);
  margin-bottom: var(--x-min-spacing);
}

.lesson-title {
  font-weight: 600;
  color: var(--text-color);
  flex: 1;
}

.variant-badge {
  background-color: var(--primary-color);
  color: var(--white);
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.lesson-description-compact {
  font-size: 0.85rem;
  color: var(--gray-dark);
  line-height: 1.4;
}

.content-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--medium-spacing);
}

.content-module-card-small {
  display: flex;
  align-items: center;
  gap: var(--medium-spacing);
  padding: var(--medium-spacing);
  background-color: var(--white);
  border: 1px solid var(--gray-lighter);
  border-radius: var(--border-radius);
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.content-module-card-small:hover {
  border-color: var(--primary-color);
  box-shadow: var(--box-shadow-light);
  transform: translateY(-2px);
}

.content-module-card-small .heroicon {
  width: 32px;
  height: 32px;
  color: var(--primary-color);
  flex-shrink: 0;
}

.content-module-info {
  flex: 1;
  min-width: 0;
}

.content-module-info h4 {
  margin: 0 0 var(--x-min-spacing) 0;
  font-size: 1rem;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topic-badge {
  display: inline-block;
  padding: 2px 8px;
  background-color: var(--gray-lighter);
  color: var(--gray-dark);
  border-radius: var(--border-radius);
  font-size: 0.75rem;
  font-weight: 500;
}
:root {
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 60px;
}

.app-container {
  display: flex;
  min-height: calc(100vh - var(--header-height));
}

#sidebar {
  position: fixed;
  top: var(--header-height);
  left: 0;
  width: var(--sidebar-width);
  height: calc(100vh - var(--header-height));
  box-shadow: var(--box-shadow);
  border-top-right-radius: var(--border-radius);
  transition: width 0.3s ease;
  overflow: hidden;
  z-index: 100;
}

#sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

#sidebar .sidebar-toggle {
  position: absolute;
  top: var(--small-spacing);
  right: var(--small-spacing);
  width: 32px;
  height: 32px;
  background-color: var(--gray-lighter);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  z-index: 10;
}

#sidebar .sidebar-toggle:hover {
  background-color: var(--gray-lightest);
}

#sidebar.collapsed .sidebar-toggle {
  transform: rotate(180deg);
}

#sidebar .sidebar-content {
  padding: var(--medium-spacing);
  overflow-y: auto;
  height: 100%;
}

#sidebar.collapsed .sidebar-content {
  padding: var(--min-spacing);

}

#sidebar.collapsed .sidebar-content h2,
#sidebar.collapsed .sidebar-content h3,
#sidebar.collapsed .sidebar-content p,
#sidebar.collapsed .sidebar-content search,
#sidebar.collapsed .sidebar-content .link-text {
  opacity: 0;
  display: none;
}

#sidebar.collapsed .sidebar-content a:first-of-type {
  margin-top: var(--large-spacing);
}

#sidebar h2 {
  margin-bottom: var(--x-min-spacing);
}

#sidebar p {
  margin-bottom: var(--medium-spacing);
  color: var(--gray-dark);
}

#sidebar search {
  display: grid;
  grid-template-columns: 1fr 36px;
  background-color: var(--gray-lighter);
  border-radius: var(--border-radius);
  margin-bottom: var(--medium-spacing);
}

#sidebar h3 {
  margin-bottom: var(--small-spacing);
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--gray-dark);
}

#sidebar a {
  display: flex;
  align-items: center;
  gap: var(--small-spacing);
  padding: var(--x-min-spacing) var(--small-spacing);
  text-decoration: none;
  border-radius: var(--border-radius);
  background-color: var(--gray-lighter);
  margin-bottom: var(--x-min-spacing);
}

#sidebar a:hover {
  background-color: var(--gray-lightest);
}

#sidebar.collapsed a {
  justify-content: center;
  padding: var(--x-min-spacing);
}

main {
  margin-left: var(--sidebar-width);
  width: calc(100% - var(--sidebar-width));
  transition: margin-left 0.3s ease, width 0.3s ease;
}

#sidebar.collapsed~main {
  margin-left: var(--sidebar-collapsed-width);
  width: calc(100% - var(--sidebar-collapsed-width));
}
#submenu {
  position: fixed;
  z-index: 1000;
  top: calc(var(--header-height) + var(--min-spacing));
  right: var(--min-spacing);

  display: flex;
  gap: var(--min-spacing);
}

#submenu>div {
  display: flex;
  gap: var(--x-min-spacing);
}

#submenu>div>div,
#submenu>div>a,
#submenu>div>button,
#submenu>div>details summary div {
  margin: 0;
  border-radius: var(--border-radius-small);

  background-color: var(--gray-lighter);
}

#submenu>div>div:hover,
#submenu>div>a:hover,
#submenu>div>button:hover,
#submenu>div>details summary:hover div {
  background-color: var(--gray);
}

#admin-users-form input[type="radio"] {
  display: none;
}

#admin-users-form input[type="radio"]+label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: var(--min-spacing);

  padding: var(--min-spacing) var(--medium-spacing) var(--min-spacing) var(--min-spacing);
  border-radius: var(--border-radius);
  background-color: var(--gray-light);

  cursor: pointer;
}

#admin-users-form input[type="radio"]:checked+label {
  background-color: var(--gray-lightest);
}

#admin-users-form input[type="radio"]:disabled+label {
  opacity: 0.6;
  cursor: not-allowed;
}
/*
 * 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.
 *


 */