@charset "UTF-8";
/* ---- Cross-editor content styles. --------------------------------------------------------------- */
.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. */
  min-height: 300px;
  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;
}

.ck-content h1.document-title {
  font-family: var(--ck-georgia-serif-font-stack);
  font-size: 50px;
  font-weight: bold;
  border: 0;
}

.ck-content h2.document-subtitle {
  font-family: var(--ck-georgia-serif-font-stack);
  font-size: 20px;
  font-weight: bold;
  color: #d1d1d1;
  letter-spacing: 10px;
}

.ck-content p.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;
}

.ck-content blockquote.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;
}

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

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

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

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

.ck-content span.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;
}

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

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

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

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

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

.ck-content pre.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;
}

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

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

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

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

.ck-content pre.stylish-code-bright code {
  color: #222;
}


/* ---- Customizations to the color grid palettes (font and background color) ------------------------------------------------------ */
.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%);
  }
  
  /* ---- Basic CSS reset ------------------------------------------------------ */
  *, ::after, ::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
  }
  
  body,
  html {
    margin: 0;
    padding: 0;
  }
  
  .ck.ck-content.ck-editor__editable_inline > :first-child {
    margin-top: 0;
  }
  
  /* ---- Styles of the demo page ------------------------------------------------------ */
  .editor-wrapper {
    max-width: 66rem;
    margin: 0 auto 2rem auto;
  }
  
  .header-wrapper {
    padding: 1rem 2rem;
  }
  
  /* ---- Styles specific to the feature rich demo ------------------------------------------------------ */
  .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;
  }