@ckeditor/ckeditor5-collaboration-core/dist/index.css

Base utilities used by CKEditor 5 collaboration features to support multiple users working together in a rich text editor.

/**
 * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
 */
:root {
  --ck-user-colors--0: #6d78e8;
  --ck-user-colors--0-alpha: #6d78e826;
  --ck-user-colors--1: #007a6c;
  --ck-user-colors--1-alpha: #007a6c26;
  --ck-user-colors--2: #ba4545;
  --ck-user-colors--2-alpha: #ba454526;
  --ck-user-colors--3: #5635b1;
  --ck-user-colors--3-alpha: #5635b126;
  --ck-user-colors--4: #548a2e;
  --ck-user-colors--4-alpha: #548a2e26;
  --ck-user-colors--5: #c3185d;
  --ck-user-colors--5-alpha: #c3185d26;
  --ck-user-colors--6: #ea4343;
  --ck-user-colors--6-alpha: #ea434326;
  --ck-user-colors--7: #0bc3d0;
  --ck-user-colors--7-alpha: #0bc3d026;
  --ck-user-dot-size: 6px;
}

.ck [class^="ck-user__color--"], .ck [class*=" ck-user__color--"] {
  color: var(--ck-user-color, var(--ck-user-colors--0));
}

.ck [class^="ck-user__bg-color--"], .ck [class*=" ck-user__bg-color--"] {
  background-color: var(--ck-user-color, var(--ck-user-colors--0));
}

.ck [class^="ck-user__selection--"], .ck [class*=" ck-user__selection--"] {
  background-color: var(--ck-user-color-alpha, var(--ck-user-colors--0-alpha));
}

:is(.ck [class^="ck-user__selection--"], .ck [class*=" ck-user__selection--"]).ck-widget {
  border: 3px solid var(--ck-user-color, var(--ck-user-colors--0));
  background-color: #0000;
}

:is(:is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]), :is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]) .ck-user__marker-tooltip, :is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]) .ck-user__marker-dot), :is(:is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]), :is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]) .ck-user__marker-tooltip, :is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]) .ck-user__marker-dot)::selection {
  background-color: var(--ck-user-color, var(--ck-user-colors--0));
}

:is(.ck [class^="ck-user__marker--"], .ck [class*=" ck-user__marker--"]) .ck-user__marker-line {
  border: 1px solid var(--ck-user-color, var(--ck-user-colors--0));
}

:root {
  --ck-user-avatar-size: 40px;
  --ck-user-avatar-background: #3670ab;
  --ck-user-avatar-color: #fff;
  --ck-user-me-border-color: #fff;
}

.ck.ck-user {
  background-color: var(--ck-user-avatar-background);
  box-sizing: border-box;
  height: var(--ck-user-avatar-size);
  width: var(--ck-user-avatar-size);
  min-width: var(--ck-user-avatar-size);
  min-height: var(--ck-user-avatar-size);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  margin: 2px;
  line-height: 100%;
  display: flex;
  position: relative;
}

.ck.ck-user.ck-user_me {
  border: 2px solid var(--ck-user-me-border-color);
  outline: 2px solid var(--ck-user-avatar-background);
}

.ck.ck-user__name {
  color: var(--ck-user-avatar-color);
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.ck.ck-user__name.ck-user__name--hidden {
  display: none;
}

.ck.ck-user__img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--ck-user-avatar-background);
  border: none;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: none;
}

.ck.ck-user__img.ck-user__anonymous {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFF%22%20fill-rule%3D%22nonzero%22%20d%3D%22M9.8%2020H2c0-5.7%205-5.7%206-7l.2-.8c-1.6-.8-2.7-2.7-2.7-5%200-2.8%202-5.2%204.3-5.2S14%204.4%2014%207.3c0%202.2-1%204-2.6%205l.2.6c1.2%201.3%206%201.4%206%207H9.8z%22%2F%3E%0A%3C%2Fsvg%3E");
  display: block;
}

.ck.ck-user__img.ck-user__anonymous + .ck-user__name {
  display: none;
}

.ck.ck-user__img.ck-user__avatar {
  background-color: #fff;
  display: block;
}

.ck.ck-user__img.ck-user__img--hidden {
  display: none;
}

.ck.ck-user__notification {
  background: var(--ck-color-base-background);
  border: 2px solid var(--ck-color-base-background);
  box-sizing: content-box;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 15px;
  height: 15px;
  display: flex;
  position: absolute;
  top: -8px;
  right: -7px;
  overflow: hidden;
  transform: translateZ(0);
}

