:root {
--ck-sample-base-spacing:1.2em;
--ck-sample-color-white:#fff;
--ck-sample-color-green:#279863;
--ck-sample-color-blue:#1a9aef;
--ck-sample-container-width:1285px;
--ck-sample-sidebar-width:350px;
--ck-sample-editor-min-height:256px;
--ck-sample-editor-z-index:10
}

.editor__editable,/* Classic build. */
main .ck-editor[role='application'] .ck.ck-content,/* Decoupled document build. */
.ck.editor__editable[role='textbox'],.ck.ck-editor__editable[role='textbox'],/* Inline & Balloon build. */
.ck.editor[role='textbox'] {
width:100%;
background:#fff;
font-size:1em;
line-height:1.6em;
height:var(--ck-sample-editor-min-height);
padding:.5em 1em;
border-bottom-right-radius:8px;
border-bottom-left-radius: 8px;    
}

main .ck-editor[role='application'] {
overflow-y:auto;
overflow-x:hidden
}

.ck.ck-editor__editable {
background:#fff;
border:1px solid hsl(0,0%,70%);
width:100%;
position:relative;
z-index:var(--ck-sample-editor-z-index)
}

.editor-container {
display:flex;
flex-direction:row;
flex-wrap:nowrap;
position:relative;
width:100%;
justify-content:center;
background:#F9F9F9;
overflow:hidden
}

body[data-editor='DecoupledDocumentEditor'] .document-editor__toolbar {
width:100%
}

body[data-editor='DecoupledDocumentEditor'] .collaboration-demo__editable,body[data-editor='DecoupledDocumentEditor'] .row-editor .editor {
width:calc(21cm + 2px);
min-height:calc(29.7cm + 2px);
height:fit-content;
padding:2cm 1.2cm;
margin:2.5rem;
border:1px hsl(0,0%,82.7%) solid;
background-color:var(--ck-sample-color-white);
box-shadow:0 0 5px hsla(0,0%,0%,.1);
box-sizing:border-box
}

body[data-editor='DecoupledDocumentEditor'] .row-editor {
display:flex;
position:relative;
justify-content:center;
overflow-y:auto;
background-color:#f2f2f2;
border:1px solid hsl(0,0%,77%);
max-height:700px
}

body[data-editor='DecoupledDocumentEditor'] .sidebar {
background:transparent;
border:0;
box-shadow:none
}

.sidebar {
padding:0 15px;
position:relative;
min-width:var(--ck-sample-sidebar-width);
max-width:var(--ck-sample-sidebar-width);
font-size:20px;
border:1px solid hsl(0,0%,77%);
background:hsl(0,0%,98%);
border-left:0;
overflow:hidden;
min-height:100%;
flex-grow:1
}

.sidebar .ck-content[role='textbox'],.ck.ck-annotation-wrapper .ck-content[role='textbox'] {
min-height:unset;
width:unset;
padding:0;
background:transparent
}

.sidebar.narrow {
min-width:60px;
flex-grow:0
}

.sidebar.hidden {
display:none!important
}

#sidebar-display-toggle {
position:absolute;
z-index:1;
width:30px;
height:30px;
text-align:center;
left:15px;
top:30px;
border:0;
padding:0;
color:hsl(0,0%,50%);
transition:250ms ease color;
background-color:transparent
}

#sidebar-display-toggle:hover {
color:hsl(0,0%,30%);
cursor:pointer
}

#sidebar-display-toggle:focus,#sidebar-display-toggle:active {
outline:none;
border:1px solid #a9d29d
}

#sidebar-display-toggle svg {
fill:currentColor
}

.row-presence {
width:100%;
border:1px solid hsl(0,0%,77%);
border-bottom:0;
background:hsl(0,0%,98%);
padding:var(--ck-spacing-small);
box-shadow:0 1px 0 0 hsl(0,0%,77%);
z-index:20
}

.ck.ck-presence-list {
flex:1;
padding:1.25rem .75rem
}

