.editor-tool {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.editor-tool-spacer {
    flex-grow: 1;
}

.editor-tool table {
    border-collapse: collapse;
}

.editor-tool td {
    border: solid 0.5px #808080;
    width: 20px;
    height: 20px;
    background-color: #fff;
}

    .editor-tool td.selected {
        background-color: #00a9ff !important;
        border-color: #fff !important;
    }

.text-editor-holder {
    position: relative;
}

.text-editor {
    padding: 10px;
    border: solid 1px #dedede;
}

.text-editor img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    position: relative;
}

    .text-editor img::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 16px;
        height: 16px;
        background: rgba(0, 0, 0, 0.5);
        cursor: se-resize;
        z-index: 1;
    }

    .text-editor td.selected

{
    background-color: #00a9ff !important;
    border-color: #fff !important;
}

.selection-tool {
    position: fixed;
    z-index: 9999;
    background-color: #eeeeee;
    border: solid 0.5px #808080;
    padding: 4px;
    top: 20px;
    right: 0px;
    border-radius: 4px;
}

    .selection-tool .btn.selected {
        background-color: #00a9ff;
        color: #fff;
    }

    .selection-tool .btn {
        margin: 4px;
    }

math-field {
    border: none !important;
}

    math-field::part(virtual-keyboard-toggle) {
        display: none;
    }

    math-field:focus::part(virtual-keyboard-toggle) {
        display: inline-block;
        margin-left: 20px;
        margin-top: 10px;
    }

    math-field:active, math-field:focus {
        background-color: #d1fcff;
    }

.inline-math {
    display: inline-block;
    vertical-align: middle;
}

    .inline-math math-field {
        display: inline-block;
        top: 50%;
    }

.editor-graph {
    border: solid 1px #cbcbcb;
}

    .editor-graph:active, .editor-graph:focus {
        border: solid 1px #808080;
    }

.graph-tool-panel {
    max-width: 80px;
}

    .graph-tool-panel .btn {
        background-color: #fff;
        width: 60px
    }

    .graph-tool-panel > div > div > .btn {
        display: block;
        width: 70px
    }

    .graph-tool-panel > div > div > div.btn-group > .btn {
        display: block;
        width: 70px
    }

    .graph-tool-panel .btn i {
        font-size: 16px;
    }

    .graph-tool-panel .dropdown-menu {
        z-index: 99999;
    }

    .graph-tool-panel .select-axis {
        margin-top: 10px;
    }


    .graph-tool-panel .input-group {
        display: flex;
        flex-wrap: nowrap !important;
        border: solid 1px #fff;
        border-radius: 6px;
        margin: 4px;
    }

        .graph-tool-panel .input-group input[type=range] {
            padding-top: 10px;
        }

.ML__keyboard {
    z-index: 99999999999999 !important;
}

.upload-btn-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

    .upload-btn-wrapper .btn {
        border: 2px solid #4CAF50;
        color: white;
        background-color: #4CAF50;
        padding: 10px 20px;
        font-size: 16px;
        font-weight: bold;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.3s, color 0.3s;
    }

        .upload-btn-wrapper .btn:hover {
            background-color: white;
            color: #4CAF50;
        }

    .upload-btn-wrapper input[type=file] {
        font-size: 100px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }

.CodeMirror {
    border: 1px solid #ccc;
    height: 70vh;
}
.CodeMirror-scroll {
    height: 100% !important;
    overflow: auto !important;
}
.CodeMirror-wrap pre {
    white-space: pre-wrap !important;
}
.CodeMirror-code{
    padding:10px;
}
.CodeMirror-line {
    margin-bottom: 0px;
}