section#viewer .view[data-active-view="editor"] {
    padding: 0;

    .EasyMDEContainer {
        list-style: inherit !important;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .CodeMirror-selectedtext, .CodeMirror-selected {
        background-color: var(--accent-color);
        color: black;
    }
    .CodeMirror-cursor {
        border-left: 1px solid var(--accent-color);
    }

    .EasyMDEContainer .editor-toolbar {
        grid-column: 1 / 3;
        border-radius: 0;
        border: none;
        position: relative;
        width: inherit;
    }
    
    .EasyMDEContainer .editor-toolbar .actions {
        position: absolute;
        top: 50%;
        right: 1rem;
        transform: translateY(-50%);
        font-weight: 400;
    }

    .EasyMDEContainer button:hover {
        background: var(--bg-second-color);
        border-color: var(--border-color);
    }

    .EasyMDEContainer .editor-toolbar .actions button.main-button {
        margin-left: .4rem;
    }
    .EasyMDEContainer .editor-toolbar .actions button.main-button:hover {
        background-color: var(--accent-color);
        border-color: var(--accent-second-color);
        color: white;
    }
    .EasyMDEContainer .editor-toolbar .actions button.second-button {
        color: var(--text-color);
    }
    .EasyMDEContainer .editor-toolbar .actions button.second-button:hover {
        background-color: var(--bg-second-color);
        border-color: var(--border-color);
    }
    

    .EasyMDEContainer .CodeMirror {
        grid-column: 1 / 2;
        width: 100% !important;
        border-radius: 0;
        border: solid 1px var(--bg-selected-color);
        border-left: none;
        background-color: var(--bg-second-color);
        color: var(--text-color);
    }

    .EasyMDEContainer .editor-preview {
        grid-column: 2 / 3;
        width: 100% !important;
        border-radius: 0;
        border: solid 1px var(--bg-selected-color);
        border-right: none;
        background-color: var(--bg-frame-color);
    }


    .editor-statusbar {
        grid-column: 1 / 3;
        padding: .2rem;
        width: inherit;
        background-color: rgba(0, 0, 0, 0.85);
    }

    .editor-statusbar > span {
        font-size: 12px;
        color: var(--text-second-color);
    }


    /* Markdown formating */
    .EasyMDEContainer span {
        font-size: inherit;
    }

    .EasyMDEContainer blockquote {
        margin-inline-start: 0px;
        padding-inline-start: 1rem;
        border-left: solid 4px lightgray;
        background-color: whitesmoke;
    }

    .EasyMDEContainer .editor-preview :not(pre) > code, .EasyMDEContainer .editor-preview pre {
        padding: .2em .4em;
        background-color: #818b981f;
        border-radius: var(--border-radius);
        font-size: 85%;
    }
    .EasyMDEContainer .editor-preview pre {
        padding: .6em .4em;
    }

    .EasyMDEContainer .editor-preview h1 {
        font-size: 42px;
    }
    .EasyMDEContainer .editor-preview h2 {
        font-size: 32px;
    }
    .EasyMDEContainer .editor-preview h3 {
        font-size: 22px;
    } 


    .EasyMDEContainer, embed {
        display: none;
    }
    .wrapper[data-file-type="pdf"] embed {
        display: block;
    }
    .wrapper[data-file-type="md"] .EasyMDEContainer {
        display: grid;
    }

    .file-manager {
        padding: 2rem;
        display: flex;
        gap: 4rem;

        .container {
            width: 300px;

            li .action {
                padding: .6rem 1rem;
                border: none;
                border-radius: var(--border-radius);
                text-align: left;
                font-weight: 700;
                background-color: var(--bg-frame-color);
                width: 100%;
                display: flex;
                align-items: center;
                gap: .5rem;
                margin-top: 1rem;
            }
            li .action:hover {
                text-decoration: underline;
            }
        }
        .container.hidden {
            display: none;
        }

        .template.wrapper {
            margin-top: 1rem;

            .second {
                display:none
            }

            img {
                height: 16px;
            }
        }
    }

}