.rb-article-editor {
    display: inline-block;
    width: 100%;
    font-family: Roboto;
    font-size: 18px;
    line-height: 24px;
    color: #444;
}
    .rb-article-editor > .row {
        display: inline-block;
        width: 100%;
        margin: 20px 0 0 0;
        padding: 0;
        text-align: justify;
        position: relative;
    }
        .rb-article-editor > .row:first-child {
            margin: 0 0 0 0;
        }
    .rb-article-editor > [data-type='h1'] {
        font-family: RobotoSlab;
        font-size: 32px;
        line-height: 40px;
    }
    .rb-article-editor > [data-type='h2'] {
        font-family: RobotoSlab;
        font-size: 28px;
        line-height: 36px;
    }
    .rb-article-editor > [data-type='h3'] {
        font-family: RobotoSlab;
        font-size: 22px;
        line-height: 30px;
    }
    .rb-article-editor > [data-type='h4'] {
        font-family: RobotoMedium;
        font-size: 18px;
        line-height: 24px;
    }
    .rb-article-editor > [data-type='p'] {
        font-family: RobotoLight;
        font-size: 18px;
        line-height: 24px;
    }
        .rb-article-editor > [data-type='p'] + [data-type='p'] {
            margin-top: 10px;
        }
    .rb-article-editor > [data-type='ul'] {
        display: list-item;
        margin-left: 30px;
        list-style-type: circle;
    }
        .rb-article-editor > [data-type='ul'] + [data-type='ul'] {
            margin-top: 5px;
        }
        .rb-article-editor > [data-type='ul'] > textarea {
            width: calc(100% - 30px);
        }
    .rb-article-editor > [data-type='ol'] {
    }
        .rb-article-editor > [data-type='ol'] > .counter {
            display: inline-block;
            width: 30px;
            float: left;
            font-size: 15px;
        }
        .rb-article-editor > [data-type='ol'] > textarea {
            display: inline-block;
            width: calc(100% - 30px);
            float: left;
        }
        .rb-article-editor > [data-type='ol'] + [data-type='ol'] {
            margin-top: 5px;
        }
    .rb-article-editor > [data-type='link'] {
    }
        .rb-article-editor > [data-type='link'] > .fa {
            display: inline-block;
            width: 30px;
            float: left;
            font-size: 15px;
            line-height: 29px;
            text-align: center;
            background-color: #3086dc;
            color: #FFF;
        }
        .rb-article-editor > [data-type='link'] > textarea {
            display: inline-block;
            width: calc(100% - 30px);
            float: left;
            border-left: none;
            padding-left: 10px;
        }
        .rb-article-editor > [data-type='link'] + [data-type='link'] {
            margin-top: 5px;
        }
    .rb-article-editor [data-type='img'] {
        text-align: center;
        position: relative;
    }
        .rb-article-editor [data-type='img'] > img {
            display: inline-block;
            max-width: 100%;
        }
        .rb-article-editor [data-type='img'] > .rb-article-image-upload {
            display: none;
        }
        .rb-article-editor [data-type='img'] > .fa-trash {
            display: none;
            padding: 10px;
            position: absolute;
            top: 0;
            right: 0;
            color: #e83737;
            cursor: pointer;
        }
            .rb-article-editor [data-type='img']:hover > .fa-trash {
                display: inline-block;
            }
    .rb-article-editor [data-type='file'] {
        width: min-content;
        max-width: 100%;
        padding: 10px;
        margin: 20px 20px 0 0;
        position: relative;
        border: 1px solid #CCC;
        border-radius: 8px;
    }
        .rb-article-editor [data-type='file'] > .fa-cloud-upload {
            display: inline-block;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 44px;
            text-align: center;
            background-color: #CCC;
            line-height: 44px;
        }
        .rb-article-editor [data-type='file'] > .text {
            display: inline-block;
            width: 100%;
            padding-left: 44px;
            line-height: 20px;
            font-size: 13px;
        }
        .rb-article-editor [data-type='file'] > .rb-article-file-upload {
            display: none;
        }
        .rb-article-editor [data-type='file'] > .fa-trash {
            display: none;
            padding: 10px;
            position: absolute;
            top: 0;
            right: 0;
            color: #e83737;
            cursor: pointer;
        }
            .rb-article-editor [data-type='file']:hover > .fa-trash {
                display: inline-block;
            }
    .rb-article-editor .row > .actions {
        display: none;
        width: 402px;
        padding: 4px 10px;
        position: absolute;
        top: -36px;
        left: 0;
        background-color: #222;
        border-radius: 8px;
    }
        .rb-article-editor .row:hover > .actions {
            display: inline-block;
        }
        .rb-article-editor .row > .actions > .action-item {
            display: inline-block;
            padding: 5px 10px;
            float: left;
            color: #FFF;
            font-family: Roboto;
            font-size: 14px;
            line-height: 18px;
            border-radius: 4px;
            cursor: pointer;
        }
            .rb-article-editor .row > .actions > .action-item > .fa {
                line-height: inherit;
                font-size: 20px;
                color: inherit;
            }
            .rb-article-editor .row > .actions > .action-item:hover {
                color: #222;
                background-color: #999;
            }
            .rb-article-editor .row > .actions > .action-item.active {
                color: #222;
                background-color: #FFF;
            }
        .rb-article-editor .row > .actions > .arrow-down {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #000;
            position: relative;
            top: 32px;
            left: 20px;
        }
    .rb-article-editor > .main-title {
        color: #555;
    }
    .rb-article-editor textarea {
        display: inline-block;
        width: 100%;
        margin: 0;
        padding: 0;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        color: inherit;
        border: 2px dashed #DDD;
        resize: none;
    }
        .rb-article-editor [data-type='h1'] > textarea {
            height: 41px;
        }
        .rb-article-editor [data-type='h2'] > textarea {
            height: 37px;
        }
        .rb-article-editor [data-type='h3'] > textarea {
            height: 31px;
        }
        .rb-article-editor [data-type='h4'] > textarea {
            height: 25px;
        }
        .rb-article-editor [data-type='p'] > textarea {
            height: 25px;
        }
        .rb-article-editor [data-type='ul'] > textarea {
            height: 25px;
            margin-bottom: 5px;
            border: 1px dashed #DDD;
        }
        .rb-article-editor [data-type='ol'] > textarea {
            height: 25px;
            margin-bottom: 5px;
            border: 1px dashed #DDD;
        }
    .rb-article-editor > .main-actions, .ckeditor-wrap .main-actions {
        display: inline-block;
        width: 100%;
        padding: 40px 0;
    }

