@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import "buttons.css";
@import "custom-select.css";
@import "emoji-picker.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .tab:is(.tab-active,[aria-selected=true]):not(.tab-disabled):not([disabled]) {
    @apply border-primary border-b-4;
  }

  .nav-item {
    @apply px-4 py-2.5 rounded-xl transition-all duration-200 text-sm
    font-medium text-muted-foreground hover:text-base-content
    hover:bg-gradient-to-r hover:from-primary/15 hover:to-secondary/15;
  }
  .nav-item.active {
    @apply bg-gradient-to-r from-primary/15 to-secondary/15 text-base-content;
  }

  .input, .select, .textarea {
    @apply w-full rounded-lg shadow-sm border border-base-300;
  }

  .select-custom {
    @apply w-full rounded-lg shadow-sm border border-base-300;
  }

  .btn {
    @apply px-8
  }

}

@layer utilities {
  .link.active {
    @apply text-primary-content bg-primary/25 rounded-full px-4 py-2 no-underline;
  }

  .prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)) {
    @apply text-2xl font-semibold mb-2;
  }

  .prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)) {
    @apply text-xl font-medium mb-2;
  }

  .prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)) {
    @apply text-lg font-medium mb-2;
  }

  .prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)) {
    @apply mt-2;
  }
}
@layer components {
  .btn-amber {
    @apply bg-amber-500 text-white;
  }

  .btn-amber:hover {
    @apply bg-amber-100 border-amber-100 text-amber-700 !important;
  }

  .btn-emerald {
    @apply bg-emerald-500 text-white;
  }

  .btn-emerald:hover {
    @apply bg-emerald-100 border-emerald-100 text-emerald-700 !important;
  }
  
  .btn-red {
    @apply bg-red-500 text-white;
  }

  .btn-red:hover {
    @apply bg-red-100 border-red-100 text-red-700 !important;
  }
  
  .btn-indigo {
    @apply bg-indigo-500 text-white;
  }

  .btn-indigo:hover {
    @apply bg-indigo-100 border-indigo-100 text-indigo-700 !important;
  }
  
  .btn-pink {
    @apply bg-pink-500 text-white;
  }

  .btn-pink:hover {
    @apply bg-pink-100 border-pink-100 text-pink-700 !important;
  }
  
  .btn-teal {
    @apply bg-teal-500 text-white;
  }

  .btn-teal:hover {
    @apply bg-teal-100 border-teal-100 text-teal-700 !important;
  }
  
  .btn-yellow {
    @apply bg-yellow-500 text-white;
  }

  .btn-yellow:hover {
    @apply bg-yellow-100 border-yellow-100 text-yellow-700 !important;
  }
}

