/*
 * Configure the z-index of the editor UI, so when inside a Bootstrap
 * modal, it will be rendered over the modal.
 */
:root {
  --ck-z-default: 100;
  --ck-z-panel: calc(var(--ck-z-default) + 999);
}
/* .ck-content .table {
  width: auto;
} */

figure.table {
  overflow-x: auto;
  display: block;
}
figure.table table,
figure.table th,
figure.table td {
  border: 1px solid #000;
  border-collapse: collapse;
}
figure.table td,
figure.table th {
  padding: 8px;
}

.ck-powered-by {
  display: none;
}
.ck .ck-reset .ck-list {
  position: absolute;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow */
}

.mention__item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.mention__item img {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50%;
  margin-right: 8px;
}

.mention__item__user-name {
  font-weight: bold;
  margin-right: 5px;
}
:root {
  --ck-color-mention-background: unset;

  --ck-color-mention-text: black;
}

.fullscreen-mode .ck-content {
  height: 100vh !important;
  padding: 10px;
}

.ck-dropdown__panel {
  max-width: 420px !important;
}
@media (max-width: 768px) {
  .ck-dropdown__panel {
    max-width: 300px !important;
  }
}
.ck.ck-balloon-panel {
  z-index: 10000 !important; /*High Z-index because of Popup issue */
}

/*Required Css for CKeditor*/
.ck.ck-content:not(.ck-style-grid__button__preview):not(
    .ck-editor__nested-editable
  ) {
  /* Make sure all content containers have some min height to make them easier to locate. */
  height: 200px;
  padding: 1em 1.5em;
}

/* Make sure all content containers are distinguishable on a web page even of not focused. */
.ck.ck-content:not(:focus) {
  border: 1px solid var(--ck-color-base-border);
}

/* Fix for editor styles overflowing into comment reply fields */
.ck-comment__input .ck.ck-content {
  min-height: unset;
  border: 0;
  padding: 0;
}

/* Font sizes and vertical rhythm for common elements (headings, lists, paragraphs, etc.) */
.ck-content h1 {
  font-size: 2.3em;
}
.ck-content h2 {
  font-size: 1.84em;
}
.ck-content h3 {
  font-size: 1.48em;
}
.ck-content h4 {
  font-size: 1.22em;
}
.ck-content h5 {
  font-size: 1.06em;
}
.ck-content h6 {
  font-size: 1em;
}
.ck-content h1,
.ck-content h2,
.ck-content h3,
.ck-content h4,
.ck-content h5,
.ck-content h6 {
  line-height: 1.2em;
  padding-top: 0.8em;
  margin-bottom: 0.4em;
}
.ck-content blockquote,
.ck-content ol,
.ck-content p,
.ck-content ul {
  font-size: 1em;
  line-height: 1.6em;
  padding-top: 0.2em;
  margin-bottom: var(--ck-spacing-large);
}

/* ---- Style feature content styles ------------------------------------------------------ */
.ck-content {
  --ck-georgia-serif-font-stack: Georgia, Times, Times New Roman, serif;
}

h1.ck-document-title {
  font-family: var(--ck-georgia-serif-font-stack);
  font-size: 50px;
  font-weight: bold;
  border: 0;
}
h2.ck-document-subtitle {
  font-family: var(--ck-georgia-serif-font-stack);
  font-size: 20px;
  font-weight: bold;
  color: #d1d1d1;
  letter-spacing: 10px;
}
p.ck-callout {
  --border-color: #e91e1e;
  padding: 1.2em 2em;
  border: 1px solid var(--border-color);
  border-left: 10px solid var(--border-color);
  background: #fff9fb;
  border-radius: 5px;
  margin: 1.5em 2em;
  box-shadow: 5px 5px 0 #ffe6ef;
}

blockquote.ck-side-quote {
  font-family: var(--ck-georgia-serif-font-stack);
  font-style: normal;
  float: right;
  width: 35%;
  position: relative;
  border: 0;
  overflow: visible;
  z-index: 1;
  margin-left: 1em;
}

blockquote.ck-side-quote::before {
  content: "“";
  position: absolute;
  top: -37px;
  left: -10px;
  display: block;
  font-size: 200px;
  color: #e7e7e7;
  z-index: -1;
  line-height: 1;
}

blockquote.ck-side-quote p {
  font-size: 2em;
  line-height: 1;
}

blockquote.ck-side-quote p:last-child:not(:first-child) {
  font-size: 1.3em;
  text-align: right;
  color: #555;
}

span.ck-needs-clarification {
  outline: 1px dashed #c8a24b;
  background: #ffe19c;
  border-radius: 2px;
  position: relative;
}