.presence .ck.ck-presence-list__counter {
order:2;
margin-left:var(--ck-spacing-large)
}

.collaboration-demo__row {
display:flex;
position:relative;
justify-content:center;
overflow-y:auto;
background-color:#f2f2f2;
border:1px solid hsl(0,0%,77%)
}

body[data-editor='InlineEditor'] .collaboration-demo__row {
border:0
}

.collaboration-demo__container {
max-width:var(--ck-sample-container-width);
margin:0 auto;
padding:1.25rem
}

.presence,.collaboration-demo__row {
transition:.2s opacity
}

.collaboration-demo__topbar {
background:#fff;
border:1px solid var(--ck-color-toolbar-border);
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:0;
border-radius:4px 4px 0 0
}

.collaboration-demo__topbar .btn {
margin-right:1em;
outline-offset:2px;
outline-width:2px;
background-color:var(--ck-sample-color-blue)
}

.collaboration-demo__topbar .btn:focus,.collaboration-demo__topbar .btn:hover {
border-color:var(--ck-sample-color-blue)
}

.collaboration-demo__share {
display:flex;
align-items:center;
padding:1.25rem .75rem
}

.collaboration-demo__share-description p {
margin:0;
font-weight:bold;
font-size:.9em
}

.collaboration-demo__share input {
height:auto;
font-size:.9em;
min-width:220px;
margin:0 10px;
border-radius:4px;
border:1px solid var(--ck-color-toolbar-border)
}

.collaboration-demo__share button,.collaboration-demo__share input {
height:40px;
padding:5px 10px
}

.collaboration-demo__share button {
position:relative
}

.collaboration-demo__share button:focus {
outline:none
}

.collaboration-demo__share button[data-tooltip]::before,.collaboration-demo__share button[data-tooltip]::after {
position:absolute;
visibility:hidden;
opacity:0;
pointer-events:none;
transition:all .15s cubic-bezier(.5,1,.25,1);
z-index:1
}

.collaboration-demo__share button[data-tooltip]::before {
content:attr(data-tooltip);
padding:5px 15px;
border-radius:3px;
background:#111;
color:#fff;
text-align:center;
font-size:11px;
top:100%;
left:50%;
margin-top:5px;
transform:translateX(-50%)
}

.collaboration-demo__share button[data-tooltip]::after {
content:'';
border:5px solid transparent;
width:0;
font-size:0;
line-height:0;
top:100%;
left:50%;
transform:translateX(-50%);
border-bottom:5px solid #111;
border-top:none
}

.collaboration-demo__share button[data-tooltip]:hover:before,.collaboration-demo__share button[data-tooltip]:hover:after {
visibility:visible;
opacity:1
}

.collaboration-demo--ready {
overflow:visible;
height:auto
}

.collaboration-demo--ready .presence,.collaboration-demo--ready .collaboration-demo__row {
opacity:1
}

.ck.ck-pagination-view-line {
z-index:var(--ck-sample-editor-z-index)
}

.revision-viewer-container {
display:none
}

.revision-viewer-sidebar {
position:relative;
min-width:310px;
overflow:hidden;
background:var(--ck-color-toolbar-background);
border:1px solid var(--ck-color-toolbar-border);
margin-left:-1px
}

body[data-revision-history='true'] .ck.ck-pagination-view-line::after {
transform:translateX(-100%)!important;
left:-1px!important;
right:unset!important
}

.centered {
overflow:hidden;
max-width:var(--ck-sample-container-width);
margin:0 auto
}

.ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
border:var(--ck-focus-ring);
box-shadow:var(--ck-inner-shadow),0 0;
outline:none;
border-color:#bd6f34!important;
box-shadow: none !important;
}

.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar, .ck.ck-editor__top .ck-sticky-panel .ck-toolbar.ck-rounded-corners {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

@media screen and ( max-width: 800px ) {
    :root {
    --ck-sample-base-spacing:1em
    }
}