@layer components {
  .ts-control, .ts-wrapper.single.input-active .ts-control,
  .ts-wrapper.multi.input-active .ts-control {
    @apply select rounded-lg;
  }

  .ts-control input {
    @apply text-sm;
  }

  .ts-control .item {
    @apply text-base;
  }

  .ts-control .clear-button {
    @apply hidden;
  }

  .full .ts-control {
    @apply bg-transparent text-neutral-content;
  }

  .ts-dropdown .option[aria-disabled=true] {
    display: none;
  }

  .ts-wrapper.plugin-remove_button .item {
    @apply rounded-md;
  }
  .ts-wrapper.multi .ts-control > .item, .ts-wrapper.single .ts-control > .item {
    @apply py-1 px-2 h-auto bg-purple-100 rounded-lg text-sm text-black;
  }

  .ts-wrapper.plugin-remove_button .item .remove {
    @apply border-none leading-none py-1 rounded-r-lg;
  }

  .ts-dropdown {
    @apply rounded-md;
  }

  .ts-dropdown .no-results {
    @apply block text-base-content brightness-50 py-2;
  }

  .ts-dropdown .create, .ts-dropdown .create.active {
    @apply p-2 block text-base-content;
  }

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

  .ts-dropdown [data-selectable].option {
    @apply text-base-content;
  }

  .ts-dropdown [data-selectable].option:first-child {
    @apply rounded-t-md;
  }

  .ts-dropdown [data-selectable].option:last-child {
    @apply rounded-b-md;
  }

  .ts-dropdown .active, .ts-dropdown .create.active .link:hover, .ts-dropdown .option:hover {
    @apply text-base-content bg-purple-100 !important;
  }

  .ts-dropdown .spinner {
    @apply h-auto w-auto;
  }

  .ts-dropdown .spinner:after {
    @apply h-5 w-5 border-2 p-0 my-0 inline-block;
  }

  .input-xs .ts-control, .input-xs.ts-wrapper.single.input-active .ts-control,
  .input-xs.ts-wrapper.multi.input-active .ts-control {
    @apply min-h-5 h-5 p-0 pl-1 flex content-start ;
  }

  .input-md.ts-wrapper.multi .ts-control {
    @apply h-11 min-h-11 ps-0;
  }

  .input-xs .ts-control input {
    @apply text-xs;
  }

  .ts-wrapper.single.input-xs .ts-control > .item,
  .ts-wrapper.multi.input-xs .ts-control > .item {
    @apply text-xs py-0;
  }
}
emoji-picker {
  position: absolute;
  z-index: 70;
  --background: white;
  --border-radius: 0.5rem;
  --box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  --input-font-color: black;
  --outline-color: #8b5cf6;
  --outline-size: 2px;
}
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em
}
code.hljs {
  padding: 3px 5px
}
/*!
  Theme: GitHub Dark
  Description: Dark theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-dark
  Current colors taken from GitHub's CSS
*/
.hljs {
  color: #c9d1d9;
  background: #0d1117
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  /* prettylights-syntax-keyword */
  color: #ff7b72
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  /* prettylights-syntax-entity */
  color: #d2a8ff
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
  /* prettylights-syntax-constant */
  color: #79c0ff
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
  /* prettylights-syntax-string */
  color: #a5d6ff
}
.hljs-built_in,
.hljs-symbol {
  /* prettylights-syntax-variable */
  color: #ffa657
}
.hljs-comment,
.hljs-code,
.hljs-formula {
  /* prettylights-syntax-comment */
  color: #8b949e
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
  /* prettylights-syntax-entity-tag */
  color: #7ee787
}
.hljs-subst {
  /* prettylights-syntax-storage-modifier-import */
  color: #c9d1d9
}
.hljs-section {
  /* prettylights-syntax-markup-heading */
  color: #1f6feb;
  font-weight: bold
}
.hljs-bullet {
  /* prettylights-syntax-markup-list */
  color: #f2cc60
}
.hljs-emphasis {
  /* prettylights-syntax-markup-italic */
  color: #c9d1d9;
  font-style: italic
}
.hljs-strong {
  /* prettylights-syntax-markup-bold */
  color: #c9d1d9;
  font-weight: bold
}
.hljs-addition {
  /* prettylights-syntax-markup-inserted */
  color: #aff5b4;
  background-color: #033a16
}
.hljs-deletion {
  /* prettylights-syntax-markup-deleted */
  color: #ffdcd7;
  background-color: #67060c
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
  /* purposely ignored */
  
}
/* THIS FILE IS AUTO-GENERATED. DO NOT EDIT BY HAND! */
:root {
  /* Callouts */
  --callout-gray-background-color: #F2F3F7;
  --callout-gray-border-color: #D0D5DD;
  --callout-gray-text-color: #344054;

  --callout-blue-background-color: #D1E9FF;
  --callout-blue-border-color: #84CAFF;
  --callout-blue-text-color: #2b6fe6;

  --callout-green-background-color: #D1F2D7;
  --callout-green-border-color: #84E1A9;
  --callout-green-text-color: #0F8B3D;

  --callout-yellow-background-color: #FFF9D1;
  --callout-yellow-border-color: #FFE084;
  --callout-yellow-text-color: #a38310;

  --callout-red-background-color: #fedada;
  --callout-red-border-color: #ff8484;
  --callout-red-text-color: #B30000;

  --rte-table-border-color: #e2e8f0;
  --rte-link-color: #2b6fe6;
}

