section.blog-detail{
    padding-bottom: 5em;
    .blog-meta {
        padding-right: 2em;
        margin-top: 1em;
    }
    .content{
        font-size: 16px;
    }

    .category {
        a {
            font-weight: 700;
            font-size: .75em;
            text-transform: uppercase;
        }
    }

    h2 {
        font-size: 2em;
        font-weight: 700;

        a {
            color: #555;
        }
    }

    .divider {
        width: 2em;
        background-color: rgba(0, 0, 0, .1);
    }

    .blog-attr {
        margin: 0 0 3em 0;
        text-transform: uppercase;
        font-size: .76em;
    }
    a {
        color: var(--fs-primary);
    }
    .blog-share{
        text-align: center;
        padding: 2em;
        .share-icon{
            color: var(--fs-experimental-link-color);
            display: inline-block;
            border-radius: 50%;
            width: 2.1em;
            height: 2.1em;
            border: 2px solid currentColor;
            font-weight: 700;
            font-size: 1em;
            &:hover{
                color: #fff;
                background-color: #36b178;
                border-color: #27aa6e;
            }
        }
        .divider{
            margin: 1em auto;
        }
    }
    .entry-meta {
        margin: 2em 0;
        border-top: 1px solid #e8eaed;
        border-bottom: 2px solid #e8eaed;
        display: flex;
        padding: .5em 0;
        font-size: .8em;
    }
    .blog-reply{
        background-color: rgba(0, 0, 0, .05);
        padding: 2em;
    }
    .pre-next{
        border-top: 1px solid #ededed;
        border-bottom: 1px solid #ededed;
        margin: 2em 0;
        .border-right{
            min-height: 2em;
            border-right: 1px solid #ededed;
        }
        .pre,.next{
            display:table;
            span{
                display: inline-block;
                height: 100%;
            }
            span.title{
                width: calc(100% - 2em);
            }
            span.icon{

            }
        }
        a{
            padding: 1em;
            width: 100%;
            height: 100%;
            text-align: left;
            display: table-cell;
            vertical-align: middle;
        }
        .next a{
            text-align: right;
        }
    }
    .author-avatar{
        border-radius: 50%;
        width: 6em;
        height: 6em;
    }
    .author-name{
        font-weight: 700;
        text-transform: uppercase;
    }
    .extend-link {
        margin-bottom: 1em;

        a {
            display: block;
            padding: 1em;
            background: #EF233CFF;
            border-left: 4px solid #F1C40F;
        }

        .cta-text {
            font-weight: bold;
            color: #464646;
        }

        .link-text {
            padding-left: .5em;
            font-weight: bold;
            color: #fff;
            text-decoration: underline;
        }
    }
}

#ez-toc-container{
    border:1px solid #aaa;
    padding: 1em 1em 0 1em;
    display: inline-block;
    border-radius: 4px;
    .ez-toc-list{
        list-style-type: decimal;
        padding: 0 1em;
        transition: .3s;
        overflow: hidden;
    }
    .ez-toc-title{
        display: inline-block;
        font-size: 1.2em;
        margin-right: 1em;
    }
    .ez-toc-title-toggle{
        float: right;
        border:1px solid #aaa;
        padding: .2em .1em;
        border-radius: 4px;
    }
    a {
        color: #444;
        &:hover{
            text-decoration: underline;
        }
        &:visited{
            color: #9f9f9f;
        }
    }
    &.close{
        .ez-toc-list{
            display: none;
        }
    }
}

#accordionTOC {
    .accordion-button {
        background: none;
    }

    .accordion-body {
        padding-left: 0;
        font-size: 1.12em;
    }

    .toc-level {
        list-style: none;
        counter-reset: item;
        font-size: .9em;

        a {
            color: #444;
            line-height: 1.6em;

            &:hover {
                text-decoration: underline;
            }
        }

        a:before {
            content: counters(item, '.', decimal) '. ';
            display: inline-block;
            counter-increment: item;
            flex-grow: 0;
            flex-shrink: 0;
            margin-right: .2em;
            float: left;
        }
    }
}

.right-side {
    .widget-title {
        display: block;
        padding: 1em 0 .5em 0;
        font-weight: bold;
        text-transform: uppercase;
        margin-top: 1em;
    }

    .divider {
        display: block;
        width: 2em;
        height: .2em;
        background: #eee;
        margin: 0 0 .8em 0;
    }

    .recent-blogs {
        list-style: none;
        padding-left: 0;

        li {
            .badge {
                width:3em;
                height: 3em;
                vertical-align: top;
                margin-top: .5em;
                overflow: hidden;
                background: var(--fs-primary);
            }

            a {
                margin-left: .5em;
                display: inline-block;
                color: var(--fs-primary);
                width: calc(100% - 4em)
            }

            padding: .5em 0;
            border-bottom: 1px solid #eee;

            &:last-child {
                border-bottom: none;
            }
        }
    }

    .badge > span {
        display: block;
    }
}

@media (min-width: 992px) {
    section.blog-detail {
        .blog-meta {
            border-right: 1px solid #e8eaed;
        }
    }
}