.ck.ck-user__notification .ck-user__icon {
  color: var(--ck-color-annotation-info);
  background: var(--ck-color-base-background);
  width: 19px;
  min-width: 19px;
  max-width: 19px;
  height: 19px;
  min-height: 19px;
  max-height: 19px;
}

.ck.ck-button.ck-confirm-view-submit {
  color: var(--ck-color-button-save);
}

.ck.ck-button.ck-confirm-view-cancel {
  color: var(--ck-color-button-cancel);
}

.ck .ck-confirm-view-active {
  transition: all .3s linear;
  transform: translate3d(-100%, 0, 0);
}

.ck .ck-confirm-view {
  font-size: var(--ck-font-size-base);
  background-color: var(--ck-color-light-red);
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 100%;
}

.ck .ck-confirm-view .ck-confirm-view-inner {
  padding-top: var(--ck-spacing-standard);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  max-height: 400px;
  display: flex;
}

.ck .ck-confirm-view p {
  margin: 0;
  font-weight: bold;
}

:root {
  --ck-color-comment-box-border: #f2de02;
  --ck-color-suggestion-box-deletion-border: #d85a79;
  --ck-color-suggestion-box-insertion-border: #5ad86b;
  --ck-color-suggestion-box-format-border: #5ac1d8;
}

.ck .ck-suggestion {
  border-top-left-radius: var(--ck-border-radius);
}

.ck .ck-suggestion:focus {
  background: var(--ck-color-button-default-hover-background);
  outline: none;
}

.ck .ck-annotation {
  border-left: 3px solid #0000;
}

.ck .ck-suggestion--disabled-comments .ck-annotation {
  min-height: 80px;
}

.ck .ck-comment, .ck .ck-thread__comment-count, .ck .ck-comment__input-container, .ck .ck-thread__header {
  border-left: 3px solid var(--ck-color-comment-box-border);
}

.ck .ck-suggestion-insertion .ck-suggestion {
  border-left-color: var(--ck-color-suggestion-box-insertion-border);
}

.ck .ck-suggestion-deletion .ck-suggestion {
  border-left-color: var(--ck-color-suggestion-box-deletion-border);
}

.ck .ck-suggestion-replace .ck-suggestion {
  border-left-color: var(--ck-color-suggestion-box-insertion-border);
}

.ck .ck-suggestion-format .ck-suggestion {
  border-left-color: var(--ck-color-suggestion-box-format-border);
}

.ck .ck-suggestion-wrapper {
  border-radius: var(--ck-rounded-corners-radius);
  overflow: hidden;
}

.ck .ck-suggestion-wrapper:focus {
  outline: var(--ck-focus-ring);
  box-shadow: 0 0 0 4px var(--ck-color-focus-outer-shadow);
}

.ck-balloon-panel:has(.ck-suggestion-wrapper:focus) {
  border: var(--ck-focus-ring);
  box-shadow: var(--ck-drop-shadow), var(--ck-focus-outer-shadow), 0 0;
  outline: none;
}

.ck .ck-suggestion-type {
  font-weight: bold;
}

.ck .ck-suggestion-color {
  vertical-align: text-bottom;
  border-radius: 14px;
  width: 14px;
  height: 14px;
  margin: 0 5px;
  display: inline-block;
  box-shadow: 0 0 0 1px #454545;
}

.ck .ck-suggestion-insertion .ck-comment, .ck .ck-suggestion-insertion .ck-thread__comment-count, .ck .ck-suggestion-insertion .ck-comment__input-container, .ck .ck-suggestion-replace .ck-comment, .ck .ck-suggestion-replace .ck-thread__comment-count, .ck .ck-suggestion-replace .ck-comment__input-container {
  border-left-color: var(--ck-color-suggestion-box-insertion-border);
}

.ck .ck-suggestion-deletion .ck-comment, .ck .ck-suggestion-deletion .ck-thread__comment-count, .ck .ck-suggestion-deletion .ck-comment__input-container {
  border-left-color: var(--ck-color-suggestion-box-deletion-border);
}

.ck .ck-suggestion-format .ck-comment, .ck .ck-suggestion-format .ck-thread__comment-count, .ck .ck-suggestion-format .ck-comment__input-container {
  border-left-color: var(--ck-color-suggestion-box-format-border);
}