.dark {
  --callout-gray-background-color: #2d3748;
  --callout-gray-border-color: #4a5568;
  --callout-gray-text-color: #e2e8f0;

  --callout-blue-background-color: #2b6cb0;
  --callout-blue-border-color: #2b6cb0;
  --callout-blue-text-color: #e2e8f0;

  --callout-green-background-color: #2f855a;
  --callout-green-border-color: #2f855a;
  --callout-green-text-color: #e2e8f0;

  --callout-yellow-background-color: #b7791f;
  --callout-yellow-border-color: #b7791f;
  --callout-yellow-text-color: #e2e8f0;

  --callout-red-background-color: #9b2c2c;
  --callout-red-border-color: #9b2c2c;
  --callout-red-text-color: #e2e8f0;
}

.dark richer-text-editor {
  --callout-gray-background-color: #2d3748;
  --callout-gray-border-color: #4a5568;
  --callout-gray-text-color: #e2e8f0;

  --callout-blue-background-color: #2b6cb0;
  --callout-blue-border-color: #2b6cb0;
  --callout-blue-text-color: #e2e8f0;

  --callout-green-background-color: #2f855a;
  --callout-green-border-color: #2f855a;
  --callout-green-text-color: #e2e8f0;

  --callout-yellow-background-color: #b7791f;
  --callout-yellow-border-color: #b7791f;
  --callout-yellow-text-color: #e2e8f0;

  --callout-red-background-color: #9b2c2c;
  --callout-red-border-color: #9b2c2c;
  --callout-red-text-color: #e2e8f0;

  --rte-table-border-color: #2d3748;
  --rte-link-color: #e6342b;

  /* Editor wrapper */
  --border-color: #374151;
  --background-color: #171717;
  --text-color: #f5f5f5;

  /* Editor toolbar */
  --toolbar-button-background: #0a0a0a;
  --toolbar-button-background-active: #171717;
  --toolbar-button-background-hover: #262626;
  --toolbar-button-fill: #f5f5f5;
  --toolbar-button-fill-active: #f5f5f5;
  --toolbar-button-fill-hover: #f5f5f5;
  --toolbar-divider-color: #4b5563;
  --toolbar-background: #0a0a0a;
}

richer-text-editor a {
  color: var(--rte-link-color);
}

.ProseMirror {
  padding: 0.5rem;
}

.callout {
  border-radius: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 0.5rem;
  border-width: 1px;
  word-break: break-word;
}

.callout-select {
  position: relative;
  top: 10px;
  right: 5px;
}

.callout p {
  color: inherit !important;
}

.callout strong {
  color: inherit !important;
}

.callout[data-color='gray'] {
  background-color: var(--callout-gray-background-color);
  border-color: var(--callout-gray-border-color);
  color: var(--callout-gray-text-color) !important;
}

.callout[data-color='blue'] {
  background-color: var(--callout-blue-background-color);
  border-color: var(--callout-blue-border-color);
  color: var(--callout-blue-text-color) !important;
}

.callout[data-color='green'] {
  background-color: var(--callout-green-background-color);
  border-color: var(--callout-green-border-color);
  color: var(--callout-green-text-color) !important;
}

.callout[data-color='yellow'] {
  background-color: var(--callout-yellow-background-color);
  border-color: var(--callout-yellow-border-color);
  color: var(--callout-yellow-text-color) !important;
}

.callout[data-color='red'] {
  background-color: var(--callout-red-background-color);
  border-color: var(--callout-red-border-color);
  color: var(--callout-red-text-color) !important;
}

.callout p:first-child {
  margin-top: 0;
  margin-bottom: 0.2rem;
}

.callout p:last-child {
  margin-top: 0.2rem;
  margin-bottom: 0;
}

/* Basic editor styles */
.ProseMirror>*+* {
  margin-top: 0.75em;
}

.ProseMirror ul,
.ProseMirror ol {
  padding: 0 1rem;
}

.ProseMirror ul {
  list-style-type: disc;
}

.ProseMirror ol {
  list-style-type: decimal;
}

