.editable-wrapper{

    position:relative;

    width:100%;

    background:#f8f8f8;

    border-radius:24px;

    padding:
        36px
        34px
        36px
        36px;

    box-shadow:
        0 4px 18px rgba(0,0,0,.08);
}

.editable-editor{

    overflow:auto;

    padding-right:34px;

    outline:none;

    color:#2f3047;

    font-size:22px;

    line-height:1.35;

    word-break:break-word;

    scrollbar-width:none;

    -ms-overflow-style:none;
}

.editable-editor::-webkit-scrollbar{
    width:0;
    height:0;
}

.editable-editor:empty::before{

    content:attr(data-placeholder);

    color:#9da1b4;

    pointer-events:none;
}

.editable-scrollbar{

    position:absolute;

    top:22px;
    right:12px;

    width:18px;

    height:calc(100% - 44px);

    background:#c7cad8;

    border-radius:30px;

    overflow:hidden;
}

.editable-thumb{

    position:absolute;

    left:0;
    top:0;

    width:100%;

    min-height:44px;

    background:#4b4a72;

    border-radius:30px;

    cursor:pointer;
}

.editable-thumb::before{

    content:"";

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%, -50%);

    width:10px;
    height:18px;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.95) 0px,
            rgba(255,255,255,.95) 2px,
            transparent 2px,
            transparent 5px
        );
}

.editable-disable-selection,
.editable-disable-selection *{
    user-select:none !important;
}

@media(max-width:768px){

    .editable-editor{
        font-size:18px;
    }

    .editable-wrapper{
        border-radius:18px;
        padding:24px;
    }

    .editable-scrollbar{
        width:14px;
        right:8px;
    }
}