:root {
  --ck-color-suggestion-marker-insertion-border: #1eae3159;
  --ck-color-suggestion-marker-insertion-border-active: #126d1f80;
  --ck-color-suggestion-marker-insertion-background: #66e57759;
  --ck-color-suggestion-marker-insertion-background-active: #25da3d80;
  --ck-color-suggestion-marker-deletion-border: #ae1e4259;
  --ck-color-suggestion-marker-deletion-border-active: #6d122980;
  --ck-color-suggestion-marker-deletion-background: #e5668659;
  --ck-color-suggestion-marker-deletion-background-active: #da255280;
  --ck-color-suggestion-marker-deletion-stroke: #570f2180;
  --ck-color-suggestion-marker-format-border: #99d7e6;
  --ck-color-suggestion-marker-format-border-active: #5cc0d6;
  --ck-color-suggestion-widget-insertion-background: #66e5770d;
  --ck-color-suggestion-widget-insertion-background-active: #25da3d12;
  --ck-color-suggestion-widget-deletion-background: #e566860d;
  --ck-color-suggestion-widget-deletion-background-active: #c4214a12;
  --ck-color-suggestion-widget-format-background: #0aa0c217;
  --ck-color-suggestion-widget-format-background-active: #0aa0c229;
}

.ck-content .ck-suggestion-marker-insertion {
  border-top: 3px solid var(--ck-color-suggestion-marker-insertion-border);
  border-bottom: 3px solid var(--ck-color-suggestion-marker-insertion-border);
  background: var(--ck-color-suggestion-marker-insertion-background);
}

.ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active {
  border-color: var(--ck-color-suggestion-marker-insertion-border-active);
  background: var(--ck-color-suggestion-marker-insertion-background-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget {
  border: 3px solid var(--ck-color-suggestion-marker-insertion-border);
  background: none;
  text-decoration: none;
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.ck-suggestion-marker--active {
  border-color: var(--ck-color-suggestion-marker-insertion-border-active);
}

.ck-content .ck-suggestion-marker-deletion {
  border-top: 3px solid var(--ck-color-suggestion-marker-deletion-border);
  border-bottom: 3px solid var(--ck-color-suggestion-marker-deletion-border);
  text-decoration: line-through;
  text-decoration-color: var(--ck-color-suggestion-marker-deletion-stroke);
  background: var(--ck-color-suggestion-marker-deletion-background);
  text-decoration-thickness: 3px;
}

.ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active {
  border-color: var(--ck-color-suggestion-marker-deletion-border-active);
  background: var(--ck-color-suggestion-marker-deletion-background-active);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget {
  border: 3px solid var(--ck-color-suggestion-marker-deletion-border);
  background: none;
  text-decoration: none;
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.ck-suggestion-marker--active {
  border-color: var(--ck-color-suggestion-marker-deletion-border-active);
}

.ck-content .ck-suggestion-marker-merge:after {
  border-top: 3px solid var(--ck-color-suggestion-marker-deletion-border);
  border-bottom: 3px solid var(--ck-color-suggestion-marker-deletion-border);
  text-decoration: line-through;
  text-decoration-color: var(--ck-color-suggestion-marker-deletion-stroke);
  background: var(--ck-color-suggestion-marker-deletion-background);
  color: var(--ck-color-suggestion-marker-deletion-stroke);
  content: "¶";
}

.ck-content .ck-suggestion-marker-merge.ck-suggestion-marker--active:after {
  border-color: var(--ck-color-suggestion-marker-deletion-border-active);
  background: var(--ck-color-suggestion-marker-deletion-background-active);
}

.ck-content .ck-suggestion-marker-split:after {
  border-top: 3px solid var(--ck-color-suggestion-marker-insertion-border);
  border-bottom: 3px solid var(--ck-color-suggestion-marker-insertion-border);
  background: var(--ck-color-suggestion-marker-insertion-background);
  color: var(--ck-color-suggestion-marker-insertion-border);
  content: "¶";
}

.ck-content .ck-suggestion-marker-split.ck-suggestion-marker--active:after {
  border-color: var(--ck-color-suggestion-marker-insertion-border-active);
  background: var(--ck-color-suggestion-marker-insertion-background-active);
}

.ck-content .ck-suggestion-marker-formatInline {
  border-top: 3px solid var(--ck-color-suggestion-marker-format-border);
  border-bottom: 3px solid var(--ck-color-suggestion-marker-format-border);
}

.ck-content .ck-suggestion-marker-formatInline.ck-suggestion-marker--active {
  border-color: var(--ck-color-suggestion-marker-format-border-active);
}

.ck-content .ck-suggestion-marker-formatInline.ck-widget {
  border: 3px solid var(--ck-color-suggestion-marker-format-border);
  background: none;
}

.ck-content .ck-suggestion-marker-formatInline.ck-widget.ck-suggestion-marker--active {
  border-color: var(--ck-color-suggestion-marker-format-border-active);
}

.ck-content .ck-suggestion-marker-formatBlock {
  box-shadow: -7px 0 0 0 var(--ck-color-base-background), -10px 0 0 0 var(--ck-color-suggestion-marker-format-border);
  background: none;
  border: 0;
}

.ck-content .ck-suggestion-marker-formatBlock.ck-suggestion-marker--active {
  box-shadow: -5px 0 0 0 var(--ck-color-base-background), -8px 0 0 0 var(--ck-color-suggestion-marker-format-border-active);
}

.ck-content ul .ck-suggestion-marker-formatBlock, .ck-content ol .ck-suggestion-marker-formatBlock {
  box-shadow: -2px 0 0 0 var(--ck-color-base-background), -5px 0 0 0 var(--ck-color-suggestion-marker-format-border);
}

:is(.ck-content ul .ck-suggestion-marker-formatBlock, .ck-content ol .ck-suggestion-marker-formatBlock).ck-suggestion-marker--active {
  box-shadow: -2px 0 0 0 var(--ck-color-base-background), -5px 0 0 0 var(--ck-color-suggestion-marker-format-border-active);
}

.ck.ck-aria-description {
  display: none;
}

.ck-content .ck-widget.image > figcaption.ck-suggestion-marker-deletion {
  background-color: var(--ck-color-suggestion-widget-deletion-background);
  border: none;
}

.ck-content .ck-widget.image > figcaption.ck-suggestion-marker-deletion.ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-widget-deletion-background-active);
}

.ck-content .ck-widget.image > figcaption.ck-suggestion-marker-insertion {
  background-color: var(--ck-color-suggestion-widget-insertion-background);
  border: none;
}

.ck-content .ck-widget.image > figcaption.ck-suggestion-marker-insertion.ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-widget-insertion-background-active);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.image {
  background-color: var(--ck-color-suggestion-widget-deletion-background);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.image img {
  opacity: .6;
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.image figcaption {
  background-color: var(--ck-color-suggestion-widget-deletion-background);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.image.ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-widget-deletion-background-active);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.image.ck-suggestion-marker--active figcaption {
  background-color: var(--ck-color-suggestion-widget-deletion-background-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.image {
  background-color: var(--ck-color-suggestion-widget-insertion-background);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.image figcaption {
  background-color: var(--ck-color-suggestion-widget-insertion-background);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.image.ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-widget-insertion-background-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.image.ck-suggestion-marker--active figcaption {
  background-color: var(--ck-color-suggestion-widget-insertion-background-active);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.ck-horizontal-line {
  background-color: var(--ck-color-suggestion-widget-deletion-background);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.ck-horizontal-line.ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-widget-deletion-background-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.ck-horizontal-line {
  background-color: var(--ck-color-suggestion-widget-insertion-background);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.ck-horizontal-line.ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-widget-insertion-background-active);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.media {
  background-color: var(--ck-color-suggestion-widget-deletion-background);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.media .ck-media__wrapper {
  opacity: .6;
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.media.ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-widget-deletion-background-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.media {
  background-color: var(--ck-color-suggestion-widget-insertion-background);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.media.ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-widget-insertion-background-active);
}

.ck-content .ck-suggestion-marker.ck-widget.ck-merge-field, .ck-content .ck-comment-marker.ck-widget.ck-merge-field {
  border-width: 2px medium;
  border-left-style: none;
  border-left-color: currentColor;
  border-right-style: none;
  border-right-color: currentColor;
  padding-top: 0;
  padding-bottom: 0;
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.ck-merge-field {
  border-top-color: var(--ck-color-suggestion-marker-deletion-border);
  border-bottom-color: var(--ck-color-suggestion-marker-deletion-border);
  background: var(--ck-color-suggestion-marker-deletion-background);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.ck-merge-field :not(.ck-merge-field__affix), .ck-content .ck-suggestion-marker-deletion.ck-widget.ck-merge-field.ck-merge-field_with-value, .ck-content .ck-suggestion-marker-deletion.ck-widget.ck-merge-field.ck-merge-field_with-warning {
  text-decoration: line-through;
  text-decoration-color: var(--ck-color-suggestion-marker-deletion-stroke);
  text-decoration-thickness: 3px;
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.ck-merge-field.ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-marker-deletion-background-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.ck-merge-field {
  background-color: var(--ck-color-suggestion-marker-insertion-background);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.ck-merge-field.ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-marker-insertion-background-active);
}

.ck-content .ck-comment-marker.ck-widget.ck-merge-field {
  background: var(--ck-color-comment-marker);
}

.ck-content .ck-comment-marker.ck-widget.ck-merge-field.ck-comment-marker--active {
  background: var(--ck-color-comment-marker-active);
}

.ck-content span.ck-comment-marker:has( + .ck-comment-marker.ck-widget.ck-merge-field), .ck-content span.ck-suggestion-marker:has( + .ck-suggestion-marker.ck-widget.ck-merge-field) {
  margin-right: -1px;
  padding-right: 1px;
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.page-break {
  background-color: var(--ck-color-suggestion-widget-deletion-background);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.page-break.ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-widget-deletion-background-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.page-break {
  background-color: var(--ck-color-suggestion-widget-insertion-background);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.page-break.ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-widget-insertion-background-active);
}

:root {
  --ck-color-suggestion-widget-th-insertion-background: #66e5771f;
  --ck-color-suggestion-widget-th-insertion-background-active: #25da3d24;
  --ck-color-suggestion-widget-th-deletion-background: #e5668624;
  --ck-color-suggestion-widget-th-deletion-background-active: #c4214a29;
}

.ck-content figure.table .ck-suggestion-marker-formatBlock {
  box-shadow: -3px 0 0 0 var(--ck-color-suggestion-marker-format-border);
}

.ck-content figure.table .ck-suggestion-marker-formatBlock.ck-suggestion-marker--active {
  box-shadow: -3px 0 0 0 var(--ck-color-suggestion-marker-format-border-active);
}

:is(.ck-content .ck-widget.table > figcaption, .ck-content .ck-widget.table > table > caption).ck-suggestion-marker-deletion {
  background-color: var(--ck-color-suggestion-widget-deletion-background);
  border: none;
}

:is(.ck-content .ck-widget.table > figcaption, .ck-content .ck-widget.table > table > caption).ck-suggestion-marker-deletion.ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-widget-deletion-background-active);
}

:is(.ck-content .ck-widget.table > figcaption, .ck-content .ck-widget.table > table > caption).ck-suggestion-marker-insertion {
  background-color: var(--ck-color-suggestion-widget-insertion-background);
  border: none;
}

:is(.ck-content .ck-widget.table > figcaption, .ck-content .ck-widget.table > table > caption).ck-suggestion-marker-insertion.ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-widget-insertion-background-active);
}

.ck-content .ck-suggestion-marker-insertion.table {
  border-color: var(--ck-color-suggestion-marker-insertion-border);
}

.ck-content .ck-suggestion-marker-insertion.table > figcaption, .ck-content .ck-suggestion-marker-insertion.table > table > caption {
  background-color: var(--ck-color-suggestion-widget-insertion-background);
}

.ck-content .ck-suggestion-marker-insertion.table > table > tbody > tr > th, .ck-content .ck-suggestion-marker-insertion.table > table > thead > tr > th {
  background-color: var(--ck-color-suggestion-widget-th-insertion-background);
  border-color: var(--ck-color-suggestion-marker-insertion-border);
}

.ck-content .ck-suggestion-marker-insertion.table > table > tbody > tr > td {
  background-color: var(--ck-color-suggestion-widget-insertion-background);
  border-color: var(--ck-color-suggestion-marker-insertion-border);
}

.ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active.table {
  border-color: var(--ck-color-suggestion-marker-insertion-border-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active.table > figcaption, .ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active.table > table > caption {
  background-color: var(--ck-color-suggestion-widget-insertion-background-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active.table > table > tbody > tr > th, .ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active.table > table > thead > tr > th {
  background-color: var(--ck-color-suggestion-widget-th-insertion-background-active);
  border-color: var(--ck-color-suggestion-marker-insertion-border-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-suggestion-marker--active.table > table > tbody > tr > td {
  background-color: var(--ck-color-suggestion-widget-insertion-background-active);
  border-color: var(--ck-color-suggestion-marker-insertion-border-active);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.table {
  border-color: var(--ck-color-suggestion-marker-deletion-border);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.table > figcaption, .ck-content .ck-suggestion-marker-deletion.ck-widget.table > table > caption {
  background-color: var(--ck-color-suggestion-widget-deletion-background);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.table > table > tbody > tr > th, .ck-content .ck-suggestion-marker-deletion.ck-widget.table > table > thead > tr > th {
  background-color: var(--ck-color-suggestion-widget-th-deletion-background);
  border-color: var(--ck-color-suggestion-marker-deletion-border);
  text-decoration: none;
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.table > table > tbody > tr > td {
  background-color: var(--ck-color-suggestion-widget-deletion-background);
  border-color: var(--ck-color-suggestion-marker-deletion-border);
  text-decoration: none;
}

.ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active.table {
  border-color: var(--ck-color-suggestion-marker-deletion-border-active);
}

.ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active.table > figcaption, .ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active.table > table > caption {
  background-color: var(--ck-color-suggestion-widget-deletion-background-active);
}

.ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active.table > table > tbody > tr > th, .ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active.table > table > thead > tr > th {
  background-color: var(--ck-color-suggestion-widget-th-deletion-background-active);
  border-color: var(--ck-color-suggestion-marker-deletion-border-active);
}

.ck-content .ck-suggestion-marker-deletion.ck-suggestion-marker--active.table > table > tbody > tr > td {
  background-color: var(--ck-color-suggestion-widget-deletion-background-active);
  border-color: var(--ck-color-suggestion-marker-deletion-border-active);
}

.ck-content .table th.ck-suggestion-marker-insertion {
  background-color: var(--ck-color-suggestion-widget-th-insertion-background);
}

.ck-content .table th.ck-suggestion-marker-insertion.ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-widget-th-insertion-background-active);
}

.ck-content .table th.ck-suggestion-marker-deletion {
  background-color: var(--ck-color-suggestion-widget-th-deletion-background);
  text-decoration: none;
}

.ck-content .table th.ck-suggestion-marker-deletion.ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-widget-th-deletion-background-active);
}

.ck-content .table td.ck-suggestion-marker-insertion {
  background-color: var(--ck-color-suggestion-widget-insertion-background);
}

.ck-content .table td.ck-suggestion-marker-insertion.ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-widget-insertion-background-active);
}

.ck-content .table td.ck-suggestion-marker-deletion {
  background-color: var(--ck-color-suggestion-widget-deletion-background);
  text-decoration: none;
}

.ck-content .table td.ck-suggestion-marker-deletion.ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-widget-deletion-background-active);
}

.ck-content .table th.ck-suggestion-marker-formatInline, .ck-content .table td.ck-suggestion-marker-formatInline, .ck-content .table th.ck-suggestion-marker-formatBlock, .ck-content .table td.ck-suggestion-marker-formatBlock {
  background-color: var(--ck-color-suggestion-widget-format-background);
  box-shadow: none;
}

:is(.ck-content .table th.ck-suggestion-marker-formatInline, .ck-content .table td.ck-suggestion-marker-formatInline, .ck-content .table th.ck-suggestion-marker-formatBlock, .ck-content .table td.ck-suggestion-marker-formatBlock).ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-widget-format-background-active);
  box-shadow: none;
}

.ck-content pre > code.ck-suggestion-marker-formatBlock {
  box-shadow: -7px 0 0 0 #ededed, -10px 0 0 0 var(--ck-color-suggestion-marker-format-border);
  display: block;
}

.ck-content pre > code.ck-suggestion-marker-formatBlock.ck-suggestion-marker--active {
  box-shadow: -5px 0 0 0 #ededed, -8px 0 0 0 var(--ck-color-suggestion-marker-format-border-active);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.footnotes-wrapper {
  background-color: var(--ck-color-suggestion-widget-deletion-background);
}

.ck-content .ck-suggestion-marker-deletion.ck-widget.footnotes-wrapper.ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-widget-deletion-background-active);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.footnotes-wrapper {
  background-color: var(--ck-color-suggestion-widget-insertion-background);
}

.ck-content .ck-suggestion-marker-insertion.ck-widget.footnotes-wrapper.ck-suggestion-marker--active {
  background-color: var(--ck-color-suggestion-widget-insertion-background-active);
}