span.ck-needs-clarification::after {
  content: "?";
  display: inline-block;
  color: #fff;
  background: #3b3b3b;
  font-size: 12px;
  vertical-align: super;
  width: 12px;
  height: 12px;
  line-height: 12px;
  border-radius: 10px;
  text-align: center;
  position: absolute;
  right: -6px;
  top: -6px;
  font-weight: bold;
  letter-spacing: initial;
}

span.ck-wide-spacing {
  letter-spacing: 0.3em;
}

span.ck-small-caps {
  font-variant: small-caps;
}

.ck-content span.spoiler {
  background: #000;
  color: #000;
}

.ck-content span.spoiler:hover {
  background: #000;
  color: #fff;
}

pre.ck-stylish-code {
  border-color: transparent;
  margin-left: 2em;
  margin-right: 2em;
  border-radius: 10px;
}

pre.ck-stylish-code::before {
  --ck-stylish-code-disc-radius: 6px;
  content: "";
  display: block;
  height: calc(var(--ck-stylish-code-disc-radius) * 2);
  background-image: radial-gradient(
      circle,
      #f16b5d var(--ck-stylish-code-disc-radius),
      rgba(0, 0, 0, 0) var(--ck-stylish-code-disc-radius)
    ),
    radial-gradient(
      circle,
      #f5be4d var(--ck-stylish-code-disc-radius),
      rgba(0, 0, 0, 0) var(--ck-stylish-code-disc-radius)
    ),
    radial-gradient(
      circle,
      #56c452 var(--ck-stylish-code-disc-radius),
      rgba(0, 0, 0, 0) var(--ck-stylish-code-disc-radius)
    );
  background-size: calc(var(--ck-stylish-code-disc-radius) * 2)
    calc(var(--ck-stylish-code-disc-radius) * 2);
  background-position: 0 0, calc(var(--ck-stylish-code-disc-radius) * 3) 0,
    calc(var(--ck-stylish-code-disc-radius) * 6) 0;
  margin-bottom: 8px;
  background-repeat: no-repeat;
}

pre.ck-stylish-code-dark,
pre.ck-stylish-code-bright {
  padding: 1em;
}

pre.ck-stylish-code-dark {
  background: #272822;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1215686275);
  color: white;
}

pre.ck-stylish-code-dark code {
  color: white;
}

pre.ck-stylish-code-bright {
  background: #dddfe0;
  color: #000;
  box-shadow: 5px 5px 0 #b3b3b3;
}

pre.ck-stylish-code-bright code {
  color: #222;
}
.ck.ck-color-ui-dropdown {
  --ck-color-grid-tile-size: 20px;
}
.ck.ck-color-ui-dropdown .ck-color-grid {
  grid-gap: 1px;
}
.ck.ck-color-ui-dropdown .ck-color-grid .ck-button {
  border-radius: 0;
}
.ck.ck-color-ui-dropdown .ck-color-grid__tile:hover:not(.ck-disabled),
.ck.ck-color-ui-dropdown .ck-color-grid__tile:focus:not(.ck-disabled) {
  z-index: 1;
  transform: scale(1.3);
}

/* ---- Mention list styles --------------------------------------------------------------- */
.ck-mentions .mention__item {
  display: flex;
  align-items: center;
}
.ck-mentions .mention__item img {
  border-radius: 100%;
  height: 30px;
}
.ck-mentions .mention__item span {
  margin-left: 0.5em;
}
.ck-mentions .mention__item.ck-on span {
  color: var(--ck-color-base-background);
}
.ck-mentions .mention__item .mention__item__full-name {
  color: hsl(0, 0%, 45%);
}
.ck-mentions .mention__item:hover:not(.ck-on) .mention__item__full-name {
  color: hsl(0, 0%, 40%);
}

.ck.ck-content.ck-editor__editable_inline > :first-child {
  margin-top: 0;
}

/* ---- Styles of the demo page ------------------------------------------------------ */

.header-wrapper {
  padding: 1rem 2rem;
}

.ck.ck-word-count {
  display: flex;
  justify-content: flex-end;
  background: var(--ck-color-toolbar-background);
  padding: var(--ck-spacing-small) var(--ck-spacing-standard);
  border: 1px solid var(--ck-color-toolbar-border);
  border-top-width: 0;
  border-radius: 0 0 var(--ck-border-radius);
  font: normal normal normal var(--ck-font-size-base) /
    var(--ck-line-height-base) var(--ck-font-face);
}

.ck.ck-word-count .ck-word-count__words {
  margin-right: var(--ck-spacing-standard);
}

.ck.ck-rounded-corners .ck.ck-editor__main > .ck-editor__editable,
.ck.ck-rounded-corners .ck-source-editing-area textarea {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.ck.ck-reset.ck-dropdown__panel.ck-dropdown__panel_southEast {
  bottom: auto;
  top: 100%;
  left: 0;
  border-top-left-radius: 0;
}