.rb-article-render {
    display: inline-block;
    width: 100%;
    font-family: Roboto;
    font-size: 18px;
    line-height: 24px;
    color: #444;
    overflow: unset;
    position: relative;
}
    .rb-article-render > .row {
        display: inline-block;
        width: 100%;
        min-height: 20px;
        margin: 20px 0 0 0;
        padding: 0;
        text-align: justify;
        position: relative;
        word-wrap: break-word;
    }
        .rb-article-render > .row:first-child {
            margin: 0 0 0 0;
        }
    .rb-article-render > [data-type='h1'] {
        font-family: RobotoSlab;
        font-size: 32px;
        line-height: 40px;
    }
    .rb-article-render > [data-type='h2'] {
        font-family: RobotoSlab;
        font-size: 28px;
        line-height: 36px;
    }
    .rb-article-render > [data-type='h3'] {
        font-family: RobotoSlab;
        font-size: 22px;
        line-height: 30px;
    }
    .rb-article-render > [data-type='h4'] {
        font-family: RobotoMedium;
        font-size: 18px;
        line-height: 24px;
    }
    .rb-article-render > [data-type='p'] {
        font-family: RobotoLight;
        font-size: 18px;
        line-height: 24px;
    }
        .rb-article-render > [data-type='p'] + [data-type='p'] {
            margin-top: 10px;
        }
    .rb-article-render > [data-type='ul'] {
        display: list-item;
        width: calc(100% - 30px);
        margin-left: 30px;
        list-style-type: circle;
    }
        .rb-article-render > [data-type='ul'] + [data-type='ul'] {
            margin-top: 5px;
        }
    .rb-article-render > [data-type='ol'] {
    }
        .rb-article-render > [data-type='ol'] > .counter {
            display: inline-block;
            width: 30px;
            float: left;
            font-size: 15px;
        }
        .rb-article-render > [data-type='ol'] + [data-type='ol'] {
            margin-top: 5px;
        }
    .rb-article-render > [data-type='link'] {
    }
        .rb-article-render > [data-type='link'] > .fa {
            display: inline-block;
            width: 30px;
            margin-right: 10px;
            float: left;
            font-size: 15px;
            line-height: 29px;
            text-align: center;
            background-color: #3086dc;
            color: #FFF;
        }
        .rb-article-render > [data-type='link'] + [data-type='link'] {
            margin-top: 5px;
        }
    .rb-article-render > [data-type='img'] {
    }
        .rb-article-render > [data-type='img'] > img {
            max-width: 100%;
            text-align: center;
        }
    .rb-article-render [data-type='file'] {
        width: min-content;
        max-width: 100%;
        padding: 10px;
        margin: 20px 20px 0 0;
        position: relative;
        border: 1px solid #CCC;
        border-radius: 8px;
    }
        .rb-article-render [data-type='file'] > .fa-cloud-download {
            display: inline-block;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 44px;
            text-align: center;
            background-color: #CCC;
            line-height: 44px;
        }
        .rb-article-render [data-type='file'] > .text {
            display: inline-block;
            width: 100%;
            padding-left: 44px;
            line-height: 20px;
            font-size: 13px;
        }
    .rb-article-render [data-type='time'] {
        display: inline-block;
        width: auto;
        padding: 2px 10px;
        line-height: 20px;
        font-size: 13px;
        font-family: RobotoMedium;
        background-color: #EEE;
        border-radius: 4px;
    }
        .rb-article-render [data-type='time'] > .fa {
            margin-right: 10px;
            line-height: inherit;
            font-size: inherit;
        }
    .rb-article-render > .main-title {
        color: #555;
    }
    .rb-article-render .rb-read-more,
    .rb-article-render .rb-read-more-link {
        display: none;
    }
    .rb-article-render[data-height="short"] .rb-read-more,
    .rb-article-render[data-height="short"] .rb-read-more-link {
        display: inline-block;
        cursor: pointer;
    }
    .rb-article-render[data-height="short"] > .row {
        display: none;
    }
        .rb-article-render > .row:nth-child(1),
        .rb-article-render > .row:nth-child(2),
        .rb-article-render > .row:nth-child(3) {
            display: inline-block;
        }

    .ckeditor-wrap{
        margin-top: 20px;
    }

    .ckeditor-wrap .warning{
        color: red;
    }

    .rb-article-editor > .meta-data, .ckeditor-wrap  .meta-data {
        display: inline-block;
        width: 100%;
        margin: 40px 0 0 0;
        padding: 10px;
        text-align: left;
        background-color: #EEE;
    }
        .rb-article-editor > .meta-data > .item, .ckeditor-wrap .meta-data > .item {
            display: inline-block;
            margin: 0 20px 0 0;
        }
            .rb-article-editor > .meta-data > .item > span, .ckeditor-wrap .meta-data > .item > span {
                display: inline-block;
                float: left;
                line-height: 20px;
                font-size: 14px;
            }
            .rb-article-editor > .meta-data > .item > input, .ckeditor-wrap .meta-data > .item > input {
                display: inline-block;
                float: left;
                padding: 2px 10px;
                margin: 0 0 0 10px;
                border: 1px solid #CCC;
                line-height: 16px;
                font-size: 14px;
            }
    .rb-article-render > .edit-article {
        display: none;
        width: 40px;
        padding: 10px;
        position: absolute;
        top: 0;
        right: 10px;
        background-color: #3086dc;
        color: #FFF;
        border-color: #3086dc;
        border-radius: 20px;
        line-height: 20px;
        text-align: center;
        cursor: pointer;
        text-decoration: none;
    }
        .rb-article-render:hover > .edit-article {
            display: inline-block;
        }

    .ckeditor-wrap .meta-seo-data{
        display: block;
        width: 100%;
        margin: 40px 0 0 0;
        text-align: left;
    }

    .ckeditor-wrap .meta-seo-data > .item{
        background-color: #EEE;
        display: inline-block;
        margin: 0 20px 0 0;
        width: 100%;
        padding: 10px;
    }

    .ckeditor-wrap .meta-seo-data > .item > input{
        display: inline-block;
        width: 100%;
        padding: 2px 10px;
        border: 1px solid #CCC;
        line-height: 16px;
        font-size: 14px;
    }

    .ckeditor-wrap .meta-seo-data > .item > span{
        line-height: 20px;
        font-size: 14px;
    }