@import 'toastui-editor.min.css';

#editor {
    display: inline;
}

.toastui-editor-defaultUI-toolbar {
    padding: 0px !important;
    margin: 0px !important;
    border: 0px !important;
    background: transparent !important;
}

.toastui-editor-toolbar {
    box-shadow: 0px 3px 5px #CCC;
    margin-bottom: 20px !important;
}

.toastui-editor-main-container {
    display: contents;
}

.toastui-editor,
.toastui-editor-main,
.toastui-editor-md-container,
.toastui-editor-defaultUI, 
.toastui-editor-contents,
.toastui-editor-ww-mode,
.toastui-editor-md-preview,
.toastui-editor-md, 
.ProseMirror {
    border: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
    font-size: var(--default-font-size) !important;
    font-family: var(--default-font-family) !important;
}

#editor .toastui-editor-md-container > div > div,
#editor .toastui-editor-ww-container > div > div {
    border: 1px dotted #ccc;
}

#editor .toastui-editor-defaultUI-toolbar {
    margin-bottom: 20px;
}

#editor .toastui-editor-toolbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 99 !important;
    width: 100% !important;
    background: #FFF !important;
}

/* applied to #editor */
.read-only {
}

#editor.read-only .toastui-editor-toolbar {
    box-shadow: none;
}

#editor.read-only .toastui-editor-ww-container > div > div {
    background: #FFF;
}

div.toastui-editor-md-splitter,
div.toastui-editor-md-preview {
    display: none !Important;
}

div.toastui-editor.md-mode {
    width: 100% !important;
}

#editor button.toastui-editor-toolbar-icons {
    filter:unset;
    pointer-events: all;
    opacity: 1.0;
}

#editor.read-only button.toastui-editor-toolbar-icons {
    filter:saturate(0) !Important;
    pointer-events: none;
    opacity: 0.3;
}

#editor button.actions {
    background-image: none;
    margin: 0;
}

#editor.read-only button.actions {
    display: none;
}

#editor.read-only #toggleButton {
    display: block !important;
}


.toastui-editor-defaultUI-toolbar > div:nth-child(5) {
    flex: auto;
    justify-content: flex-end;
}