.ce { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.ce-editor { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 0; }
.ce-quick { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; height: 48px; padding: 6px 6px 6px 0; background-color: #f0f0f0; }
.ce-quick .quick-btn, .ce-quick .quick-extra-btn, .ce-quick .input-btn { display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; min-width: 36px; padding: 0 6px; font-size: 14px; line-height: 36px; color: #262626; text-align: center; vertical-align: middle; background-color: #fff; border-radius: 6px; }
.ce-quick .quick-btn:active, .ce-quick .quick-extra-btn:active { background-color: #bfbfbf; }
.ce-quick .quick-extra-btn, .ce-quick .input-btn { color: #fff; background-color: #52c41a; }
.ce-quick .input-btn { background-color: #597EF7; margin-right: 5px; }
.ce-quick .quick-extra-btn:active { background-color: #389e0d; }
.ce-quick .input-btn:active { background-color: #3c68f6; }
.ce-quick-list { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
.ce-quick-list::-webkit-scrollbar { display: none; }
.ce-quick-list .quick-btn { margin-left: 6px; }
.ce-quick-with-right .ce-quick-list { margin-right: 6px; }
.ce .cm-s-dracula .CodeMirror-vscrollbar::-webkit-scrollbar, .ce .cm-s-dracula .CodeMirror-hscrollbar::-webkit-scrollbar { width: 8px; height: 8px; background-color: transparent; }
.ce .cm-s-dracula .CodeMirror-vscrollbar::-webkit-scrollbar-thumb, .ce .cm-s-dracula .CodeMirror-hscrollbar::-webkit-scrollbar-thumb { border-radius: 6px; background-color: #864d75; }
.ce .cm-s-dracula .CodeMirror-vscrollbar:hover::-webkit-scrollbar-thumb, .ce .cm-s-dracula .CodeMirror-hscrollbar:hover::-webkit-scrollbar-thumb { background-color: #ff79c5; }
.ce .cm-s-monokai .CodeMirror-vscrollbar::-webkit-scrollbar, .ce .cm-s-monokai .CodeMirror-hscrollbar::-webkit-scrollbar { width: 8px; height: 8px; background-color: transparent; }
.ce .cm-s-monokai .CodeMirror-vscrollbar::-webkit-scrollbar-thumb, .ce .cm-s-monokai .CodeMirror-hscrollbar::-webkit-scrollbar-thumb { border-radius: 6px; background-color: #8f7e4e; }
.ce .cm-s-monokai .CodeMirror-vscrollbar:hover::-webkit-scrollbar-thumb, .ce .cm-s-monokai .CodeMirror-hscrollbar:hover::-webkit-scrollbar-thumb { background-color: #ffd866; }
.ce .CodeMirror-fullscreen { position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: auto; z-index: 9; }
.ce .CodeMirror-foldmarker { color: blue; text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px; font-family: arial; line-height: .3; cursor: pointer; }
.ce .CodeMirror-foldgutter { width: .7em; }
.ce .CodeMirror-foldgutter-open, .ce .CodeMirror-foldgutter-folded { cursor: pointer; }
.ce .CodeMirror-foldgutter-open:after { content: "\25BE"; }
.ce .CodeMirror-foldgutter-folded:after { content: "\25B8"; }

.input-box { position: absolute; top: 50%; transform: translateY(-50%); left: 8%; right: 8%; background-color: #fff; border-radius: 4px; }
.input-box .input-box-head { text-align: right; padding: 10px; font-size: 20px; }
.input-box .input-box-main { text-align: center; }
.input-box .input-box-main .input-box-des { font-size: 16px; }
.input-box .input-box-main textarea { border: 1px solid #ddd; border-radius: 4px; padding: 15px; margin: 15px auto; font-size: 12px; width: 85%;  height: 24vw; }
.input-box .input-box-btn { display: block; margin: 5px auto 20px; padding: 5px 20px; background: #597EF7; border-color: transparent; border-radius: 6px; color: #fff; font-size: 14px; letter-spacing: 2px; cursor: pointer; transition: all 0.14s ease-out; }
.input-box .input-box-btn:active { background: #3c68f6; }