.ck-content .image > figcaption, .ck-content .table > figcaption {
    word-break: break-word;
    padding: .6em;
    outline-offset: -1px;
    font-size: .75em
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%
}

@media (min-width:768px) {
    html {
        font-size: 16px
    }
}

body {
    margin-bottom: 60px;
    font-family: sans-serif
}

:root {
    --ck-color-image-caption-background: hsl(0, 0%, 97%);
    --ck-color-image-caption-text: hsl(0, 0%, 20%);
    --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
    --ck-color-mention-text: hsl(341, 100%, 30%);
    --ck-color-table-caption-background: hsl(0, 0%, 97%);
    --ck-color-table-caption-text: hsl(0, 0%, 20%);
    --ck-highlight-marker-blue: hsl(201, 97%, 72%);
    --ck-highlight-marker-green: hsl(120, 93%, 68%);
    --ck-highlight-marker-pink: hsl(345, 96%, 73%);
    --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
    --ck-highlight-pen-green: hsl(112, 100%, 27%);
    --ck-highlight-pen-red: hsl(0, 85%, 49%);
    --ck-image-style-spacing: 1.5em;
    --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
    --ck-todo-list-checkmark-size: 16px
}

.ck-content blockquote {
    overflow: hidden;
    padding-right: 1.5em;
    padding-left: 1.5em;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    border-left: 5px solid #ccc
}

.ck-content[dir=rtl] blockquote {
    border-left: 0;
    border-right: 5px solid #ccc
}

.ck-content code {
    background-color: hsla(0,0%,78%,.3);
    padding: .15em;
    border-radius: 2px
}

.ck-content .text-tiny {
    font-size: .7em
}

.ck-content .text-small {
    font-size: .85em
}

.ck-content .text-big {
    font-size: 1.4em
}

.ck-content .text-huge {
    font-size: 1.8em
}

.ck-content .image > figcaption {
    display: table-caption;
    caption-side: bottom;
    color: var(--ck-color-image-caption-text);
    background-color: var(--ck-color-image-caption-background)
}

.ck-content .image {
    display: table;
    clear: both;
    text-align: center;
    margin: .9em auto;
    min-width: 50px
}

    .ck-content .image img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
        min-width: 100%
    }

.ck-content .image-inline {
    display: inline-flex;
    max-width: 100%;
    align-items: flex-start
}

    .ck-content .image-inline picture {
        display: flex
    }

    .ck-content .image-inline img, .ck-content .image-inline picture {
        flex-grow: 1;
        flex-shrink: 1;
        max-width: 100%
    }

.ck-content .image.image_resized {
    max-width: 100%;
    display: block;
    box-sizing: border-box
}

    .ck-content .image.image_resized img {
        width: 100%
    }

    .ck-content .image.image_resized > figcaption {
        display: block
    }

.ck-content .image-style-block-align-left, .ck-content .image-style-block-align-right {
    max-width: calc(100% - var(--ck-image-style-spacing))
}

.ck-content .image-style-align-left, .ck-content .image-style-align-right {
    clear: none
}

.ck-content .image-style-side {
    float: right;
    margin-left: var(--ck-image-style-spacing);
    max-width: 50%
}

.ck-content .image-style-align-left {
    float: left;
    margin-right: var(--ck-image-style-spacing)
}

.ck-content .image-style-align-center {
    margin-left: auto;
    margin-right: auto
}

.ck-content .image-style-align-right {
    float: right;
    margin-left: var(--ck-image-style-spacing)
}

.ck-content .image-style-block-align-right {
    margin-right: 0;
    margin-left: auto
}

.ck-content .image-style-block-align-left {
    margin-left: 0;
    margin-right: auto
}

.ck-content p + .image-style-align-left, .ck-content p + .image-style-align-right, .ck-content p + .image-style-side {
    margin-top: 0
}

.ck-content .image-inline.image-style-align-left, .ck-content .image-inline.image-style-align-right {
    margin-top: var(--ck-inline-image-style-spacing);
    margin-bottom: var(--ck-inline-image-style-spacing)
}

.ck-content .image-inline.image-style-align-left {
    margin-right: var(--ck-inline-image-style-spacing)
}

.ck-content .image-inline.image-style-align-right {
    margin-left: var(--ck-inline-image-style-spacing)
}

.ck-content .todo-list {
    list-style: none
}

    .ck-content .todo-list li {
        margin-bottom: 5px
    }

        .ck-content .todo-list li .todo-list {
            margin-top: 5px
        }

    .ck-content .todo-list .todo-list__label > input {
        -webkit-appearance: none;
        display: inline-block;
        position: relative;
        width: var(--ck-todo-list-checkmark-size);
        height: var(--ck-todo-list-checkmark-size);
        vertical-align: middle;
        border: 0;
        left: -25px;
        margin-right: -15px;
        right: 0;
        margin-left: 0
    }

        .ck-content .todo-list .todo-list__label > input::before {
            display: block;
            position: absolute;
            box-sizing: border-box;
            content: '';
            width: 100%;
            height: 100%;
            border: 1px solid #333;
            border-radius: 2px;
            transition: box-shadow 250ms ease-in-out,background 250ms ease-in-out,border 250ms ease-in-out
        }

        .ck-content .todo-list .todo-list__label > input::after {
            display: block;
            position: absolute;
            box-sizing: content-box;
            pointer-events: none;
            content: '';
            left: calc(var(--ck-todo-list-checkmark-size)/ 3);
            top: calc(var(--ck-todo-list-checkmark-size)/ 5.3);
            width: calc(var(--ck-todo-list-checkmark-size)/ 5.3);
            height: calc(var(--ck-todo-list-checkmark-size)/ 2.6);
            border-style: solid;
            border-color: transparent;
            border-width: 0 calc(var(--ck-todo-list-checkmark-size)/ 8) calc(var(--ck-todo-list-checkmark-size)/ 8) 0;
            transform: rotate(45deg)
        }

        .ck-content .todo-list .todo-list__label > input[checked]::before {
            background: #25ab33;
            border-color: #25ab33
        }

        .ck-content .todo-list .todo-list__label > input[checked]::after {
            border-color: #fff
        }

    .ck-content .todo-list .todo-list__label .todo-list__label__description {
        vertical-align: middle
    }