.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6 {
  line-height: 1.1;
}

.ProseMirror h1 {
  font-size: 1.65em;
}

.ProseMirror h2 {
  font-size: 1.5em;
}

.ProseMirror h3 {
  font-size: 1.25em;
}

.ProseMirror code {
  background-color: var(--rte-code-background-color);
  color: var(--rte-code-text-color);
}

.ProseMirror pre {
  background: #0d0d0d;
  color: #fff;
  font-family: 'JetBrainsMono', monospace;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

.ProseMirror pre code {
  color: inherit;
  padding: 0;
  background: none;
  font-size: 0.8rem;
}

.ProseMirror img {
  max-width: 100%;
  height: auto;
}

.ProseMirror blockquote {
  padding-left: 1rem;
  border-left: 2px solid rgba(13, 13, 13, 0.1);
}

.ProseMirror a {
  color: var(--rte-link-color);
  text-decoration: none;
  border-bottom: 1px solid var(--rte-link-color);
}

.ProseMirror hr {
  border: none;
  border-top: 2px solid rgba(13, 13, 13, 0.1);
  margin: 2rem 0;
}

.ProseMirror p.is-empty::before {
  color: var(--rte-placeholder-text-color);
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

.ProseMirror table {
  border-collapse: collapse;
  margin: 0;
  overflow: hidden;
  table-layout: fixed;
  width: 100%;
}

.ProseMirror table td,
.ProseMirror table th {
  border: 2px solid var(--rte-table-border-color);
  box-sizing: border-box;
  min-width: 1em;
  padding: 3px 5px;
  position: relative;
  vertical-align: top;
}

.ProseMirror table td>*,
.ProseMirror table th>* {
  margin-bottom: 0;
}

.ProseMirror table th {
  background-color: var(--rte-table-header-background-color);
  font-weight: bold;
  text-align: left;
}

.ProseMirror table .selectedCell:after {
  background: var(--rte-table-selected-cell-background-color);
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.ProseMirror table .column-resize-handle {
  background-color: #adf;
  bottom: -2px;
  position: absolute;
  right: -2px;
  pointer-events: none;
  top: 0;
  width: 4px;
}

.ProseMirror table p {
  margin: 0;
}

.tableWrapper {
  padding: 1rem 0;
  overflow-x: auto;
}

.resize-cursor {
  cursor: ew-resize;
  cursor: col-resize;
}

.ProseMirror .richer-text--mention {
  background-color: #e2e8f0;
  border-radius: 0.25rem;
  padding: 0.1rem 0.25rem;
  color: #4a5568;

  align-items: center;
  gap: 0.25rem;
}

.ProseMirror .richer-text--mention-img {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  margin-right: 0.25rem;
}

/* Rendered out mentions */
.richer-text--mention {
  border-radius: 0.25rem;
  padding: 0.1rem 0.25rem;
  color: #4a5568;

  align-items: center;
  gap: 0.25rem;
}

.richer-text--mention-img {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  margin-right: 0.25rem;
}

.image-uploading {
  position: relative;
  display: inline-block;
}

.image-uploading img {
  filter: blur(5px);
  opacity: 0.3;
}

.image-uploading::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
  border: 3px solid #ccc;
  border-top-color: #1e986c;
  z-index: 1;
  animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.ProseMirror iframe {
  pointer-events: none;;
}

.richer-text iframe {
  display: inline-block !important;
  width: 100% !important;
  min-height: 500px !important;
}

/* src/css/richer-text-core.css */
:root {
  --callout-gray-background-color: #F2F3F7;
  --callout-gray-border-color: #D0D5DD;
  --callout-gray-text-color: #344054;
  --callout-blue-background-color: #D1E9FF;
  --callout-blue-border-color: #84CAFF;
  --callout-blue-text-color: #2b6fe6;
  --callout-green-background-color: #D1F2D7;
  --callout-green-border-color: #84E1A9;
  --callout-green-text-color: #0F8B3D;
  --callout-yellow-background-color: #FFF9D1;
  --callout-yellow-border-color: #FFE084;
  --callout-yellow-text-color: #a38310;
  --callout-red-background-color: #fedada;
  --callout-red-border-color: #ff8484;
  --callout-red-text-color: #B30000;
  --rte-table-border-color: #e2e8f0;
  --rte-link-color: #2b6fe6;
}
.dark {
  --callout-gray-background-color: #2d3748;
  --callout-gray-border-color: #4a5568;
  --callout-gray-text-color: #e2e8f0;
  --callout-blue-background-color: #2b6cb0;
  --callout-blue-border-color: #2b6cb0;
  --callout-blue-text-color: #e2e8f0;
  --callout-green-background-color: #2f855a;
  --callout-green-border-color: #2f855a;
  --callout-green-text-color: #e2e8f0;
  --callout-yellow-background-color: #b7791f;
  --callout-yellow-border-color: #b7791f;
  --callout-yellow-text-color: #e2e8f0;
  --callout-red-background-color: #9b2c2c;
  --callout-red-border-color: #9b2c2c;
  --callout-red-text-color: #e2e8f0;
}
.dark richer-text-editor {
  --callout-gray-background-color: #2d3748;
  --callout-gray-border-color: #4a5568;
  --callout-gray-text-color: #e2e8f0;
  --callout-blue-background-color: #2b6cb0;
  --callout-blue-border-color: #2b6cb0;
  --callout-blue-text-color: #e2e8f0;
  --callout-green-background-color: #2f855a;
  --callout-green-border-color: #2f855a;
  --callout-green-text-color: #e2e8f0;
  --callout-yellow-background-color: #b7791f;
  --callout-yellow-border-color: #b7791f;
  --callout-yellow-text-color: #e2e8f0;
  --callout-red-background-color: #9b2c2c;
  --callout-red-border-color: #9b2c2c;
  --callout-red-text-color: #e2e8f0;
  --rte-table-border-color: #2d3748;
  --rte-link-color: #e6342b;
  --border-color: #374151;
  --background-color: #171717;
  --text-color: #f5f5f5;
  --toolbar-button-background: #0a0a0a;
  --toolbar-button-background-active: #171717;
  --toolbar-button-background-hover: #262626;
  --toolbar-button-fill: #f5f5f5;
  --toolbar-button-fill-active: #f5f5f5;
  --toolbar-button-fill-hover: #f5f5f5;
  --toolbar-divider-color: #4b5563;
  --toolbar-background: #0a0a0a;
}
richer-text-editor a {
  color: var(--rte-link-color);
}
.ProseMirror {
  padding: 0.5rem;
}
.callout {
  border-radius: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 0.5rem;
  border-width: 1px;
  word-break: break-word;
}
.callout-select {
  position: relative;
  top: 10px;
  right: 5px;
}
.callout p {
  color: inherit !important;
}
.callout strong {
  color: inherit !important;
}
.callout[data-color=gray] {
  background-color: var(--callout-gray-background-color);
  border-color: var(--callout-gray-border-color);
  color: var(--callout-gray-text-color) !important;
}
.callout[data-color=blue] {
  background-color: var(--callout-blue-background-color);
  border-color: var(--callout-blue-border-color);
  color: var(--callout-blue-text-color) !important;
}
.callout[data-color=green] {
  background-color: var(--callout-green-background-color);
  border-color: var(--callout-green-border-color);
  color: var(--callout-green-text-color) !important;
}
.callout[data-color=yellow] {
  background-color: var(--callout-yellow-background-color);
  border-color: var(--callout-yellow-border-color);
  color: var(--callout-yellow-text-color) !important;
}
.callout[data-color=red] {
  background-color: var(--callout-red-background-color);
  border-color: var(--callout-red-border-color);
  color: var(--callout-red-text-color) !important;
}
.callout p:first-child {
  margin-top: 0;
  margin-bottom: 0.2rem;
}
.callout p:last-child {
  margin-top: 0.2rem;
  margin-bottom: 0;
}
.ProseMirror > * + * {
  margin-top: 0.75em;
}
.ProseMirror ul,
.ProseMirror ol {
  padding: 0 1rem;
}
.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6 {
  line-height: 1.1;
}
.ProseMirror h1 {
  font-size: 1.65em;
}
.ProseMirror h2 {
  font-size: 1.5em;
}
.ProseMirror h3 {
  font-size: 1.25em;
}
.ProseMirror code {
  background-color: var(--rte-code-background-color);
  color: var(--rte-code-text-color);
}
.ProseMirror pre {
  background: #0d0d0d;
  color: #fff;
  font-family: "JetBrainsMono", monospace;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}
.ProseMirror pre code {
  color: inherit;
  padding: 0;
  background: none;
  font-size: 0.8rem;
}
.ProseMirror img {
  max-height: 400px;
  width: auto;
}
.ProseMirror blockquote {
  padding-left: 1rem;
  border-left: 2px solid rgba(13, 13, 13, 0.1);
}
.ProseMirror a {
  color: var(--rte-link-color);
  text-decoration: none;
  border-bottom: 1px solid var(--rte-link-color);
}
.ProseMirror hr {
  border: none;
  border-top: 2px solid rgba(13, 13, 13, 0.1);
  margin: 2rem 0;
}
.ProseMirror p.is-empty::before {
  color: var(--rte-placeholder-text-color);
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}
.ProseMirror table {
  border-collapse: collapse;
  margin: 0;
  overflow: hidden;
  table-layout: fixed;
  width: 100%;
}
.ProseMirror table td,
.ProseMirror table th {
  border: 2px solid var(--rte-table-border-color);
  box-sizing: border-box;
  min-width: 1em;
  padding: 3px 5px;
  position: relative;
  vertical-align: top;
}
.ProseMirror table td > *,
.ProseMirror table th > * {
  margin-bottom: 0;
}
.ProseMirror table th {
  background-color: var(--rte-table-header-background-color);
  font-weight: bold;
  text-align: left;
}
.ProseMirror table .selectedCell:after {
  background: var(--rte-table-selected-cell-background-color);
  content: "";
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}
.ProseMirror table .column-resize-handle {
  background-color: #adf;
  bottom: -2px;
  position: absolute;
  right: -2px;
  pointer-events: none;
  top: 0;
  width: 4px;
}
.ProseMirror table p {
  margin: 0;
}
.tableWrapper {
  padding: 1rem 0;
  overflow-x: auto;
}
.resize-cursor {
  cursor: ew-resize;
  cursor: col-resize;
}
.ProseMirror .richer-text--mention {
  background-color: #e2e8f0;
  border-radius: 0.25rem;
  padding: 0.1rem 0.25rem;
  color: #4a5568;
  align-items: center;
  gap: 0.25rem;
}
.ProseMirror .richer-text--mention-img {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  margin-right: 0.25rem;
}
.richer-text--mention {
  border-radius: 0.25rem;
  padding: 0.1rem 0.25rem;
  color: #4a5568;
  align-items: center;
  gap: 0.25rem;
}
.richer-text--mention-img {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  margin-right: 0.25rem;
}
.image-uploading {
  position: relative;
  display: inline-block;
}
.image-uploading img {
  filter: blur(5px);
  opacity: 0.3;
}
.image-uploading::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
  border: 3px solid #ccc;
  border-top-color: #1e986c;
  z-index: 1;
  animation: spinner 0.6s linear infinite;
}
@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
.ProseMirror iframe {
  pointer-events: none;
}
.richer-text iframe {
  display: inline-block !important;
  width: 100% !important;
  min-height: 500px !important;
}
.richer-text img {
  cursor: zoom-in;
}
.image-zoom-modal {
  border: none;
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.image-zoom-modal:focus {
  outline: none;
}
.image-zoom-modal::backdrop {
  background: rgba(0, 0, 0, 0.8);
}
.image-zoom-modal__image {
  max-width: 90vw;
  max-height: 90vh;
  box-shadow: 0 0 20px black;
  cursor: zoom-out;
}
richer-text-embed {
  cursor: pointer;
}

/*# sourceMappingURL=richer-text-core.css.map */
/*
 * 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.
 *





 */