.executable-fragment {
    overflow: hidden;
    border: none !important;
}

.CodeMirror,
.CodeMirror pre,
.CodeMirror .CodeMirror-code,
.CodeMirror .CodeMirror-code pre {
    font-family: var(--md-code-font-family);
    font-size: 13px;
}


.CodeMirror {
    color: var(--md-code-hl-punctuation-color) !important;
    background: var(--md-code-bg-color) !important;
    border-radius: 8px;
}

.CodeMirror-scroll {
    height: auto !important;
}

.CodeMirror .CodeMirror-lines pre.CodeMirror-line,
.CodeMirror .CodeMirror-lines pre.CodeMirror-line-like {
    font-variant-ligatures: none;
}

.CodeMirror-linebackground.unmodifiable-line {
    background: none !important;
    padding: 8px 0px !important;
}

.cm-keyword {
    color: var(--md-code-hl-keyword-color) !important;
}

.cm-def {
    color: var(--md-code-hl-function-color) !important;
}

.cm-variable {
    color: var(--md-code-hl-name-color) !important;
}

.cm-string {
    color: var(--md-code-hl-string-color) !important;
}

.cm-number {
    color: var(--md-code-hl-number-color) !important;
}

.cm-comment {
    color: var(--md-code-hl-comment-color) !important;
}

.cm-operator {
    color: var(--md-code-hl-operator-color) !important;
}

.CodeMirror-gutters {
    background-color: inherit !important;
    border-right: none !important;
}

.CodeMirror-lines {
    padding: 8px 0 !important;
}

.CodeMirror-cursor {
    border-left: 2px solid var(--md-code-hl-name-color) !important;
}

.js-code-output-executor {
    border-top: none !important;
}

.code-output {
    padding-left: 16px !important;
}

.run-button {
    top: calc(.5rem + 16px) !important;
    right: .5rem !important;

}

.code-area {
    margin-top: 16px;
}

.console-close {
    margin-right: .5rem !important;
    background-color: #0000 !important;
    border-radius: 50%;
}

.console-close:hover {
    background-color: #FF605C !important;
}

.output-wrapper {
    background-color: var(--md-code-bg-color) !important;
    border-bottom: none !important;
}

.standard-output {
    color: var(--md-code-hl-punctuation-color) !important;
}

.CodeMirror-sizer {
    padding-bottom: 4px !important;
}

.fold-button {
    width: 24px !important;
    height: 24px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19 11.005v2.103h-6.013L12.988 19h-2.117l.001-5.892H5v-2.103h5.872V5h2.114l.002 6.005H19z' fill='%2327282C' fill-opacity='.75'/%3E%3C/svg%3E") !important;
}

.code-area._unfolded .fold-button {
    top: -13px;
    left: calc(50% - 11px);
    transform: rotate(-45deg);
}