:root{
    --ck-sample-base-spacing: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:400px;
    --ck-sample-editor-z-index:10
}
.ck.ck-editor__editable[role=textbox],.ck.editor[role=textbox],.ck.editor__editable[role=textbox],.editor__editable,main .ck-editor[role=application] .ck.ck-content{
    width:100%;
    background:#fff;
    font-size:1em;
    line-height:1.6em;
    min-height:var(--ck-sample-editor-min-height);
    padding:1.5em 2em
}
.ck.ck-editor__editable{
    background:#fff;
    border:1px solid #b2b2b2;
    width:100%
}
.ck.ck-editor{
    width:100%;
    overflow-x:hidden
}
.ck.ck-editor__editable{
    position:relative;
    z-index:var(--ck-sample-editor-z-index)
}
body[data-editor=DecoupledDocumentEditor] .document-editor__toolbar{
    width:100%
}
body[data-editor=DecoupledDocumentEditor] .collaboration-demo__editable,body[data-editor=DecoupledDocumentEditor] .row-editor .editor{
    width:18.5cm;
    height:100%;
    min-height:26.25cm;
    padding:1.75cm 1.5cm;
    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)
}
body[data-editor=DecoupledDocumentEditor] .row-editor{
    display:flex;
    position:relative;
    justify-content:center;
    overflow-y:auto;
    background-color:#f2f2f2;
    border:1px solid #c4c4c4
}
body[data-editor=DecoupledDocumentEditor] .sidebar{
    background:0 0;
    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 #c4c4c4;
    background:#f9f9f9;
    border-left:0;
    overflow:hidden;
    min-height:100%;
    flex-grow:1
}
.ck.ck-annotation-wrapper .ck-content[role=textbox],.sidebar .ck-content[role=textbox]{
    min-height:unset;
    width:unset;
    padding:0;
    background:0 0
}
.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:#7f7f7f;
    transition:250ms ease color;
    background-color:transparent
}
#sidebar-display-toggle:hover{
    color:#4c4c4c;
    cursor:pointer
}
#sidebar-display-toggle:active,#sidebar-display-toggle:focus{
    outline:0;
    border:1px solid #a9d29d
}
#sidebar-display-toggle svg{
    fill:currentColor
}
.row-presence{
    width:100%;
    border:1px solid #c4c4c4;
    border-bottom:0;
    background:#f9f9f9;
    padding:var(--ck-spacing-small);
    box-shadow:0 1px 0 0 #c4c4c4;
    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 #c4c4c4
}
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
}
.collaboration-demo__row,.presence{
    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:700;
    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:0
}
.collaboration-demo__share button[data-tooltip]::after,.collaboration-demo__share button[data-tooltip]::before{
    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:after,.collaboration-demo__share button[data-tooltip]:hover:before{
    visibility:visible;
    opacity:1
}
.collaboration-demo--ready{
    overflow:visible;
    height:auto
}
.collaboration-demo--ready .collaboration-demo__row,.collaboration-demo--ready .presence{
    opacity:1
}
.ck.ck-pagination-view-line{
    z-index:var(--ck-sample-editor-z-index)
}
body,html{
    padding:0;
    margin:0;
    font-family:sans-serif,Arial,Verdana,"Trebuchet MS","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    font-size:16px;
    line-height:1.5
}
body{
    height:100%;
    color:#2d3a4a
}
body *{
    box-sizing:border-box
}
a{
    color:#38a5ee
}
header .centered{
    display:flex;
    flex-flow:row nowrap;
    justify-content:space-between;
    align-items:center;
    min-height:8em
}
header h1 a{
    font-size:20px;
    display:flex;
    align-items:center;
    color:#2d3a4a;
    text-decoration:none
}
header h1 img{
    display:block;
    height:64px
}
header nav ul{
    margin:0;
    padding:0;
    list-style-type:none
}
header nav ul li{
    display:inline-block
}
header nav ul li+li{
    margin-left:1em
}
header nav ul li a{
    font-weight:700;
    text-decoration:none;
    color:#2d3a4a
}
header nav ul li a:hover{
    text-decoration:underline
}
main .message{
    padding:0 0 var(--ck-sample-base-spacing);
    background:var(--ck-sample-color-green);
    color:var(--ck-sample-color-white)
}
main .message::after{
    content:"";
    z-index:-1;
    display:block;
    height:10em;
    width:100%;
    background:var(--ck-sample-color-green);
    position:absolute;
    left:0
}
main .message h2{
    position:relative;
    padding-top:1em;
    font-size:2em
}
.centered{
    max-width:var(--ck-sample-container-width);
    margin:0 auto;
    padding:0 var(--ck-sample-base-spacing)
}
.row{
    display:flex;
    position:relative
}
.btn{
    cursor:pointer;
    padding:8px 16px;
    font-size:1rem;
    user-select:none;
    border-radius:4px;
    transition:color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,opacity .2s ease-in-out;
    background-color:var(--ck-sample-color-button-blue);
    border-color:var(--ck-sample-color-button-blue);
    color:var(--ck-sample-color-white);
    display:inline-block
}
.btn--tiny{
    padding:6px 12px;
    font-size:.8rem
}
footer{
    font-size:.8em;
    text-align:center;
    color:rgba(0,0,0,.4)
}
@media screen and (max-width:800px){
    :root{
        --ck-sample-base-spacing:1em
    }
    header h1{
        width:100%
    }
    header h1 img{
        height:40px
    }
    header nav ul{
        text-align:right
    }
    main .message h2{
        font-size:1.5em
    }
}