.ck-content .marker-yellow {
    background-color: var(--ck-highlight-marker-yellow)
}

.ck-content .marker-green {
    background-color: var(--ck-highlight-marker-green)
}

.ck-content .marker-pink {
    background-color: var(--ck-highlight-marker-pink)
}

.ck-content .marker-blue {
    background-color: var(--ck-highlight-marker-blue)
}

.ck-content .pen-red {
    color: var(--ck-highlight-pen-red);
    background-color: transparent
}

.ck-content .pen-green {
    color: var(--ck-highlight-pen-green);
    background-color: transparent
}

.ck-content span[lang] {
    font-style: italic
}

.ck-content .media {
    clear: both;
    margin: .9em 0;
    display: block;
    min-width: 15em
}

.ck-content .page-break {
    position: relative;
    clear: both;
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center
}

    .ck-content .page-break::after {
        content: '';
        position: absolute;
        border-bottom: 2px dashed #c4c4c4;
        width: 100%
    }

.ck-content .page-break__label {
    position: relative;
    z-index: 1;
    padding: .3em .6em;
    display: block;
    text-transform: uppercase;
    border: 1px solid #c4c4c4;
    border-radius: 2px;
    font-family: Helvetica,Arial,Tahoma,Verdana,Sans-Serif;
    font-size: .75em;
    font-weight: 700;
    color: #333;
    background: #fff;
    box-shadow: 2px 2px 1px hsla(0,0%,0%,.15);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.ck-content .table > figcaption {
    display: table-caption;
    caption-side: top;
    text-align: center;
    color: var(--ck-color-table-caption-text);
    background-color: var(--ck-color-table-caption-background)
}

.ck-content .table {
    margin: .9em auto;
    display: table
}

    .ck-content .table table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        height: 100%;
        border: 1px double #b2b2b2;
        overflow: hidden
    }

        .ck-content .table table td, .ck-content .table table th {
            min-width: 2em;
            padding: .4em;
            border: 1px solid #bfbfbf
        }

        .ck-content .table table th {
            font-weight: 700;
            background: hsla(0,0%,0%,5%)
        }

.ck-content[dir=rtl] .table th {
    text-align: right
}

.ck-content pre, .ck-content[dir=ltr] .table th {
    text-align: left
}

.ck-content .table .ck-table-resized {
    table-layout: fixed
}

.ck-content .table td, .ck-content .table th {
    position: relative
}

.ck-content pre {
    padding: 1em;
    color: hsl(0,0%,20.8%);
    background: hsla(0,0%,78%,.3);
    border: 1px solid #c4c4c4;
    border-radius: 2px;
    direction: ltr;
    tab-size: 4;
    white-space: pre-wrap;
    font-style: normal;
    min-width: 200px
}

    .ck-content pre code {
        background: unset;
        padding: 0;
        border-radius: 0
    }

.ck-content hr {
    margin: 15px 0;
    height: 4px;
    background: #ddd;
    border: 0
}

.ck-content .mention {
    background: var(--ck-color-mention-background);
    color: var(--ck-color-mention-text)
}

.ck-content ol {
    list-style-type: decimal
}

    .ck-content ol ol {
        list-style-type: lower-latin
    }

        .ck-content ol ol ol {
            list-style-type: lower-roman
        }

            .ck-content ol ol ol ol {
                list-style-type: upper-latin
            }

                .ck-content ol ol ol ol ol {
                    list-style-type: upper-roman
                }

.ck-content ul {
    list-style-type: circle
}

    .ck-content ul ul {
        list-style-type: disc
    }

        .ck-content ul ul ul, .ck-content ul ul ul ul {
            list-style-type: square
        }

@media print {
    .ck-content .page-break {
        padding: 0
    }

        .ck-content .page-break::after {
            display: none
        }
}
.content-preview {
    min-height: 150px;
}

.blog-posts .blog-post {
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;
}

.blog-thumb img {
    border-radius: 8px;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

.down-content h2 {
    font-size: 1.5rem;
    margin-top: 15px;
    color: #333;
}

.post-info {
    list-style: none;
    padding: 0;
    margin: 10px 0;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.875rem;
    color: #999;
}

    .post-info li {
        margin-right: 15px;
    }

.post-tags,
.post-share {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
}

    .post-tags li,
    .post-share li {
        margin-right: 8px;
    }

.sidebar .sidebar-item {
    margin-bottom: 30px;
}

.sidebar .searchText {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.sidebar h3 {
    font-size: 1.25rem;
    margin-bottom: 15px;
}

.pagination .page-item .page-link {
    color: #007bff;
}

.pagination .page-item.active .page-link {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}