.dark richer-text-editor {
  --border-color: #2d303a;
  --background-color: #2d303a;
  --text-color: #fff;
}

.ProseMirror blockquote {
  padding-left: 1rem;
  border-left: 2px solid rgba(229, 231, 235, 0.5);
}

.ProseMirror hr {
  border: none;
  border-top: 2px solid rgba(229, 231, 235, 0.5);
  margin: 2rem 0;
}

.ProseMirror ul {
  list-style: disc;
}

.ProseMirror ol {
  list-style: decimal;
}

.ProseMirror table td, .ProseMirror table th{
  border: 2px solid rgba(126, 131, 141, 0.5);
}

select.callout-select {
  color: #e5e7eb;
  border-radius: 0.5rem;
  background-color: #4a4d58;
  top: -8px;
  left: 3px
}

select.callout-select:focus, select:focus {
  outline: 2px solid #797c86;
  box-shadow: none;
  border: none;
}

div.tiptap:focus-visible {
  outline-offset: 0;
  outline-width: 2px;
  border-color: var(--fallback-bc, oklch(var(--bc) / .2));
  box-shadow: none;
  outline-color: var(--fallback-bc, oklch(var(--bc) / .2));
  outline-style: solid;
}

.suggested-item {
  color: text-gray-900 !important;
}

.prose p:first-of-type {
  margin-top: 0;
}

.prose p:last-of-type {
  margin-bottom: 0;
}

.prose p {
  margin-bottom: 1rem;
}

p[data-placeholder].is-empty {
  color: #cccdcf;
}

.dark div[data-tippy-root] {
  background-color: #363c47;
}

div[data-tippy-root] {
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 6px, rgba(0, 0, 0, 0.2) 0px 3px 6px;
}
.shake {
  animation: shake 400ms both;
}

.fade-out {
  animation: fade-out 800ms both;
}

.long-fade-out {
  animation: long-fade-out 4000ms both;
}

@keyframes go-top {
  from {
    transform: translateY(100dvh);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 100; }
}

@keyframes fade-out {
  from {opacity :1;}
  to {opacity :0;}
}

@keyframes long-fade-out {
  0%  { opacity: 1; }
  50% { opacity: 0.9; }
  60% { opacity: 0.8; }
  70% { opacity: 0.7; }
  80% { opacity: 0.6 }
  90% { opacity: 0.5 }
  100% { opacity: 0 }
}

@keyframes pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.6; }
  100% { opacity: 1; }
}

@keyframes shake {
  0%  { transform: translateX(-2rem); }
  25% { transform: translateX(2rem); }
  50% { transform: translateX(-1rem); }
  75% { transform: translateX(1rem); }
}
.fly {
  animation: flyDown 2s ease-in-out forwards;
}

@keyframes flyDown {
    from {
        transform: translateY(-6rem);
    }
    to {
        transform: translateY(0);
    }
}


/*
 * 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.
 *




 */